How third-party scripts performance pitfalls are related to the Critical Rendering Path
Third-party scripts on HTML pages can be costly to the loading performance of the page.
If you work as a software engineer you will face yourself adding third-party scripts to applications or websites eventually. When you read "script" it can be a hugely complex feature like a live chatbox with waiting "lines" etc or something away from the user's eyes like events tracking scripts which some things demand from you extra code into your app to work properly.
So basically they can offer you:
- Analytics, trackers, and social buttons.
- Advertising iframes.
- Libraries to make things dynamic and/or interactive.
Since these scripts may be crucial in providing value to the app's functionality one may ask about the risks you are expected to take implied to its usage. Once again, referring primarily to Web Fundamentals Article, the following are issues of concern that usually third-party scripts carry on:
- They can be a privacy concern
- They might be a security concern
- They can be unpredictable and change without you knowing
- They can have unintended consequences
I can tell you myself what a nightmare a simple positioning task for a live chatting box can be in a day of work for a Frontend Engineer, especially when you are asked to apply styling rules that simply don't fit naturally to the offered third-party design interface and so many other things.
Despite the given examples, third-party scripts can nevertheless, be utterly useful and low profile. Consider as an example the analytics scripts, capable of tracking user behavior and turning it into insights.
According to the data collected from user behavior, one can decide which page must be optimized (better loading third-party scripts, fonts, etc) or not. Also, thanks to that and many efforts directed to user experience improvements, we are going to see machine learning features working within those third-party scripts [ * ].
So, after all, using a third-party is not that bad, nice. Well, equally significant to all mentioned before are the impacts on the critical rendering path. Let's finally define a focus and talk about the last one (here I am, talking to myself, alone, using Let's).
The Critical Rendering Path (CRP) is extremely well-described in this Web Fundamentals Article [ * ] that again I do recommend you to read top bottom to get a deep understanding. In their own few first words, it is about "optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action".
Ok, we as Developers can always get a double check over the following basic rules concerned about what a good web experience should look like. Anything that goes against it hurts the user experience in the core. Core foundations of a delightful web experience are [ * ]:
- Fast — It responds quickly to user interactions with silky smooth animations and no janky scrolling.
- Integrated — The user doesn’t have to reach through the browser, it uses the full capabilities of the device to create an experience true to the device.
- Reliable — Load instantly and reliably, never showing the downasaur, even in uncertain network conditions.
- Engaging — Keeps the user coming back to the app with beautifully designed experiences that look and feel natural.
Think about CRP as one of many components of the web experience foundation. Now, as a component deeply related to user experience one may imagine that the worse CRP the fewer bonuses earned from Search Engines. At this point, bad use of third-party scripts is not only punishing your final user but also extending the damage to your SEO team's performance and core business.
Never stop learning
- An In-Depth Look at Google Analytics 4: New Capabilities, Benefits, and Disadvantages
- Performance and Resilience: Stress-Testing Third Parties
- How 3rd Party Scripts can be performant citizens on the web
- Things to Know (and Potential Dangers) with Third-Party Scripts
- An Website Performance Optimization free course — Udacity
- Measuring the Critical Rendering Path
- Introducing the new Google Analytics — 2020 October