{"id":4623,"date":"2018-06-14T13:11:59","date_gmt":"2018-06-14T13:11:59","guid":{"rendered":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?p=4623"},"modified":"2018-08-24T11:07:46","modified_gmt":"2018-08-24T11:07:46","slug":"eliminate-render-blocking-js-css-fold-content","status":"publish","type":"post","link":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/","title":{"rendered":"Simple Steps to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content"},"content":{"rendered":"<p>Loading speed is the key factor for today\u2019s modern website as visitors might change their way to other websites, if speed is the lacking factor. As per statistics, people act impatiently in case of loading time and therefore, you should proactively do the website optimization.<\/p>\n<p>Several things can be done for keeping the loading time low, one of which is learning to deal with render-blocking JavaScript and CSS in above-the-fold content. If you aren\u2019t aware of this, by reading this guide you will surely learn it. Additionally, the loading time to boot will be improved for your website.<\/p>\n<p>This guide will explain you about what JavaScript and CSS are. We will further provide you two different ways to eliminate render-blocking JavaScript and CSS in above-the-fold content for <a href=\"https:\/\/www.milesweb.co.uk\/hosting\/wordpress-hosting\">WordPress<\/a>. So, let\u2019s start.<\/p>\n<h3>What \u2018Render-Blocking\u2019 JavaScript and CSS Are?<\/h3>\n<p>You need to get clarified with several terms that will benefit you a lot in future. This is for both a beginner as well as an expert as you might not know some of them, so let\u2019s check them as below:<\/p>\n<p><strong>JavaScript: <\/strong>JavaScript is a programming language which you can add as an advanced functionality to your website. It is used by most WordPress plugins and themes and this indicates that it adds extra code to your site which results into smooth functioning of your website.<\/p>\n<p><strong>Cascading Stylesheets (CSS):<\/strong> CSS is required for adding complex styles to your website. HTML is used as the foundation by every site and so, CSS can be thought of as the wall paper and paint.<\/p>\n<p><strong>Render-blocking<\/strong>: Render-blocking are the elements that don\u2019t allow your pages to load or \u2018render\u2019 immediately in the browser of your visitor. This simply means that if any extra JavaScript or CSS is added to your website, it is considered to be render-blocking.<\/p>\n<p><strong>Above-the-fold content: <\/strong>When a website is loaded using any browser, only a part of it is seen at first. For checking the entire website, it is required to scroll down till the end. Above-the-fold content refers to the part of page that is seen immediately after its loading gets completed.<\/p>\n<p>Hope you are now familiar to these terms and the concept won\u2019t be complicated for you further. When it comes to eliminating render-blocking JavaScript and CSS in above-the-fold content, it indicates the process of website optimization, so that its loading time doesn\u2019t affect those scripts and files.<\/p>\n<p>Remember for giving better experience to your visitors, it is important that your website loads fast. Today, people are quite impatient when a website loads slowly and the site that loads faster alongside takes the visitors away due to frustration, which can affect your website badly.<\/p>\n<p>Clearly speaking, there are several things that can be done for optimizing your website\u2019s loading time. But it can be tricky to eliminate render-blocking JavaScript and CSS in above-the-fold content and hence, you might require some help. Prior to getting to work, let\u2019s see the process of monitoring website\u2019s performance in the first place.<\/p>\n<h3>How to Monitor Your Website\u2019s Performance?<\/h3>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/improve-website-loading-speed\/\">Website performance can be monitored<\/a> via plenty of tools which can accurately give you the time required for loading your pages. <strong>GTmetrix<\/strong> is an example that helps you know the detailed speed test results. You simply need to insert the URL to be analyzed and it loads a detailed report in seconds:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/GTMetrix-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4850 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/GTMetrix-min-300x73.png\" alt=\"\" width=\"300\" height=\"73\" \/><\/a><\/p>\n<p>At the left of the <strong>GTmetrix<\/strong> dashboard, there are two scores depending on the optimization accuracy of your website. The website might require to be worked on and you can also learn about optimizing it with the <strong>PageSpeed<\/strong> tab as you scroll down:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/gtmetrix-pagespeed-results-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4851 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/gtmetrix-pagespeed-results-min-300x138.png\" alt=\"\" width=\"300\" height=\"138\" \/><\/a><\/p>\n<p>Currently, we are going to check only your overall loading time which needs to be less than two seconds. Though your website loading time is over two seconds, you can reach the target. Don\u2019t miss to check <strong>Google PageSpeed Insights<\/strong> for an actionable advice on website optimization:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/Google-Page-Speed-Insights-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4852 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/Google-Page-Speed-Insights-min-300x54.png\" alt=\"\" width=\"300\" height=\"54\" \/><\/a><\/p>\n<p>This tool is different from <strong>GTmetrix<\/strong>\u00a0as it assigns two scores for your site \u2013 one for mobile and other for desktop experiences:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/pagespeed-insights-score-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4853 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/pagespeed-insights-score-min-300x127.png\" alt=\"\" width=\"300\" height=\"127\" \/><\/a><\/p>\n<p>Exactly below your score, you will find a section called <strong>Should Fix<\/strong>. If there\u2019s any JavaScript or CSS that is restricting your website from loading quickly, you will see the message as below:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/pagespeed-eliminate-render-blocking-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4854 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/pagespeed-eliminate-render-blocking-min-300x128.png\" alt=\"\" width=\"300\" height=\"128\" \/><\/a><\/p>\n<p>When you click on the<strong> Show how to fix<\/strong> button, it will display exactly which scripts are creating problems. Once that information is with you, you can start working to eliminate them.<\/p>\n<h3>How to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content for WordPress (In 2 Ways)?<\/h3>\n<p>We aren\u2019t going to eliminate your website\u2019s scripts rather we are going to find ways for preventing your JavaScript and CSS from slowing down your site without disturbing its functionality. Let\u2019s get started with the simplest method.<\/p>\n<ol>\n<li>\n<h3>Use the Autoptimize Plugin<\/h3>\n<\/li>\n<\/ol>\n<p>WordPress always has a plugin to fix almost any issue. Here we are going to use the <strong>Autoptimize<\/strong> plugin. It helps to decrease the impact of your website\u2019s scripts on its loading time:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/Autoptimize-Plugin-min.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4855 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/Autoptimize-Plugin-min-300x104.jpg\" alt=\"\" width=\"300\" height=\"104\" \/><\/a><\/p>\n<p>The plugin actually plays a magic behind the scenes for doing this. For example, when possible it binds the code of those scripts, so that the visitors won\u2019t require to load several files. Additionally, it \u2018minifies\u2019 their code which comprises of eliminating all the empty characters from it such as tabs, breaks, and carriage returns. With this, the code\u2019s reading level becomes difficult but it can minimize the file\u2019s size, leading to faster page loads.<\/p>\n<p>Apart from this, the plugin also takes your JavaScript and CSS and reschedules them. This means the code will load only after your page renders above the fold for your visitors. Practically, it has no effect on your site\u2019s functionality, but can improve its performance.<\/p>\n<p>For plugin installation, go to your WordPress dashboard and click on the <strong>Plugins<\/strong> tab. Then click on the <strong>Add New<\/strong> button at the top of the window. A screen will appear with a search bar where you can search for <strong>Autoptimize<\/strong>. The plugin will pop up in the results below, then click on the <strong>Install Now<\/strong> button next to the plugin\u2019s name:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-install-now-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4856 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-install-now-min-300x103.png\" alt=\"\" width=\"300\" height=\"103\" \/><\/a><\/p>\n<p>After the installation is complete, a popup with a blue <strong>Activate<\/strong> button will appear next to the plugin\u2019s name. Click on it and then you can go to the new <strong>Settings<\/strong> &gt; <strong>Autoptimize<\/strong> tab on your dashboard:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-settings-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4857 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-settings-min-300x99.png\" alt=\"\" width=\"300\" height=\"99\" \/><\/a><\/p>\n<p>There will be few settings that you will see, but you need to work only on two &#8211; <strong>Optimize JavaScript Code?<\/strong> and <strong>Optimize CSS Code?<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-js-css-active-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4858 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/autoptimize-js-css-active-min-300x111.png\" alt=\"\" width=\"300\" height=\"111\" \/><\/a><\/p>\n<p>Check both the boxes and save your changes. In several cases, these steps are enough for taking care of any render-blocking JavaScript or CSS in your website. However, you should double-check and therefore, go to Google PageSpeed Insights and analyze your website once again. If the plugin has really worked on those scripts, you won\u2019t see any messages about render-blocking JavaScript and CSS under the <strong>Should Fix<\/strong> section:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/no-render-blocking-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4859 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/no-render-blocking-min-300x80.png\" alt=\"\" width=\"300\" height=\"80\" \/><\/a><\/p>\n<p>However, it might happen that the plugin failed at eliminating every single script with just the default settings. If this happens with your website, go to the <strong>Settings<\/strong> &gt; <strong>Autoptimize<\/strong> tab and click on the <strong>Show Advanced Settings <\/strong>button at the top of the screen. Now, tick on both the options &#8211;\u00a0<strong>Also Aggregate Inline JS<\/strong> and <strong>Also Aggregate Inline CSS<\/strong> and save your changes. This needs to be enough to remove all the scripts that disturb your website loading speed. If it isn\u2019t, you will need to use a more comprehensive plugin.<\/p>\n<ol start=\"2\">\n<li>\n<h3>Use the W3 Total Cache Plugin<\/h3>\n<\/li>\n<\/ol>\n<p>W3 Total Cache plugin is an alternative to Autoptimize. It\u2019s not only comprehensive but also a one-stop solution for WordPress caching and optimization:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/banner-772x250-min.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4860 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/banner-772x250-min-300x97.jpg\" alt=\"\" width=\"300\" height=\"97\" \/><\/a><\/p>\n<p>For the unskilled people \u2013 \u2018caching\u2019 stores some of its files on the computer of your visitors. This means they need to load only some data on consequent visits, leading to improved loading time.<\/p>\n<p>W3 Total Cache not only does excellent caching but also helps in eliminating render-blocking JavaScript and CSS in above-the-fold content. For this, you can install the plugin with the same steps that were used for Autoptimize.<\/p>\n<h3>Eliminate Render-Blocking JavaScript<\/h3>\n<p>After the plugin is installed and ready to use, go to the <strong>Performance<\/strong> &gt; <strong>General Settings<\/strong> tab inside the <a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/customize-wordpress-dashboard\/\">WordPress dashboard<\/a>. Search for the <strong>Minify<\/strong> section, check the <strong>Enabled<\/strong> <strong>setting<\/strong> box and select the <strong>Manual<\/strong> mode:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/enable-minify-manual-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4861 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/enable-minify-manual-min-300x72.png\" alt=\"\" width=\"300\" height=\"72\" \/><\/a><\/p>\n<p>Don\u2019t miss to save your new settings and then navigate to <strong>Performance<\/strong> &gt; <strong>Minify<\/strong> and search for the <strong>JS section<\/strong>. Next use the \u201c<strong>defer<\/strong>\u201d setting for choosing the <strong>Non-blocking<\/strong> for both the body settings &#8211; <strong>Before &lt;\/head&gt;<\/strong> and <strong>After &lt;body&gt;<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/enable-before-head-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4862 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/enable-before-head-min-300x82.png\" alt=\"\" width=\"300\" height=\"82\" \/><\/a><\/p>\n<p>Further, go to the <strong>JS file management<\/strong> section and ensure that you select your active theme and then click on the <strong>Add a Script<\/strong> button just below:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/add-js-script-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4863 size-medium aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/add-js-script-min-300x77.png\" alt=\"\" width=\"300\" height=\"77\" \/><\/a><\/p>\n<p>For this section to get completed, you will need to return to Google PageSpeed Insights and re-analyze your website. After getting your results, scroll down to the <strong>Should Fix<\/strong> section and click on the <strong>Show how to fix<\/strong> button right below. This will display a list of render-blocking JavaScript and CSS files of your website:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/render-blocking-list-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4846 aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/render-blocking-list-min-300x99.png\" alt=\"\" width=\"300\" height=\"99\" \/><\/a><\/p>\n<p>Next, copy the complete URL for each of the JavaScript file and paste it in the field that appeared when you click on the <strong>Add a Script<\/strong> button on your dashboard:<\/p>\n<p>&nbsp;<\/p>\n<p><strong><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/example-javascript-file-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4847 aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/example-javascript-file-min-300x73.png\" alt=\"\" width=\"300\" height=\"73\" \/><\/a><\/strong><\/p>\n<p><strong>Let the default Template and Embed Location settings<\/strong> be as it is and repeat the process for every JavaScript file that <strong>Google<\/strong> suggests you. After you are done, <strong>Save all the settings<\/strong> and it\u2019s complete.<\/p>\n<h3>Eliminate Render-Blocking CSS<\/h3>\n<p>Finally, you need to secure your render-blocking CSS using a similar process. Simply go to the <strong>CSS file management<\/strong> section and select your active theme from the list at the right:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/css-file-management-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4848 aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/css-file-management-min-300x54.png\" alt=\"\" width=\"300\" height=\"54\" \/><\/a><\/p>\n<p>You are going to follow the same process used for JavaScript as below:<\/p>\n<p>Click on the <strong>Add a style sheet<\/strong> button below the drop-down list that indicates your active theme.<\/p>\n<p>Go back to the <strong>Google PageSpeed Insights<\/strong> results and find the list of render-blocking CSS files in your page.<\/p>\n<p>Copy the <strong>URL<\/strong> of one of the files and paste it into the <strong>File URL<\/strong> field that has appeared after clicking on the <strong>Add a style sheet<\/strong> button.<\/p>\n<p>Ensure your <strong>Template<\/strong> settings are set to <strong>All Templates<\/strong>.<\/p>\n<p>Again click on the <strong>Add a style sheet<\/strong> tab and repeat the process for all CSS files that you need to.<\/p>\n<p>When it\u2019s completed, you will have a list of files that appear something as below:<\/p>\n<p><a href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/css-example-urls-min.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4849 aligncenter\" src=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/05\/css-example-urls-min-300x99.png\" alt=\"\" width=\"300\" height=\"99\" \/><\/a><\/p>\n<p>Click on <strong>Save all<\/strong> settings button and test your website again with Google PageSpeed Insights. If you have done everything correctly, you won\u2019t see any render-blocking scripts on your page. Also, the Google PageSpeed Insights score will be improved due to those scripts\u2019 elimination.\u00a0 If you are interested in checking how this has affected your loading times, go to GTMetrix and run a new test. You will find that the loading times are lower than the prior website test you ran at the beginning of this guide.<\/p>\n<h3>Conclusion<\/h3>\n<p>Just a bit of work and your website is optimized for better loading time and yes, the rewards are well worth after that. So, this will make your website navigation easy and your visitors will enjoy their experience to the fullest. It sounds really complicated when it comes to eliminating render-blocking JavaScript and CSS in above-the-fold content. However, after going through this guide, you will find that it\u2019s a very basic process.<\/p>\n<p>In case you have any questions regarding how to eliminate render-blocking JavaScript and CSS in above-the-fold content for WordPress, don\u2019t hesitate to ask in the comments section below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Loading speed is the key factor for today\u2019s modern website as visitors might change their way to other websites, if speed is the lacking factor. As per statistics, people act impatiently in case of loading time and therefore, you should proactively do the website optimization. Several things can be done for keeping the loading time [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":4681,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,17],"tags":[460,459,461],"class_list":["post-4623","post","type-post","status-publish","format-standard","has-post-thumbnail","placeholder-for-hentry","category-howtos","category-wordpress-faq","tag-css","tag-javascript","tag-script-elimination"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content<\/title>\n<meta name=\"description\" content=\"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content\" \/>\n<meta property=\"og:description\" content=\"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Hosting FAQs by MilesWeb\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-14T13:11:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-08-24T11:07:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"445\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pallavi Godse\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pallavi Godse\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/\",\"name\":\"Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content\",\"isPartOf\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg\",\"datePublished\":\"2018-06-14T13:11:59+00:00\",\"dateModified\":\"2018-08-24T11:07:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/7e3952607fa9eb4e82fea9f7cad9c945\"},\"description\":\"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content\",\"breadcrumb\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg\",\"contentUrl\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg\",\"width\":800,\"height\":445},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple Steps to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\",\"name\":\"Web Hosting FAQs by MilesWeb\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/7e3952607fa9eb4e82fea9f7cad9c945\",\"name\":\"Pallavi Godse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eefc9695ea2b2c6e143c9c9919701aaa?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eefc9695ea2b2c6e143c9c9919701aaa?s=96&d=blank&r=g\",\"caption\":\"Pallavi Godse\"},\"description\":\"Pallavi is a Digital Marketing Executive at MilesWeb and has an experience of over 4 years in content development. She is interested in writing engaging content on business, technology, web hosting and other topics related to information technology.\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/pallavi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content","description":"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content","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:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/","og_locale":"en_GB","og_type":"article","og_title":"Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content","og_description":"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content","og_url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/","og_site_name":"Web Hosting FAQs by MilesWeb","article_published_time":"2018-06-14T13:11:59+00:00","article_modified_time":"2018-08-24T11:07:46+00:00","og_image":[{"width":800,"height":445,"url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg","type":"image\/jpeg"}],"author":"Pallavi Godse","twitter_misc":{"Written by":"Pallavi Godse","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/","name":"Learn to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content","isPartOf":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage"},"image":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage"},"thumbnailUrl":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg","datePublished":"2018-06-14T13:11:59+00:00","dateModified":"2018-08-24T11:07:46+00:00","author":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/7e3952607fa9eb4e82fea9f7cad9c945"},"description":"JS and CSS in above-the-fold content also affect website loading speed. Learn to eliminate render-blocking Javascript and CSS in above-the-fold content","breadcrumb":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#primaryimage","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg","contentUrl":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-content\/uploads\/2018\/06\/Simple-Steps-to-Eliminate-Render-Blocking-JavaScript-and-CSS-in-Above-the-Fold-Content.jpg","width":800,"height":445},{"@type":"BreadcrumbList","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/eliminate-render-blocking-js-css-fold-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/"},{"@type":"ListItem","position":2,"name":"Simple Steps to Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content"}]},{"@type":"WebSite","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/","name":"Web Hosting FAQs by MilesWeb","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/7e3952607fa9eb4e82fea9f7cad9c945","name":"Pallavi Godse","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eefc9695ea2b2c6e143c9c9919701aaa?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eefc9695ea2b2c6e143c9c9919701aaa?s=96&d=blank&r=g","caption":"Pallavi Godse"},"description":"Pallavi is a Digital Marketing Executive at MilesWeb and has an experience of over 4 years in content development. She is interested in writing engaging content on business, technology, web hosting and other topics related to information technology.","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/pallavi\/"}]}},"views":1274,"_links":{"self":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/4623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/comments?post=4623"}],"version-history":[{"count":5,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/4623\/revisions"}],"predecessor-version":[{"id":4680,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/4623\/revisions\/4680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/media\/4681"}],"wp:attachment":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/media?parent=4623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/categories?post=4623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/tags?post=4623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}