![]() GTmetrix is a highly robust site performance testing tool. ![]() To test the benefit of combining all the deferral options of the plugin, we ran a simple experiment by running GTmetrix on a WordPress post with one embedded YouTube video. For our tests we choose the more conservative animation that simply pulses the player once. You can read more about these special effects here. Here's the option you'll find to activate it in the plugin's admin/settings page:Īs shown, the plugin includes an additional option to choose how the video is presented upon its load. In our plugin we use JavaScript to realize this technique. This indirectly defers parsing of the scripts within that iframe. Lazy loading postpones the loading of an iframe until it is actually visible in the browser. Browser restrictions prevent a plugin from directly deferring (or manipulating) the JS inside the third-party iframe. We'll refer to this usage of the attribute as direct deferral since the syntax is explicit.ĭeferring YouTube embed iframe scripts with lazy loadingĭeferring the parsing of YouTube's own iframe, on the other hand, requires a less direct approach since the YouTube player is loaded in its own iframe from YouTube's servers. To defer the parsing of scripts represented by the two options above, the plugin uses the HTML script defer attribute, which follows this template:Įach of the plugin's scripts has its own instance of this attribute with the particular script name between the quotes. Such a trimmed down setup avoids as many variables as possible. We had no problems with it checked during our experiments (described below) using the built-in Twenty Twenty theme and all plugins omitted except ours. You can determine whether to have that option checked after testing out your own site. Furthermore, not all themes and plugins work well with deferred scripts, so you may not always want to defer jQuery. jQuery is also used by this plugin along with a vast amount of WordPress themes and other plugins, so we separate it as its own option for you to manipulate. The second option is for jQuery-specific deferral. The first option ("Defer JavaScript") is recommended for all sites as it defers all the scripts that are unique to helping this plugin run. To defer the plugin-specific scripts, simply go to the Performance Tab as shown below:īoth deferral options are checked in the screenshot. Together, they add over 1MB of content to a page's size.ĭeferring plugin scripts with the script defer attribute In fact, these are the standard three scripts you'll always see loaded by a YouTube oembed: Regarding the latter, note that regardless of whether you use a plugin, oembed, or any other method, embedding a YouTube video will require your browser to parse scripts from YouTube/Google's servers. With less work for your browser to perform while generating a page, the idea is that your page speeds are better than with in-line execution of scripts.Īs of version 13.2.3 of our YouTube plugin, it is possible to defer both the parsing of the plugin's own scripts and those scripts from the YouTube's iframe containing the embedded player. Briefly, JavaScript deferral involves executing the associated scripts of certain page content, like a YouTube video, only after the page is loaded. ![]() To add to the problem, we all want faster page speeds for higher search engine rankings, user experience, and conversions.įortunately, with a website performance technique called JavaScript deferral, you can reconcile both fast load times and video embedding. Unfortunately, however, it can also increase the page's load time and worsen its speed score due to the additional work a browser performs to render. However, if you're looking to learn about our new YouTube facade mode feature that is offered in both our free and Pro plugin, we recommend you check out this demo on our WordPress test site.Įmbedding a YouTube video, live stream, or gallery can add a dynamic and engaging component to a webpage. The below article primarily focuses on scripts that are loaded by the YouTube player. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |