{"id":3896,"date":"2017-10-30T12:22:08","date_gmt":"2017-10-30T19:22:08","guid":{"rendered":"https:\/\/scottdeluzio.com\/?p=3896"},"modified":"2019-04-23T08:51:09","modified_gmt":"2019-04-23T15:51:09","slug":"defer-parsing-javascript-youtube-videos","status":"publish","type":"post","link":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/","title":{"rendered":"Defer Parsing of JavaScript With YouTube Videos"},"content":{"rendered":"<p>Deferring parsing of JavaScript is one of those messages that you get on sites like GTmetrix and other page speed sites that may sound like it&#8217;s from another planet. What on Earth does defer parsing of JavaScript even mean? Basically, what the message is saying is that a browser needs to process all of the content inside <code>&lt;script&gt;<\/code> tags before it can load the page. By putting off the processing of JavaScript until it is actually needed, you can reduce the initial load time of your page.<\/p>\n<h2>Defer Parsing of JavaScript YouTube Videos<\/h2>\n<p>I had a site with one YouTube video on the home page. The home page, when loaded was getting a low score in GTmetrix, and I wanted to do something to change it. The worst offender was Defer Parsing Of JavaScript, which had 13 scripts being loaded on the initial page load. Six of those were from youtube.com!<\/p>\n<p>When you embed a video in WordPress by copying and pasting the video&#8217;s URL from sites like YouTube, Vimeo, etc. WordPress creates an <code>&lt;iframe&gt;<\/code> for that video. It&#8217;s basically the same <code>&lt;iframe&gt;<\/code> code that you&#8217;d get by copying the embed code directly from YouTube.<\/p>\n<p>So, instead of using the URL to embed the video, go to YouTube and copy the <code>&lt;iframe&gt;<\/code> embed code.<\/p>\n<ul>\n<li>Under the video, click the Share button<\/li>\n<li>Towards the bottom, click the Embed button<\/li>\n<li>Make any adjustments to the Embed Options you may need<\/li>\n<li>Copy the embed code at the top that starts with <code>&lt;iframe width=<\/code><\/li>\n<\/ul>\n<p>Next, come back to your site and paste that <code>&lt;iframe&gt;<\/code> code where you want it to go on your site.<\/p>\n<p>You&#8217;re going to need to change a bit of the <code>&lt;iframe&gt;<\/code> code.<\/p>\n<ul>\n<li>Find the <code>src=\"https:\/\/www.youtube.com...<\/code> and change <code>src<\/code> to <code>data-src<\/code><\/li>\n<li>Add another empty parameter <code>src=\"\"<\/code>. This replaces the <code>src<\/code> we just changed to <code>data-src<\/code><\/li>\n<\/ul>\n<p>Your <code>&lt;iframe&gt;<\/code> should look something like this now:<\/p>\n<pre lang=\"html\"><iframe loading=\"lazy\" src=\"\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" data-src=\"https:\/\/www.youtube.com\/embed\/123456789\"><\/iframe><\/pre>\n<h3>The JavaScript<\/h3>\n<p>The <code>&lt;iframe&gt;<\/code> we set up by itself won&#8217;t load the video correctly. We&#8217;ll use some JavaScript to get it to load correctly.<\/p>\n<pre lang=\"js\">\nfunction init() {\nvar vidDefer = document.getElementsByTagName('iframe');\nfor (var i=0; i<vidDefer.length; i++) {\nif(vidDefer[i].getAttribute('data-src')) {\nvidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));\n} } }\nwindow.onload = init;\n<\/pre>\n<p>The next time I ran the GTmetrix test on that page, the Defer Parsing of JavaScript score went from an F (0) to a B (85). Initially, there was 2.2MB of JavaScript being loaded during the initial page load. After optimizing, it was down to about 168KB.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3897\" src=\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript.png\" alt=\"Defer Parsing of JavaScript With YouTube Videos\" width=\"908\" height=\"338\" srcset=\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript.png 908w, https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-300x112.png 300w, https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-768x286.png 768w\" sizes=\"(max-width: 908px) 100vw, 908px\" \/><\/p>\n<h3>Other Considerations<\/h3>\n<p>In my case the video was only on the home page, so I made sure the JavaScript file only loaded on the home page. In the future, if I have other pages that need this adjustment, I can add them to this conditional in my <code>wp_enqueue_scripts<\/code> function. If the video is set up the same way, you shouldn't need any other JavaScript to load other videos on your site as the JavaScript looks for any <code>&lt;iframe&gt;<\/code> elements that have a <code>data-src<\/code> attribute.<\/p>\n<p>Also, special thanks to <a href=\"https:\/\/varvy.com\/pagespeed\/defer-videos.html\">Patrick Sexton<\/a>, for the initial guidance for this post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Deferring parsing of JavaScript is one of those messages that you get on sites like GTmetrix and other page speed sites that may sound like it&#8217;s from another planet. What on Earth does defer parsing of JavaScript even mean? Basically, what the message is saying is that a browser needs to process all of the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3898,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[],"series":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio<\/title>\n<meta name=\"description\" content=\"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio\" \/>\n<meta property=\"og:description\" content=\"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/\" \/>\n<meta property=\"og:site_name\" content=\"Scott DeLuzio\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-30T19:22:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-23T15:51:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Scott DeLuzio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@scottdeluzio\" \/>\n<meta name=\"twitter:site\" content=\"@scottdeluzio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott DeLuzio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/\",\"url\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/\",\"name\":\"Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio\",\"isPartOf\":{\"@id\":\"https:\/\/scottdeluzio.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png\",\"datePublished\":\"2017-10-30T19:22:08+00:00\",\"dateModified\":\"2019-04-23T15:51:09+00:00\",\"author\":{\"@id\":\"https:\/\/scottdeluzio.com\/#\/schema\/person\/a0578da297e094ef0d581122331b5360\"},\"description\":\"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.\",\"breadcrumb\":{\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage\",\"url\":\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png\",\"contentUrl\":\"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png\",\"width\":1024,\"height\":512},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/scottdeluzio.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Defer Parsing of JavaScript With YouTube Videos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/scottdeluzio.com\/#website\",\"url\":\"https:\/\/scottdeluzio.com\/\",\"name\":\"Scott DeLuzio\",\"description\":\"WordPress Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/scottdeluzio.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/scottdeluzio.com\/#\/schema\/person\/a0578da297e094ef0d581122331b5360\",\"name\":\"Scott DeLuzio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/scottdeluzio.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1aab25f8a9570a61b20078bcb4ab4588?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1aab25f8a9570a61b20078bcb4ab4588?s=96&d=mm&r=g\",\"caption\":\"Scott DeLuzio\"},\"sameAs\":[\"https:\/\/x.com\/scottdeluzio\"],\"url\":\"https:\/\/scottdeluzio.com\/author\/scottdeluzio82\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio","description":"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/","og_locale":"en_US","og_type":"article","og_title":"Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio","og_description":"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.","og_url":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/","og_site_name":"Scott DeLuzio","article_published_time":"2017-10-30T19:22:08+00:00","article_modified_time":"2019-04-23T15:51:09+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png","type":"image\/png"}],"author":"Scott DeLuzio","twitter_card":"summary_large_image","twitter_creator":"@scottdeluzio","twitter_site":"@scottdeluzio","twitter_misc":{"Written by":"Scott DeLuzio","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/","url":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/","name":"Defer Parsing of JavaScript With YouTube Videos - Scott DeLuzio","isPartOf":{"@id":"https:\/\/scottdeluzio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage"},"image":{"@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage"},"thumbnailUrl":"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png","datePublished":"2017-10-30T19:22:08+00:00","dateModified":"2019-04-23T15:51:09+00:00","author":{"@id":"https:\/\/scottdeluzio.com\/#\/schema\/person\/a0578da297e094ef0d581122331b5360"},"description":"Learn how to defer parsing of JavaScript when you have YouTube videos on your site. A significant savings can be made with one easy solution.","breadcrumb":{"@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#primaryimage","url":"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png","contentUrl":"https:\/\/scottdeluzio.com\/wp-content\/uploads\/2017\/10\/defer-parsing-javascript-featured-image.png","width":1024,"height":512},{"@type":"BreadcrumbList","@id":"https:\/\/scottdeluzio.com\/defer-parsing-javascript-youtube-videos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/scottdeluzio.com\/"},{"@type":"ListItem","position":2,"name":"Defer Parsing of JavaScript With YouTube Videos"}]},{"@type":"WebSite","@id":"https:\/\/scottdeluzio.com\/#website","url":"https:\/\/scottdeluzio.com\/","name":"Scott DeLuzio","description":"WordPress Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/scottdeluzio.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/scottdeluzio.com\/#\/schema\/person\/a0578da297e094ef0d581122331b5360","name":"Scott DeLuzio","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/scottdeluzio.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1aab25f8a9570a61b20078bcb4ab4588?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1aab25f8a9570a61b20078bcb4ab4588?s=96&d=mm&r=g","caption":"Scott DeLuzio"},"sameAs":["https:\/\/x.com\/scottdeluzio"],"url":"https:\/\/scottdeluzio.com\/author\/scottdeluzio82\/"}]}},"_links":{"self":[{"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/posts\/3896"}],"collection":[{"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/comments?post=3896"}],"version-history":[{"count":0,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/posts\/3896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/media\/3898"}],"wp:attachment":[{"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/media?parent=3896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/categories?post=3896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/tags?post=3896"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/scottdeluzio.com\/wp-json\/wp\/v2\/series?post=3896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}