How Do I Make My Website Load Super Fast?

So I have 2 main websites that I want to optimize the load speed so that they load super fast.

1. Rus.Ninja
2. TheMarriageFoundation.org

Here are the steps that I have take so far:
-I have a Studiopress-Accelaratior Set-up and Running
-All of the Images are Kraked aka Speed Optimized

Here are the things I need help with:
1. Defer parsing of JavaScript
2. Prefer asynchronous resources
3. Serve resources from a consistent URL
4. Specify a Vary: Accept-Encoding header
5. Combine images using CSS sprites
6. Serve scaled images

I use gtmetrix.com to test the speed, let me know what I can do to fix all of these Issues and make both of the site load at A+ Speed!

  • Tyler Postle

    Hey Rus,

    Hope you're doing well today and thanks for your question!

    Do you have a caching plugin active? Proper caching will often make the biggest difference when it comes to page speed. It also helps reduce server load a significant amount as there are a lot less calls to it :slight_smile:

    Using the methods laid out in this post here will help with some of those issues: https://premium.wpmudev.org/blog/5-quick-ways-to-speed-up-your-wordpress-site/

    Combine images using CSS sprites, means you have to group your images into single images then using CSS target those images using positioning. So, your site only has to load grab a couple images from your server, but in reality you have 10+ images within those 2 images, if that makes sense.

    Here is a tutorial on it: http://css-tricks.com/css-sprites/

    Having some basic graphic design skills for this will help too. I would say you can skip this one, as it shouldn't make a huge difference for you - focus on the list in that blog post I sent you :slight_smile:

    Keep in mind also that if you are on shared hosting then a lot of speed issues could be out of your control and are due to restrictions set in place by your hosting provider.

    Hope this provides you with a good start Rus!

    Let us know how it goes and if you get stuck anywhere.

    Have a great rest of your day.

    All the best,
    Tyler

  • Tom Eagles

    Hey Rus

    Just ran the rus.ninja through GTMetrix and got the following see screenshots.

    Lets go through them.

    Image sizes Just specify the image sizes (doesnt really effect load speed)
    Leverage Browser caching:This really depends on how often your site changes such as images scripts etc, This can be done via .htaccess with something like this

    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg &quot;access plus 1 year&quot;
    ExpiresByType image/jpeg &quot;access plus 1 year&quot;
    ExpiresByType image/gif &quot;access plus 1 year&quot;
    ExpiresByType image/png &quot;access plus 1 year&quot;
    ExpiresByType text/css &quot;access plus 1 year&quot;
    ExpiresByType application/pdf &quot;access plus 1 year&quot;
    ExpiresByType text/x-javascript &quot;access plus 1 year&quot;
    ExpiresByType application/x-shockwave-flash &quot;access plus 1 year&quot;
    ExpiresByType image/x-icon &quot;access plus 1 year&quot;
    ExpiresDefault &quot;access plus 1 year&quot;
    </IfModule>

    This will cache the site in users browser cache reducing http calls to the site, depending on how often you update images etc. you would need to adjust the times accordingly.

    for asynchrous loading see here

    Images still need some optimisation think about using wp-smushit, great lossless compression on file upload via wp media library.

    not quite at 100% on GZip compression.

    See if yours matches these settings, this is the one i use by default on most sites.

    ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>

    One of the things going against you in screenshot one is the number of http calls (requests) 110 is high. A browser can handle a maximum of 4 at a time, you can help this with this line as it keeps the requests flowing without a new call being made.

    ##START OF KEEP ALIVE##
    <ifModule mod_headers.c>
    Header set Connection keep-alive
    </ifModule>
    ##END KEEP ALIVE##

    Now to screenshot 2

    Expires headers see comments above.
    fewer http requests: consider combining .css files into one bigger file then server that.
    GZIP see comments above.
    CDN not 100% neccessary depending if you are serving a global or a country just means you can offload files such as images scripts css etc to a server closer to the visitor helps reduce wait time.
    Reduce DNS Lookups this will be hard as you can see you have a lot of external resources now the only way to handle these is via client side (browser caching) and even then it still wont have a major impact.

    Depending on your server setup you have some alternatives, for example on my hosting plans i have memcached installed which basically caches the results of queries in memory rather than using plugins such as total cache etc which convert your dynamic pages into static ones (ok for a site that doesnt change much but bad if your site updates a lot) Memcached serves visitors that last version of a page, for example you edit add a post etc the next person seeing it will see that change instantly rather than a cached version thats waiting for an update via cron job usually.

    Hosting can have a huge impact on site speed even shared hosting dependant on what resources are available to them, php memory allocation, bandwidth throttling etc etc. so even if you get your site optimised perfectly you mey be crippled by your host,

    Anyway this is a huge topic but hopefully this will help you on your way,

    Cheers

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.