I’m very passionate about speed optimization when it comes to websites. In part, it’s because most of the time I get to do it is at the end of a project where I’ve been handed something that’s running a bloated theme, like Avada, that’s thrown on some low quality shared hosting, and has several images that are larger than a megabyte. By that point in the project, it’s hard to make things snappy, since you’ve invested in features that tend to add to the site weight. While you can still solve a lot of issues with image optimization and plugins like WP Rocket, there’s going to a limit on what you can do without removing features.
When I created this site, I started optimizing from the beginning. For optimization, I used:
- Gulp to minify and concatenate all theme CSS, JS, and images
- TinyPNG for optimizing media library images
- Web Font Loader to handle Google font loading
- W3 Total Cache for caching
Combining all these together, I managed to get some very nice scores on Google Speed Insights and Pingdom
Getting down to less than half a second was pretty nice. As I’m running on fairly cheap shared hosting, these scores are heavily dependent on whether the cache is being served up, so sometimes it’s not quite as snappy.
Still, I was wondering if I could push it down even more. My largest resource being loaded is the background image for the site, so I tried implementing the blur-up technique described here in CSS Tricks.
Short summary, in case you don’t want to read the article:
- Replace background image with a tiny 40px wide version.
- Run that image through an SVG image to get the blur effect
- When the page is loaded, load the large image in the background with a dummy <img> tag
- When that image is loaded, add a class to the banner div to load the larger image
I ran into some problems pushing this live, as the technique requires adding internal styling to the <head> section, which led to some conflicts with other plugins and the way WordPress serves up some things like emoji CSS. Ideally, I would just load the background banner styles first, but in the interest of time I just removed those other calls.
I ran this through the speed tests and pingdom gave me the speed increase I was expecting:
That’s a 42% reduction in speed by lazy loading that one image, which is pretty cool, putting me into the top 1% of websites in terms of speed.
However…Google disagrees. My score slips dramatically to 71/89 for mobile/desktop mostly because of blocking CSS/JS resources. It looks like whatever way Google is running its scoring system, the lazy loading system is interfering with it in some way. If I simply remove the <style> tags in the head, the other resources are no longer considered blocking.
Given that a user probably isn’t going to notice the difference between 460ms and 272ms, it probably make sense for me to roll back these changes later, as Google speed scores effect SEO rankings, and I’m noticing some draw issues on the new Firefox on mobile. The important takeaway is that if you do everything right, it’s not hard to push your site speed down below 1s or even 0.5s if you have a simple design. The trick is doing working on that optimization from the beginning.