Content is king, yet speed is everything! Or, better said: “content is king, but visual content is... Emperor”!
And since “visual content” means images (and videos), you run the risk to get your precious website bogged down by a too heavy load of (otherwise) visually-striking images.
Trying to impress, you to end up frustrating your visitors due to your site's slowness!
But there's good news: Cloudinary's Website Speed Test Image Analysis Tool! A “refined” tool to add to your web development essential toolbox!
A website performance tool that goes beyond the “you need to re-size your image” advice and empowers you with a whole report on how to:
- encode
- optimize
- re-size images on your website
It measures, diagnosis and, moreover: provides you with a “treatment” for your site's poor load time, too!
And now, without any further ado, let's see this tool “in action”:
How Does the Website Speed Test Work Exactly?
But first, what would you say about simultaneously trying this Image Analysis tool itself? This way going through our short “tutorial” here will be much more interactive.
Just enter your site's link in the bar there, hit the “Analyze” button and... let the site performance report unfold before your eyes!
a. It Runs an Analysis of The Site's Overall Performance
Can you see the green, oversized letter grade on the top left corner of your screen? Excellent!
This is just one of the 2 key metrics displayed to you in this section of your report:
- a letter grade: do keep in mind that the Website Speed Test tool grades your website by the number of detected issues, not by their gravity. So, the more problems/mistakes your inventory includes, the smaller the grade you'll get!
- an image weight comparison: it counts bytes (not problems) and counts the potential performance gains that your site could be exploiting instead
b. It Highlights Specific Issues
After you get your short report on your website's overall performance, the tool digs deeper, tracks down and highlights each web page's issues!
Every page-specific report will provide you with actionable information on:
- your images' current status: how they've been sized and encoded
- your images' “ideal” performance: actionable information related to their format, dimension, how you could have got them better compressed etc.
As you can see for yourself, the on-page analysis, too, displays both grades and a potential gains percentages.
Now, if you get “hungry” for even more actionable data, just dig deeper: hit the “See More” button!
Then you'll get to “satisfy your need” for even more detailed information about every single web page's current and potential performance. A report “split” into 3 main panels:
Current:
- it grades every element “responsible” of an image's performance: format, fit, compression (yet, it's just these 3 first elements that count in grading the image), color space, color width etc.
- moreover, in the panel's bottom half you'll get a list of solutions for scoring better grades for each one of those analyzed elements; you're being told what you could have done better when you handled you site's optimization (and this is gold!)
Optimized Image:
- it's here that you're presented with your image's ideal size and compression (and sometimes even with details on how the Website Speed Test encoded it along with a short description of the image's actual content)
- just download it leverage it!
Format Alternatives:
- provides you with several alternative options to the single one presented to you in the “Optimized Image” panel
- you get to scan them through and choose the one that best fits your site's optimization needs
From Pointing Out the Problems to Listing their Solutions
Tackling the issues highlighted to you in the Website Speed Test report depends greatly on your (your team's) specific workflow. On the web development tools and technologies that you've already integrated into your workflow and that you're already familiar with.
For instance, has this image analysis diagnosed some compression issues? Then it's you to decide whether you get them fixed using a compression GUI or an ImageMagick instead!
The same goes for all the other issues' systematic fixing methods.
Just A Few Extra Details
- Website Speed Test is result of Cloudinary and WebPagetest joining forces
- it's integrated into the WebPagetest's navigation bar: just look for the “Analyze Images” tab!
- you should incorporate it into your own “arsenal” if, as a web developer in Toronto, you're testing your own websites and you want to get empowered to fix the signaled issues yourself
- in short: Website Speed Test turns a plethora of site performance-boosting details into measurable and (moreover) actionable metrics: into “fuel” for your own site performance-enhancing plan!
Have you tried it yet? Do you think that it sets itself apart from other website performance analysis tools that you've used so far? Do share your (first) impressions with us!
