![]() This is a massive increase in performance with very little work needed. Also the time to Interactive has dropped from 6.3s to 3.3s and is now in green. Running a Lighthouse test using a facade we can see a huge difference especially in our Largest Contentful Paint which is in orange instead of red and with 3.8 seconds versus 8.8 seconds from the previous test. Instead of adding the third-party embed direct in our HTML, we load the page with a static element that looks similar to it and once the user interacts with this facade by placing their mouse over it, it then preconnects to the third-party resource and when the user clicks it replaces itself with the third-party product, in this case the actual video. In this case it's basically just an image that looks like a YouTube video. ![]() What's a facade?Ī facade is a static element which looks like the actual embedded third-party but it is not functional which makes it much quicker to load. Solutionĭid you know that third-party embeds can be lazily loaded on interaction? A facade is used in place of the third-party content until the user actually interacts with it. Lighthouse Tests with iframeįor those of you who regularly run a lighthouse test you might have come across this warning:Īlso you will see when testing on mobile how this page which has many YouTube embeds was giving a poor performance score with the Largest Contentful Paint of 8.8 seconds and time to interactive of 6.3 seconds.Īnd if we investigate a little further we can see in the Performance tab how long it is taking for the video frame to load meaning our user is getting this black empty box for quite a while until the video is ready. I have such a page where I load all the interviews and as I have done quite a lot of them the page takes a few seconds to fully load those videos. But when you have a page with lots of YouTube videos it can negatively affect performance. We normally like to add YouTube embeds to our site so that users can easily click on a video and just watch it right there in your site and it is up to them if they want to watch in full screen or watch direct in YouTube itself.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |