I have been working on a site that has a slow load time for the home page. The client was concerned that the slow loading was discouraging some visitors from becoming customers. To speed up WordPress was becoming a priority!
Since I managed to get the load time down from 13.9 seconds to 3 seconds, I thought it might be useful for some people if I explain what I did.
Now this isn’t exactly layman’s terms, but for anyone familiar with loading plugins and doing some basic tweaks to their installation, it shouldn’t be too hard to follow. (Note to my clients: if you are on my Silver or Gold Support, a lot of this is already done for you).
Before I really got started on tweaking this site, I had already installed and set up WP Super Cache, and the site had Yoast’s SEO plugin installed. The caching plugin had sped things up, but there was a problem in which the text on the page would load before the graphics, so it really looked very sloppy.
The thing that fixed that (much to my surprise) was going into the SEO plugin, and turning off the Sitemap generation. I did need a sitemap for this site, so I added Google XML Sitemaps instead.
Another thing I had done was add the WP Smush-It plugin. This will go through all the images on the site (when you click the button to tell it to do a bulk process), and will reduce the amount of computer space each takes up. It doesn’t change the size they are displayed at, it just re-stores them in a way that takes up less space, and so they also take less time to load.
But the speed was still slow, and the client was still upset. I had already spent about 20 hours to get to this stage, and I was getting upset too. I looked at using Cloudflare, but I wasn’t sure that would do the trick, and besides the client’s hosting provider advised against it. So I got coffee…
The first thing I did was install the plugin called Simple Site Speed. This puts a little timer in the bottom left corner of the site, that can only be seen when you are logged into admin. This is not intended to be a permanent addition to the site, just something that will give me a comparison. I had also recently got ManageWP, and they have built in the excellent GT Metrix report that gives lots of ideas of how to make a site faster. So I had some ideas to get me started.
The first tweak that I did that worked was changing the size of the images on the home page. The client had uploaded three images that were originally around 500 – 750 pixels wide, but had then used the built-in resizer in WordPress to resize them to 450 pixels wide. That is fine, except that what happens is every time the page is loaded, a program has to be run to recalculate the size and manipulate the image to get it to the desired size. So I downloaded those images, resized them using my own software to 450 pixels wide and re-uploaded them. Then I changed the home page to use my new 450 pixel wide images rather than her originals. This got the speed down to 10 seconds (was 13.9).
Further savings were gained by looking at the design of the site. There were buttons that were images, and these images were also being resized on loading. I replaced the buttons with solid colour (no resizing needed). And removing a widget that showed random products (this is an eCommerce site using WooCommerce) reduced the load time further, because the little thumbnails were also being resized. Now we were down to 9 seconds. Still too slow.
The next thing I did was add code to the .htaccess file to define the expiry dates for various parts of the page. This effectively means that the caching plugin will work more efficiently. I am using WP Super Cache, but some caching plugins like W3 Total Cache have this stuff built in. But when I tried using W3TC, I found the site pretty much broke – it didn’t display properly. I have no idea why, and I was not sufficiently caffeinated to be bothered trying to fix it. So I went back to WPSC. (BTW, I tried about 14 caching plugins over the last couple of days – only WPSC behaved nicely). I will put the code I added to .htaccess at the end of this post. Load time was now at 6 seconds.
The last thing I did was add the plugin Advanced Lazy Load. What this does is sets the page up so that images only get loaded when the visitor scrolls down to them. This made a big difference. (An aside – I just took time out to put this plugin on another site, and page load time went from 45 seconds to 15). On the site in question, the load time reduced from 6 seconds to 3.
[standout fx=”highlighter”]Note (April 2015): I have since de-activated the Advanced Lazy Load plugin on this site you are on now. I found that the blog category pages weren’t loading properly, and de-activating that plugin fixed it.[/standout]
There are several Lazy Load plugins. I didn’t try any others out, and I don’t know whether this one is any different to the others. This one fades the images in as you scroll down, but you can change that in Settings.
Another thing I looked at was to minify and combine the js and css. This is supposed to reduce load times further. I found that when I did this, parts of the site broke. Also, the client was happy with the speed and so I couldn’t see much point in trying to make it faster. Other alternatives would be to use Cloudflare or a CDN, but to keep costs down, these measures were a good start.
I hope this helps you if you are struggling to get your site to load faster! If you are not one of my clients yet, and you would like help with your site (or a new one), let’s arrange to have a chat about how I can help you – https://geckogullywebsites.com/free-web-site-accelerator-session/
Here is what I added to the .htaccess file…
<IfModule mod_expires.c>
ExpiresActive on# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”# Your document html
ExpiresByType text/html “access plus 0 seconds”# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”# RSS feed
ExpiresByType application/rss+xml “access plus 1 hour”# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”# Media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”# Webfonts
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”<IfModule mod_headers.c>
Header append Cache-Control “public”
</IfModule>
</IfModule><IfModule mod_deflate.c>
# force deflate for mangled headers
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
</IfModule>
</IfModule># HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule><IfModule !mod_filter.c>
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
