Why Website Speed Matters And How To Improve It

In today's digital World, website performance is directly linked to the success of your online business. Websites that load quickly retain users better than those with slower load times. For example, a case study on How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate ,demonstrates the real cost of website performance. In this blog, we'll explore the key factors that make a website faster and how you can improve your site's speed.

1. Reducing Time to First Byte(TTFB):

• TTFB is a metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.

• The First Request for Web Page is for an Html resource. So Reducing TTFB for first resource loading will make website load quickly

• To measure the Time to First Byte (TTFB) for a website, you can generate a Lighthouse report using your browser's developer tools. Start by right-clicking on the website and selecting "Inspect." Navigate to the "Lighthouse" tab within the developer tools. From there, click on "Analyze page load" to generate the report. Once the analysis is complete, you can find the TTFB details in the relevant section of the report, similar to the example shown in the attached image.
  

  

• Try to minimize the redirects as it requires browser to make an additional request. Focus on reducing Same origin redirects because as you have control over it while managing cross origin redirects can be tough as it is generally is out of your control.

• Use Content Delivery Network(CDN) as they helped in quick loading by caching and compressing static resources.

• A TTFB time of 0.8 second or less is considered good for websites

2. Reduce First Content full Paint(FCP)

• It is the time from when the user first navigated to the page to when any part of the page content is rendered on the screen

• Like TTFB Metrices you can find this metrics in Lighthouse Generated Report similar to the example attached in below image
  

  

• To provide a good user experience, sites should strive to have a First Contentful Paint of 1.8 seconds or less.

• To Reduce the FCP time you need to figure out the critical resources required for FCP and which are not you can find this by right click on website go to inspect and click on 3 dots before cross icon and select run command and run show coverage command. It will give you a report like below image
  

  

• Identify the critical JS and CSS and move that from render blocking URL to an inline tags because former blocks the parsing of html page. For URL contains non critical JS and CSS mark them with async or defer attributes.

3. Reduce Largest Content full Paint(LCP)

• It reports the render time of the largest image, text block or video visible in the viewport, relative to when the user first navigated to the page.

• You can find this metrices similar to the TTFB metrices, similar to the example shown in the attached image.
  

  

• To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less.

• Focus on zero downing delays because other two task is network requests so they definitely take some time.

• To reduce the load delay never ever lazy load you LCP resource and try to give them high priority for loading. you can add it by writing below code.

  <img fetchpriority="high" src="/path/to/hero-image.webp">

• To Reduce render delay there is not much other than writing optimized CSS and JS and removing unused CSS and JS.

• To Reduce the load time try to host the LCP resource on same origin as if it is hosted on different origin browser need to connect to that origin before.

4.Reduce the Cumulative Layout Shift(CLS)

• Cumulative Layout Shift (CLS) measures the largest burst of layout shift scores caused by unexpected layout shifts that occur throughout the entire lifecycle of a page.

• To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.

• You can find this metrices similar to the TTFB metrices, similar to the example shown in the attached image.
  

  

• To reduce CLS try to give aspect ratio to images and iframes this inform browser to allocate the correct amount of space in the layout before the image is fully downloaded and prevents any unexpected layout shifts.

• Load critical web fonts as early as possible using <link rel=preupload>.Preload font will have higher chance to meet the first paint, causing no layout shifting and use appropriate fallback font not using will cause high layout shift

5. Reduce the Interaction to Next Paint(INP)

• The Interaction to Next Paint (INP) metric evaluates a page's overall responsiveness by measuring the latency of all click, tap, and keyboard interactions that occur during the user's entire visit to the page.

• To provide a good user experience, websites should strive to have an Interaction to Next Paint of 200 milliseconds or less

• You can find this metrices similar to the TTFB metrices, similar to the example shown in the attached image.
  

  

• Reducing input delay can have positive impact on INP that can be done by breaking up long JS task into smaller task this allow main thread to response to user interaction more quickly.

• Processing duration can be lowered by running only critical logic required for an event and deferring all other logic.

• Presentation delay can be improved by limiting the DOM size. You can use react like virtual DOM to update DOM efficiently.