{"id":84927,"date":"2018-06-27T10:44:23","date_gmt":"2018-06-27T14:44:23","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=84927"},"modified":"2018-06-27T10:44:23","modified_gmt":"2018-06-27T14:44:23","slug":"how-to-fix-render-blocking-javascript-and-css-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-fix-render-blocking-javascript-and-css-in-wordpress.html","title":{"rendered":"How to fix render-blocking Javascript and CSS in WordPress"},"content":{"rendered":"<p>If you test your website on Google PageSpeed insights you noticed blocked Javascript and CSS. We are going to show you how to deal with the render-blocking JavaScript and CSS in our tutorial. There are two simple steps.<\/p>\r\n<h3 class=\"custom\">What is Render-Blocking JavaScript and CSS?<\/h3>\r\n<p>Firstly, you need to find out what is Render-Blocking JavaScript and CSS. This knowledge will help you to fix it.<\/p>\r\n<p>All WordPress websites have Javascript and CSS files added by different themes and plugins. These codes could increase your site loading speed. All the browsers usually take some time to load those codes before actual page content. That means that your site visitors have to wait for more to get page loaded.<\/p>\r\n<p>If you are developing your website you should know about the <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"nofollow\">Google PageSpeed Insights<\/a> tool. <\/p>\r\n<p>This tool inspect your website and offer suggestions that could help you to improve your website&#8217;s loading speed.<\/p>\r\n<p>Once the website is tested in Google PageSpeed Insights you will get a page with site score and recommendations to increase this score. Usually, websites gain 50-70 scores. It&#8217;s up to you to follow recommendations you see on that page or not. But remember that site speed influence your website performance.<\/p>\r\n<h3 class=\"custom\">How to fix Render-Blocking JavaScript and CSS?<\/h3>\r\n<p>Render-Blocking JavaScript and CSS is the most common thing that has to be fixed in order to improve website performance. The best way to fix it is to install special plugins. We are going to show you how to use Autoptimize and W3 Total Cache plugins.<\/p>\r\n<ol>\r\n\t<li><p><a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" rel=\"nofollow\">Autoptimize<\/a> plugin.<\/p>\r\n\t\t<p>You definitely know how to do plugin install but we will remind you the process.<\/p>\r\n\t\t<ul>\r\n\t\t\t<li><p>Login into your WordPress admin panel. Navigate to <strong>Plugins<\/strong> > <strong>Add New<\/strong> section<\/p><\/li>\r\n\t\t\t<li><p>Enter <em>Autoptimize<\/em> to the search field you will see on that screen.<\/p><\/li>\r\n\t\t\t<li><p>Install and activate plugin.<\/p><\/li>\r\n\t\t<\/ul>\r\n\t\t<p>Is it done? You can proceed to the next step now.Open <strong>Settings<\/strong> > <strong>Autoptimize<\/strong> page in your backend. This plugin allows you to modify your JS and CSS files. But please note! It could effect your website appearance.<\/p>\r\n\t\t<p>Locate <strong>JavaScript Options<\/strong> and <strong>CSS Options<\/strong> sections here. All you need to do is to check the boxes next to those titles and click <strong>Save changes and Empty cache<\/strong> button.<\/p>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1.jpg\" alt=\"\" width=\"988\" height=\"624\" class=\"alignnone size-full wp-image-84928\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1.jpg 988w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1-150x95.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1-300x189.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_1-768x485.jpg 768w\" sizes=\"(max-width: 988px) 100vw, 988px\" \/><\/a>\t\t\r\n\t\t\r\n\t\t\r\n\t\t<p>Test your website in Page Speed tool. If any questions open plugin page and click Advanced settings tab to be able to to include inline JS and remove scripts that are excluded by default.<\/p>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2.jpg\" alt=\"\" width=\"798\" height=\"474\" class=\"alignnone size-full wp-image-84929\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2.jpg 798w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2-150x89.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2-300x178.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_2-768x456.jpg 768w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/a>\t\t\r\n\t\t\r\n\t\t\r\n\t\t<p>Go to the CSS section and enable inline CSS option. Save the changes and click <strong>Clear Cache<\/strong> button.<\/p>\r\n\t<\/li>\r\n\t<li><p><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"nofollow\">W3 Total Cache<\/a> is recommended if you have this plugin already installed on your site.<\/p>\r\n\t\t<ol>\r\n\t\t\t<li><p>In order to configure plugin settings open <strong>Performance<\/strong> > <strong>General Settings<\/strong> page in your admin panel and scroll down to <strong>Minify<\/strong> section.<\/p><\/li>\r\n\t\t\t<li><p>Select <strong>Manually<\/strong> as a minify mode option. Save the changes.<\/p>\r\n\t\t\t\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3.jpg\" alt=\"\" width=\"1024\" height=\"602\" class=\"alignnone size-full wp-image-84930\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3-150x88.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3-300x176.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_3-768x452.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\t\t\t\r\n\t\t\t\r\n\t\t\t<\/li>\r\n\t\t\t<li><p>Now you need to add CSS you want to minify. The list of the files that have to be minified are in your Google PageSpeed Insights tool, just under the <em>Eliminate render-blocking JavaScript and CSS in above-the-fold content<\/em> title. Copy the URLs you will see there.<\/p><\/li>\r\n\t\t\t<li><p>You can open  <strong>Performance<\/strong> > <strong>Minify<\/strong> page now. Add your JS scripts under the <strong>JS file management<\/strong> section. To add scripts click on Add a script button. Enter URLs you copied earlier.<\/p><\/li>\r\n\t\t\t\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4.jpg\" alt=\"\" width=\"1024\" height=\"541\" class=\"alignnone size-full wp-image-84931\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4-150x79.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4-300x158.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_4-768x406.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\t\t\r\n\t\t\r\n\t\t<\/li>\r\n\t\t<li><p>Do the same under the <strong>CSS  file management<\/strong> section.<\/p>\r\n\t\t\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5.jpg\" alt=\"\" width=\"1024\" height=\"485\" class=\"alignnone size-full wp-image-84932\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5-150x71.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5-300x142.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2018\/06\/How_to_fix_render-blocking_Javascript_and_CSS_in_WordPress_5-768x364.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a>\t\t\r\n\t\t\r\n\t\t<\/li>\r\n\t\t<li><p>To save the changes click on <strong>Save settings and purge cache<\/strong> button.<\/p><\/li>\r\n\t\t<li><p>Open the Google PageSpeed tool and test your website again.<\/p><\/li>\r\n\t<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<p>That is it! You know to fix render-blocking Javascript and CSS in WordPress now. Be sure to check other tutorials we have.<\/p>\r\n<p>Also, be sure to check out the variety of <a href=\"https:\/\/www.templatemonster.com\/wordpress-themes.php\" title=\"WordPress Themes\" target=\"_blank\">WordPress Themes<\/a> to select the best template for your project.<\/p>","protected":false},"excerpt":{"rendered":"<p>If you test your website on Google PageSpeed insights you noticed blocked Javascript and CSS. We are going to show you how to deal with the render-blocking JavaScript and CSS in our tutorial. There are two simple steps.<\/p>\n","protected":false},"author":55,"featured_media":84933,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2666,2362,2665,2291,2292],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84927"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=84927"}],"version-history":[{"count":3,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84927\/revisions"}],"predecessor-version":[{"id":84943,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/84927\/revisions\/84943"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/84933"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=84927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=84927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=84927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}