Author: Tanvi Nadkarni (Frontend Engineer)

Why web page performance matters !

High performance web pages matter because they improve the user experience, boost SEO rankings, and increase conversions. When a website loads quickly, users are more likely to stay on the page and interact with it. This can lead to increased conversions, such as sales or sign-ups. Additionally, fast loading websites are more likely to rank higher in search engine results pages (SERPs). This is because Google and other search engines factor in page load speed when ranking websites.

When I worked at Macy's and Ebay, I learned first hand the importance of pages that load quickly. For every extra 100ms that the page takes to load, the company loses revenue in thousands of dollars. This might be hard to understand initially but when you look at the scale that involves millions of users it becomes obvious.

Bad pages not only give bad user experience but over time it also destroys the brand image of the company for your users as well as search engines. You will see that your search engine rank goes lower and lower as your pages become bloated.

Wiseland's Engineering uses NextJS for all our front end requirements and hence we are in a unique position to describe all the cool things we have done to improve web page performance.

Understanding the metrics that determine web page performance.

Over years, front end engineers have developed a deeper sense of what web page performance means. When internet speeds were low, the single factor that matters was how long it takes for the page to load on the browser and nearly all optimizations involved reducing the page payload. But things have changed a lot since then.

Today, users use multiple devices and multiple internet connections. Some use high speed fiber while some rely on unreliable 4G connections. Your app needs to adapt to all these different scenarios. But the apps have become complex too. Some apps like Gmail or Facebook are extremely complex and deeply feature rich. This makes performance very tricky.

To simplify what performance means the front end engineering community has figured out which numbers matter the most. Let us see what they are.

• Time to First Byte (TTFB): This is the time it takes for the first byte of data from the server to be received by the browser.
• First Contentful Paint (FCP): This is the time it takes for the first piece of content to be rendered on the page.
• Largest Contentful Paint (LCP): This is the time it takes for the largest piece of content on the page to be rendered.
• First Input Delay (FID): This is the time it takes for the browser to be able to respond to the user's first input.
• Time to Interactive (TTI): This is the time it takes for the page to be interactive, meaning that the user can scroll, click, and interact with the page without any delays.
• Total Blocking Time (TBT): This is the total amount of time that the page is blocked from loading due to JavaScript, CSS, or images.
• Cumulative Layout Shift (CLS): This is a measure of how much the content on the page shifts as it loads. These metrics can be used to track the performance of your web pages over time and identify areas where performance can be improved. There are a number of tools available that can help you measure these metrics, such as Google PageSpeed Insights, Lighthouse, and WebPageTest.

Time to First Byte (TTFB)

Time to First Byte (TTFB) is a measure of how long it takes for the first byte of data from a web server to be received by the browser. It is a critical metric for web page performance, as it affects the initial loading time of the page.

There are a number of factors that can affect TTFB, including:

• The location of the web server: The closer the web server is to the user's location, the lower the TTFB will be.
• The load on the web server: If the web server is under heavy load, TTFB will increase.
• The type of content on the page: Pages with large images or videos will have a higher TTFB than pages with text and small images.
• The configuration of the web server: The configuration of the web server can also affect TTFB.

There are a number of things that can be done to improve TTFB, including:

• Use a Content Delivery Network (CDN): A CDN can help to deliver web pages more quickly by caching them in servers that are closer to the user's location.
• Optimize images: Images can be a major source of TTFB, so it is important to optimize them for the web. This can be done by reducing their file size and using the correct file format.
• Minify code: JavaScript and CSS files can also be a major source of TTFB. Minifying these files can reduce their size and improve performance.
• Use a fast web host: The web host you choose can have a big impact on TTFB. Choose a web host that has a good reputation for speed and reliability.

First Contentful Paint (FCP)

First Contentful Paint (FCP) is a metric that measures the time it takes for the first piece of content to be rendered on a web page. It is a critical metric for web page performance, as it affects the initial loading time of the page.

A low FCP indicates that the page is loading quickly and providing a good user experience. A high FCP can indicate that the page is loading slowly and may be frustrating for users.

There are a number of things that can be done to improve FCP, including:

• Optimize images: Images can be a major source of FCP, so it is important to optimize them for the web. This can be done by reducing their file size and using the correct file format.
• Minify code: JavaScript and CSS files can also be a major source of FCP. Minifying these files can reduce their size and improve performance.
• Use a Content Delivery Network (CDN): A CDN can help to deliver web pages more quickly by caching them in servers that are closer to the user's location.
• Prioritize critical rendering paths: Critical rendering paths are the parts of a web page that are essential for the initial user experience. By prioritizing these paths, you can ensure that they are loaded first, which can improve FCP.
• Use lazy loading: Lazy loading is a technique that defers the loading of images and other resources until they are needed. This can help to improve FCP by reducing the amount of content that needs to be loaded initially. By following these tips, you can improve FCP and provide a better user experience for your website visitors.

Here are some additional tips for improving FCP:

Use a caching plugin: A caching plugin can help to store static content, such as images and CSS files, on the user's device. This can reduce the number of requests that need to be made to the web server, which can improve FCP.

Use a CDN with a good network of servers: A CDN with a good network of servers can help to deliver web pages more quickly to users around the world.

Keep your web server up to date: Make sure that your web server is running the latest version of software. This can help to improve performance and security.

Monitor your FCP: Use a tool like Google PageSpeed Insights or Pingdom to monitor your FCP over time. This will help you to identify areas where performance can be improved.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time it takes for the largest content element on a web page to become visible. It is a critical metric for web page performance, as it affects the initial loading experience of the page.

A low LCP indicates that the page is loading quickly and providing a good user experience. A high LCP can indicate that the page is loading slowly and may be frustrating for users.

Here are some tips on how to improve LCP:

• Optimize images: Images can be a major source of LCP, so it is important to optimize them for the web. This can be done by reducing their file size and using the correct file format. Perfer webp over other formats.
• Minify code: JavaScript and CSS files can also be a major source of LCP. Minifying these files can reduce their size and improve performance. NextJs does this automatically for you.
• Use a Content Delivery Network (CDN): A CDN can help to deliver web pages more quickly by caching them in servers that are closer to the user's location.
• Prioritize critical rendering paths: Critical rendering paths are the parts of a web page that are essential for the initial user experience. By prioritizing these paths, you can ensure that they are loaded first, which can improve LCP.
• Use lazy loading: Lazy loading is a technique that defers the loading of images and other resources until they are needed. This can help to improve LCP by reducing the amount of content that needs to be loaded initially.

In addition to these tips, there are a number of other factors that can affect LCP, such as the size of the page, the number of images, and the use of third-party scripts. By optimizing these factors, you can improve LCP and provide a better user experience for your website visitors.

Here are some additional tips for improving LCP:

Use a caching plugin: A caching plugin can help to store static content, such as images and CSS files, on the user's device. This can reduce the number of requests that need to be made to the web server, which can improve LCP.

Use a CDN with a good network of servers: A CDN with a good network of servers can help to deliver web pages more quickly to users around the world.

Keep your web server up to date: Make sure that your web server is running the latest version of software. This can help to improve performance and security.

Monitor your LCP: Use a tool like Google PageSpeed Insights or Pingdom to monitor your LCP over time. This will help you to identify areas where performance can be improved.

First Input Delay (FID)

First Input Delay (FID) is a Core Web Vital metric that measures the time it takes for a user to interact with a web page after it has started loading. It is a critical metric for web page performance, as it affects the responsiveness of the page.

A low FID indicates that the page is responsive and providing a good user experience. A high FID can indicate that the page is unresponsive and may be frustrating for users.

Optimizing this metric is tricky as each web page is different. The way you should think about this is to make the page as much static and non interactive as possible by eliminating all the culture. Having too many buttons, too many dropdowns and too many links will always hurt the FID score.

Improving FID means reducing bloat and keeping user options on the page limited.

Time to Interactive (TTI)

Time to Interactive (TTI) is a Core Web Vital metric that measures the time it takes for a web page to become fully interactive. This means that the page is able to respond to user input, such as clicking on a button or scrolling down the page.

A low TTI indicates that the page is interactive and providing a good user experience. A high TTI can indicate that the page is not interactive and may be frustrating for users.

Improving this is very much similar to improving FID. Have as little interactive elements as possible on the page when the page is fully loaded. You can load more when the user scrolls on indicates that they want more options.

Total Blocking Time (TBT)

Total Blocking Time (TBT) is a Core Web Vital metric that measures the total amount of time that a page is blocked from responding to user input due to JavaScript, CSS, or images. A low TBT indicates that the page is responsive and providing a good user experience. A high TBT can indicate that the page is unresponsive and may be frustrating for users.

Understand how CSS and Javascript executes in the browser. Having too many CSS rules and complex heavy javascript functions makes the page spend time using CPU cycles and blockers the rendering of the page. This is perhaps the single biggest factor that frustrates users.

Avoid render-blocking resources: Identify and eliminate or defer render-blocking resources like CSS and JavaScript that prevent the page from rendering and becoming interactive quickly.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a web performance metric that measures the visual stability of a web page during its loading phase. It quantifies how much the layout of a page shifts as new content loads or changes, leading to unexpected and disruptive shifts in elements that users are interacting with. CLS is important because it directly impacts the user experience by preventing frustrating and confusing movements of elements on the page.

CLS is calculated by multiplying the impact fraction (the proportion of the screen affected by the layout shift) with the distance fraction (how far the element moved relative to the viewport). The sum of all individual layout shift scores is the cumulative layout shift.

To improve CLS, consider the following strategies:

Specify image dimensions: Reserve the required space for images by specifying their dimensions in the HTML or CSS. This prevents content from shifting when images load.

Prefer intrinsic sizes for media: Use the width and height attributes for multimedia elements (images, videos, iframes) to avoid sudden changes in layout when the media content loads.

Avoid dynamically injected content above existing content: Ensure that content added dynamically doesn't cause layout shifts above the existing page content. Reserve space or use placeholders for dynamic content.

Use CSS animations carefully: If you use CSS animations, make sure they don't interfere with the layout. Use transform and opacity instead of changing properties that can affect layout, like width or height.

Load web fonts with font-display: swap: This ensures that text retains its fallback font until the web font is fully loaded, preventing layout shifts caused by text resizing.

Avoid inserting content above existing content: When adding new content dynamically, avoid inserting it at the top of the page, as this can push the existing content down and cause a layout shift.

Optimize third-party scripts and embeds: Third-party scripts and iframes can introduce layout shifts. Check their loading behavior and use the loading="lazy" attribute for iframes.

Set image aspect ratios with CSS: Use CSS techniques (e.g., padding-top or padding-bottom) to control image aspect ratios. This helps reserve space for images before they load.

Test across different devices and network conditions: Test your website's CLS on various devices and network conditions to ensure a consistent user experience across different scenarios.

Monitor and analyze CLS: Use tools like Google PageSpeed Insights, Lighthouse, or Web Vitals to monitor and analyze your website's CLS score. These tools can provide insights and suggestions for improving CLS.

By focusing on minimizing unexpected layout shifts, you can improve the Cumulative Layout Shift of your web page, providing a smoother and more enjoyable user experience for your visitors.

Monitoring performance of your web pages

The most crtical thing to ensure high performance websites is to make sure you actually monitor performance on per page basis for every device that matters. You should collect scores for all above metrics on regular basis and think about how to improve them constantly.

Lighthouse

This is a simple tool built into Chrome Developer Tools. It gives you score for your webpage and also highlights how you can do better. This is a google built tool and is free to use. However it is meant for individual develoeprs to use.

Pingdom

Pingdom: Pingdom monitors your website's uptime and performance from multiple locations globally. It provides page speed analysis, transaction monitoring, and real user monitoring (RUM) options. Find it at: https://www.pingdom.com/

Dynatrace

This tool offers end-to-end performance monitoring and user experience analysis for websites and applications. It helps identify performance bottlenecks and provides real-time insights. Visit: https://www.dynatrace.com/

SpeedCurve

SpeedCurve provides continuous monitoring of your website's performance over time. It offers filmstrips, detailed metrics, and comparisons to competitor websites. Explore it at: https://speedcurve.com/.

Moz.com

We at Wiseland recommend using Moz.com to monitor SEO perfomance of your website if SEO matters to you. often SEO data is a far better indicator of overall quality of your web pages.