With the ever-evolving Internet, optimizing PageSpeed to improve user experience has become a significant focus for many developers. Particularly in the e-Commerce industry, prioritizing PageSpeed optimization and reducing website resource size are top priorities.
The Development of Cross-Platform Web
Platforms like HTML5 and JavaScript, along with the growing strength of front-end programming communities and powerful supporting libraries, have significantly advanced the development of cross-platform web technology. These advancements have enabled the display of layouts on mobile devices, marking a major turning point and the decline of Flash, as predicted earlier.
From this point, we can observe that the web platform is evolving rapidly to meet the ever-increasing demands of users across multiple devices. Nowadays, web applications not only present comprehensive and interactive information but also prioritize fast loading times to ensure the best possible user experience.
What is PageSpeed?
PageSpeed is the amount of time it takes between the browser’s request for a page until the browser completes processing and rendering the content (not waiting for everything). In reality, many factors affect the speed of a given page including quantity and type of content, distance the data travels, connection type, device, operating system, and browser.
Enhancing user experience on a website and setting the groundwork for Google to evaluate SEO rankings can be considered the core of optimizing PageSpeed, ultimately helping you gain more user access and traffic.
Google offers two official options: Google PageSpeed Insights and Lighthouse. Both are powerful and free tools designed to aid marketers and developers in optimizing website’s loading speed, with some key distinctions between them. Currently, due to the numerous factors impacting a web page’s PageSpeed, Google breaks down page speed into specific metrics to measure loading milestones, such as the first contentful paint and time to interact.
Moreover, several factors can impact overall PageSpeed, including:
- Minification: Compressing files, including CSS and JS.
- Image Optimization: Improving image loading efficiency.
- Server-Side Configurations: Configuring servers to deliver files in compressed gzip format.
- Deferral of Render Blocking Resources: Minimizing the impact of blocking resources.
Among these factors, minimizing render-blocking resources is particularly important. Over the past decade, web page loading styles have significantly transformed. Today’s web pages feature more sliders, rotating elements, and interactive components, resulting in an increased number of CSS and JS files to cater to user demands. This has a considerable impact on a web page’s final loading time. When a web page loads, it may encounter “render-blocking resources,” wherein the more CSS and JS files a page loads, the more blocking resources increase, delaying the display of HTML content until all CSS and JS resources are fully loaded. This clarifies why certain websites may take over 5 seconds to load a page, as it is not just reliant on server speed but also on the resources that the website must load subsequently.
Optimizing PageSpeed
From the above factors, Google has synthesized metrics to evaluate whether a webpage has achieved or not achieved PageSpeed
Metric 01 – First Contentful Paint (FCP)
This metric measures the time immediately after opening a webpage when the user can see some content on the page. Typically, this means visible text or images. The purpose is to measure the time it takes for content to start appearing on the webpage. FCP is measured in milliseconds and is used to assess the loading speed of the webpage.
This metric informs users that something is happening and the page has begun loading. FCP is different from two other metrics that measure the rendering process:
- Initially, only blank spaces are shown (First Paint).
- Then, a logo appears at the top of the page (First Contentful Paint).
- Additional content appears, including a paragraph, which is the largest contentful element on the page (Large Contentful Paint).
Some tricks to reduce FCP time
- Minimizing render-blocking stylesheets: Based on the example image above, we can see that the loaded resources include the HTML document and 2 CSS files. Loading third-party CSS libraries has delayed the parsing process of the HTML file, causing elements of the website displayed after this process to be held back. We can partially rely on modern browsers, as they often have caching mechanisms that prevent the need to reload CSS files on subsequent page loads.
The chart is recorded through DevTools on the browser
One effective approach is to utilize the preload link mechanism, which prioritizes the loading of CSS files earlier. For more detailed instructions on implementing this technique, you can refer to the provided link
Furthermore, it’s essential to consider the usage of inline style tags within the body, as they can also contribute to an increased Largest Contentful Paint (LCP) time. If inline styles in the body impact the visual layout or structure (to be discussed later under Cumulative Layout Shift – CLS), it is advisable to extract them and move them to the head of the HTML, ensuring they load earlier and improving overall performance.
Example of a case to identify the root cause of the render-blocking stylesheets
The image shown above represents a real-life case study conducted by the Swift product development team at FireGroup. Two issues were affected by styles related to “Eliminate render” and “Reduce unused CSS.”
To tackle these issues, the responsible team member will conduct a thorough examination to identify which styles are causing the problem. They will break down the style into smaller elements and prioritize critical CSS that affects the layout to load first. On the other hand, styles that are only required when the user interacts with the screen, such as animations or images triggered by specific actions, can be loaded later.
- Minimizing render-blocking scripts: You can utilize DevTools to track JavaScript resources during parsing. In theory, downloading JS scripts using the script tag in HTML can have an impact on the browser’s parsing and rendering process. Therefore, placing these script tags at the end of the body tag offers more advantages in terms of increasing display speed and reducing LCP. Additionally, you can add the “async” or “defer” attributes to delay script execution or inform the browser to load the scripts in parallel with parsing.
- Reducing server response time: When a website is loading, the client must take several technical steps to receive the desired HTML content. In certain cases, issues related to the server or a weak network signal can cause the browser to wait for a response, which leads to an increase in page loading time. Furthermore, the server may need to fetch resources such as CSS and JS. Ideally, each request should have a Time value of less than 0.5 seconds to be considered as having good speed.
Metric 02 – The Largest Contentful Paint (LCP)
This is a metric used to measure the time it takes for the largest element to be displayed on the layout. Most of the elements tracked in this metric are usually the largest images or header text at the top of the webpage.
To optimize LCP, the first step is to identify the element that has the longest display time. For example, in the image below, the focus is on an image with an LCP load time of 1.7 seconds. To accurately track and optimize this element, the Performance tool in DevTools can be utilized.
Example of using Performance tool in DevTools to track and optimize specific elements
The next step is to investigate the factors that contribute to the increase in (LCP) time: Render-blocking resource.
We noticed that the HTML parsing process impacts both First Contentful Paint (FCP) and LCP. Specifically, loading scripts and styles plays a significant role in the user experience. Imagine a scenario where the parsing and rendering process of the browser is heavily occupied with downloading and executing stylesheet and script code. In such cases, the time for elements within the body to be displayed on the layout will be delayed considerably.
In cases where LCP is impacted by images, there are various techniques to improve LCP:
- Compress images to reduce their size and use modern formats like WebP and AVIF.
- Utilize the preload link feature to instruct the browser to preload images.
- Store images on a Content Delivery Network (CDN) for faster retrieval.
- Apply the loading=”lazy” attribute on image tags selectively, considering images visible after user interaction.
- Add the fetchpriority=”high” attribute to preload image links or image tags to prioritize their loading.
For situations where LCP is impacted by text:
- Avoid text delay by adding the font-display: swap attribute when using font embedding from stylesheets.
- Alternatively, use JavaScript to render text to bypass delays. However, note that LCP scoring tools may not consider text rendered via JavaScript.
Conclusion
Optimizing PageSpeed and identifying the primary factors leading to limitations, along with their respective solutions for improvement, will depend on individual websites and user experiences. This article primarily aims to provide you with metrics to measure and evaluate effectiveness when applied in practice.
Written by Nguyen Quoc Vuong – Senior Front-End Engineer, FireGroup Technology
Embrace the opportunity to be part of our cutting-edge projects and tech-driven journey, join us now at https://firegroup.io/
