1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS CSS optimization

Discussion in 'Web Development' started by navyfalcon, Jul 11, 2013.

  1. navyfalcon

    navyfalcon Well-Known Member Verified Member

  2. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    That's a significant improvement!
     
  3. navyfalcon

    navyfalcon Well-Known Member Verified Member

    The result of constant improvement. Note: out of about 3,000,000 (OK only 2,970,000).
    The competition is getting greater and Google changes the requirements (called Google dance).
    -
    hope this helps (showing how and why to use the suggestions)
    falcon
    -
    pg #1 pos #1 Yahoo search Date: 8-1-2013

    Free tutorials, home school, electronics, electrical, algebra ...
    freetutorials.name Cached
    Free tutorials: home school, electronics, electrical, Algebra, math, plumbing, mechanics,
    hydraulics, mathematics, trigonometry, free Calculators
    -
    pg #1 pos #1 Google search

    About 2,970,000 results (0.27 seconds)
    Free tutorials, home school, electronics, electrical, algebra, math
    freetutorials.name/?
    Free tutorials: home school, electronics, electrical, Algebra, math, plumbing,
    mechanics, hydraulics, mathematics, trigonometry, free Calculators.
    You've visited this page many times. Last visit: 8/1/13
     
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member

    You should try several methods and use the one that works for you. My website is different so what works for me may not work for you. My targeted audience is schools, teachers and students. So higher traffic when school is in session and less on holidays and summer. Also the content is directed to schools, home school gets more conversions (obviously) but public school gets more traffic.
    Website download speed is becoming more important and can be checked very quickly. Also there is software that will improve the compression (which improves the speed) so with Google putting more emphases on speed we all should be concerned about it. I am checking several different ways to accomplish this with software and manual suggestions so everybody that uses this forum will be able to accomplish this. Notice, I use several pages from my site as an example showing results (also it doesn't cost a leg and an arm).
    -
    hope this helps
    falcon
     
  5. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    I am being told by the performance checking utilities I've used to 'leverage browser caching' by putting 'Expires' or 'Last-Modified' on HTTP headers. I don't know how to do this but have put in a support call to my ISP. Will report back on my findings. If anyone can shed any light on this I'd be grateful.

    I think it's a good idea to come up with a set of guidelines that everyone can benefit from.
     
  6. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Note: Search Engine Optimization (SEO) and Web Page Optimization are different. SEO is to improve the page to attract more traffic by using keywords in title and description, improving page layout and navigation and giving good content. Web Page Optimization is to maintain the look and feel of the site with less code to reduce download time.
    - I use a HTML/CSS Editor to accomplish this. I do not know if a CMS Editor will do this or if certain HTML Editors will work on a CMS generated page. I do know that many HTML Editors generate bloated code. Example: Adobe Page Mill always generates extra certain code which if you know what it is, you can eliminate it easily. That said, if CMS generates certain extra code (and you know what it is) then you can correct the extra code and reduce the code bloat (extra code not needed) to improve or optimize the web page. By knowing which CMS system and the code bloat it generates, then Optimization is easier.
    - This is a good article for you and can be used to promote your system (also what free software that can Optimize the CMS generated web page), and how well it works on different systems. Your article, your choice of software that will promote your system. Remember to publish your articles on different eZines with your signature (link to your website).
    -
    hope this helps
    falcon
     
  7. navyfalcon

    navyfalcon Well-Known Member Verified Member

    To do Web Page Optimization (not SEO):
    First: Check size and download of page and record it.
    Second: Use several different "Web Page Optimization" programs (software) and record the results of each.
    Third: Manually Optimize the page using different "Optimization Tips" articles.
    Fourth: Use several different "Web Page Optimization" programs (software) and record the results of each.
    Note: be sure to test the display results for each. I found the Google ads do not display (so I had to make minor changes)
    - - Let us know your results and the software you used
    I will try and find some CMS Optimization software (free of course) and some CMS speed check software (it should not be different), also some CMS SEO software
    -
    hope this helps
    falcon
     
  8. navyfalcon

    navyfalcon Well-Known Member Verified Member

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
    14.29 Last-Modified

    The Last-Modified entity-header field indicates the date and time at which the origin server believes the variant was last modified.
    Last-Modified = "Last-Modified" ":" HTTP-date

    An example of its use is
    Last-Modified: Tue, 15 Nov 1994 12:45:26 GMT
    - -
    http://www.edginet.org/techie/website/http.html
    Expires header

    Cacheing

    If you want to ensure that a page is cached by the browser and/or intermediate web-caches then it should have a valid "Expires:" header. When a browser accesses a page in its cache with an expires time in the future then it won't even bother contacting the web-server, it will just use its own copy: it is allowed to assume that the content hasn't changed. Of course, you need to take care with this: if you set an expires time a year into the future and then change your website, your viewers potentially might not notice your changes until the year is up.
    - - - -
    http://www.askapache.com/htaccess/apache-speed-last-modified.html
    If you remove the Last-Modified and ETag header, you will totally eliminate If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses, so a file will stay cached without checking for updates until the Expires header indicates new content is available!
    - - -
    http://www.webmasterworld.com/html/3110294.htm
    <meta http-equiv="Last-Modified" content="Sun, 06 Nov 2005 14:59:42 GMT">
    - - - -
    <head>
    <meta http-equiv="Last-Modified" content="Sun, 06 Nov 2005 14:59:42 GMT">
    </head>
    <body>
    hello
    </body>

    When I run that, and look at page info, it says "Last-Modified Sun, 06 Nov 2005 14:59:42 GMT"
    Live HTTP headers shows
    HTTP/1.x 304 Not Modified
    Whenever you modify the html page, change the last modified too.
    - - -
    hope this helps
    falcon
     
  9. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    Having read your posts and the material they link to I think this HTTP stuff is all a bit too technical for me. There is debate as to whether some of these things are good practice and I don't have the knowledge or experience to decide for myself so I think I'll put this aside for now. But thank you for your efforts.
     
  10. navyfalcon

    navyfalcon Well-Known Member Verified Member

    The problem is speed vs position. I chose position (page 1 number 1). The big problem is which is best for you. Now, I think position so just general speed up options. They should be good enough for now. Only if speed is still a problem, then do more speed up options. Most people that have speed problems have javascript, flash, too many images (pictures too large - my problem [but it doesn't stop me from 1st place and visitors]) and other items, mostly unnecessary.
    -
    For your CMS, you need to know how to do these modifications (using your editor or another editor) and what modifications produce the best for the CMS site. These changes are very general so it should be easy to make a tutorial (I will help) on how to do it and the best software for that purpose (then put it up on a ezine for promotion of your editor).
    That means to try several and compare results. After speeding up "Algebra tutorials 1" I need to modify so the adsense and ads will display correctly (expect minor problems when changing to improve the site - this is why so many do not Optimize the page or SEO the page. It is work and takes time, but Google will reward you (they said so).
    -
    First we will need to select a template, then add content (mostly text) and measure the size and speed. Then make changes using different methods and measure the size and speed. Then repeat using a lot of pictures. This will check out different methods and software. Then you (I will help) write the article about your CMS system and how to effectively and efficiently reduce page size and images and speed up the webpage. Then you can help others with both SEO and web page Optimization. After that you need your own forum about CMS.
    -
    Hope this helps
    falcon
     
  11. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Web Page Optimization

    Please remember that I do not know CMS. This is to give you a direction to go. I was looking
    for some software for CMS Optimization. This is a beginning
    -
    hope this helps
    falcon

    A content management (CMS) website that was easy to manage and did not take much time to update
    http://webdesigner.com.sg/content-management-systems-cms/75-web-page-optimization

    Search Engine Optimization with a CMS
    http://www.csulb.edu/committees/webcomm/hannonhill/Search_Engine_Optimization_and_CMS.pdf

    CMS SEO Tips
    http://www.cms-webs.com/category/cms-seo/

    Download this FREE website builder
    http://www.searchengineoptimizedcms.com/
    -
    some examples that may give you an idea on how to promote your CMS system

    search engine optimization - cms
    http://sourceforge.net/projects/seo-cms/

    Free CMS Web Design DIY SEO Ebook
    http://www.jimdegerstrom.com/blog/2008/08/free-cms-web-design-diy-seo-ebook.html

    Web CMS Features for SEO Success
    http://www.cmswire.com/cms/customer-experience/web-cms-features-for-seo-success-020934.php
     
  12. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    I really appreciate your offer to help me out with this - thanks.

    I have complete control over the markup that my application generates and I think that taking out the comments and the tab characters used to indent the code would reduce file sizes quite considerably.

    However I consider these to be quite useful for people who want to study the code that's produced. Thus I'd have to make it switchable so the user can decide if they are produced. I wouldn't want to make structural changes because of the testing that would be needed to ensure that the visual appearance of the resulting web pages was correct in all situations.

    In fact I've imposed a block on all such nice-to-have enhancements because after years of development it's time to see if I can get people using it.

    My current concerns are for the web site that promotes the application and provides users with help and support (see my signature below). Thus I'm starting to learn about SEO, Google Analytics, and social media (YouTube, Facebook, Twitter etc). I need to get my head around all this and come up with a plan to achieve the best results with the resources I have available. I'm dipping into the things you are posting about as part of this learning process and it's both saving me time and making me aware of lots of things that are new to me.

    While I'm doing this I'm jotting down notes on the things that a beginner like myself has to be aware of and learn about. Maybe we could work together on something that combines this with the work you are doing in this area? Maybe others on here would like to get involved or chip in with advice and suggestions so that we produce something that's useful to everyone (like you said...).
     
  13. navyfalcon

    navyfalcon Well-Known Member Verified Member

    I think the item that would help the most is tutorials with pictures or images (also U tube video tutorials). You can start with basics then intermediate and advanced. Basic, how to get a page up starting with a template. Then how to modify it (still basic). Intermediate, menus, pictures, keywords, SEO. Advanced, web page optimization. Also include some links to free software, such as; webmaster tools (keyword suggestion tools, menu generating tools, picture editing software, page optimization software and speed checks).
    [I will help with the tutorials]
    -
    hope this helps
    falcon
     
  14. navyfalcon

    navyfalcon Well-Known Member Verified Member

    The Optimization programs advised:
    Change pictures from JPG to PNG and Gzip the content of the page.
    Exactly what Ishkey said. Some advised image sprites. I will be checking this later.
    -
    falcon
     
  15. navyfalcon

    navyfalcon Well-Known Member Verified Member

    -
    Very important: who is your targeted audience (who will most likely want or need your product ?). My targeted audience is schools [teachers and students], therefore all my efforts is for that audience because most visitors will be from that audience. This is the first object for promotion, who to promote to. This will help determine the method and procedure.
    -
    falcon
     
  16. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    I think my target audience should be complete beginners in web design - for two reasons:
    (1) The tool, ViziGen-Page, is very easy to learn and no real technical skills are needed.
    (2) Though the markup produced can be enhanced by an expert with custom HTML/CSS it's going to be difficult to coax these people away from their current tools.

    I was pleased to read that you think producing tutorials is the way forward - especially video tutorials on YouTube - as this is exactly what I was thinking. I'm reading up on SEO and Internet marketing but when I've done this and it's time to start producing the tutorials would you be kind enough to review my plans?
     
  17. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Yes - Great idea
    First make regular tutorials, then the videos. Then how to SEO and page Optimization. We can look up free software that will improve (reduce code) load time. Then write articles about it to publish on ezines (to promote the system). You will increase the awareness of your system.
    Put ads on your tutorials (look at Algebra tutorials 1 & 2)
    http://freetutorials.name/Reference1/Algebra tutorials 1.html
    http://freetutorials.name/Reference1/Algebra tutorials 2.html
    They do not distract from the page, but blend in so they are effective. Also blend adsense in to your articles. Without your system making money, you will not remain on the internet long and loose the motivation to improve. So place ads sensibility in the content.
    I will help with the tutorials, adsense, SEO, page optimization, and articles. So do not worry, you will succeed.
    Look at "RedCrab Calculator". I am helping him
    http://freetutorials.name/Reference1/RedCrab Manual.html
    ("Live Long and Prosper")
    falcon
    Note: how they are directed to schools. We will address your targeted audience on your pages and articles
     
  18. navyfalcon

    navyfalcon Well-Known Member Verified Member

    The Algebra tutorials loads faster now. Next step is zip the content and reformat the picture (size and type).
    That should decrease the size and download speed (and follow ishkey's advice).
    falcon
     
  19. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    Thanks again for you help, advice, and encouragement. I will pursue all of these things.
     
  20. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Geoff, I have been trying to keep up with this conversation but you two move to fast. Here is a solution to an earlier stage concerning your website in terms of speed. Maybe it will help maybe not.

    Use Cookie-free Domains for Components
    When the browser makes a request for a static image and sends cookies together with the request, the server doesn't have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
    create a subdomain cssimage.vizigen.com and place your image files in there, alter your code to reflect the new location.

    Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads.
    This page has 5 external stylesheets. Try combining them into two. Leave as one style sheet http://www.vizigen.com/GeneratedStyleSheets/init.css (your Reset.css) and
    combine the other 4 into one.

    Add an Expires or a Cache-Control Header
    A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.
    Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this response won't be stale until April 15, 2010.
    Expires: Thu, 15 Apr 2010 20:00:00 GMT
    If your server is Apache, use the ExpiresDefault directive to set an expiration date relative to the current date. This example of the ExpiresDefault directive sets the Expires date 10 years out from the time of the request.
    ExpiresDefault "access plus 10 years"

    You add the command in the .htaccess file
    Example ;
    # CONFIGURE media caching #
    Header unset ETag
    FileETag None
    <FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
    Header unset Last-Modified
    Header set Expires "Fri, 21 Dec 2014 00:00:00 GMT"
    Header set Cache-Control "public, no-transform"
    </FilesMatch>

    complete.jpg