Improve your fashion ecommerce website's Lighthouse score and web vitals

In this article, we will walk you through the steps needed to achieve a near-perfect Lighthouse score without changing anything visually or functionally on your website. Despite retaining the same content management system and platform, we aim to improve your Google Lighthouse score and search engine rankings.

How to get a 100% Google Lighthouse performance score?

Achieving a 100% Google Lighthouse performance score may seem like an impossible task, but it's not. With the right tools and techniques, you can optimize your website's performance to achieve a perfect score. This article will guide you through the process of getting a 100% Lighthouse performance score, discussing possible areas for improvement and providing best practices, tools, and resources.

1. Reducing the cost of JavaScript

Do you know the three factors that contribute to the cost of JavaScript on your ecommerce website?

JavaScript has become an integral part of modern web development, allowing for dynamic, interactive web experiences. As websites become more complex and rely heavily on JavaScript, it's important to consider the costs associated with this technology. The more JavaScript a website uses, the longer it takes for the website to load and the more resources it requires to run. This can result in slower website performance, frustrated users, and lost revenue for businesses.

source: https://v8.dev/blog/cost-of-javascript-2019 

There are three main factors that contribute to the cost of JavaScript: 

• Download time – the amount of time it takes to download JavaScript files from the server to the user's browser.

• Parsing time –  the time it takes for the browser to process and interpret the JavaScript code.

• Execution time – the time it takes for the JavaScript code to run and affect the website's functionality.

There are several strategies for reducing the cost of JavaScript. One approach is to minimize the amount of JavaScript used on a website and only load scripts that are necessary for the user's current interaction. This can be achieved through code splitting, where different parts of the website are loaded separately, or through lazy loading, where content is only loaded when it's needed.

Another approach is to optimize the JavaScript code itself, by reducing its size and removing unnecessary code. This can be achieved through minification, where the code is stripped of unnecessary characters and comments, and through tree shaking, where unused code is removed from the codebase.
Learn more about the cost of JavaScript: The Cost Of JavaScript In 2018, Manage the cost of Javascript

2. Streamlining fashion ecommerce website with Webpack 

Webpack is one of the most widely used tools for streamlining the performance of JavaScript applications, including fashion ecommerce websites. It is a module bundler that offers multiple features to optimize the loading and rendering of web pages. Webpack works by analyzing a set of modules and their dependencies and generating a single JavaScript file that contains all the code. This file can be loaded in the browser and executed to render the application. The advantage of using Webpack is that it reduces the number of HTTP requests needed to load the application, which can significantly improve page performance.

Webpack has the ability to handle different types of assets, such as JavaScript, CSS, and images. It can bundle these assets together, reducing the number of requests needed to load the page. Webpack can also optimize the size of these assets by removing unnecessary code and minifying code to reduce the sizes. It can also automatically apply techniques like minification and compression, as well as handle the transpilation of modern JavaScript features to older versions that are compatible with a wider range of browsers.

source: https://www.susielu.com/data-viz/bundle-buddy

You can use loaders and plugins to extend Webpack’s functionality. Loaders are used to preprocess files before they are bundled, such as transpiling ES6 JavaScript code to ES5 using Babel. Plugins can be used to perform more advanced optimizations, such as code splitting and tree shaking. Code splitting allows the application to be split into smaller chunks that can be loaded on demand, reducing the initial load time of the page. Tree shaking removes unused code from the bundle, further reducing its size.

source: https://www.susielu.com/data-viz/bundle-buddy

Webpack also supports caching, which can improve the performance of the application by reducing the amount of data that needs to be transferred over the network. When the application is loaded for the first time, Webpack generates a unique hash based on the contents of the files. This hash can be used to cache the files on the client side, so they don't need to be downloaded again on subsequent visits to the site.

Webpack provides a development server that can be used to test and debug the application during development. The development server automatically rebuilds the application when changes are made, allowing for rapid iteration and testing.

Learn more about tree shaking, scope hosting and code splitting with Webpack: Webpack, Monitor and analyze the app, Webpack conclusion, Webpack 4 by medium

3. Decreasing front-end size 

Are you concerned about how long it takes for your ecommerce website to load? One of the key factors impacting website performance is the size of the front end. A large front end can lead to longer load times, causing users to lose interest and leave the site. To address this issue, focus on reducing the front-end size of your website.

There are several techniques that web developers can employ to achieve this. One of them is reducing the front-end size to minify CSS, HTML, and JavaScript files. Minification involves removing unnecessary characters like whitespace and comments from code files, significantly reducing their size, resulting in faster load times. The most popular way of minifying those files is using a task runner such as Gulp, Webpack, or Grunt. These tools can automate, simplify, and accelerate the minification process.

source: https://www.keycdn.com/support/how-to-minify-css-js-and-html

Reducing the number of HTTP requests is another way to decrease the front-end size of a website. Each HTTP request made by a website can considerably extend the overall load time. Combining CSS and JavaScript files, reducing the number of images used on the page, and using HTTP/2 can all help reduce the number of requests and decrease load times.

Browser caching is another technique that can be used to decrease front-end size. Caching involves storing static files like CSS, JavaScript, and images in the user's browser cache. This means that these files do not need to be loaded each time the page is accessed, resulting in faster load times for repeat visitors. It can also help reduce the amount of data that needs to be transferred.

Using a content delivery network (CDN) can also help decrease the front-end size of a website and reduce the impact of latency. A CDN is a network of servers that are distributed around the world and used to deliver content to users from a server that is geographically closer to them. 
Learn more about decreasing front-end size: Decrease front end size, How to minify your websites? - css, html, javascript, How to minify css, js?

4. Implementing ECMAScript modules

As ecommerce continues to evolve, so do the tools for building high-performance applications. The introduction of ECMAScript modules in JavaScript has greatly enhanced the language's capabilities, providing developers with a modern, scalable approach to structuring and organizing their code. Among the many benefits of using modules in JavaScript, improved performance stands out as a major advantage.

One of the key ways in which ECMAScript modules improve performance is through their support for static analysis. Unlike traditional JavaScript code, which is dynamically loaded at runtime, modules are loaded statically, allowing for greater optimization opportunities. This means that the JavaScript engine can analyze the module's dependencies before it even begins executing, allowing it to optimize its performance and minimize its resource consumption. In addition, it improves tree shaking by enabling the removal of unused code from the final bundle.

ECMAScript modules support asynchronous loading. When traditional JavaScript code is loaded, it is often loaded synchronously, which can lead to blocking and delays in page loading. When code is loaded asynchronously, it doesn’t block and allows the page to load faster. 

Modules also improve modularity. You can more easily identify and isolate performance bottlenecks by breaking down a large application into smaller, more manageable modules. This allows for the optimization of individual modules, resulting in better overall performance for the application as a whole. In addition, modular code is easier to maintain and update, which can further improve performance by reducing the likelihood of errors and issues.

ECMAScript also provides support for caching. When a module is loaded, it is cached by the browser, allowing it to be quickly and easily loaded again in the future. This can significantly reduce the amount of time required to load an application, especially for repeat visits. Caching can help reduce server load, positively impacting overall application performance.

Modules provide a more secure approach to code loading. With traditional JavaScript code, it is possible for third-party code to be loaded and executed without proper security checks, potentially exposing the user to security risks. With ECMAScript modules, the code is loaded securely, ensuring that only trusted code is executed. 

Learn more about ES2015 modules: ESMA modules in browsers by jakearchibald, v8.dev – overlook on modules, v8.dev – modules for performance.

5. Preloading resources for faster fashion ecommerce websites

Preloading is a quick fix for slow-loading pages. The "rel" attribute in HTML is a valuable tool that allows web developers to instruct the browser to load certain resources before they are needed. This attribute can be added to a link or a script tag, and it tells the browser to download and cache the resource in advance, making it available to be used later when it's actually needed. This can improve the page's performance by reducing the time it takes to load the resources when the user requests them. There are several values that can be used with the "preload" attribute, including "preload," "prefetch," and "prerender." Each value indicates a different level of priority for loading the resource.

Preloading is supported in all modern browsers:

source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

A common use case for preloading is for resources that are required for above-the-fold content, which is the part of a webpage that is visible to users without scrolling. It is also beneficial for fonts. Fonts can be large files that take time to load. By using preload to indicate which fonts should be loaded early in the page rendering process, developers can ensure that users can view the content on the page without waiting for fonts to load. Another resource that can benefit from preloading is JavaScript. By preloading JavaScript files, you can prioritize loading and avoid delays to other essential resources.

Preloading is not a one-size-fits-all solution. Overuse can lead to unnecessary resource loading and increased page load times. 

Learn more about preloading resources: Preload critical assets, HTML attributes - rel, preload 

6. Warming up connections

Warmup requests can improve your fashion ecommerce website scalability and prevent performance issues. They’re one of the key features offered by Google App Engine, allowing it to perform initialization tasks before receiving any real user requests. By using warmup requests, you can ensure that the application is fully prepared to handle user requests as soon as they are received.

One of the main benefits of warmup requests is that they can help to reduce the latency of the first user request. When a new instance of an application is created, it takes some time to initialize and become ready to handle requests. During this time, any user requests that are received may result in slow response times or even errors. 

Another advantage of warmup requests is that it can help to improve the overall scalability of the application. By performing initialization tasks in advance, developers can reduce the load on the application when it starts receiving real user requests. This can help prevent performance issues that can occur when many requests are received simultaneously.

Warmup requests can also have an impact on the performance of an application itself. If the warmup tasks require significant CPU or memory resources, they may cause the application to become slow or unresponsive. To prevent this, monitor your website’s resource usage and adjust the warmup tasks accordingly. You can also limit the number of warmup requests that are processed concurrently to avoid overloading the application.
Learn more about warming up connections: Configuring warmup requests, Configuring warmup requests in python

7. Using caching to improve fashion ecommerce performance

Take your ecommerce website's speed and performance to the next level with the right caching strategy. The use of caching techniques can reduce server load, increase website scalability, and decrease page load times, all while enhancing the user experience.

Cache-Control and HTTP headers 

Cache-Control is an essential tool for web developers and system administrators that can revolutionize the way you deliver content to your end users. It’s an HTTP header used to manage the caching of web content. HTTP is the backbone of communication over the web, and it is an essential protocol for delivering content to end users. However, one of the significant challenges of HTTP is handling the large volume of content delivered every day. To manage this, a range of techniques and protocols are used to optimize content delivery. 

Cache-Control is a client-side caching mechanism that helps to reduce server load, improve site performance, and decrease page load time. It is an HTTP header used to set directives for caching and to control the duration and freshness of cached content. It allows servers to specify the conditions under which the client, proxy, or browser may cache response content.

Cache-Control has become an essential tool for web developers and system administrators to optimize web performance. It provides an effective way to control the caching behavior of web content and ensure that the most up-to-date content is delivered to end users. By using Cache-Control, you can reduce server load, improve site performance, and enhance the user experience.

The Cache-Control header includes various directives specifying a particular resource's caching behavior. The most commonly used directives include:

• No-cache – instructs the client not to cache the response content

• Max-age – specifies the time for which the content should be considered fresh

• No-store – tells the client not to store any part of the response content

• Must-revalidate – requires the client to revalidate the response before using the cached copy

• Public – allows for caching of the response by both the client and intermediary caches

• Private – restricts the caching to the client only

• No-transform – prevents intermediary caches from altering the response content

Cache-Control can be used with other HTTP headers such as Expires, ETag, and Last-Modified to provide more granular control over the caching of web content. The Expires header is used to specify the date and time when the content should be considered stale, and the ETag header provides a unique identifier for the cached content. The Last-Modified header specifies the date and time when the resource was last modified.

The use of Cache-Control can also have some negative effects. For example, if the caching directives are too restrictive, it can result in slower page load times or even cause content to be delivered incorrectly. Carefully consider the caching directives and their values when implementing Cache-Control headers.

Browser compatibility

source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Immutable caching

Immutable caching is a caching strategy that involves caching immutable or unchanging resources such as images, CSS, and JavaScript files for an extended period. By caching these resources for a more extended period, web browsers can avoid unnecessary network requests and retrieve the resources from the cache instead. With traditional caching, the web browser sends a request to the server for a resource and then caches the response for a short period. When the resource is required again, the browser revalidates the resource by sending a request to the server with an If-Modified-Since or If-None-Match header. If the resource has not changed, the server responds with a 304 Not Modified status code, and the browser retrieves the resource from the cache. If the resource has changed, the server responds with a new version of the resource, and the browser caches the new response.

Immutable caching avoids the need for revalidation by caching resources for a more extended period. Since immutable resources do not change, there is no need to revalidate them, and they can be cached indefinitely. This eliminates the need for additional network requests, reduces server load, and improves web performance. To implement immutable caching, you can use Cache-Control headers with a max-age directive set to a long period, such as one year. 

There are some limitations to immutable caching. Since immutable resources do not change, it is essential to use versioning to ensure that the browser retrieves the latest version of the resource when necessary. Versioning can be achieved by appending a version number or hash to the resource URL, which forces the browser to retrieve the latest version of the resource. It is also essential to ensure that the caching directives are correctly configured, as incorrect configurations can lead to stale content being served.

Using service workers for caching

The Service Worker API is a powerful tool that enables creating robust, efficient, and reliable web applications that can run even when the user is offline. Service workers are a type of web worker that runs separately from the main JavaScript thread, providing a range of features and capabilities that are not available through traditional web technologies.

One of the key benefits of service workers is their ability to cache resources locally, allowing web applications to continue functioning even when there is no network connection. This can help to improve the user experience by reducing the amount of time it takes to load and display content, as well as enabling users to access key functionalities even when offline.

In addition to caching resources, service workers can also intercept network requests, enabling the implementation of advanced caching strategies and performance optimization of web applications. For example, you can use service workers to implement a cache-first strategy, where the service worker checks the cache for requested resources before making a network request. This can help to reduce the load on the network and improve the responsiveness of the web application.

Another key feature of service workers is their ability to receive push notifications, making it possible to send timely and relevant updates to users even when they are not actively using the web application. This can help to increase user engagement and retention.

Service workers are designed to be secure, with a range of built-in security features that help to protect users and their data. For example, they are only available over HTTPS, ensuring that all communication between the web application and the service worker is encrypted and secure. In addition, service workers are sandboxed, meaning that they are isolated from the main JavaScript thread and cannot access sensitive user data without explicit permission.

Learn more about cache: Cache Control, Using immutable caching to speed up the web, Use long term caching, Using service workers, Strategies for service worker caching

8. Optimizing images

Fashion ecommerce websites have become increasingly image heavy, with businesses relying on visually striking product images to attract and retain customers. High-quality images are essential to showcase the features of a product and help customers make informed purchase decisions, but they can significantly worsen website performance. That is why a good media assets strategy is a low-hanging fruit of speed optimization. It’s one aspect of your site that can't be ignored.

Although resizing images to make them smaller has been the traditional approach, this is no longer enough. One recommendation from Lighthouse is to defer offscreen images, which can result in a three-second decrease in page load speed. On responsive websites, images are handled in a way that they are displayed on desktops and wide screens, but not on smaller devices. Despite this, images are still being loaded, which is unnecessary. This is because there is only one set of HTML, css, and JavaScript files that work for all devices.

Serving images in the next-generation format, such as WebP, is crucial as it provides better quality and smaller file sizes than JPEGs or PNGs. To ensure the best user experience, images are served on demand based on the browser. Properly sized images are also important, and a solution to this is to use the SRCset attribute in the IMG tag. By coding images according to popular device and browser sizes, the website can download only the smallest image necessary, resulting in saved megabytes and faster load times. Though it may require more lines of code, the benefits are worth it.

Responsive images

Responsive images are images that adjust to the size of the screen, making them look good on any device. Not all images are created equal, and some can take a long time to load, affecting website performance.

One of the benefits of using responsive images is that they load faster, improving website performance. When a website has a lot of images, it can take a long time to load, especially on mobile devices with slower internet connections. By using responsive images, you can reduce the file size of the images, resulting in faster load times.

To improve website performance, you can use the srcset attribute and picture elements to create responsive images. Srcset allows you to specify different image files for different screen sizes and resolutions, while the browser selects the most appropriate image file to display. This both improves website performance and delivers to users the best viewing experience regardless of device. There are several ways to create responsive images, and each method has its advantages and disadvantages. You can read about them here.

While responsive images can improve user experience and performance, they can also have a negative impact on search engine optimization if not implemented correctly. Images still need to be properly optimized, including appropriate alt tags and descriptions, to ensure that search engines can index them.

Learn more about responsive images

Image formats

It's essential to choose the right image format to optimize website performance. JPEG and PNG are the two most widely used image formats. JPEG is a compressed format that works best for images with a lot of detail and color variation, such as photographs. PNG is a lossless format that preserves image quality and is ideal for graphics, logos, and icons.

Newer image formats like WebP and AVIF offer better optimization and performance than traditional formats. WebP is a compressed format developed by Google that uses a combination of lossy and lossless compression techniques to achieve smaller file sizes without compromising image quality. By reducing the size of images, WebP can significantly improve website loading speed, resulting in a better user experience. While AVIF is newer, it is considered to be the most promising format yet, and it uses a more advanced compression algorithm to achieve better compression and quality than WebP.

It's essential to understand the strengths and weaknesses of each image format to make an informed decision. Choosing the wrong format can lead to slow loading times, negatively impacting the user experience and search engine rankings. The right image format depends on the type of image and how it will be used on the website. While JPEG is excellent for high-resolution images, using it for logos and graphics can result in larger file sizes, slower loading times, and sluggish website performance. Similarly, using PNG for photographs can result in unnecessarily large file sizes and slow loading times.

Learn more about using the right image formats

Compressing images

Large, uncompressed images can take longer to load, resulting in users leaving the website before it has fully loaded. To prevent this, it's essential to compress images to reduce their file size while maintaining quality. Several image compression techniques can be used to optimize website performance.

Lossless compression is one technique used to compress images without losing any image data. It works by removing redundant data from the image file, resulting in a smaller file size. Lossless compression is ideal for graphics and logos that require a high level of detail and color accuracy.

Another technique is lossy compression, which involves discarding some image data to achieve a smaller file size. While it may slightly reduce image quality, it can significantly reduce file size and loading times. Lossy compression is best suited for photographs or images rich in details. Compressing images using a tool like ImageOptim or TinyPNG reduces file size without compromising image quality.

Learn more about compressing images

9. Improving video assets 

Replacing GIFs with videos could be the solution you need to improve website performance.

Animated GIFs have been a popular form of online content for many years, but they have some drawbacks regarding website performance. Large GIF files can slow down page loading times, negatively impacting user experience. To address this issue, website owners can replace GIFs with videos, offering similar animation effects while improving website performance.

Videos have several advantages over GIFs. They can be optimized for web performance by compressing them using tools like Handbrake or Adobe Media Encoder. Compression can significantly reduce file size, resulting in faster loading times and smoother playback. 

Videos can be played using hardware acceleration, which offloads the processing of video playback to the user's device's graphics card. This results in smoother playback and reduced strain on the CPU of the user's device.

Another advantage of using videos instead of GIFs is that videos can be optimized for different screen sizes and resolutions. This is particularly important for responsive web design, where websites must adapt to different screen sizes and devices. By optimizing videos for different screen sizes and resolutions, you can ensure that your content is displayed correctly across all devices.

Videos can be lazy-loaded, meaning they are only loaded when needed, such as when the user scrolls down the page.

Replacing GIFs with videos can also improve website accessibility. Videos can include closed captions, improving the experience for hearing impaired users, as well as audio descriptions to assist users with visual impairments. Using videos instead of GIFs ensures that your content is accessible to a broader audience.

One challenge of using videos instead of GIFs is that videos require more bandwidth. This can be mitigated by using video formats like WebM, which are optimized for web performance and have smaller file sizes than other video formats like MP4. 

Learn more about replacing GIFS with MP4

10. Lazy loading for images and video 

One of the performance-related challenges facing fashion ecommerce businesses is balancing high-quality product images with fast page load times. There are five techniques for lazy loading images that can help achieve balance and improve website performance.

Lazy loading is a technique that defers the loading of non-critical resources until they are needed. 

Source: https://web.dev/efficiently-load-third-party-javascript/ 

The first technique is the native lazy loading attribute, which is supported by modern browsers. This is an HTML5 attribute that can be added to images to defer their loading until they are needed. It’s easy to use and does not require any external libraries or plugins.

The second technique is Intersection Observer, a JavaScript API that allows you to track when an element enters or exits the viewport. With an intersection observer, images can be loaded when they enter the viewport and unloaded when they exit the viewport. It is more efficient than traditional scroll event listeners because it does not require continuous checking for scroll position.

The third technique is using a third-party plugin. Plugins can be used to lazy load all images on a page or target specific images. They’re easy to use and do not require any additional configuration.

The fourth technique is the LQIP (low-quality image placeholder). With this technique, a low-quality version of an image is loaded first, and then a high-quality version is loaded when the image enters the viewport. It can provide a better user experience because users can see a preview of the image before it fully loads.

The fifth technique is the blurry image placeholder. It is similar to the LQIP technique, but instead of loading a low-quality version of the image, a blurry version of the image is loaded first. Blurry image placeholders can provide a better user experience because users can see a preview of the image with some detail rather than just a low-quality version.

Learn more about lazy loading for images and video: Five techniques-lazy load images, Lazy loading video, Lazy loading images

11. Optimizing font loading 

If you want a 100% Google Lighthouse performance score, font loading optimization is key. This is an essential part of web design, as it directly impacts website performance and user experience. 

The first font loading strategy is to use the font face observer API. This JavaScript library allows you to control how fonts are loaded on websites, which can significantly improve website performance and user experience. By loading fonts asynchronously, websites can display content while fonts load in the background, reducing the amount of time users have to wait before they can interact with the website.

Critical font loading is another popular strategy – it involves loading only the fonts that are required to render the above-the-fold content on the website. By loading only the necessary fonts, you can reduce the amount of data that needs to be downloaded, improving website performance and speed.

You can load fonts more efficiently by using the font loading API, which provides a way to control how fonts are loaded, allowing designers to specify when a font should be loaded, how it should be cached, and when it should be used. This way, you can optimize font loading to improve website performance and user experience.

Another well-known font loading optimization strategy is to use web fonts with fallbacks. By using web fonts with fallbacks, you can ensure that your websites look consistent and professional even if custom fonts fail to load. 

You can also preload fonts to reduce latency. Preloading involves loading resources before they are needed, reducing the amount of time users have to wait before they can interact with the website. By preloading fonts, you can ensure that they load quickly and efficiently, boosting website speed and user experience.

After choosing the right strategy for your website, you can further optimize font loading by reducing their size and compressing them appropriately. Fonts designed for print can be much larger than necessary for the web, leading to slower website performance. Optimizing fonts by reducing their size and compressing them can speed up your website significantly.

An additional technique for optimizing font loading is the use of font display. Font display allows designers to specify how the browser should display a font while it loads. By using font display, designers can ensure that users see content as quickly as possible, even if fonts have not yet loaded. This can provide marked improvements to website performance and user experience.

Another effective strategy is to use font subsets. Font subsets involve loading only the characters that are needed for a specific web page. By using font subsets, you can reduce the size of font files and improve website performance.

Learn more about font loading strategies: The best font loading strategies and how to execute them, Font loading optimization, Best practices for fonts, Font displays 

12. Optimizing third-party Java Script

Third-party JavaScript is a powerful tool for adding functionality to your ecommerce site, but it can also harm your website performance if not loaded efficiently. 

Efficiently loading third-party JavaScript involves applying several techniques:

• Asynchronous loading. This ensures that other resources aren’t blocked by the script. It also reduces the risk of the script causing issues with other page elements, such as slow-loading images or videos.

• Delivering the script via a Content Delivery Network. This can significantly reduce the time it takes for the script to load, as well as improve reliability and availability.

• Caching. This can dramatically reduce load times and improve performance. However, it's important to ensure that the cache is properly managed so that users always receive the latest version of the script when it's updated.

• Evaluating scripts. It's also important to evaluate the scripts used on the site and determine which ones are essential and which ones can be removed. The biggest difference can be made by removing unfruitful scripts. 

Implementing these techniques requires a continual effort, consistent attention, and monitoring. Regularly reviewing third-party script performance and making necessary adjustments to the implementation process can help to ensure your ecommerce site runs smoothly and provides your customers with a seamless and enjoyable shopping experience.

Learn more about optimizing third-party

13. Maximizing performance with critical CSS

Cascading style sheets (CSS) can be a double-edged sword. On the one hand, it’s critical to creating a visually appealing website. On the other hand, however, CSS can significantly impact page load times, leading to a poor user experience. To address this challenge, developers use a technique called critical CSS.

Critical CSS is a technique that involves identifying the specific styles that are required to render the content above the fold of a webpage. Essentially, it is a subset of the overall CSS that is needed to display the visible portion of the page. By optimizing this subset of styles and delivering it to the browser as quickly as possible, critical CSS can significantly improve the perceived speed of a website.

One of the benefits of critical CSS is that it allows for optimizing page load times without compromising on design. By targeting only the above-the-fold content, designers can maintain the visual integrity of their website while improving performance. It is particularly useful for websites that rely on large CSS files or multiple such files, like fashion ecommerce sites or websites with multiple landing pages.

Another advantage of critical CSS is that it reduces the amount of data that needs to be transferred to the user's device. Since the critical CSS is delivered as a separate file, it can be optimized for size and compressed more effectively than the full CSS file. This can result in a reduction in the amount of data that needs to be downloaded, which can help to speed up the loading time of the page.

There are several ways to generate critical CSS, including manual extraction, automated tools, and server-side rendering. Manual extraction involves manually identifying and extracting the critical CSS from the main stylesheet. This method is time-consuming and error-prone, but it gives developers full control over the critical CSS. Automated tools, on the other hand, use algorithms to identify the critical CSS automatically. These tools are faster and more efficient than manual extraction, but they may miss some critical CSS elements. Finally, server-side rendering involves generating the critical CSS on the server side and delivering it to the browser along with the HTML. This method is the most efficient as it eliminates the need for the browser to download and parse CSS files altogether.
Learn more about using only critical CSS: Critical CSS, Understanding critical CSS, Improving perceived speed with critical CSS

14. Delivering quality content with save-data hints

One of the challenges faced by website owners is delivering content efficiently without sacrificing quality. This is particularly true for fashion websites that serve a global audience, where users may have limited access to high-speed internet connections or may deal with data usage limits.

One solution to this problem is using client hints, which are a set of HTTP headers that provide information about the client's capabilities and preferences to the server. By understanding the client's capabilities, the server can optimize the content it delivers, resulting in faster load times and reduced data usage.

For example, client hints can provide information about the client's viewport size, which can help the server deliver images in the appropriate size and format. This can significantly reduce the amount of data that needs to be transmitted, resulting in faster load times and lower data usage.

Another example of client hints is the Save-Data header, which indicates that the client is using a low-bandwidth or metered data connection. In response, the server can optimize the content it delivers by compressing images and reducing the size of other resources. This can significantly reduce the amount of data that needs to be transmitted, accelerating load times and reducing data usage.

Client hints are also useful for providing information about the client's preferences, such as preferred languages and encoding formats. This information can be used to tailor the content delivered to the client, resulting in a more personalized and engaging user experience.

Learn more about using save-data hints

15. Migrating to HTTP/2

Upgrade to HTTP/2, the newer protocol that can help boost your ecommerce site's performance and keep you ahead of the curve. HTTP/2 is the second version of the HTTP protocol (hypertext transfer protocol) that was developed to improve website performance and security. HTTP/2 utilizes multiplexing, which allows multiple requests and responses to be sent simultaneously over a single connection, reducing latency and improving page load times. Additionally, HTTP/2 supports server push, allowing the server to send resources to the client before it requests them, further reducing page load times.

Migrating to HTTP/2 is a straightforward process, but it is essential to ensure that all resources, including images, scripts, and stylesheets, are updated to be compatible with the new protocol. Another step would be ensuring that your web hosting provider supports HTTP/2 and that their website is running on a secure HTTPS connection, as HTTP/2 only works with HTTPS.

One significant advantage of migrating to HTTP/2 is that it provides better security than its predecessor, HTTP/1.1. HTTP/2 utilizes transport layer security (TLS), which encrypts data transmitted between the client and server, providing an additional layer of security against eavesdropping and data tampering.

Learn more about migrating to HTTP/2

Frequently asked questions about core web vitals and Google Lighthouse. 

What are core web vitals, and why are they important for my fashion ecommerce website?

Web performance is a critical aspect of building and maintaining a successful website. With the increase in internet usage, websites are expected to load quickly and provide a seamless user experience. core web vitals is a set of metrics that aims to measure user experience on the web. The three core web vitals metrics are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics provide insight into different aspects of a website's performance that can impact user experience.

Largest Contentful Paint measures the time it takes for the largest content element on a page to become visible. This metric is essential as it provides a good indication of when the page becomes usable to the visitor. A fast LCP can significantly improve user experience and help keep users on your website. A slow LCP can lead to a high bounce rate and a negative impact on user engagement.

First Input Delay measures the time it takes for the user to interact with a page. This metric is critical as it can impact how users perceive the website's responsiveness. A fast FID is essential to ensure that users can interact with your website without any significant delays. A slow FID can lead to frustration and negatively impact the user experience.

Cumulative Layout Shift measures the visual stability of a webpage. This metric looks at how much the page layout shifts while it's loading. A high CLS can be distracting for the user and make it difficult to interact with the page. A low CLS can help to create a more stable user experience, which is essential for keeping users engaged on the website.

Core web vitals metrics are user-centric and aim to provide insight into how a user experiences a website. Google has also introduced thresholds for these metrics to help website owners evaluate their performance. The thresholds provide a good indication of whether a website is meeting the necessary requirements for optimal user experience. Website owners should aim to meet these thresholds to provide the best user experience possible.

Improving core web vitals is crucial for several reasons. A high score means that your website is optimized for speed and accessibility, which can significantly impact user experience. Users are more likely to engage with websites that load quickly and smoothly, and a high performance score can lead to increased traffic, longer session times, and higher conversion rates. A high Lighthouse score is often associated with good SEO practices, which can improve your website's visibility and ranking on search engine results pages. This can ultimately lead to more organic traffic and further drive your website's success. Finally, a high Lighthouse score reflects the overall quality of your website, which can contribute to building a positive brand reputation and establishing trust with your audience. 

Having a high Lighthouse performance score is critical to the success and growth of your website, and it should be a top priority for any website owner or developer.

What is Google Lighthouse score, and why is it important for my fashion ecommerce website?

Google Lighthouse is a tool developed by Google that measures the performance, accessibility, best practices, and SEO of a website. Website developers and business owners widely use the tool to evaluate and optimize their website's performance. The score is calculated based on a set of metrics that determine how well a website performs.

source: https://googlechrome.github.io/lighthouse/scorecalc/

For fashion ecommerce websites, the Google Lighthouse score is particularly important as it directly impacts the user experience and the website's ability to attract and retain customers. A website with a high Lighthouse score is more likely to rank higher on search engines, providing greater visibility and traffic. This, in turn, leads to higher conversion rates and increased sales. In addition, the Lighthouse score reflects the overall quality of your website, which can contribute to building a positive brand reputation and establishing trust with your audience.

Page speed is one of the main factors contributing to a high Google Lighthouse score for fashion ecommerce websites. In today's fast-paced world, customers expect websites to load quickly, and any delay in page load time can result in frustration and lost sales. A slow-loading website can also negatively impact the website's search engine ranking, as Google considers page speed as a ranking factor.

Another important factor that contributes to a high Google Lighthouse score is website accessibility. A website that is accessible to users with disabilities, such as those who are visually impaired or have mobility issues, can increase the website's user base and provide a better user experience for all users.

In addition to page speed and accessibility, a high Google Lighthouse score for fashion ecommerce websites can be achieved by adhering to best practices for website development, such as using responsive design, optimizing images and videos, and minimizing the use of third-party scripts.

It is important to note that achieving a high Google Lighthouse score is an ongoing process that requires continuous monitoring and optimization. As website technologies and user behaviors continue to evolve, fashion ecommerce websites need to stay up-to-date with the latest trends and best practices to maintain a high Lighthouse score and provide a top-notch user experience.

How do I measure my fashion ecommerce website's core web vitals and Lighthouse score?

Core Web Vitals and Lighthouse score requirements are the metrics that provide insight into how users experience your website and can impact your website's search engine ranking. You can take several steps to measure your website's Core Web Vitals and Lighthouse score.

You can use Google's Core Web Vitals report to measure your website's Core Web Vitals. This report provides insight into how well your website is performing against the Core Web Vitals metrics. For example, it provides data on your website's Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift metrics. You can use this information to identify areas that need improvement and optimize your website's performance.

To measure your website's Lighthouse score, you can use Google's Lighthouse tool. This tool comprehensively reports your website's performance across various metrics, including performance, accessibility, best practices, and SEO. The report provides a score for each metric, indicating your website's performance. You can use this data to identify areas that need improvement and optimization.

You can take several steps to optimize your website's performance and improve your Core Web Vitals and Lighthouse score. One of the most effective steps is to optimize your images and videos. Large image and video files can slow down your website's performance, leading to a slow LCP and FID. Optimizing your images and videos can reduce their size and improve your website's performance.

Another step you can take is to minimize the use of third-party scripts. Third-party scripts can significantly impact your website's performance, leading to a slow FID and CLS. By minimizing their use, you can reduce their impact on your website's performance and improve your Core Web Vitals and Lighthouse score.

You can also improve your server response times by using a Content Delivery Network (CDN). A CDN can help distribute your website's content across various servers, reducing the load on your website's server and improving your website's performance. You can improve your website's LCP and FID metrics by improving your server response times.

What common issues can cause poor core web vitals and Lighthouse scores for fashion ecommerce websites?

Several common issues can cause poor Core Web Vitals and Lighthouse scores for fashion ecommerce websites.

A slow page load time is one of the most common issues that can cause poor Core Web Vitals and Lighthouse scores. Slow page load times can occur due to several factors, such as large image and video files, excessive use of third-party scripts, and server response times. When a page takes too long to load, users may become frustrated and abandon your website, leading to a high bounce rate and poor search engine ranking.

Another issue that can cause poor Core Web Vitals and Lighthouse scores is a high CLS score. Cumulative Layout Shift (CLS) measures the visual stability of your website's content. A high CLS score occurs when the layout of your website shifts unexpectedly, causing users to lose their place on the page. This can occur due to various factors, such as images and videos that don't have fixed dimensions, dynamic ads, and pop-ups. A high CLS score can negatively impact your website's user experience and search engine ranking.

A slow First Input Delay (FID) is another issue that can cause poor Core Web Vitals and Lighthouse scores. FID measures the time it takes for your website to respond to user interactions, such as clicks and taps. A slow FID can occur due to various factors, such as excessive JavaScript, long tasks, and inefficient event handlers. A slow FID can lead to a poor user experience, as users may become frustrated when their interactions with your website are delayed.

A high Largest Contentful Paint (LCP) score is another issue that can cause poor Core Web Vitals and Lighthouse scores. LCP measures the time it takes for your website's largest content element, such as an image or video, to load. A high LCP score can occur due to various factors, such as large image and video files, excessive use of third-party scripts, and server response times. A high LCP score can negatively impact your website's user experience and search engine ranking.

What is HTTP/3 and how does it impact fashion ecommerce performance?

HTTP/3 is the latest version of the Hypertext Transfer Protocol (HTTP), which is the primary protocol used to transfer data over the internet. It was developed as a successor to HTTP/2, which itself followed HTTP/1.1. HTTP/3 was designed to overcome some of the limitations of the previous versions, including latency and security issues.

One of the key features of HTTP/3 is that it uses a new transport protocol called QUIC (Quick UDP Internet Connections) instead of TCP (Transmission Control Protocol). QUIC was developed by Google and is designed to reduce latency by combining multiple connections and eliminating the need for handshakes, which can slow down data transfer. Using QUIC, HTTP/3 can provide faster and more reliable connections, particularly in poor network conditions.

Another important feature of HTTP/3 is that it encrypts all data by default. This helps to protect against a range of security threats, including eavesdropping, data manipulation, and impersonation. The encryption is achieved using Transport Layer Security (TLS) 1.3, which is the latest version of the protocol that provides encryption for internet communications.

One of the challenges of HTTP/3 is that it is not yet widely supported by browsers and servers – partly because it is a relatively new protocol and requires significant changes to how networks and applications are designed. Nevertheless, some major players, including Google and Cloudflare, have already implemented support for HTTP/3, and it is expected that more will follow in the near future.

In summary, HTTP/3 is a new version of the HTTP protocol that uses QUIC and TLS 1.3 to provide faster and more secure connections. While it is still in the early stages of adoption, it can revolutionize how data is transferred over the internet, particularly in situations where low latency and high security are critical.