How to improve your website performance by third-party facades

What are third-party resources? #

Marketers like to track their users with analytics tools, A/B test them, and provide them other ‘gifts’ like ads, social media buttons, video’s, text to speech modules, chats and other scripts or widgets. The third-party resources provide more functionality by making it more interactive and dynamic. But, there are many reasons why you should be careful with these scripts: they can cause security and privacy issues, lead to unpredictable behaviour or have unintended consequences. However the reason we would like to discuss in this article are the website performance issues that they often cause, which lead to unhappy users, lower conversions and other negative consequences. One of the effects that recently started to become an extra problem is that search engines are actually starting measuring and incorporating user experience in their search algorithms. If you provide a bad user experience you will see this in your organic search results. But how do the search engines determine bad UX?

Google’s Core Web Vitals and Lighthouse Performance #

Recently, Google introduced the Web Vitals as a method to measure user experience objectively based on several variables. The Core Web Vitals are three variables that are pointed out by Google as the most important ones. In order to get a positive upswing in Google’s organic search performance (i.e. your rankings) you need to pass the test and score ‘good’ on all three variables:

• Largest Contentful Paint (LCP) which measures loading performance.
• First Input Delay (FID) which measures interactivity.
• Cumulative Layout Shift (CLS), which measures visual stability.

Unfortunately, it’s often not so easy to get a good score, especially if you also want to use lots of third-party resources. And, even if you manage to pass Google’s Core Web Vitals assessment, the next challenge awaits: reach a Google’s Lighthouse performance score above 90 in order to score ‘good’ on the other Web Vitals. If you have a score of 90+ in Lighthouse, your website is satisfyingly quick for the user, according to Google.

The playing field: speed vs. functionality #

On one hand the marketer wants to track as much as possible and provide excellent functionality with the third party scripts. On the other hand the developer will probably recommend using as little as possible to provide quick loading times and responsiveness. Little side note here: in practice it won’t be this black and white of course… The marketer also wants a quick website because of better commercial results. But in general you would say that you need to choose between speed and functionality. Now preferably you don’t want to choose and in the next section we’re going to describe a technical solution that we use often: the third-party facade.

What is a third-party facade? #

Ideally you hide third-party functionality until you actually need it. But you also want to show your visitors that you have a certain clickable element to launch the third-party tool. Here comes the facade: a static element designed to look like a third-party embedded on the page, but is not functional until you click on it. Because there is no functionality behind it, only a simple static element needs to load, which is much faster. Here's how it works with Lighthouse:

• Lighthouse looks for third-party resources which can be deferred in the Lighthouse third-party facade audit.
• The data about the impact of the deferrable resources is stored in a ‘Third Party Web database’.
• The audit fails if the page loads resources that are found in the database.
• You will see a notification in the report ‘some third-party resources can be lazy loaded with a facade’.
• You know there is work to do!

We advise you to start investigating the timeline of the network requests of a website, and look at which third-parties are loaded. It might be possible that a third-party isn’t on the predescribed web database but is slowing down your website significantly. If you temporarily remove the third-party resources you can compare how quick your website loads without them. The next step is to actually build the facade or use an open-source solution.

How to defer third-party resources with a facade? #

The technique seems simple: you avoid adding a third-party resource directly in your code but load the page with an element that looks similar. For instance the same chat icon but without functionality behind. The interaction pattern should be something like:

• On load: add the facade to the page.
• On hover: the facade pre connects to the third-party resource.
• On click: the facade replaces itself with the third-party product.

You can create the facades yourself or use open-source versions which are even recommended by Google. For some of these you need to insert code into your website code, while others need JavaScript plugins to load. There are also plugins available for content management systems like Wordpress or Magento.

Some recommended situations when a facade can be useful:

• Live chats like Drift, Intercom, Facebook messenger.
• Social media widgets.
• YouTube and other video embedded players.
• For lazy loading ads or images.

Based on this technique, Paul Irish created a version for Youtube Embeds.

Conclusion #

In this blog we’ve learned that you can trick performance audits with replacing third-party resources with non-functional facades. Moreover, you don’t actually trick the audits because your website will load quicker when only the necessary stuff is requested. It pays off to check if your website has third-party resources and if so, if they can be deferred by the facades: a quicker website creates happy users who convert better and come back more often.

Do you need help? #

Placing third-party facades is a commonly used technique for web performance specialists. However we can imagine that it’s not easy to implement it without some technical support. If you want to know more about how third-party facades could help your website, you can contact us or plan a (video)call.