How We Achieved Perfect GTMetrix Score With ShortPixel Adaptive Images
We recently made the switch to ShortPixel Adaptive Images to check how our site’s performance is improved. With a combination of good hosting and WordPress plugins, we have achieved a Google PageSpeed Insights score of 99 for mobile and 100 for desktop, and also a perfect GTMetrix score, specifically 100% for performance/structure. How amazing is that?
And here’s how we did it.
PageSpeed Insights Performance Report
What tools did we use to achieve the perfect GTMetrix score?
WordPress Theme – GeneratePress
We built the site using a lightweight WordPress theme, GeneratePress. Their latest release (3.0) includes a switch to a leaner Flexbox Grid CSS setup, which has reduced HTTP requests and theme file sizes. The theme also gives you the option of generating dynamic CSS as an external file to keep it lightweight.
Image Compression – ShortPixel AI
ShortPixel AI optimizes our website images on the fly and lets us load them via the Cloudflare CDN from our own sub-domain.
As image quality is important for our audiences (as a design agency) we opted for the Glossy compression level in ShortPixel AI. This strikes a nice balance between optimized file sizes and image quality.
Image Formats
With ShortPixel AI handling all of the image optimisation, the final step with images was to switch our logo from PNG to SVG. Not only is the SVG file size less than 10% of the PNG (3kb vs. 35kb), but also the scalable vector graphics format ensures that our logo is sharp at all sizes.
Fonts – Self-hosted variable
We recently made the switch to variable fonts for speed and added flexibility. We had been using eight Google Fonts (four weights from two font families). By switching to variable (.woff2) fonts we removed the HTTP request to Google. It also allowed us to load the font as just one script, latin, rather than multiple scripts from Google Fonts.
Variable fonts gave us an added advantage in design flexibility, we can now set specific font-weights from 100 to 900.
WordPress Cache – WP Rocket
WP Rocket is a handy plugin for optimizing the website cache. As an added bonus, it also works really well in conjunction with ShortPixel AI.
Server Cache/CDN – Cloudflare APO
Serving the site from the Cloudflare Edge network improved our time to the first byte (TTFB). Cloudflare APO also gives us the added benefits of DDoS protection and a CDN.
Following the guide from ShortPixel we created a CNAME record to deliver our optimized images from our domain via Cloudflare, thus reducing the lookups even more.
CSS/JS Optimization – Autoptimize
When it came to CSS/JS optimization, we found out that Autoptimize had a slightly better performance than WP Rocket. It also gave us the advantage of the extra settings to easily remove WordPress core emojis and query strings.
Web Hosting – Nimbus Hosting
We’re based in the UK and have been using Nimbus Hosting for over a decade. They’ve developed their own cloud platform with some nice added features for WordPress sites. They have given us a solid platform for fast, secure hosting with good support. A recent upgrade to our server memory also helped improve the TTFB.
Further reading
I highly recommend WPJohnny’s post, Ultimate WordPress Speed Optimization Guide, for a really in-depth look at WordPress speed. Reading his guide led me to ShortPixel AI, as he lists ShortPixel as his favorite image compression plugin for WordPress.
And, finally, you can see all of the above tips in action on our website at Mantra.co.uk.
About the author
Greg is a designer/developer for Mantra Design, a graphic and web design studio based in Kent, UK. He established Mantra in 2021, following 12 years as a freelancer, working for clients across the UK. Mantra focuses on providing fast, minimal design WordPress websites for small & medium-sized enterprises (SMEs) and entrepreneurs.
