Website Performance Metrics

on

 

Web performance

Web performance is the objective measurement and perceived user experience of a web site or application. Web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction. Bad performing sites are slow to display and slow to respond to input.
Good website performance is a cornerstone of any successful website because it’s the first event that all visitors experience. First impressions influence how users feel about a website, its associated business or organization, and whether or not they convert, buy, or bounce.

Good or bad website performance correlates powerfully to user experience, as well as the overall effectiveness of most sites. This is why you should care about web performance.

The perception of how quickly (and smoothly) pages load and respond to user interaction is even more important that the actual time required to fetch the resources. While you may not be able to physically make your site run faster, you may well be able to improve how fast it feels for your users.

Measuring performance

Measuring performance provides an important metric to help you asses the success of your app, site, or web service.

Important metrics to measure
Time to First Byte (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server(You can measure TTFB in Google Chrome by launching DevTools.). This time includes DNS lookup and establishing the connection using a TCP handshake and SSL handshake if the request is made over https.



It is a metric for determining the responsiveness of a web server. It measures the amount of time between creating a connection to the server and downloading the contents of a web page.


The time it takes to load a web page has an enormous impact on customer retention. When 40% of users abandon a website that takes more than 3 seconds to load, having a low TTFB becomes essential. It not only reduces the chance of losing a customer, but ensures users have a fast and engaging online experience.


Optimizing TTFB benefits both users and content providers.

    • Users see an improved browsing experience since they have to spend less time waiting for a web service to generate a response.
    • Enterprises see higher customer engagement and retention as users are less likely to leave due to delays or slow loading times.


First Contentful Paint (FCP)

First Contentful Paint is an important metric for judging the page load timeline because it marks the point where a user can see that something is happening on the screen. Without this reassurance, a user might leave the page to browse a faster website.
Google recommends a First Contentful Paint scoring of 1.8 seconds or less in order to provide your site visitors with a good browsing experience.
If you have a high First Contentful Paint (FCP), it's likely due to one of these factors:
  • Slow font load time
  • Slow server response times (TTFB)
  • High request counts and large transfer sizes
  • Render-blocking resources
  • Unused or inefficient CSS
  • Script-based elements above the fold
  • Lazy loading above the fold
  • Not inlining images above the fold
  • Excessive DOM size
  • Multiple page redirects

In the above load timeline, FCP happens in the second frame, as that's when the first text and image elements are rendered to the screen.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a performance metric introduced in 2020 by Lighthouse to better measure the perceived loading experience for users.

In the simplest terms, LCP measures how long it takes for the largest "content element" (e.g., hero image, heading text, etc.) on your page to become visible within your visitor's viewport.

To provide a good user experience, you should strive to have a Largest Contentful Paint of 2.5 seconds or less on your website. A majority of your page loads should be happening under this threshold.


improve the Largest Contentful Paint performance
  1. Improve the Time to First Byte and Reduce Server Response Time
  2. Use a CDN
  3. Defer JavaScriptRemove
  4. Unused JavaScript
  5. Defer Non-Critical CSS, Inline Critical CSS, and Remove Unused CSS
  6. Minify CSS and JS Files
  7. Optimize Your Images
  8. Compress Text Files
  9. Use Preload for Critical Assets
  10. Establish Third-party Connections Early

First input delay (FID)

First input delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.


A good FID score needs to have a First Input Delay of less or equal to 100 milliseconds.



Improve FID


TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:

The page displays useful content, which is measured by the First Contentful Paint, Event handlers are registered for most visible page elements, and The page responds to user interactions within 50 milliseconds.


Total Blocking Time (TBT)

Total Blocking Time (TBT) is the total amount of time that the main thread of a webpage gets blocked due to long tasks, preventing it from responding to user interactions while processing the load. Apart from the core web vitals, it is a crucial lab metric that measures the responsiveness or usability of a web page before it becomes fully interactive.

TBT is the total time between the First Contentful Paint (FCP) and Time to Interactive (TTI). The main thread of the browser usually executes several tasks during a web page load, and TBT specifically depends on the number of long tasks running during that time.


Search engine algorithms consider the user experience when ranking web pages. If a web page has many blocking tasks, it can affect search queries by users that need a quick response, so having many blocking tasks can directly impact the SEO rankings of a page


improve your TBT score
  1. Remove (or reduce) unused Javascript
  2. Reduce Javascript execution time
  3. Minify CSS and JS
  4. Eliminate render-blocking resources
  5. Reduce the impact of third-party code
  6. Enable text compression
  7. Avoid chaining critical requests
  8. Avoid enormous network payloads
  9. Minimize main thread work
  • Cumulative Layout Shift (or CLS)
  • Cumulative Layout Shift (or CLS) is a measure of how much a webpage unexpectedly shifts during its life. For example, if a website visitor loaded a page and, while they were reading it, a banner loads and the page jumps down, that would constitute a large CLS score.


  • To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. 
  • A layout shift occurs any time a visible element changes its position from one rendered frame to the next. 
  • The kinds of elements that tend to cause shift are fonts, images, videos, contact forms, buttons, and other kinds of content.
    Minimizing CLS is important because pages that shift around can cause a poor user experience.
    A poor CLS score is indicative of coding issues that can be solved.

  • improve/optimize CLS 

    As a general rule, follow these recommendations to reduce the amount of shifting on screen:

      1. Provide sizes for elements that support sizing for proper rendering.
      2. If you do not know the exact size of the elements, allocate screen real estate that can fit the largest possible piece.
      3. Display dynamic content that could change the rendering below the fold (the first screen) or below the current viewport. If shifting occurs, the user will not be affected.
      4. Make sure that your ad partners provide all of the specs you need to reduce any layout shifting.
      5. Avoid web fonts that change the look of the page after it has been loaded.


  • Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is Google's latest field metric for web performance that measures responsiveness, similar to First Input Delay (FID) - which is currently one of three Core Web Vitals. (INP) is an experimental metric 


Further Reading
https://www.npmjs.com/package/web-vitals

https://web.dev/

https://nitropack.io/

https://wp-rocket.me/google-core-web-vitals-wordpress/improve-largest-contentful-paint/











Location: Bihar 847402, India

Comments

Post a Comment