YellowLabTools: a web performance and quality optimization tool

YellowLabTools (YLT) is an open-source web performance and quality tool. Developed by my colleague Gaël Metais and used by many clients. YLT allows me to conduct a precise and detailed assessment of the overall quality of a site across defined pages.

YellowLabTools is intelligently divided into categories and assigns a score out of 100 with a point-by-point criticality system. After entering the URL to test and choosing the type of device to emulate between desktop, tablet, mobile, and desktop HD (like a retina screen), the test will be launched on your page.

After more than a year of using the tool during web performance audits, it has become essential for me whenever I conduct a web performance audit for one of my clients.

💡 YellowLabTools also allows for more advanced configuration, such as managing identification via htaccess, the ability to set cookies, or even blocking requests to one or more external domains.

Page Weight

The most important criterion for loading a web page faster is optimizing its weight. The tool will prove very useful for detecting issues with your images (weight and size), as well as the compression used and the correct minification of your page's files.

By clicking on the page weight line, you can find the distribution of the page weight by content type (HTML, JS, CSS, images, videos, web fonts, ...)

Internal and External Requests

YellowLabTools also audits all requests made by the tested web page. It will indicate the number of requests, as well as the number of different domains called (as a reminder, each discovery of a new domain name can slow down the loading of a resource by 50 to 150ms).

In this same section, YLT will indicate if any images could be lazy-loaded, specifying their URL, or if any images are loaded without being displayed on the screen.

In terms of quality auditing, the tool will also indicate any request to a resource that returns a 404 error (not found), or duplicate content between two resources.

DOM Complexity

The number of DOM nodes or its depth often generates rendering slowness for the web page. In addition to indicating the most complex nodes for the browser, YellowLabTools indicates the number of iFrames present on the page, as well as any duplicated ID attributes among multiple elements, which could lead to a Javascript error when using getElementById.

Javascript Code Complexity

Javascript is the source of freeze times on pages (often noticeable on articles from sites packed with ads and clickbait titles).

To allow for smooth navigation for your users, Yellow Lab Tools also measures the complexity of your Javascript code based on its execution time, the number of DOM accesses, and the number of listeners on the scroll event (as a reminder, it is recommended to create only one scroll listener to avoid scroll freezes).

Javascript Execution Issues

As with CSS, you may have issues with JS code execution. YellowLab records the JS errors encountered during page loading, as well as other common bad practices in Javascript.

The Use of jQuery

We will not debate here the use of jQuery, although it is questionable knowing that even Bootstrap removed the use of the library in June 2020.

Wordpress still natively includes jQuery, and the majority of themes still rely on its features. In addition, some plugins or themes may even load another version of the library. YellowLabTools can again prove useful in this case by indicating if multiple imports of jQuery are executed on the tested page.

CSS Code Complexity

Essential for displaying the content of your pages and making them usable, overly heavy or complex CSS code can be a significant hindrance to your page's rendering.

The tool does not stop at the weight of the CSS; it will also indicate all the negative points of the code downloaded on the page regarding the complexities of the selectors used, as well as checking the colors used and if some could be consolidated.

CSS Issues

This is one of the biggest points of the tool; in this section, it details the main issues of the CSS source code of your website.

Yellow Lab Tools checks the use of @import (a very bad practice in web performance) but will also inform you of any duplicated or redundant selectors. To further reduce the weight of your resources, YLT also highlights IE selectors or other old browser selectors, which are unnecessary for the overwhelming majority of users today.

For web quality, it also indicates the number of uses of the !important rule, or CSS syntax errors.

Fonts

The font or typeface is an important topic in web performance: a poorly optimized typography file can delay the display of the site's text and unnecessarily increase the weight of your pages. Yellow Lab Tools provides a quick overview of the fonts used on your web pages.

Very useful on Wordpress where some extensions import font files (generally poorly or not optimized), YLT will indicate the number of fonts used (1 weight = 1 file), as well as the number of glyphs or whether the font format is optimized (WOFF2).

Server Configuration

Even though it is difficult to scan the page with a headless browser, Yellow Lab Tools can detect cache times that are too short or nonexistent, as well as SSL certificate issues.

YellowLabTools: the ultimate tool for web performance and quality?

For me, the tool is a must-use for any web performance audit; it allows for the quick identification of quick wins in web performance on the site.

Once all suggested performance optimizations are implemented, the site will load much faster. A fast site does not need to have a score of 100/100; it is only indicators based on objective criteria without taking into account the technical constraints of your environment or your brand.

A web performance expert does not just open a tool like YellowLab or Google Pagespeed; we instrument the Javascript code, explore possibilities for preloading resources on the site, and work with your development teams to optimize server response times (back-end). Contact me if you need help achieving a fast site!