Do websites have to rank an “A” on GTMetrix?

Question

Lately I've noticed that a lot of clients refer to the GTMetrix rating system when discussing deliverables for their website. In their eyes, GTMetrix is great because it allows them to validate the work that they have paid for without any technical knowledge. As long as they see an "A" they are happy. But the website has to get an "A".

Some web designers have begun to play up the GTMetrix ratings and even include it in their pitch, claiming to only churn out websites that 'rank "A's" across the board.' This further perpetuates the attitude that an "A" ranking is the only acceptable rating for a website.

Now here's my problem: I have a website that ranks 85%. It ranks "A's" in every area except for when it comes to serving scaled images, and it loads in 1.5 seconds. My images are 45% larger than they are being displayed, and I like it this way because it looks better. Resizing to the exact display width causes them to look blurry, and I've tried resampling with all the methods available. The only way for me to achieve an "A" rating with this website is to make the image quality noticeable worse, which I think hurts the user experience.

To make matters worse, my photos were originally 65% larger than displayed, and my website ranked 85%. I reduced them by 20% and the rating didn't change at all (I double checked that this wasn't a caching issue). This makes me feel like the GTMetrix rating system is at least somewhat bogus to begin with.

Am I missing something here? Is there a way to resize photos without losing image quality? Are some people placing too much emphasis on the GTMetrix rating system? Should we even be assigning letter grades to our websites like this (I think clients will always demand an "A" if we do)? Is it sometimes preferable to score a "B" if it provides a better user experience?

Answer 1

I enjoy using GTMetrix as a resource to find my development weaknesses.

My site score "A" grades but my images, not so good.

• Optimize Images = F
• Specifiy image dimensions = F

I use Bootstrap / Responsive and focus on the users experience not the page grade. If you try to do anything with fixed images you're going change your site from responsive to fixed in a second.

I find it's best to look to score 93% or better on all other categories. Let a few related to image scores fall in the "F" if you must to keep your your user experience at it's best. (Don't over compress, we have other solutions)

I ran a test of 1 page only changing how the images are handled and tested these with GTMetrix,

• No images = "A"
• 7MB of uncompressed images = "A"
• 25MB of uncompressed images = "F"
• 25MB of uncompressed (not delivered on page load) on the fly compressed to 10% of actual size in thumbnail images = "A"

The scores are related to your users experience what appears on the page. If you spend time compressing your images you may lower that user experience.

Focus on what you can fix, resize the images on the fly helps if you have many or very large image formats.

Regarding GTMetrix as having some issue I'm not seeing anything wrong. I use YSlow, Google PageSpeed, Web Page Test (webpagetest.org) as my checks and balances. Then I use my own code on my server to validate their timings. Seems they are on point when it comes to the tests they offer.

In closing, make sure you do everything you can do to get every category above 90%. Look for alternatives to providing your image to your users. Do not compress to the point the image is nothing more than a Win95 bootscreen.

I like being offered thumbnails with a link to display the full image.

Keep the user experience in mind when doing these tests. Here's a copy of the testing:

Update for clarity: Image compression vs. Image Size vs. Alternative image display. This part is up to you the developer.

• Do you compress the image so when the end user attempts to "Pinch and Zoom" it's completely distorted?
• Do you Resize the image on the fly offering a "Click to Enlarge"?
• Do you create 2, 3 or more different sized images and use the srcset as Damien suggested?

These are all very specific to your sites design and are truly individual topics. I was showing no matter what image method you choose you can still score "A" averages from our online Web Page Testing sites. (Wish I could have just made a comment but... rules.... )

Answer 2

As for the rankings, I would test across multiple tools, not just one. Try google's page-speed insights, and try webpagetest.org to make sure your web page speed is always up to par. Also test it on pingdom.

The number one reason why no tool is going to be 100% accurate all the time is because activity on the server can change, and if it is not well maintained, it can suffer from DDOS (denial of service attacks) and when you try running tests then, many tools will either report errors or extremely slow loading times, and GTMetrix may report similar as well.

As for the images, specifying width and height that is different than the image size itself causes the browser to do some extra rendering work in order to display the image at the specified size. You should look into the PHP GD image library and use it to make the server produce the same image but at the requested size instead so the numbers can match up. This also saves bandwidth as well when the requested size is smaller than the image size.

In the end, you want to constantly test with a bunch of tools to make sure your website scores high in all of them. Another indicator of a good website is one that ranks high in search results.

Answer 3

If you try to do anything with fixed images you're going change your site from responsive to fixed in a second

I do not agree. There are other solutions than resizing the image, even if it might add a little work. For example, you can take a look to srcset attribut, that starts to be widely available

Resizing to the exact display width causes them to look blurry, and I've tried resampling with all the methods available.

If you used your file (165% large) to get the small one, that's logical, as you're probably working with lossy jpeg format. If you used source files considerably larger than the thumbnail you have to get, i'm pretty surpized.

This makes me feel like the GTMetrix rating system is at least somewhat bogus to begin with.

I don't think so but you still can take a look on GPS/YSlow source code to know exactly how scores are computed for this given rule.