Web Performance Metrics & Optimization

Web performance is all about making websites fast, including making slow processes seem fast. Does the site load quickly, allow the user to start interacting with it quickly, and offer reassuring feedback if something is taking time to load ?

Are scrolling and animations smooth? This session provides a brief introduction to objective, measurable web performance, looking at what technologies, techniques, and tools are involved in web optimization.

  1. Largest Contentful Paint (LCP)

    Largest Contentful Paint or LCP is one of the metrics from core web vitals to measure the value of loading time based on element rendering.

    LCP is the time required by the website to display the main content and ready to interact with the user. This metric calculates loading time, so the value is calculated in seconds. What is measured in LCP is the largest element or block in the user's viewport.

    This means that the element that is counted is the content that is first seen by the user. Some of these elements can be images, posters, backgrounds, and also text.

    Web with LCP issue :

    LCP Issue

    Web with good LCP :

    No LCP Issue

    How to Improve LCP ?

    • Reduce Size Image
    • Use WEBP for Format Image
    • Cache Image
    • Preload
    • Fetchpriority
    • Lazy Loading

  2. First Contentful Paint (FCP)

    First Contentful Paint (FCP) is a performance metric that measures the time it takes for the first piece of content to appear on a webpage. FCP is the time it takes for the browser to visualize the first piece of DOM content (e.g. image, SVG, non-empty canvas element) on the page.

    To enhance FCP, minimize unnecessary third-party scripts, leverage browser caching, and compress images. Implementing asynchronous loading for non-essential resources and prioritizing above-the-fold content also contribute to a faster FCP.

    FCP

    How to Improve FCP ?

    a. Eliminate render-blocking resources

    • Identify Render Blocking Resource.
    • Eliminate Render Blocking JavaScript with 'defer' and 'async'
    • Don't Add @import to Your CSS Code.
    • Remove Unused CSS and JavaScript Code.
    • Use Media Attributes.
    • Split Code Into Smaller Bundles.
    • Deferring the Use of Non-critical CSS.

    b. Minify CSS (You can use purgeCSS)

    c. Assets

    • Use Static Assets
    • Use SVG for format icons & animations
    • Image Optimization
    • Improve font load time

  3. Cumulative Layout Shift (CLS)

    Cumulative Layout Shift (CLS) is a CWV metric that calculates the visual stability of a webpage during the loading process. It quantifies the amount of unexpected layout shifts that occur as the page loads and is crucial for assessing the user experience.

    CLS measures how much your webpage layout unexpectedly moves during page load. To fix it and stabilize your layouts, make sure images and ads have fixed sizes, reserve space for ads, and load styles before scripts.

    CLS

    How to Improve CLS ?

    • Add Image Dimension
    • Reserve Space Element
    • Avoid inserting new content without a user interaction

  4. Interaction to Next Paint (INP)

    INP is a metric that assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page. The final INP value is the longest interaction observed, ignoring outliers.

    An interaction is a group of event handlers that fire during the same logical user gesture. For example, "tap" interactions on a touchscreen device include multiple events, such as pointerup, pointerdown, and click. An interaction can be driven by JavaScript, CSS, built-in browser controls (such as form elements), or a combination thereof.

    INP

    As the purposes of INP, only the following interaction types are observed :

    • Clicking with a mouse.
    • Tapping on a device with a touchscreen.
    • Pressing a key on either a physical or onscreen keyboard.

    Unlike FID (First Input Delay), which only measures the time taken for a browser to respond to a user’s first interaction, INP observes all user interactions on a page and provides an overall score.

  5. Time To First Byte (TTFB)

    TTFB is the time taken shortly after the user makes a URL request (for example, clicking Go! on the browser's Address Bar). The process includes opening a socket connection to the Internet, DNS resolving, until the web server provides a response output of the first few bytes of data.

    TBT

    How to Improve TTFB ?

    • GPU & Network Provider
    • Use good Hosting
    • Cache control
    • Handle Third Party

  6. Total Blocking Time (TBT)

    Total Blocking Time (TBT) is a web performance metric that measures the time during page loading when the main thread is blocked and users experience delays interacting with the page.

    The main thread is considered "blocked" any time there's a Long Task a task that runs on the main thread for more than 50 milliseconds. We say the main thread is "blocked" because the browser cannot interrupt a task that's in progress. So in the event that a user does interact with the page in the middle of a long task, the browser must wait for the task to finish before it can respond.

    TBT

    How to Improve TBT ?

    • Minimize Main-Thread Work
    • Minify CSS (use PurgeCSS)
    • Handle Third Party (use Partytown)

Conclusion

  1. Code

    • Code Splitting
    • Lazy Hydration
    • Improve font load time
    • Reserve Space
    • Eliminate render-blocking resources

  2. Assets

    • Static Assets
    • Use WEBP for format image
    • Use SVG for format icons & animations
    • Image Optimization

  3. JS & CSS

    • Handle Third Party
    • Minify CSS

  4. Stack

    • Next JS
    • Nuxt JS