1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Increasing Site Speed

Discussion in 'White Hat SEO' started by Endire, Mar 26, 2013.

Tags:
  1. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male
    In my opinion, page speed is one of the most difficult things to get right. If you have ever used a page speed analyzer and tried to follow its recommendations, you are probably already aware that some tasks offer marginal improvements in exchange for a lot of headache. I wanted to offer some insights from my own experiences in the hope that someone else who is frustrated will find this useful.

    Leveraging Browser Caching

    There are a lot of different ways to get this done and I?ll cover how to do it with .htaccess here. You can significantly speed up your website by setting an expiry date for resources that don?t change that often and even for ones that do.
    It is generally recommended that you do not use the catch-all ExpiresDefault as that will set one expiry date for all of your cachable resources. You may not want this to happen because if you make changes to certain things on a regular basis, users would have to wait until the resource expired in their browsers before the updates would take effect.
    By using Page Speed Insights from Google, you can get a good idea of the resources that are candidates for long expiry dates. In general, things like Javascript, CSS, and images that aren?t changed out a lot are good candidates for long expiry dates (i.e. 6 months to a year).

    Don?t set your expiry dates for more than a year as that may cause issues with your site.
    Here is a sample of code for setting the expiry date for image, js, html and css files for one month in the future.

    Code:
    #enable expirations
    ExpiresActive On
    # expire GIF images after a month in the client's cache
    ExpiresByType image/gif A2592000
    # expire PNG images after a month in the client's cache
    ExpiresByType image/png A2592000
    # expire JPG after a month in the client's cache
    ExpiresByType text/jpg A2592000
    # expire CSS images after a month in the client's cache
    ExpiresByType text/css A2592000
    # expire HTML after a month in the client's cache
    ExpiresByType text/html A2592000
    # expire JS after a month in the client's cache
    ExpiresByType text/javascript A2592000
    Notice that the time frame is entered in seconds. The ?A? at the beginning of that string tells the server to start that timer at the users last access date. If you were to use M, it would start the timer at the date last modified. You can use either one depending on your purposes. For example if you change things frequently you may want to use M.

    If the above code does not work for you, try <filesMatch> like this,

    Code:
    <filesMatch "\.(js)$">
        ExpiresDefault A29030400
    </filesMatch>
    <filesMatch "\.(jpg)$">
        ExpiresDefault A29030400
    </filesMatch>
    Enabling G-zip Compression

    Compressing files on your server before they are sent to the client?s browser to be unpacked is a great way to speed up a site. The method you use however can vary depending on features available from your host and your hosting environment. If you are using Apache and your host has mod-gzip and/or mod_deflate enabled, you can use the snippets below. Note if you are using Apache 1.3 you will need mod_gzip. 2.0 you will use mod_deflate.

    Code:
    #Gzip
    <ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
    </ifmodule>
    #End Gzip
    And mod_deflate

    *Note that these directives turn compression on and off depending on the browser as not all browsers support compression,


    Code:
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
    SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf)$ no-gzip dont-vary
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.[0678] no-gzip
     
    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
     
    # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48, the above regex won?t work. You can use the following
    # workaround (comment the above line and uncomment the below line) to get the desired effect:
    # BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
     
     
    # Make sure proxies don?t deliver the wrong content
    Header append Vary User-Agent env=!dont-vary
     
    </IfModule>
    CSS Sprites

    CSS sprites can also help you speed up your website. Sprites combine images into as few files as possible. Note that not all images are good candidates for sprites. Typically images that are often loaded together on multiple pages are ideal for this process.

    Traditionally, you would need to use a program like Photoshop or Gimp to make a sprite image however there is a really useful tool that combines the images and CSS all in two file for you for free!

    It?s called SpritePad and you can find it here http://wearekiss.com/spritepad

    You just drag and drop your images onto the screen, position them and CSS code is automatically generated to the right. You then just download the files, upload them to your server and you are ready to go.

    Serve Resources From a Consistent URL

    All the files on your site that are external and needed to render pages must be requested by the browser. Files like CSS and JS are the biggest culprits of multiple http requests. Sometimes common libraries (i.e, JQuery and other JS files) may come pre-installed with plugins or other downloads. If you have plugins that run on JQuery, make sure you are using a local file instead of a Google other CDN.

    If you have CSS that can be combined into other CSS files, it is better to combine them to reduce the amount of requests the browser sends to the server. Also, make sure you put CSS requests before external JavaScript requests. Avoid using @import in CSS files.

    What tactics do you use to increase site speed?
     
    • Thanks Thanks x 4
  2. BHopkins

    BHopkins Moderator Staff Member Moderator Jr. VIP

    Joined:
    Dec 31, 2010
    Messages:
    2,316
    Likes Received:
    1,389
    Gender:
    Male
    Occupation:
    ORM and SEO company owner
    Location:
    California
    Home Page:
    I get a good host and cache wordpress, that's about it for me.
     
    • Thanks Thanks x 1
  3. kostar

    kostar Newbie

    Joined:
    Nov 8, 2012
    Messages:
    35
    Likes Received:
    9
    Thanks for posting this. I can't understand much of it, but still great! Got any advice for speeding up sites that noobs can follow?
     
  4. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,379
    Likes Received:
    1,493
    Location:
    Proudly romanian
    This is for noobs.
     
    • Thanks Thanks x 1
  5. asi_av

    asi_av Regular Member

    Joined:
    Oct 17, 2010
    Messages:
    266
    Likes Received:
    46
    I try W3 Total Cache plugin on hosted with godaddy
    at first it was ok and google speed test was on 92
    last update killed all my sites to point couldnt access back-end and pages got 500 error
    or load after 25-30 sec. (google speed test still show 92 score)
    had to remove plugin
    ps - plugin was active only one 1 site but fucked all my 15 WP sites
     
  6. aboss3

    aboss3 Newbie

    Joined:
    Dec 8, 2012
    Messages:
    17
    Likes Received:
    0
    100% that's what I would do. Also optimize your apache or litespeed or ngnix and you're all set. Don't even start optimizing shared hosting packages. You will never get the results you want. Fast page load time is definitely worth the extra investment.
     
  7. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male
    Kostar,

    Unfortunately this is some of the basic stuff. Alternatively you could go with a wordpress site and use a plugin to accomplish some of these things for you.

    Best,

    Shawn
     
  8. Markthedude

    Markthedude Power Member

    Joined:
    Feb 26, 2010
    Messages:
    572
    Likes Received:
    266
    Occupation:
    Entrepreneur
    Location:
    United States
    Perfect timing! I've been researching this stuff for about the last 2 weeks have increased my score on G's testing from mid 70's to 93.

    Maybe you can help with this though, I can't figure out a good clean way to address the, "Defer parsing of JavaScript" message G's tells me to look at.

    Any help on this would be much appreciated.

    P.s running wordpress.

    What do you think of this code the "leverage browser caching"? It's a little different then your's but I pulled it from another site.

    Code:
    ###########HTTP HEADER START################ Turn on Expires and set default to 0
    ExpiresActive On
    ExpiresDefault A0
    # Set up caching on media files for 1 year (forever?)
    <FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
    ExpiresDefault A29030400
    Header append Cache-Control "public"
    </FilesMatch>
    # Set up caching on media files for 1 week
    <FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
    ExpiresDefault A604800
    Header append Cache-Control "public"
    </FilesMatch>
    # Set up 2 Hour caching on commonly updated files
    <FilesMatch "\.(xml|txt|html|js|css)$">
    ExpiresDefault A604800
    Header append Cache-Control "proxy-revalidate"
    </FilesMatch>
    # Force no caching for dynamic files
    <FilesMatch "\.(php|cgi|pl|htm)$">
    ExpiresActive Off
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
    </FilesMatch>
    ###########HTTP HEADER END###############
     
    Last edited: Mar 27, 2013
  9. AR!ZONA

    AR!ZONA Regular Member

    Joined:
    Mar 20, 2012
    Messages:
    400
    Likes Received:
    391
    Location:
    Cactus Island
    Some things to try are using pingdom's tools and seeing their suggestions,
    also I dig YSlow for perfecting sites.

    Defer parsing means you're running some javascript at the head which blocks page rendering, so maybe take a look a it and see what you can fix?
     
    Last edited: Mar 27, 2013
  10. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male


    Markthedude,

    Deferring the parsing of Javascript can be a tedious task. You must first identify the functions that are not used when the page loads and move those functions to another external JS file. Google recommends that you have at least 25 such functions or the work isn't worth the hassle. Once you have those function separated from other functions that are used right away, you can insert a JavaScript event listener that will force the separate file you created to be loaded after the onload event.

    This is the script Google provides and should be put in the head section of the document that contains the external JS file with the functions that are not used for that page(s).

    Code:
    <script type="text/javascript">
     
     // Add a script element as a child of the body
     function downloadJSAtOnload() {
     var element = document.createElement("script");
     element.src = "deferredfunctions.js";
     document.body.appendChild(element);
     }
     
     // Check for browser support of event handling capability
     if (window.addEventListener)
     window.addEventListener("load", downloadJSAtOnload, false);
     else if (window.attachEvent)
     window.attachEvent("onload", downloadJSAtOnload);
     else window.onload = downloadJSAtOnload;
     
    </script>
     
    Alternatively, you could place this code before the closing body tag of your page,

    Code:
    <script defer="defer" type="text/javascript">
        window.onload=function(){
            var mycode;
            mycode=document.createElement("script");
            mycode.type="text/javascript";
            mycode.src="http://www.example.com/path/yourjavascriptfile.js";
            document.getElementsByTagName("head")[0].appendChild(mycode);
        }
    </script>
    Another option is to use defer in your <script> tag.

    Code:
    <script src="your_js_file.js" defer></script>
    Hope that helps,
    Shawn
     
    • Thanks Thanks x 1
  11. Markthedude

    Markthedude Power Member

    Joined:
    Feb 26, 2010
    Messages:
    572
    Likes Received:
    266
    Occupation:
    Entrepreneur
    Location:
    United States
    Thanks for such a detailed reply Shawn, unfortunately that's all over my head, if the solution was as easy as the Gzip and browser leveraging I would have attempted it. I'll just be happy with a 93 for a score I guess :)
     
  12. Endire

    Endire Elite Member Premium Member

    Joined:
    Mar 27, 2012
    Messages:
    1,756
    Likes Received:
    1,061
    Gender:
    Male

    Probably a good move mark. Sometimes all the hassle isn't worth the marginal benefit you receive. In my book if something will provide a small benefit and can be implemented in 10 minutes, go for it. If it will take you all day, its better to move on to more important matters. Glad the other tips could help you.

    best,

    Shawn
     
  13. gstudio

    gstudio Newbie

    Joined:
    Mar 7, 2013
    Messages:
    18
    Likes Received:
    3
    Actually download and script speed is only half the battle. There is also the time to connect to the server in the first place. Using a distributed server (akamai,amazon) will help significantly.
     
    • Thanks Thanks x 1