Improving GTmetrix From E to B In 7-Minute
After last major revamp of WillTan.com at October 2018, I have spent most of the time meddling with its configuration and finer details. It came to a shock when I run through the site at GTmetrix and the results were rather disappointing.
It was a Score E on the most important PageSpeed performance score! How can that be?! I have used the very lightweight GeneratePress theme and powerful Elementor Pro combo for this site – how bad can it be?
Recomposing myself, I zoomed in to analyse the cause of this dismayed PageSpeed Score. Accentuating from the root causes of this was a Grade F (0) for Serve scaled images.
Jeez, amidst my efforts to populate the site with new contents over past few months, I have literally disregarded the size of the images uploaded to the media – I have been cramping oversized (in terms of width-height pixels) images which were adjusted down by browser automatically … and this is a very bad practice!
I thought the image compression plugin installed ie. Smush would have resolved such image issue. But there again, they are just image compression – such plugins compressed and reduce the size (in terms of bytes) of the images … but they don’t quite optimise the more critical size (in terms of scale).
So the general thumb of rules for images is – scale the images to the size just as needed to be displayed on the web page, so that the browser will not need to do extra work of resizing it.
Hence, based on GTmetrix report, I zoomed in to each and every images listed as “F” in “Serve scale images” in my WordPress’s Media and crop them to the right size .. and 7 minutes later :
Just by cropping the identified images as listed on the GTmetrix, the PageSpeed Score leap-jumped to a grade B!
That was a pleasant surprise. After all, it took me only about 7 minutes (see the timings on the 2 above screenshots) to rescale (crop) just a handful of images.
One thing to note is that the images I have rescaled are those on the front page. So there is still a need for me to scan through entire media library to optimise the rest of the oversized images.
As of now, I’m looking into plugins and have shortlisted ie. ShortPixel, Imagify, reSmush to bulk scale and compress the rest of my media images.
Now that I’ve totally eliminated the “Serve scale images” issue, I’ll be looking into the next E graded culprit “Inline small CSS” in hope to achieve a PageSpeed Score A … but for now, I’d take a back-seat, chill a little and re-focus back to more important task – content generation.
