CDN and other tweaks

Over the past week I’ve been doing a little more fine tuning and working a few things out about how to improve the performance of this site. After all, if this site is all about making faster web sites then I should make sure I’ve done what I can to set a good example.

So what’s changed since my last post? Read on to find out.

I wrote last time about setting up a CDN using Amazon Cloudfront and the WP Super Cache WordPress plugin. However, using tools like Google PageSpeed Insights and WebPageTest I found a few little extras that I could do to make things just a little bit better.

Nasty nasty emojis.

The world is now full of little emojis conveying how we are feeling or whether we found something funny or many other completely random things that I am far to old to understand. As of WordPress 4.2, this became a core feature and along with it came some extra files that get loaded in. One of which is a javascript file which converts things like :) into little cutesy images of a smiley face. Yuck!

Getting rid of this isn’t a simple tick box in the WordPress Admin screens, although going to Settings > Writing and turning off the “Convert emoticons like :-) and :-P to graphics on display” option is advisable. In order to get rid of the annoying extra javascript file, you have to install a plugin. Madness!! This is the one I chose, Disable Emojis, install it, forget about it. Nice and simple.

The scary .htaccess file

Next we move into a couple of things that are little more advanced and involve a few things where you need to know a little bit about what you are doing rather than just installing a plugin. However, it’s made a little easier by installing a plugin. Plugins are good, when used for the right reasons, just make sure you pick ones that are supported and are widely used. It means there are a lot of people testing them and finding issues which can then be fixed.

So I needed to make some changes to my .htaccess file. If you don’t know what an .htaccess file is, then I suggest you do a little background reading before going any further. Here is a useful overview about WordPress and htacess, and there is also the official Apache specs pages too if you want all the details.

To make is easier for me, I found a handy little plugin that allows me to edit my htacess file from within the wordpress admin panel, it’s a little old but works fine. Please please please be careful when you are updating this file, you can completely break your site. It’s easy enough to recover with ftp and a text editor, but breaking a live site is not a good thing to do.

Ah Ah Ah Ah Stayin’ Alive, Stayin’ Alive

Keep Alive, also known as Persistant Connection, is a way to tell the web server and web browser that it can use the same connection to grab more than one thing. It helps to avoid the web browser having to negotiate DNS connections as much, which in turn helps to speed up the loading of your web page. If you want a slightly more in depth description, head on over to one of my favourite web pages for improving site performance, FeedTheBot. It’s a very useful site to bookmark and contains lots of nuggets of information explained in easy to understand ways.

So once you understand what it is you are changing and are confident you can update your .htaccess file without ending the world, you need to add the following to your .htaccess file:

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Save the file. Job done. Celebrate with a bit of a dance if you want. Google PageSpeed Insights and WebPageTest will love you for it.

Expires Headers

So when a web browser requests a web site it has to download all the files that go to make up that site. When you go back to that site a few days later, you have to download all those files again. Sssssllloooowwww. All those files are probably sitting on your computer already, so why bother downloading them again when they are there to use. Again, FeedTheBot has nice article about expires headers.

Setting Expires Headers will tell your web browser that if the file hasn’t changed for a certain period of time, get it from the local cache. In order to do this though, you need to dive into that .htaccess file again and add a few more lines to that file. So use that handy .htaccess file plugin and add these lines:

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

Save the file. Job done again. Keep dancing!

Making your images smaller

A big win for reducing the size of the files that the browser has to download is to optimise your image files. It’s all too often overlooked and big improvements can be made just by paying attention to your image file sizes.

Once again, good plugins make your life a whole lot easier. Smush.it is a web service that optimises your images for you, and low and behold, there is a WordPress plugin that does it all for you. WP Smush is a free plugin that you install and forget. It has a handy feature that will optimise any existing images for you in a batch, but basically, you install it and then any image you upload gets Smushed as part of the process. There is a pro version if you are using lots of images and want extra features, but the free version is great for getting going with. Install it now!

Get Lazy With Loading

Finally there is yet another useful little plugin that’s worth installing, although I’m still tinkering with this one a bit. It’s a plugin called WP Deferred JavaScript and it does pretty much what it says on the tin.

Most JavaScript files on a page aren’t critical to the page loading. They are just there to add some extra behaviour layer, or some nice to have features, so why bother loading these in with the main page load? Let the page load in all it’s contents and important stuff, then once that’s all done, load in all the other bits, JavaScript files being one type of file that this works well for.

So install that plugin, is does it’s job without any configuration. As I said though, I am tinkering a bit in this area so I may end up using another method to load my JS files in, but for now, it does it’s job.

What are the Scores On The Doors.

So with all these other changes, where am I up to with those all important benchmarks?

Well, for Google PageSpeed Insights I’m at a puzzling 79/100 for mobile and 92/100 for desktop. So according to previous scores I’ve gone backwards even though I’ve made improvements. That’s something I need to investigate a bit more.  Google Analytics and Google Tag Manager are the main offenders still as is the main CSS file for this site. So they are my next challenges.

On WebPageTest my score is pretty respectable:

WebPageTest Results 31/05/2015

It’s the same offending files from Google that are knocking my Caching score down to C, so I need to do a little bit of work there I reckon.

Not bad though. A lot more to come.

 

Be the first to leave a comment. Don’t be shy.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>