Back in 2015 I wrote two blogs chock full of website optimisation tips for developers.
Two years on (and possibly two years wiser?), I’m back again to share more useful optimisation tools and techniques which you can use to speed up your websites.
As before we’re looking to do two things:
- Reduce the number of files being requested on your page
- Reduce the size of the individual files
In this blog, I’ll be looking at some quick tips to build upon the techniques described in my original website optimisation tips article. In part 2, I will discuss some more detailed methods specifically for optimising WordPress websites.
Merge your Google fonts stylesheet into your own
If you use the Google Font Library regularly you’ll know how easy it is to add fonts to your page. Simply copy the link to the font’s stylesheet on Googles server and paste it inside your <head> tag. So simple in fact that it’s easy to just stick it on and forget about it.
However, if you actually look at the stylesheet that you link to you’ll notice that all it contains is a small amount of @font-face CSS code to load the fonts in. You can easily copy and paste this into your own local stylesheet to give yourself one less server request and one less thing for Google Pagespeed to complain about.
The actual font files still get loaded in externally, you just cut out the middle man.
Load in external jQuery files asynchronously
If you are using any third party jQuery tools (such as Fancybox or Slick Slider), you can reduce load on your own website’s server by loading in the scripts externally from the original developers website (or ideally their CDN).
As an additional little boost you can also set the external file to load in asynchronously, meaning the script won’t wait for the rest of your page to load before being requested.
To do this simply add an async attribute to your external script tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js" async></script>
As a side note, in this example the related Fancybox CSS code is saved locally in an .scss file which is then combined into my main minified stylesheet using SASS).
Embrace the HTML5 <picture> tag
Back in my original website optimisation blog post, I talked about waiting for the <picture> tag to become more widely established. Fast forward two years and it is an excellent addition to any front-end developer’s arsenal.
The <picture> element let’s you load in an image based on the size of the users screen (similar to a CSS media query), meaning you can load in a small image (with a low file size) on a phone and a larger, higher resolution image for a laptop (which is more likely to be viewed on a wifi connection rather than 4g).
<picture> <source srcset="small-image.jpg" media="(max-width: 799px)"> <img src="large-image.jpg" alt="My Image"/> </picture>
In this example, if the web page is being viewed on a screen less than 800px it will load in small-image.jpg, otherwise load in large-image.jpg.
As a side note, you could save out the different images as different shapes to be better suit the device they are being viewed on. Your mobile image might work better as a square, whilst your large screen image might work better as a wide rectangle (as is used on the banner for this blog).
The <picture> tag is now compatible with all major browsers. Older browsers (like Internet Explorer) will ignore the <source> tag and simply fall back to the <img/> tag. So it’s important to put your small images in first (which can be assumed to be viewed on a modern mobile browser) and then have the older browsers fall back to your larger ones which are likely to be viewed on a computer screen (possibly located in a grey local council office!).
Minify Your HTML
If you followed my initial website performance tips you’re probably already minifying your CSS and your jQuery. The next step is to minify your HMTL.
This essentially means going through your source HTML code and removing the empty tab indents so each line sits flush with the left of your text editor. The easiest was to do this is to open a file, hit ctrl + a (select all) and then continue tapping shift+ tab to tidy it all up.
It’s worth noting that there is an obvious downside to this tip as removing the tab indents makes your source code considerably harder to read (so make sure it’s well commented!). Also the amount of data saved by doing this is also fairly minimal when compared to larger tasks such as optimising your images.
That said, website performance checkers such as Google Pagespeed and GTMetrix seem to love it so it is worth spending a couple of minutes whizzing through your page templates and tidying them up.
Speeding up WordPress websites
Next time I’ll be looking at some more advanced techniques for improving performance of WordPress websites.
If you have any questions about anything you have read in this blog or if you would like me to help speed up your website, please feel free to get in touch!