Chapter 3. Technical SEO

How To Improve Website Performance (Page Experience)

How To Improve Website Performance (Page Experience)
Tag:

Enhancing your website's performance directly impacts the page experience, a crucial SEO ranking factor. This learning section dives into how to improve website performance, with emphasis on Core Web Vitals — one of the key metrics for assessing page experience.

Addressing Core Web Vitals is also vital to improving user metrics, such as lowering bounce rates by avoiding losing users during page loading and increasing average user engagement time through better user experience.

As page experience gains prominence in SEO criteria, mastering these optimization techniques becomes vital for boosting your site's search engine rankings and user satisfaction.

What is Page Experience and Website Performance?

Page Experience refers to a set of signals that Google uses to measure how users perceive the experience of interacting with a web page beyond its pure information value.

Google Search Central, the Google official document, describes page experience in four aspects: Core Web Vitals, Mobile Friendliness, Security, and Intrusive Interstitials and Dialogs.

Core Web Vitals:

As explained earlier in "What Is a Website Audit and How To Do It?", Google introduced Core Web Vitals as a set of specific factors to determine a webpage's overall user experience from the speed and UI stability point of view. Core Web Vitals include:

Largest Contentful Paint (LCP):

  • LCP measures loading performance, the time it takes for the largest content element visible in the viewport to load and render fully on the page.
  • This could be an image, video, or a block of text. LCP is important for understanding user experience, as it indicates how long a user waits to see the main content of a page.
  • A good LCP score is 2.5 seconds or faster.
Largest Contentful Paint (LCP) Illustration

For more details, refer to this article by web.dev – Largest Contentful Paint (LCP).

Interaction to Next Paint (INP):

  • INP is a newly developed metric that replaced First Input Delay (FID) as one of the Core Web Vitals on March 12, 2024.
  • INP measures interactivity, the responsiveness of a web page, by quantifying the delay between user interactions (such as clicks, taps, or key presses) and the visual response or feedback from the page.
  • Unlike metrics focusing solely on load performance, INP captures the user's experience of a site's interactivity and responsiveness throughout their visit.
  • It aims to identify the worst-case latency of critical user interactions, providing insights into the site's perceived speed and fluidity.
  • A good INP score is 200 milliseconds or faster.

For more details, refer to this article by web.dev – Interaction to Next Paint (INP).

Interaction to Next Paint (INP) Illustration

Cumulative Layout Shift (CLS):

  • CLS measures a website's visual stability by quantifying how much content shifts on the screen during the loading phase.
  • These shifts can occur when elements on the page load asynchronously or when elements are dynamically added to the page, causing unexpected movement of content that the user was viewing or interacting with.
  • A good CLS score is 0.1 or less.
Cumulative Layout Shift (CLS) Illustration

For more details, refer to this article by web.dev – Cumulative Layout Shift (CLS).

Note: First Input Delay (FID):

  • First Input Delay (FID) measures interactivity. It was one of the Core Web Vitals until it was replaced by Interaction to Next Paint (INP).
  • FID measures the time from when a user first interacts with a page (i.e., when they click on a link, tap on a button, etc.) to when the browser can actually begin processing event handlers in response to that interaction.
  • A good FID score is 100 milliseconds or faster.
  • First Input Delay (FID) only accounts for the first interaction, while INP covers all page interactions. FID also only measures the first interaction's input delay. It doesn't have time to run event handlers or the delay in presenting the next frame.

For more details, refer to this article by web.dev – First Input Delay (FID).

First Input Delay (FID) Illustration

Mobile Friendliness

Mobile-friendliness includes responsive design (where the site layout adjusts to fit the screen size), fast loading times, accessible menus and buttons, and readable text without zooming.

Creating a mobile-friendly site is essential as Google emphasizes mobile-first indexing – Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking.

Responsive design is one of the most critical techniques for building a mobile-friendly website. It adjusts the website design to any screen size, ensuring optimal viewing across devices. It uses flexible layouts and CSS media queries to adapt to the user's device, improving accessibility and user experience. This approach eliminates the need for device-specific designs, making websites universally usable.

For more details, refer to this Google Search Central documentation – Mobile site and mobile-first indexing best practices.

Responsive Design

Security

Security directly affects user trust and safety when visiting a website. Search engines prioritize secure websites in their rankings to provide users with safe browsing experiences.

HTTPS

Websites secured with HTTPS (Hypertext Transfer Protocol Secure) encrypt data transmitted between the user and the server, protecting against eavesdropping, tampering, and man-in-the-middle attacks.

Google has confirmed HTTPS as a ranking signal, meaning secure websites may rank higher than their non-secure counterparts.

To use HTTPS, you need to set up SSL (Secure Sockets Layers). To understand it, you can refer to our SSL Setup guide.

HTTPS (Hypertext Transfer Protocol Secure) Mechanism

Safe Browsing

Websites should be free from malware, phishing, and deceptive content. Search engines penalize sites that compromise user safety, potentially by removing them from search results or marking them as unsafe.

Intrusive Interstitials and Dialogs

Intrusive interstitials and dialogs refer to pop-ups, overlays, and modal dialogs that significantly hinder or obstruct the view of the main content on a webpage.

With limited screen space, these elements can be particularly disruptive on mobile devices.

They include advertisements, subscription forms, and prompts that cover the content or require user action to be dismissed.

Google and other search engines may penalize websites using intrusive interstitials, especially if they appear before accessing the main content, as they negatively impact the user experience and accessibility of the website.

For more details, refer to this Google Search Central documentation – Avoid intrusive interstitials and dialogs.

Intrusive Interstitials illustration

How to improve website performance?

Website performance or page performance is often measured by Core Web Vitals, a critical part of page experience.

The starting point for website and page performance is site or page auditing, as explained in "What Is a Website Audit and How To Do It?"

PageSpeed Insights, Lighthouse, or other technical SEO audit tools provide detailed instructions to improve performance.

Generally, you can improve page and site performance by following the instructions from the high-impact recommendations.

Based on several sources, we listed frequently observed potential improvement areas below.

Image Optimization

Image file size optimization

Images often account for most of a web page's downloadable bytes. Optimizing image file sizes through compression can drastically reduce the amount of data transferred while maintaining visual quality.

PNG and JPEG are frequently used file formats for the images; however, you have a better choice now, which is WEBP.

WEBP is a modern image format developed by Google for the web, offering superior compression for lossless and lossy images. It achieves smaller file sizes than JPEG and PNG formats, supporting transparency and animation. This efficiency enhances web speeds, reduces bandwidth usage, and improves user experience.

WEBP is now more widely used and supported by most browsers except Internet Explorer.

To understand WEBP better, refer to this article by web.dev – Use WebP images.

How To Optimize Image File Size – WEBP

Lazy and eager loading (Managing Above the Fold)

Lazy loading defers the loading of non-critical resources at page load time. Instead, these resources are loaded at the moment they are needed (typically when they enter the viewport).

This can significantly improve loading times, especially for pages with many images. Conversely, eager loading ensures that essential, above-the-fold content is loaded immediately, which is crucial for maintaining a good user experience.

To understand lazy loading better, refer to this article by web.dev — Use WebP images.

Responsive Images

Responsive images are a web design technique that serves different image files to users based on the size and resolution of their device's screen.

To understand responsive images better, you can refer to the following articles.

Illustration of responsive images

Image width and height

Specifying the width and height of images in your HTML or CSS helps maintain your page layout as images load, preventing unexpected layout shifts.

This practice contributes to a smoother, more stable visual experience for your users.

Code minimization

There are two approaches to code minimization – removing unused code and minifying code.

Remove unused CSS and JavaScript

Over time, websites accumulate code that may no longer be used, leading to unnecessary bloat.

You can reduce file sizes and improve loading times by auditing your website’s resources and stripping away unused CSS and JavaScript.

To understand this better, you can refer to the following articles.

Minify CSS and JavaScript

Minification is a process that removes all unnecessary characters from source code (such as whitespace, comments, and new line characters) without affecting the functionality.

This process can substantially reduce file sizes, leading to faster page load times.

To understand this better, you can refer to the following articles.

Cache and Network Optimization

Server Caching

Server caching stores copies of rendered web pages on the server, allowing for quick retrieval on subsequent requests.

Implementing server-side caching mechanisms can dramatically decrease load time for repeat visitors by dynamically bypassing the need to generate pages for each request.

Server Caching and Browser Caching

Browser Caching

By leveraging browser caching, you can instruct visitors' browsers to store certain parts of your website locally.

This reduces load time for repeat visitors as the browser can load stored versions of resources instead of fetching them from the server again. Properly configuring your website’s cache-control headers is essential for effective browser caching.

CDN (Content Delivery Network)

A CDN distributes your website's static assets across a network of servers worldwide, allowing users to download content from the server closest to them.

This significantly reduces latency and improves site speed. Integrating a CDN is particularly beneficial for websites with a global audience, as it ensures all users have a fast-loading experience regardless of their geographical location.

How CDN (Content Delivery Network) works

Font Optimization

Remove unused fonts

Loading fonts can extend the entire web page loading time. You should evaluate your use of web fonts and remove any that aren't necessary, focusing on using a minimal set of font styles and weights to reduce loading overhead.

Optimize font delivery

Optimizing font delivery can minimize render-blocking behavior and speed up text visibility.

Techniques include using font-display: swap to ensure text remains visible during font loading, subsetting fonts to include only the characters used on your site, and serving fonts from a CDN for faster delivery.

Others

Server spec or hosting service upgrade

As your website grows, so do its resource requirements. Upgrading your server hardware or switching to a more robust hosting solution can provide the additional processing power and bandwidth needed to improve site performance. Consider cloud hosting options for scalability and flexibility.

Reduce redirections

Each redirection introduces additional HTTP request-response cycles, delaying the delivery of content. Minimizing redirections (such as 301s and 302s) can shave off precious milliseconds from your load time.

Remove unnecessary plugins

Plugins extend the functionality of your website but can also slow it down. Audit your plugins regularly and deactivate or delete any that are not essential to your site’s operation. This not only speeds up your site but also reduces security vulnerabilities.

AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages) is an open-source initiative aiming to make the web better for all.

By creating lightweight versions of web pages that load instantly on mobile devices, AMP can improve the mobile browsing experience.

However, the landscape around web performance and development best practices has evolved, leading to mixed sentiments regarding AMP:

Conclusion

Improving website performance is key to better user experience and SEO ranking, focusing on Core Web Vitals to boost page experience. These optimizations aim at enhancing loading speed, interactivity, and visual stability, directly influencing user metrics like lower bounce rates and longer engagement times.

As Google emphasizes page experience for rankings, mastering these techniques is crucial for digital success, making your site more appealing to search engines and users.


You can also learn this topic on Kindle. ClickAmazonKindle.

Enhancing your website's performance directly impacts the page experience, a crucial SEO ranking factor. This learning section dives into how to improve website performance, with emphasis on Core Web Vitals — one of the key metrics for assessing page experience.

Addressing Core Web Vitals is also vital to improving user metrics, such as lowering bounce rates by avoiding losing users during page loading and increasing average user engagement time through better user experience.

As page experience gains prominence in SEO criteria, mastering these optimization techniques becomes vital for boosting your site's search engine rankings and user satisfaction.

What is Page Experience and Website Performance?

Page Experience refers to a set of signals that Google uses to measure how users perceive the experience of interacting with a web page beyond its pure information value.

Google Search Central, the Google official document, describes page experience in four aspects: Core Web Vitals, Mobile Friendliness, Security, and Intrusive Interstitials and Dialogs.

Core Web Vitals:

As explained earlier in "What Is a Website Audit and How To Do It?", Google introduced Core Web Vitals as a set of specific factors to determine a webpage's overall user experience from the speed and UI stability point of view. Core Web Vitals include:

Largest Contentful Paint (LCP):

  • LCP measures loading performance, the time it takes for the largest content element visible in the viewport to load and render fully on the page.
  • This could be an image, video, or a block of text. LCP is important for understanding user experience, as it indicates how long a user waits to see the main content of a page.
  • A good LCP score is 2.5 seconds or faster.
Largest Contentful Paint (LCP) Illustration

For more details, refer to this article by web.dev – Largest Contentful Paint (LCP).

Interaction to Next Paint (INP):

  • INP is a newly developed metric that replaced First Input Delay (FID) as one of the Core Web Vitals on March 12, 2024.
  • INP measures interactivity, the responsiveness of a web page, by quantifying the delay between user interactions (such as clicks, taps, or key presses) and the visual response or feedback from the page.
  • Unlike metrics focusing solely on load performance, INP captures the user's experience of a site's interactivity and responsiveness throughout their visit.
  • It aims to identify the worst-case latency of critical user interactions, providing insights into the site's perceived speed and fluidity.
  • A good INP score is 200 milliseconds or faster.

For more details, refer to this article by web.dev – Interaction to Next Paint (INP).

Interaction to Next Paint (INP) Illustration

Cumulative Layout Shift (CLS):

  • CLS measures a website's visual stability by quantifying how much content shifts on the screen during the loading phase.
  • These shifts can occur when elements on the page load asynchronously or when elements are dynamically added to the page, causing unexpected movement of content that the user was viewing or interacting with.
  • A good CLS score is 0.1 or less.
Cumulative Layout Shift (CLS) Illustration

For more details, refer to this article by web.dev – Cumulative Layout Shift (CLS).

Note: First Input Delay (FID):

  • First Input Delay (FID) measures interactivity. It was one of the Core Web Vitals until it was replaced by Interaction to Next Paint (INP).
  • FID measures the time from when a user first interacts with a page (i.e., when they click on a link, tap on a button, etc.) to when the browser can actually begin processing event handlers in response to that interaction.
  • A good FID score is 100 milliseconds or faster.
  • First Input Delay (FID) only accounts for the first interaction, while INP covers all page interactions. FID also only measures the first interaction's input delay. It doesn't have time to run event handlers or the delay in presenting the next frame.

For more details, refer to this article by web.dev – First Input Delay (FID).

First Input Delay (FID) Illustration

Mobile Friendliness

Mobile-friendliness includes responsive design (where the site layout adjusts to fit the screen size), fast loading times, accessible menus and buttons, and readable text without zooming.

Creating a mobile-friendly site is essential as Google emphasizes mobile-first indexing – Google predominantly uses the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking.

Responsive design is one of the most critical techniques for building a mobile-friendly website. It adjusts the website design to any screen size, ensuring optimal viewing across devices. It uses flexible layouts and CSS media queries to adapt to the user's device, improving accessibility and user experience. This approach eliminates the need for device-specific designs, making websites universally usable.

For more details, refer to this Google Search Central documentation – Mobile site and mobile-first indexing best practices.

Responsive Design

Security

Security directly affects user trust and safety when visiting a website. Search engines prioritize secure websites in their rankings to provide users with safe browsing experiences.

HTTPS

Websites secured with HTTPS (Hypertext Transfer Protocol Secure) encrypt data transmitted between the user and the server, protecting against eavesdropping, tampering, and man-in-the-middle attacks.

Google has confirmed HTTPS as a ranking signal, meaning secure websites may rank higher than their non-secure counterparts.

To use HTTPS, you need to set up SSL (Secure Sockets Layers). To understand it, you can refer to our SSL Setup guide.

HTTPS (Hypertext Transfer Protocol Secure) Mechanism

Safe Browsing

Websites should be free from malware, phishing, and deceptive content. Search engines penalize sites that compromise user safety, potentially by removing them from search results or marking them as unsafe.

Intrusive Interstitials and Dialogs

Intrusive interstitials and dialogs refer to pop-ups, overlays, and modal dialogs that significantly hinder or obstruct the view of the main content on a webpage.

With limited screen space, these elements can be particularly disruptive on mobile devices.

They include advertisements, subscription forms, and prompts that cover the content or require user action to be dismissed.

Google and other search engines may penalize websites using intrusive interstitials, especially if they appear before accessing the main content, as they negatively impact the user experience and accessibility of the website.

For more details, refer to this Google Search Central documentation – Avoid intrusive interstitials and dialogs.

Intrusive Interstitials illustration

How to improve website performance?

Website performance or page performance is often measured by Core Web Vitals, a critical part of page experience.

The starting point for website and page performance is site or page auditing, as explained in "What Is a Website Audit and How To Do It?"

PageSpeed Insights, Lighthouse, or other technical SEO audit tools provide detailed instructions to improve performance.

Generally, you can improve page and site performance by following the instructions from the high-impact recommendations.

Based on several sources, we listed frequently observed potential improvement areas below.

Image Optimization

Image file size optimization

Images often account for most of a web page's downloadable bytes. Optimizing image file sizes through compression can drastically reduce the amount of data transferred while maintaining visual quality.

PNG and JPEG are frequently used file formats for the images; however, you have a better choice now, which is WEBP.

WEBP is a modern image format developed by Google for the web, offering superior compression for lossless and lossy images. It achieves smaller file sizes than JPEG and PNG formats, supporting transparency and animation. This efficiency enhances web speeds, reduces bandwidth usage, and improves user experience.

WEBP is now more widely used and supported by most browsers except Internet Explorer.

To understand WEBP better, refer to this article by web.dev – Use WebP images.

How To Optimize Image File Size – WEBP

Lazy and eager loading (Managing Above the Fold)

Lazy loading defers the loading of non-critical resources at page load time. Instead, these resources are loaded at the moment they are needed (typically when they enter the viewport).

This can significantly improve loading times, especially for pages with many images. Conversely, eager loading ensures that essential, above-the-fold content is loaded immediately, which is crucial for maintaining a good user experience.

To understand lazy loading better, refer to this article by web.dev — Use WebP images.

Responsive Images

Responsive images are a web design technique that serves different image files to users based on the size and resolution of their device's screen.

To understand responsive images better, you can refer to the following articles.

Illustration of responsive images

Image width and height

Specifying the width and height of images in your HTML or CSS helps maintain your page layout as images load, preventing unexpected layout shifts.

This practice contributes to a smoother, more stable visual experience for your users.

Code minimization

There are two approaches to code minimization – removing unused code and minifying code.

Remove unused CSS and JavaScript

Over time, websites accumulate code that may no longer be used, leading to unnecessary bloat.

You can reduce file sizes and improve loading times by auditing your website’s resources and stripping away unused CSS and JavaScript.

To understand this better, you can refer to the following articles.

Minify CSS and JavaScript

Minification is a process that removes all unnecessary characters from source code (such as whitespace, comments, and new line characters) without affecting the functionality.

This process can substantially reduce file sizes, leading to faster page load times.

To understand this better, you can refer to the following articles.

Cache and Network Optimization

Server Caching

Server caching stores copies of rendered web pages on the server, allowing for quick retrieval on subsequent requests.

Implementing server-side caching mechanisms can dramatically decrease load time for repeat visitors by dynamically bypassing the need to generate pages for each request.

Server Caching and Browser Caching

Browser Caching

By leveraging browser caching, you can instruct visitors' browsers to store certain parts of your website locally.

This reduces load time for repeat visitors as the browser can load stored versions of resources instead of fetching them from the server again. Properly configuring your website’s cache-control headers is essential for effective browser caching.

CDN (Content Delivery Network)

A CDN distributes your website's static assets across a network of servers worldwide, allowing users to download content from the server closest to them.

This significantly reduces latency and improves site speed. Integrating a CDN is particularly beneficial for websites with a global audience, as it ensures all users have a fast-loading experience regardless of their geographical location.

How CDN (Content Delivery Network) works

Font Optimization

Remove unused fonts

Loading fonts can extend the entire web page loading time. You should evaluate your use of web fonts and remove any that aren't necessary, focusing on using a minimal set of font styles and weights to reduce loading overhead.

Optimize font delivery

Optimizing font delivery can minimize render-blocking behavior and speed up text visibility.

Techniques include using font-display: swap to ensure text remains visible during font loading, subsetting fonts to include only the characters used on your site, and serving fonts from a CDN for faster delivery.

Others

Server spec or hosting service upgrade

As your website grows, so do its resource requirements. Upgrading your server hardware or switching to a more robust hosting solution can provide the additional processing power and bandwidth needed to improve site performance. Consider cloud hosting options for scalability and flexibility.

Reduce redirections

Each redirection introduces additional HTTP request-response cycles, delaying the delivery of content. Minimizing redirections (such as 301s and 302s) can shave off precious milliseconds from your load time.

Remove unnecessary plugins

Plugins extend the functionality of your website but can also slow it down. Audit your plugins regularly and deactivate or delete any that are not essential to your site’s operation. This not only speeds up your site but also reduces security vulnerabilities.

AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages) is an open-source initiative aiming to make the web better for all.

By creating lightweight versions of web pages that load instantly on mobile devices, AMP can improve the mobile browsing experience.

However, the landscape around web performance and development best practices has evolved, leading to mixed sentiments regarding AMP:

Conclusion

Improving website performance is key to better user experience and SEO ranking, focusing on Core Web Vitals to boost page experience. These optimizations aim at enhancing loading speed, interactivity, and visual stability, directly influencing user metrics like lower bounce rates and longer engagement times.

As Google emphasizes page experience for rankings, mastering these techniques is crucial for digital success, making your site more appealing to search engines and users.


You can also learn this topic on Kindle. ClickAmazonKindle.

Tag: