Google is experimenting with different options for its Chrome browser that will display a notification badge when users encounter a website that loads slowly. The intent of the badge is to provide performance metrics to visitors so they can decide beforehand whether to continue navigating through the website.
Calling out poor performing websites in this way will encourage developers to optimize their websites for page load speed, thereby improving the visitor experience.
According to Google, the plan will unfold incrementally as increasingly stringent criteria are added into the mix. The long-term goal is to also define badges for high-quality experiences, which may include metrics beyond just speed. Google’s challenge is to set the bar for what is considered a good user experience, while placing the goals within reach by all developers.
Baseline Performance Check
Of course, developers don’t have to wait until Google implements its badge plan. They can start optimizing websites now. The approach should be systematic, starting with the collection of baseline performance information about a website. Among the resources available for this is Google PageSpeed Insights, an online tool that shows speed field data for both mobile and desktop websites, along with suggestions that will improve performance.
While Google PageSpeed Insights only tests one page at a time, Experte Bulk Page Speed Test allows you to test hundreds of URLs automatically. All you have to do is enter a URL, and the tool crawls the website and determines the page speed scores for each subpage. The performance data for each page is identical to that provided by Google PageSpeed Insights.
There is also Lighthouse, a downloadable tool that provides audits for performance, accessibility, progressive web apps, SEO and more. After entering the URL of a website it runs a series of audits against the page. It then generates a report on how well the page did. From there, the failed audits can be used as indicators for how the page can be improved. Each failed audit includes tips for how to fix it.
Once baseline performance metrics are collected, the developer can implement the suggested fixes to see what impact they have on the website’s performance. Sometimes it is not feasible to implement a fix without some underlying code modifications, relocation of scripts, image compression, or the elimination of unused resources. Interestingly, the use of Google fonts in a website can pose a significant performance drag.
To learn about performance best practices, check web.dev/fast. This learning platform provides information on how to get web pages to load immediately.
Another useful tool that can improve website performance is Website Planet’s Image Compressor, which reduces PNG/JPG files by up to 80% while retaining full transparency. It allows you to select a preferred compression mode: low, medium and high. In a test of Image Compressor set at medium mode, a 3.4 MB JPG file was reduced to 1.0 MB for a savings of 2.4 MB, or 69%, with no discernible degradation of the image.
Jumping Through Hoops
Why should web developers jump through all these hoops? The answer is simple: high performance websites engage and retain users better than slow performing ones. With the wrong badge, Chrome users may be sufficiently deterred from even entering a website.
Nathan Muller is the author of 29 technical books and over 3,000 articles that have appeared in 75 publications worldwide. He also writes articles, blogs and social media content for tech companies and their executives.