You can foresee if a website will have a really bad performance score when you land into one that is showing embedded videos. Let’s talk about embedding external content while keeping your scores high.
This issue not only affect videos. Look at your website and identify what are the external services are you using:
- Analytics
- Embedded Tweets
- Banners
- “Share this on Facebook”
All these are examples of potential issues for your website. We can still use them.
Reduce the amount of unused JavaScript
At least, reduce it until needed. YouTube video player weights a lot, and is CPU intensive, so don’t make me download it unless I want to watch it.
Think about how your users will interact with your content, and be creative.
For example, you can just show a few KB screenshot of the video player, and then replace it with the real one only when the user actually clicks on it.
One thing I use to do is to load the real player when the user moves the mouse near this fake player. Just take into account mobile devices won’t fire this event, so you will have to check also the click (or tap in this case).
Lazy load third party widgets and plugins
Sometimes, these external services are a hundreds of pixels away from the viewport (what your users are seeing on screen). For example, when the content is way down the article, or inside an inactive tab.
This happened to me while using Disqus in my own blog in the past, which is a nice service that allows your static website to have comments, using JavaScript. The problem is the browser downloads it, no matter if you didn’t read the article’s title yet, slowing down the initial load.
In these scenarios you can either wait until the user scrolls down enough, or you can even just avoid loading the script unless the user presses on a “View Comments” button. Either way is fine, but the second one will save more Internet data usage. Mobile device users will be thankful.
Defer the load of embedded external scripts
There are scripts that requires loading as soon as possible, like Google Analytics which is required for most marketing teams. Or those that prevents images from loading until they’re on screen, which are beneficial for end users.
Embedding any other external content can just wait until the page finish the load, and that’s exactly what “defer” attribute does on script tags:
<script defer src="example.js" />It will tell browsers to postpone loading it until the page is rendered. Once the user can start reading your page, these scripts will be loaded in the background, avoiding blocking the website.
Remove what you don’t need
Last but not least, common sense. Remove what doesn’t adds value to your users.
The typical Facebook “Like” button requires a few round trips to their servers and, apart of all the cuestionable tracking that happens in between, these kind of gimmicks also tends to block the rendering.
And you guessed it, it hurts your scores.
Conclusion
Having good results in performance metrics is more than just a number in a report, it also delights your customers.
Leave the initial page load as plain as possible and, when the user can start reading it, or working with it, enhance the experience in the background.
Remember to check your website regularly for potential issues. Read also these essential performance tips if you don’t know where to start optimising your website.