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.

Hello, there. The following content is a personal overview from official material you can get at Google Web Fundamentals (https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript) and so, I do recommend you to get away better knowledge from there or even better, to take this free course in Website Performance Optimization at Udacity [ * ].

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".

Figure: A simple flow representing two rendering processes, the first one is optimized the second one is the unoptimized, taken from Web Fundamentals Article

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.

Finally, in the context of third-party scripts, optimizing for performance is about "understanding what happens in intermediate steps between receiving the JavaScript bytes and the required processing to turn them into rendered pixels — that’s the critical rendering path" [ * ].

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store