Before you begin though, a warning of sorts. It's worth noting that blindly going for 100/100 on Google PageSpeed may do more harm than good. Some of the tools or elements on your page might serve a genuine business use - removing them might increase your PageSpeed, but could be at the expense of the business you're working with.
For example, using a session recording tool or Google Analytics will reduce your PageSpeed score, but both may provide invaluable data that you can use to improve your site in the long run. Only remove something or adopt a technique detailed here if it makes sense to do so in your specific use-case.
Before you jump into your chosen page builder, it's worth designing your site in XD or Sketch, doing so with performance in mind. But what does that practically mean?
High fidelity images take a long time to load. Ask yourself if the image you're adding to the design has any practical usage towards the project goals. If it doesn't, remove it. If photos are unavoidable, try and place them below the fold and implement Lazy Loading. Lazy Loading defers the load of images until the user scrolls far enough to see them.
Vector images are awesome. They scale indefinitely without pixelation and they weigh a fraction of their JPG or PNG counterparts. For backgrounds, try and use vector based images or gradients created with CSS - they add the visual flair you're after without the heavy load.
There's no excuse for using GIFs in web design in 2019. Check out Lottie - a tool created by the AirBnB design team. Their technology allows you to export After Effects files into a format that can be used on a site. They're not rendered as video formats (which obviously weigh a tonne), they're more akin to a vector animation and benefit from file-sizes of under 10kb.
Stripe's website is a great example of one that uses vector images, CSS gradients and Lottie animations (it may not be Lottie exactly, bit something similar).
If you're not a developer, it can be difficult to avoid Wordpress themes like Divi or Avada. While making it easier to create a website, these themes try to be everything to everyone. To appeal to mass market, they pack in a huge number of features and tools; many of which you'll never need to use. This bloat causes your site to slow down and it can be impossible to work around.
Consider using more lightweight starter themes, building in the design and features you need to get the job done. If you're not a developer, this might mean investing in one. But as a designer myself, investing in a developer was one of the most liberating investments I ever made - a developer can achieve the things you didn't think possible.
The holy trinity. I've already explained what lazy loading can do for you with images, but did you know you can also lazy load embeds?
Caching and minification, alongside a whole suite of other speed enhancing tools, can be achieved with tools like WP Fastest Cache or Litespeed. They help to reduce file-sizes, and reduce the complex processes that happen in the background before the page begins to load.
If there was only one thing you were to action on this list, make it this one. And be sure to check if your host has a preferred caching tool, as some caching tools work better on certain hosting environments.
Any image you upload to your site ought to be a JPG or a vector. There's very few use-cases for images in PNG format, which weigh a tonne, so avoid them if you can.
Free plugins like Imsanity will resize and compress images as you upload them to your site, reducing the file sizes to improve your load speeds. Pay-as-you-go tools like TinyPNG take it a step further, using their advanced compression tools to squeeze out every last KB.
Every font and every weight you load into a site increases how many files your site needs to load. Each font and each weight of that font requires an additional font file, so try and limit your site to a maximum of 3 font files.
Bloated themes and plugins will load files that simply don't need to run. Contact Form 7 is the perfect example used by tens of millions of sites. CF7 unfortunately loads the files it needs for a form to work, even if no form is present on a page.
Alongside shitty plugins, bloated themes and page builders suffer from this same issue. Luckily, Asset Cleanup is here to help, allowing you to stop certain files from loading on a page-by-page process. You can either blacklist a file globally and whitelist it on certain pages, or you can simply blacklist a certain file on an individual page.
Use GTMetrix's waterfall tool to understand what files are loading on each page, and blacklist the ones that don't need to be loaded. It can be tricky to do if you're not sure what a file is used for, so I'd recommend blacklisting one at a time and testing the page to ensure it doesn't break something you need.
None of these tips are going to generate massive results if you're on a cheap, shared hosting plan. Invest in a decent hosting plan from a reputable host such as Guru (UK) or WPEngine. Yes, they cost more than the £2.99 GoDaddy plan you might be on, but the increased speed is instantly rewarding for both you and your customers.
It's time for a spring clean. Check your header code and remove anything that doesn't need to be there such as old Facebook pixels or the live chat you're no longer using. Each unnecessary item in your header increases page load exponentially.
Embeds like videos from YouTube and Vimeo, or even Google Maps, add 2-3 seconds onto your page load which can be disastrous for your PageSpeed score and load times. Defer the load of these elements until a user interacts with them. Simply show an image thumbnail, and load the embed once a user clicks on it.
What's a blog post without a cheeky plug? I've helped build 130+ websites, and performance has been a priority for every one of them. If you need a hand to speed up a sluggish site, feel free to reach out by emailing kaine.shutler@plume.co.uk.
