Website performance is a crucial aspect of web development. Ensuring that a website runs smoothly and quickly is essential in today’s fast-paced digital world. To achieve this, we needed to improve some metrics that would make our site stand out among the competition.
Sections
- The Challenge — Problem elucidation
- The Scenario — Tools and environment
- The Solution — A problem-solving approach
- The Detailed Guide — Step-by-step instructions
- The Results
The Challenge
To accomplish this goal a range of tools were utilized, including Partytown, Lighthouse, and Google PageSpeed Insights. Partytown, in particular, stood out due to its ability to quickly improve Third-Party Handling, which allowed specific areas of the website that needed improvement to be pinpointed. This facilitated targeted changes that resulted in significant improvements in website performance.
The scenario
The website was developed within a Next.js/React environment, which enabled the latest web development practices to be incorporated. This in combination with the latest technologies and tools resulted in the creation of a website that not only looks great but also performs exceptionally well.
Lighthouse helped us to identify areas of improvement that we may have otherwise missed. By providing us with detailed reports and metrics, we could pinpoint specific areas of the website that needed improvement. This, in turn, allowed us to make targeted changes that resulted in a significant improvement in website performance.
By implementing the aforementioned techniques, significant improvements were observed in the metrics, as depicted in the Lighthouse graphs. This successful implementation of the mentioned strategies resulted in notable enhancements across various performance indicators. The application of these techniques allowed for a substantial boost in the overall performance metrics, leading to an overall enhanced user experience.
The solution
The inclusion of third-party code on your website can pose a significant risk to its performance by impeding execution and overburdening it with excessive amounts of code. To solve this, Partytown introduces a unique approach to enhance website performance. Unlike other methods, it enables web workers to access the DOM synchronously, ensuring uninterrupted functionality of third-party scripts without altering their existing code.
Partytown leverages a combination of Web Workers, Service Workers, JavaScript Proxies, and a seamless communication layer established between them. This innovative framework empowers frontend developers to significantly improve the efficiency and overall performance of their websites.
This strategy unblocks the main thread and let it free from third party code running in the background!
The Detailed Guide
Dynamic imports combined with Waypoint are effective techniques for enhancing performance. By using Waypoint, the website can detect the user’s location within the CultureBlock section and show the relevant component.
The dynamic import functionality further improves performance by only calling the component when it is required, rather than rendering it on the initial page load. These measures help streamline the website’s performance and create a more responsive and seamless browsing experience for users.
Lastly, it is essential to modify the script type import to “text/partytown” to ensure the library comprehends the scripts that should be executed by Service Workers.
The Results
In conclusion, the initial changes implemented resulted in a significant improvement of 20 points in performance and a reduction in First Content Paint from 2.5 to 0.5 seconds. Additionally, this experience has shed light on the detrimental impact of placing heavy content at the top of a webpage, leading to slower loading times and compromised performance. In contrast, placing heavy content at the bottom not only minimizes its impact on performance but also enhances the overall user experience, particularly on mobile devices.