I work on a lot of websites on a daily basis and most require some form of website performance optimization. Most days involve cleaning up all the relevant issues and running the site back through performance tools like GTmetrix, Pingdom, and/or Page Speed Insights. But… the results are still grim. Why?
Part of the issue is over-reliance on third party assets or external tracking services. This article will go over what an external service is and why they are a drag on your website’s performance; something that you will ultimately never fix.
What Is A Third Party Asset (External Service)?
A third party asset is any asset that does not originate from your website. This technically can be your own content delivery network (CDN), think of it as any asset, you, yourself, did not add, or place on your website. For example, if you are loading a YouTube video, that is a third party asset.
Google Fonts are another popular third-party asset that most websites make use of today. Many types of third party assets are unavoidable. While, you can host certain items such as Google Fonts locally, a YouTube video from a channel that isn’t yours, will be out of your reach.
Popular Examples Of Third Party Assets
There are hundreds of third party assets out there. However, here is a list of third party assets I see on websites frequently.
- Google Analytics
- Google Fonts
- Facebook Pixel
- HotJar
- Wistia
- YouTube
- Vimeo
Obviously, there are way more third party assets out there. However, if you’re website is using most of the above, you are already suffering in terms of website performance.
How Can I Improve My Website’s Performance?
Truth is, there are multiple types of website performance; perceptual and fully loaded performance. We need to address what each of these mean before, we get into the nitty gritty of how to fix it.
Perceptual load time is most often times measured by the “on-load event time.” GTMetrix and Pingdom show on-load event time, but Google Page Speed Insights does not.
Fully Loaded Time
The fully loaded time is the total time it takes for everything on the website to download and after there is no network activity for 2 seconds. This is the time GTMetrix defaults too. It is a great measurement for showing you the whole picture. By making use of this time, you can see the impact a third party has on your website.
However, if these assets are required for the website to function, then the fully loaded time shows an inflated view of how your website is actually performing. For example, if you use HotJar (which despite their article), does have an impact on website performance. It pings the browser every few seconds to make sure that it is still active on the website. It also uses this to track user activity.
This ping can be seen multiple times on a performance test, like GTmetrix and PageSpeed Insights. It will look like HotJar is causing more harm than it really is.
Additionally, if you are on a slower host, and have an Ajax request going on in the background, if the request takes 20 seconds to process, it is going to make the website as a whole look incredibly slow. I will note that this long request does not have an impact on user experience.
Onload Event Time
The on-load event time is an event that fires in the browser. The on-load event fires when everything in the document has been downloaded. This means CSS/JavaScript/Images that are within the document have all been downloaded and are ready to be executed.
The on-load event time is a great tool for measuring whether the website is accessible for users and is perceptually fast. However, it is not good for diagnosing slow third party assets. That being said, if you have a website where the on-load event time is 0.9 seconds, but the fully loaded time is 10 seconds, you can safely assume the website is being hindered by third party assets. (In all likelihood).
It might look like third party assets are taking a long time to load, this does not have an impact for your users. It does not take 10 seconds for your users to interact with your website.
How To Lower The Fully Loaded Time
This is a part of the problem. Since you are relying on assets that are not from your server, there is very little you can do to resolve this issue. The fully loaded time is as the name describes; it is a way to measure the time it takes for all assets to download in their entirety. Third party assets and all. If you are relying on a lot of tracking scripts or videos, then you will have a high fully loaded time. There is really nothing you can do about that.
That is unless you evaluate the usage of those third party assets and remove the ones that are not necessary. I highly recommend doing this, if performance matters to you.
How To Lower The Onload Event Time
It does not matter what service you are using to lower the on-load event time. Just make sure you are loading the script asynchronously (async) or preferably with defer. These attributes allow the script to be loaded in a non-render blocking manner. This will improve the render time for the rest of the document.
If you are using an iFrame or video embed, make sure to lazy load it. This way the assets are not downloaded, until absolutely necessary. In fact, if you find yourself setting up an iFrame embed, you may be better off using that method rather than a JavaScript implementation. Take the Facebook Like Box for instance. If you load it in the footer, you are better off loading it as an iFrame. This way none of the additional assets it requires are loaded. This is because you are lazy loading the entire thing.
Other Performance Issues Caused By Third Party Assets
Since the assets are not from your server, there are a host of other issues that can arise. Such as CSS or JavaScript files that do not use GZIP compression. Those files might not have expires headers either. Or they may cause unnecessary redirects and because of the nature of those scripts, you will have to live with the developer’s bad choices.
Summary (TLDR)
If you rely on third party assets, your websites’ performance is going to suffer. When running a performance test, make sure to check the on-load event time as opposed to the fully loaded time. Otherwise, you will receive skewed data on how your website is actually loading perceptually for your users. A website with a fully loaded time of 10 seconds but an on-load time of .5 seconds is still incredibly fast.
Additionally, focus less on the letter grades that performance tests offer because third party assets are unable to be optimized, like your own assets can be. As a final note, stop loading everything externally. If all you need is a contact form, use a contact form plugin.
If you need analytics, use Google Analytics. Or if you keep finding a need for a third party asset, you are likely over complicating the website and you should evaluate the usage. You might like having that little chat box at the bottom right of your website, but if less than 1% of your users are actually bothering to use it, than it might not be worth keeping at all.
Very handy post.