Posts Tagged ‘speed’

We’re taking the lean startup approach with Leeds Anxiety Clinic and trying not to build anything unless we absolutely need it. As a result, when I originally built our website is was functional but not particularly fast.

Now that we’re up and running and have clients coming through the door, I’ve been back over the site to make it faster and better. Below, I’ve detailed what I’ve done. Here’s a before and after using the Lighthouse audit tool:

Turn cache headers on

There were no cache headers on our images, CSS or JavaScript. Part of this was that I was still making changes to the JavaScript and didn’t have any cache-busting functionality in the site yet. Now that I do, I could safely let the browser cache everything for a month.

Replacing jQuery

jQuery is a library whose time has been and gone. But it does make it super easy to throw in some functionality. Now that I have a proper JavaScript setup, however, and as jQuery was mostly just animating things, I replaced it with native CSS animations and vanilla JS.

Compressing the JavaScript

As there was no JavaScript preprocessing going on, it was not compressed. Ironically, this hasn’t made it any smaller because I’ve now got the Webpack bootstrapping in the file. However, it does mean I can easily load in additional modules, which I discuss below, to help with other areas of the site.

Gzip compression

This is a super-easy win because all you have to do is put it in your Apache config and the server does all of the rest.

Async loading of web fonts

We had a total of three blocking font calls in the header of the page. All of this has now gone. I’m using webfontloader to load in the two variations of Lato that we are using.

Fontawesome is used for icons and is loaded in using a classic link tag, however, I’ve moved this link tag to the bottom of the page so that the initial content can be loaded first. On slow connections, this means the icons are missing for a fraction of a second when you load the page but I think it is worth it.

If I was looking to optimise further like I do with Worfolk Anxiety, I would select the individual icons I want, base64 encode them and put them directly in the CSS. But that seems overkill here for the moment.

Finally, I’ve set the font-display CSS property to fallback so that if the fonts are slow in loading, the text will be rendered away using a system font.

Webp images

Oh my god, webp images are so good. They’re like half the size of the already optimised JPEGs and PNGs that they are replacing.

Unfortunately, few browsers support them yet. It’s basically just Chrome (on desktop and Android). So, I’m using the picture tag with a fallback, as everyone does. I can’t wait until webp gets wider adoption.

Unfortunately, there is no way to do a safe fallback in CSS so my background images remain old JPEGs for everyone.

Leeds Restaurant Guide is incredibly detailed covering so many restaurants with high quality content and imagery. So it seemed only fitting that I should pay as much attention to the presentation as I do the content.

I’ve been using Google’s PageSpeed Insights tool to debug it. Ironically, PageSpeed Insights spends a lot of time complaining about the Google AdSense code that they provide to me. It does however provide some useful tips too.

Compression

Gzip compression costs almost nothing and can drastically reduce the file size you are sending to the client. The server compresses it and the client uncompresses it all of which is done transparently to the user.

It is pretty easy to configure using Apache’s mod_deflate module, and I’ve blogged about how to get it working on cPanel on Hardware Tutorials.

Expiry headers

If you have Apache’s mod_expires, and you almost certainly do, you can set default expiry headers for content using your .htaccess file.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 60 minutes"
    ExpiresByType image/jpeg "access plus 1 day"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/png "access plus 3 months"
</IfModule>

This will tell the client it can safely cache the content for a while. Put whatever values in that you think are sensible.

Minify your CSS

Recently I wrote about how to use Gulp to set up a task to compile your SASS/LESS stylesheets. This included instructions on how to minify your CSS. Even if you are just using plain old CSS, you could still create a task to create a minified version.

Minification takes out all the spaces, comments and other unrequired characters so that you have less data that needs to be transferred to the client.

Using gzip compression allows you to deliver website content faster as it can be gzipped on the server and uncompressed on the client, reducing the file size you need to transfer.

Unfortunately mod_deflate, the Apache module required to do this, is not enabled on all cPanel installs. However, if it is, or you have access to the server, you can easily enable it.

Enabling mod_deflate

If you do not have mod_deflate, you need to use EasyApache to add it. Log in to Web Host Manager and go to EasyApache (only server admins will be able to do this). Select build from the previous configuration and customise it until you get to the exhaustive options list.

Check the box next to mod_deflate and then re-build Apache.

Enabling compression

Once you have mod_deflate enabled, cPanel will have a new option. Under “software and services” in the x3 skin you fill find an option called “optimise website”. Click through to that page.

Compress content will probably be set to “disabled”.

Select “Compress the specified MIME types” instead. You could enable it for all content but I would not recommend this as some content you will not want to compress and much of it (images for example) is pretty pointless. The third option allows you to customise.

By default it should have the following options:

text/html text/plain text/xml

I recommend adding some more:

text/html text/plain text/xml text/css text/javascript

Hit “update settings” and you are done!

I tried my hand at panning so that I could capture cards speeding by. The idea behind the technique is that you pan the camera as the car drives past, thus blurring the background while keeping the car in sharp focus.

I was using my 24-105 f4 lens. Ideally I would have had my 70-200 f2.8 so that I could blur the background even more, though whether I could get down to f2.8 and still keep an exposure of 1/200 I’m not sure. I got better results when I turned off my image stabiliser (because the camera stops trying to fix my panning), but my better lens also has a specific image stabilising mode for panning, so I would like to give that a go.