{"id":5684,"date":"2021-02-17T13:00:36","date_gmt":"2021-02-17T13:00:36","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5684"},"modified":"2021-02-17T13:02:09","modified_gmt":"2021-02-17T13:02:09","slug":"how-to-optimize-your-external-resources-in-wordpress","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/how-to-optimize-your-external-resources-in-wordpress\/","title":{"rendered":"How to optimize your external resources in WordPress"},"content":{"rendered":"\n<p>When it comes to <a href=\"https:\/\/wso.shortpixel.com\">WordPress Speed Optimization<\/a>, there are many techniques used to improve many aspects of a website. However, one usually hits a wall when external resources appear.<\/p>\n\n\n\n<p><strong>External resources are difficult to optimize<\/strong>. Period. By definition (&#8220;external&#8221;) they are not something you are supposed to optimize. We are talking about files that are loading from other places that are not your web server:<\/p>\n\n\n\n<!--more-->\n\n\n\n<ul class=\"wp-block-list\"><li>JavaScript files used to track your users (analytics): Google Analytics, Facebook Pixel&#8230;<\/li><li>Fonts: Google Fonts, Font Awesome&#8230;<\/li><li>Images, CSS and other JS files loaded by ads<\/li><li>JavaScript files and others from your embedded social network boxes: Facebook, Twitter, Instagram&#8230;<\/li><li>All kind of files loaded by embedded videos: YouTube, Vimeo&#8230;<\/li><\/ul>\n\n\n\n<p>Fortunately, the WordPress community is awesome and its developers even more, so we have some tools that may help us optimize these.<\/p>\n\n\n\n<p><strong>We are keeping this article in constant update!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Google Analytics<\/h2>\n\n\n\n<p>Almost everybody is using <a href=\"https:\/\/analytics.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Google Analytics (opens in a new tab)\">Google Analytics<\/a> (it&#8217;s free!) so it is very easy to set it up on your WordPress website. It&#8217;s a matter of copy-pasting a block of code to the head of your pages.<\/p>\n\n\n\n<p>However, implementing Google Analytics the official way means that every page load will request at least one external file from Google&#8217;s servers, called <strong>analytics.js<\/strong>. This external request is costing some load time, so it would be much more efficient to host the file on your local server.<\/p>\n\n\n\n<p>There are several tools to take care of this, but our favorite is <a rel=\"noreferrer noopener\" aria-label=\"CAOS (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/host-analyticsjs-local\/\" target=\"_blank\"><strong>CAOS<\/strong><\/a> by&nbsp;<a href=\"https:\/\/daan.dev\/\" target=\"_blank\" rel=\"noopener\">Daan van den Bergh<\/a>. His plugins are very well coded, they are light and very useful.<\/p>\n\n\n\n<p>Just install the plugin, <a rel=\"noreferrer noopener\" aria-label=\"follow these instructions (opens in a new tab)\" href=\"https:\/\/ffw.press\/docs\/caos\/user-manual\/\" target=\"_blank\">follow these instructions<\/a> and you will be set! Of course, after configuring CAOS, you will have to uninstall or remove the plugin or code you were previously using. Otherwise your analytics will duplicated!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Google Fonts<\/h2>\n\n\n\n<p>Almost every theme out there includes support for <a rel=\"noreferrer noopener\" aria-label=\"Google Fonts (opens in a new tab)\" href=\"https:\/\/fonts.google.com\/\" target=\"_blank\">Google Fonts<\/a>. That provides a good flexibility in terms of design, because the user can choose from more than 1000 different fonts for free. The downside is that these <strong>Google Fonts are almost always loaded directly from Google&#8217;s servers<\/strong>, and again that will be slower than if the fonts were hosted on your own server. If your theme includes support for locally hosting these Google Fonts, like <a rel=\"noreferrer noopener\" aria-label=\"Blocksy (opens in a new tab)\" href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\">Blocksy<\/a>, then you should take advantage of it. But if not, Daan again provides an excellent plugin for this: <a rel=\"noreferrer noopener\" aria-label=\"OMGF (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/host-webfonts-local\/\" target=\"_blank\"><strong>OMGF<\/strong><\/a>.<\/p>\n\n\n\n<p>The plugin is as easy to install and configure as CAOS. Just follow its <a href=\"https:\/\/ffw.press\/docs\/omgf-pro\/user-manual\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"user manual (opens in a new tab)\">user manual<\/a> and you will be ready to go.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Delay the loading of JavaScript files<\/h2>\n\n\n\n<p>JavaScript is hardly ever crucial to be loaded right away. What the user expects is to see a webpage painted as soon as possible, and that includes your CSS, fonts and HTML. But all the extra secondary functionality (see the list above) provided by <strong>external JavaScript files can easily be delayed 5 or 10 seconds<\/strong>. This way we give priority to the local and important stuff, and once the site has been loaded, we can say &#8220;okay, load the rest unimportant stuff&#8221;.<\/p>\n\n\n\n<p>It&#8217;s important to notice that <strong>we are not deferring<\/strong> the loading, but delaying. The defer attribute that one adds to an HTML tag tells the browser to download the script when found and execute it when the HTML parsing is completed. <strong>When we delay the scripts, those scripts won\u2019t be executed until there is a user interaction<\/strong>, which is an event like scrolling, touch input, mouse hovering, etc, or until 5 seconds later if there is no such user interaction.<\/p>\n\n\n\n<p>For this we can use a very useful plugin called <a rel=\"noreferrer noopener\" aria-label=\"Flying Scripts (opens in a new tab)\" href=\"https:\/\/wordpress.org\/plugins\/flying-scripts\/\" target=\"_blank\"><strong>Flying Scripts<\/strong><\/a>. It&#8217;s a very simple and small plugin that does an excellent job.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Listing external resources<\/h3>\n\n\n\n<p>First, we need to know exactly what resources to add to Flying Scripts.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open an Incognito\/InPrivate window and press F12 to open the Developer Tools<\/li><li>Go to your site<\/li><li>Click on Network, then JS and then look at the <strong>Domain<\/strong> column<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210216_153936-1024x585.jpg\" alt=\"\" class=\"wp-image-5687\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210216_153936-1024x585.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210216_153936-300x171.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210216_153936-768x439.jpg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210216_153936.jpg 1276w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Write down every domain that is not yours. On the image above we can see <em>sharethis.com<\/em>, <em>facebook.net<\/em>, <em>google-analytics.com<\/em> and <em>disqus.com<\/em>. All of those can be delayed, because they do not need to be immediately loaded; they provide sharing features, analytics reporting and comment functionalities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Applying the list<\/h3>\n\n\n\n<p>Now, go to your site, Settings &gt; Flying Scripts and simply <strong>add those domains to the list<\/strong>. Like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"310\" src=\"https:\/\/shortpixel.com/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210217_122054-1024x310.jpg\" alt=\"\" class=\"wp-image-5689\" title=\"\" srcset=\"https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210217_122054-1024x310.jpg 1024w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210217_122054-300x91.jpg 300w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210217_122054-768x232.jpg 768w, https:\/\/shortpixel.com\/blog\/wp-content\/uploads\/2021\/02\/Screenshot_20210217_122054.jpg 1107w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>That&#8217;s it. Now the external resources from those domains will be delayed 5 seconds (you can change the time, but 5 or 10 seconds should be enough).<\/p>\n\n\n\n<p>If you notice that something breaks on your website, remove every line until the functionality is restored; you will have found then the external resource that shouldn&#8217;t have been delayed \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When it comes to WordPress Speed Optimization, there are many techniques used to improve many aspects of a website. However, one usually hits a wall when external resources appear. External resources are difficult to optimize. Period. By definition (&#8220;external&#8221;) they are not something you are supposed to optimize. We are talking about files that are [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5687,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-5684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-performance"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5684"}],"version-history":[{"count":6,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5684\/revisions"}],"predecessor-version":[{"id":5692,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5684\/revisions\/5692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/5687"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}