Web Performance Checklist 2025

⏳ 7 min read
📝 1026 words
Web Performance Checklist 2025

In this article, we will explore a comprehensive checklist to help you optimize your website's performance. This checklist covers various aspects of web performance, including loading speed, responsiveness, and overall user experience.

Web Performance Matters to Business and Customers

  1. For Business web performance can :

    • Increase Conversions
    • Reduce Exit and Bounce Rates
    • Enhance SEO Ranking

  2. For Customer web performance can:

    • Enhance Customer Experience

Improve Core Web Vitals

Here are few articles i wrote earlier to optimize the various core vitals:

Optimize Images

  • Use appropriate image formats (e.g., WebP, JPEG, PNG).
  • Convert small images to base64 directly to remove the load time for the image.
  • Implement responsive images using srcset and sizes attributes.
  • Use image compression tools to reduce file size without sacrificing quality.
  • Serve images from a Content Delivery Network (CDN) for faster loading times.

Optimize CSS

  • Minimize CSS file size by removing unused styles.
  • Use shorthand properties to reduce file size.
  • Implement critical CSS to prioritize above-the-fold content.
  • Use a CSS preprocessor (e.g., SASS, LESS) for better organization and maintainability.

Optimize JavaScript

  • Minimize JavaScript file size by removing unused code.
  • Use asynchronous loading for non-critical scripts, to avoid render blocking.
  • Implement code splitting to load only the necessary code.
  • Use a JavaScript bundler (e.g., Webpack, Rollup) for better organization and optimization.

Javascript considerations

  • When should the Javascript be loaded ?
  • When should the Javascript be executed ?
  • Does the Javascript need to be loaded and executed on first load or can it wait for some condition to be met ?
  <!DOCTYPE html>
    <html lang="en">
    <head>
        <script src="script.js"></script> <!-- using the script in head -->
        <title> A web document </title>
    </head>
    <body>
        <main>  
            <!-- Stuff happens here --->
        </main>
    </body>
    
  </html>

The script will always load and execute as soon as the browser encounters it, which is always before the body is rendered out. This will always cause render blocking, and there are very few scenarios when this is preferred.

Traditionally to prevent render blocking, Javascript is added to the bottom of the body element, but this is a hack and it's a bad one.

  <!DOCTYPE html>
    <html lang="en">
     <head> 
        <title> A web document </title>
     </head>
     <body>
        <main> 
        <!-- Stuff happens here -->

            </main>
        <script src="script.js"></script>
     </body>
  </html>

What happens now is the entire page will be loaded, before even the Javascript will be even loaded, which just adds to the performance problems

The core problem

There are three stages how Javascript is executed in the browser :

  1. HTML Parsing
  2. Script download
  3. Script execution

The script tag out of the box, causes parsing to paused, because as soon as the browser encounters a reference to Javascript it'll stop doing anything, download the entire script, then execute the entire script, and then go back to rendering. This is the problem

async JS

When we add async to the script tag, the browser will load the Javascript asynchronously, meaning it loads alongside the HTML parsing process.

When the script is fully loaded, the browser stops the rendering of the HTML, until the script is executed and then it continues.

<script async>

Async should be the default mode of all Javascript loading.

defer JS

when we add defer to the script tag, the browser will load the scripts asynchronously when the browser encounters it without render blocking, and literally defer the execution of the Javascript until the HTML parsing is complete.

This is effectively the same as placing the script tag at the end of the body element, except the script is loaded asynchronously and therefore much better for performance, because we don't render out the entire HTMl, and then go download the Javascript. The javascript is already downloaded.

Better perf : Remember, here we are deferring the execution of JS, until the HTML is loaded and then executing the JS.

Already we are seeing a significant performance enhancement, because the parsing isn't paused, while the script is being downloaded.

Guideline

  • Place <script> tag in <head>
  • Use async as default
  • Defer Scripts that needs a fully built DOM - Use defer if you need to wait for the whole DOM to load before executing the JS (or if the JS can wait).
  • Not using async/defer is an anti-pattern
  • <script> tag in the footer is an anti-pattern.

Load only what you Need

Imagine your website as a car. Loading unnecessary Javascript and CSS files is like carrying excess baggage in your trunk, slowing you down. The first step to optimal performance is to load only what's necessary. Utilize the Coverage tab in DevTools to identify unused code. Trim down your bundles to include only essential code, ensuring faster loading times and smoother user experiences.

Only execute what's required

  • **Code Splitting ** Splitting JS at route level or component/functional level

  • JS Minification To minify JS, comments and extra spaces removed which will reduce the file size drastically.

  • Tree Shaking Using concepts like tree-shaking to remove any unused code during the build proces itself, helps us keep asset sizes optimized.

  • **Avoid Render blocking - Defer JS ** The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading.

  • Differential Loading Javascript can be reduced by removing libraries and relying more on native functionality of the browsers. Avoid polyfills where modern browsers are core target.

  • Sequencing / Optimizing number of requests on the pages Continual analysis of the sequence of the requests which are going and whether those requests are actually needed for the page or not.

Optimize SEO Ranking

  • Conduct keyword research to identify relevant keywords.
  • Optimize meta tags (title, description) for target keywords.
  • Use header tags (H1, H2, H3) to structure content and include keywords.
  • Implement schema markup to enhance search visibility.