Analytics Log - Adil Khan

View Original

How To Improve Load Time For Pages With Embedded Videos By Using Screaming Frog

With pages, images can take up the most sizes and bloat up pages, increasing load times. We usually think that embedded videos don’t do much as as you’re watching video from another site. However, every time a page with an embedded video [say, from YouTube] is loaded, the browser needs to fetch the Video title, the video thumbnail using the YouTube API and show it in your browser. While it might not necessarily impact the user experience, it does count towards page load times. If it’s a content site with several videos, this can quickly add up.

How can Screaming Frog help?

SF has a great feature called Custom Search [in paid version] where you can check the HTML source code for any particular text and return pages that contain the text. With embedded videos, I’ll use “youtube.com/embed” as my text.

Custom Search can be found in Config > Custom > Search.

You can now run a regular crawl for your entire site and then check the Custom Search tab to see a list of all pages on your site that contain YT embedded link.

As I’ve already fixed this on the first page, let’s use the second result: https://analyticslog.com/blog/2016/5/27/how-to-get-blog-post-category-from-squarespace-to-google-analytics-dom-method-in-gtm .

This page contains a YouTube video at the bottom of the article.

If you load this page and open your dev console > Network tab and monitor the waterfall, the last request is from YouTube and it’s approximately at 14 sec with considerable time lost between 9 sec and 14 sec mark.

If you also check GTMetrix results for this page, it shows almost 18 sec load time [test location from Canada]

https://gtmetrix.com/reports/analyticslog.com/D5nVkkc2

Ok, so now I’ve swapped the default video thumbnail with a screenshot of the video thumbnail and uploaded it to Squarespace as a custom thumbnail. By doing this, the browser will not fetch the asset details from YouTube but it’s now a dummy thumbnail that just activates onClick within the video.

Here are the results after the switch with first up, the Network tab.

All done within ~12 sec.

https://gtmetrix.com/reports/analyticslog.com/c6PFCoIA

32% better page load time achieved just by making this one simple switch. If you were to scale this across an entire sites [with lots of videos], this would be great and Screaming Frog is great at generating bulk crawl results.