![]() ![]() But modern web pages are heavy and ever-growing in size (known fondly as “website bloat”): The average web page is over 2 megabytes large with over 200 requests. Performance needs to be built in starting at the code level, and user-centric metrics like time to interactive (TTI), total blocking time (TBT), and first input delay (FID) help you gauge how fast a website is. This is why performance is crucial when building websites. Even if your website is designed with usability in mind, these factors impede users from fully benefiting from the website’s features. ![]() And slow websites are, in a way, discrimination: The majority of the world’s population don’t have access to high-speed Internet or fast CPUs. However, it’s not always easy to maintain high performance in websites. The average user doesn’t spend much time waiting for a web page to load or to interact with the page: According to Google, if a page’s load time goes up from 1 second to 3 seconds, the probability of the user bouncing increases by 32%. Great user experience starts with a page that loads instantly. There’s a small but important difference shown here in the diff.Introducing Partytown, a lightweight open-source solution that reduces execution delays due to third-party JavaScript by offloading third-party scripts to web workers, which run in background threads. ![]() If you have a look at Google’s recommended approach you might notice some differences between the code snippet i’ve used above and the one shown in: Add gtag.js to your site. You can read more about the Partytown React component in the docs, but I will explain the forward prop as this is where things can get a little complicated. The React component can be configured using regular React Jsx props. It’s also worth pointing out that the actual gtag script is ever so slightly different to the example given on the Google docs: Install the global site tag, i’ll explain why in a moment. This is so later on, when Partytown does its thing it’s able to locate the tags to offload to web workers. Usually you’d expect to see type="text/javascript" but with Partytown this has changed to type="text/partytown". I’d like to draw your attention to the type on the tag. There’s an if condition right at the beginning to ensure the script tags and Partytown component aren’t added while in development ![]() To set tags in the HTML you can use the setHeadComponents function. OnRenderBody is one of gatsby-ssr’s extension points and runs after each page is created by Gatsby. There’s quite a lot going on here, so let me talk you through it. You can see from the below that amongst that mess on the Performance tab is the gtag script which is getting in the way of the application JavaScript – Blurg! □ What we know: Loading third-party scripts on the main thread impacts performance by delaying the time it takes for your site to become available and ready to use by your end users. It’s important because third-party scripts have a habit of slowing down the time it takes for your website to load, and a slow-to-load website isn’t good for users, or performance metrics…. The general idea is, Partytown keeps the main thread clear which frees up resources that are used to execute the main application’s JavaScript (your website) – after all, this is the important bit, right? Why is it important? The Partytown docs do a great job of explaining how it all works, and the diagram was particularly useful in helping me understand the role of web workers – I’d advise having a peek at the web workers section in the docs. ![]()
0 Comments
Leave a Reply. |