Performance Audits: What’s in your Checklist?

Posted on by

Performance audits are an invaluable step in fine-tuning a site’s performance. But man, there is a lot to look at… Which makes it really easy to miss something (or somethings) on any given audit…

So, to help forgetful people like me, below is a collection of items that I typically check during an audit.

This list is intended to be organic, so please share any additions, alterations or deletions that you recommend.

Item
Description
References
Redirects Redirects incur unnecessary latency. Try to remove any you encounter.
4xx errors 4xx errors incur latency and block requests while the browser waits for the URL to resolve. There should be no 4xx errors. This includes links to other pages.
Viewport meta Make sure “viewport” meta is
<meta name="viewport" content="width=device-width, initial-scale=1" />. This tells the browser to resize to the current screen width and allows the user to pinch to zoom in and out.
Definitely no “maximum-scale=1” or “user-scalable=no”.
preconnect links There should be preconnect links for any important domains that will be needed later, such as a CDN, Cookie Consent assets, etc. This will help these assets fetch faster.
preload links There should be preload links for all above-the-fold fonts. Also add one for the main hero asset (image, video, etc.) if it is hard for the browser to find in the HTML. This will help these assets fetch faster.
Font preload crossorigin If preloading any font, it should have a crossorigin attribute set to "anonymous".
Validate Resource Hints Once you think all the preconnect and preload hints are setup, validate to make sure.
fetchpriority for hero asset The hero asset should have fetchpriority="high". This could be on the asset’s preload link if it is hard for the browser to find in the HTML.
Mind Critical Rendering Path Only resources that are critical for the initial page load should be allowed to block the critical rendering path.
JS Aggregation The essence of aggregation is to group the JavaScript and CSS files in bundles in order to reduce the amount of HTTP requests necessary for the page to load. Instead of a couple dozens files, a page will load with just a handful of aggregates. This can lead to significant website speed gains if done properly, but only assets that are needed for each page should be loaded by that page.

  • Reduce HTTP requests and minimize CSS and JavaScript
  • Load visible content first and defer everything else
  • Only load necessary JavaScript and CSS files that are helpful, especially for mobile users
  • Too much JavaScript or CSS cause the pages to slow down
  • Strike a balance between making fewer HTTP requests and leveraging browser caching
Minify / Compress Minify / compress your code where possible and consider reorganizing your CSS altogether.
Check cache controls Make sure assets that don’t undergo frequent changes (logos, icons, etc.) are being cached by the browser so that the visitors don’t have to re-fetch them on every page load.
Asset priority Any CSS or JS that is not needed for the initial page view should be delayed (defer, async, lazy load, etc.), allowing for critical assets to load first.
WOFF2 priority Make sure WOFF2 is the first font format in your CSS font-family declaration (before WOFF).
CSS @import There should be no @import statements in any CSS.
Background-image There should be minimum of cases where images served via CSS background-image.
Images on Mobile Don’t make mobile users download images designed for larger screens. Make sure mobile has reduced size images & videos. And if using a hero asset preload, make sure you also have one for the mobile-sized asset.
Animated GIFs Any animated GIFs should be converted to MP4 videos, then compressed for the web.
JPG/PNG > WEBP/AVIF
Any JPG, PNG or GIF images should be served to the browser as WEBP or AVIF, if possible. This can often be handled automatically for images served via a CDN.
Video compression Check whether videos are compressed and whether they need their audio track.
Video preload The preload attribute should be set to "none" for any video that is below-the-fold. If the video is above-the-fold, the preload should be set to "auto".
Video autoplay The autoplay attribute should be set to "no", unless it is the hero asset. For below-the-fold videos, the autoplay attribute should be set to "no".
Video poster Ideally video elements should have a poster attribute that can display while the video is downloading. A video poster image can qualify as an LCP.
Lazy load settings
  • Any asset that is initially onscreen should not be lazy loaded
  • Any asset that is initially offscreen should be lazy loaded
  • Any asset that should be lazy loaded should have the loading="lazy" attribute and value added to it
Text in images Ideally all text would be rendered as HTML, not within images or videos.
Text readability Ideally all text should be readable at all times. This includes anything that renders over images or videos, both while the asset is still loading (white text should have some kind of background color), and after the asset has loaded (make sure text does not overlap a color that makes it unreadable).
Image alt attributes All img elements should have an alt attribute that describes the content of the image.
In-page CSS Typically CSS should be served via an external file, so it can be cached and re-used. But there are cases where in-page (or embedded) CSS makes sense. In these cases, check the size of the code and see if it is possible to reduce the code by minifying or removing unused code.
In-page JS Typically JS should be served via an external file, so it can be cached and re-used. But there are cases where in-page (or embedded) JS makes sense. In these cases, check the size of the code and see if it is possible to reduce the code by minifying or removing unused code.
In-page JSON Typically JSON should be served via an external file, so it can be cached and re-used. But there are cases where in-page (or embedded) JSON makes sense. In these cases, check the size of the code and see if it is possible to reduce the code by minifying or removing unused code.
Third-party scripts Check the purpose of each third-party script to make sure it is still needed. If so, see if the files can be delayed or optimized.
KPIs Check that the page is within any Performance KPIs thresholds you have previously established.
Performance Budget Check that all page assets are within the any Performance Budget thresholds you have previously established.
Page validation Page errors can also tax the browser as it tries to build a page and has to make corrections.
Accessibility validation Make pages accessible to everyone. 15% of the world’s population has some sort of disability (WHO). 90% of websites are inaccessible to people with disabilities who use assistive technologies. Shopping sites average 72.9 errors per page. Between 2017 and 2021, the number of ADA-related lawsuits and legal actions increased by 400% (DDIY).

Happy auditing,
Atg

Top⇪

One Response to Performance Audits: What’s in your Checklist?

  1. Aaron T. Grogg says:
    June 9, 2023 at 7:35 pm

    Vitaly Friedman of Smashing Magazine fame compiled an awesome list too:
    https://paper.dropbox.com/doc/Performance-Optimization-Strategy-in-2023-qWcr7orx2cEWHpLqoLeTC
    Gonna need to pilfer… ;-)

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.