{"id":287,"date":"2023-10-22T15:28:11","date_gmt":"2023-10-22T14:28:11","guid":{"rendered":"https:\/\/web-design-eastbourne.co.uk\/News\/?p=287"},"modified":"2023-11-25T12:29:28","modified_gmt":"2023-11-25T12:29:28","slug":"eliminate-render-blocking-javascript-and-css-in-above-the-fold-content","status":"publish","type":"post","link":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/","title":{"rendered":"Eliminate render-blocking JavaScript and CSS in above-the-fold content"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What is render-blocking JavaScript and CSS in above-the-fold content?<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"368\" src=\"http:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png\" alt=\"eliminate Render-blocking JavaScript and CSS in above the fold content\" class=\"wp-image-186\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png 617w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content-300x179.png 300w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"798\" src=\"http:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Above-the-fold-content.png\" alt=\"\" class=\"wp-image-180\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Above-the-fold-content.png 633w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Above-the-fold-content-238x300.png 238w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">What is above-fold-content?<\/h3>\n\n\n\n<p>Above the fold content (or Visible Content) is content that appears on the page first when a user loads your website.<\/p>\n\n\n\n<p>As you can see in the image it is the first portion of your page and by making sure this loads first your users will not have to wait with a blank screen before they are engaged. <\/p>\n\n\n\n<p>This makes for a better user experience and, as statistics show, will increase the amount of users that will become customers (known as the conversion rate).<\/p>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">What is render-blocking JavaScript and CSS?<\/h3>\n\n\n\n<p>When a web browser loads a website it follows a particular process<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First it downloads the HTML file.<\/li>\n\n\n\n<li>Then it reads (or renders) through the HTML code line at a time<\/li>\n\n\n\n<li>If it requires a resource such as JavaScript or CSS it will download&nbsp; and render that resource before continuing with the html<\/li>\n\n\n\n<li>If the as JavaScript or CSS calls on another resource that too has to be downloaded and read before it can continue<\/li>\n<\/ul>\n\n\n\n<p>This means that if you have request a JavaScript or CSS file before the html then the browser is held up downloading and reading that file before it can display your content.<\/p>\n\n\n\n<p>How to eliminate render-blocking JavaScript and CSS in above-the-fold content?<\/p>\n\n\n\n<p>The answer to this sounds simple. Move the requests for such files below the html that loads your above the fold content, right? Well yes that is correct and in fact we place it right at the bottom of the code before the closing body tag but that does cause an issue.<\/p>\n\n\n\n<p>The above fold content requires information from the CSS file in order to display properly. So what we do is place all the CSS required to display the above-the-fold content within the html file itself. We place it within style tags above the html and within the header tags as shown below.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"306\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Eliminate-render-blocking-JavaScript-and-CSS-in-above-the-fold-content.jpg\" alt=\"\" class=\"wp-image-289\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Eliminate-render-blocking-JavaScript-and-CSS-in-above-the-fold-content.jpg 417w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/Eliminate-render-blocking-JavaScript-and-CSS-in-above-the-fold-content-300x220.jpg 300w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>This sounds very complicate however there are some tools that help us do this.<\/p>\n\n\n\n<p>TOOL 1<\/p>\n\n\n\n<p>The simplest tool I have found is <a href=\"https:\/\/www.sitelocity.com\/critical-path-css-generator\">\u201cSitelocity\u2019s Critical Path Generator\u201d<\/a><\/p>\n\n\n\n<p>Simply enter your site address including the http:\/\/ or https:\/\/ and click the \u2018GENERATE CRITICAL PATH CSS\u2019 button. The tool will then automatically download your sites CSS file and copy the required section for the above the fold content. It then minifies the CSS and outputs it ready for you to input into your HTML file as described above.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>TOOL 2<\/p>\n\n\n\n<p>Another tool is the <a href=\"https:\/\/jonassebastianohlsson.com\/criticalpathcssgenerator\/\">\u201c<strong>Critical Path CSS Generator<\/strong>\u201d<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>enter your website address<\/li>\n\n\n\n<li>Paste your entire CSS file into the box indicated<\/li>\n\n\n\n<li>Hit the \u201ccreate Critical Path CSS\u201d button<\/li>\n<\/ol>\n\n\n\n<p>Then it will generate the CSS required to display the above fold content. You then simply add the generated CSS into your html file as described above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is render-blocking JavaScript and CSS in above-the-fold content? What is above-fold-content? Above the fold content (or Visible Content) is content that appears on the page first when a user loads your website. As you can see in the image it is the first portion of your page and by making sure this loads first [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_edit_lock":["1700915373:2"],"footnotes":[""],"_thumbnail_id":["186"],"_et_pb_use_builder":["off"],"_et_pb_old_content":[""],"_et_gb_content_width":[""],"ast-featured-img":["disabled"],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":[""],"_links_to":[""],"_links_to_target":[""],"_edit_last":["2"],"_yoast_wpseo_primary_category":["6"],"_yoast_wpseo_focuskw":["Eliminate render-blocking JavaScript and CSS in above-the-fold content"],"_yoast_wpseo_metadesc":["Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score."],"_yoast_wpseo_linkdex":["67"],"_yoast_wpseo_content_score":["60"],"_yoast_wpseo_estimated-reading-time-minutes":["3"],"_yoast_wpseo_wordproof_timestamp":[""],"_yoast_indexnow_last_ping":["1700915369"],"_et_dynamic_cached_shortcodes":["a:0:{}"],"_et_dynamic_cached_attributes":["a:0:{}"]},"categories":[23,6,8],"tags":[],"class_list":["post-287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-pagespeed-insights","category-seo","category-website-speed"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Eliminate render-blocking JavaScript and CSS in above-the-fold content - Web Design Latest News<\/title>\n<meta name=\"description\" content=\"Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Eliminate render-blocking JavaScript and CSS in above-the-fold content - Web Design Latest News\" \/>\n<meta property=\"og:description\" content=\"Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Design Latest News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ScriptedArtWebDesign\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/keir.chapman.9\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-22T14:28:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-25T12:29:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png\" \/>\n\t<meta property=\"og:image:width\" content=\"617\" \/>\n\t<meta property=\"og:image:height\" content=\"368\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Keir Chapman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@scriptedart\" \/>\n<meta name=\"twitter:site\" content=\"@scriptedart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keir Chapman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Eliminate render-blocking JavaScript and CSS in above-the-fold content - Web Design Latest News","description":"Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score.","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:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/","og_locale":"en_GB","og_type":"article","og_title":"Eliminate render-blocking JavaScript and CSS in above-the-fold content - Web Design Latest News","og_description":"Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score.","og_url":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/","og_site_name":"Web Design Latest News","article_publisher":"https:\/\/www.facebook.com\/ScriptedArtWebDesign\/","article_author":"https:\/\/www.facebook.com\/keir.chapman.9\/","article_published_time":"2023-10-22T14:28:11+00:00","article_modified_time":"2023-11-25T12:29:28+00:00","og_image":[{"width":617,"height":368,"url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png","type":"image\/png"}],"author":"Keir Chapman","twitter_card":"summary_large_image","twitter_creator":"@scriptedart","twitter_site":"@scriptedart","twitter_misc":{"Written by":"Keir Chapman","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#article","isPartOf":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/"},"author":{"name":"Keir Chapman","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/person\/52653b471130e58f9af7a0b6168fa59a"},"headline":"Eliminate render-blocking JavaScript and CSS in above-the-fold content","datePublished":"2023-10-22T14:28:11+00:00","dateModified":"2023-11-25T12:29:28+00:00","mainEntityOfPage":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/"},"wordCount":474,"commentCount":0,"publisher":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#primaryimage"},"thumbnailUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png","articleSection":["Google PageSpeed Insights","SEO","Website Speed"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/","url":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/","name":"Eliminate render-blocking JavaScript and CSS in above-the-fold content - Web Design Latest News","isPartOf":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#website"},"primaryImageOfPage":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#primaryimage"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#primaryimage"},"thumbnailUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png","datePublished":"2023-10-22T14:28:11+00:00","dateModified":"2023-11-25T12:29:28+00:00","description":"Eliminate render-blocking JavaScript and CSS in above-the-fold content to improve page load speed and Google page speed insights score.","breadcrumb":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#primaryimage","url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png","contentUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/eliminate-Render-blocking-JavaScript-and-CSS-in-above-the-fold-content.png","width":617,"height":368,"caption":"Two computer monitors side by side. The left screen shows lines of colored code, focusing on ways to eliminate render-blocking JavaScript and CSS in above-the-fold content, while the right displays a webpage layout with colored sections and charts."},{"@type":"BreadcrumbList","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/web-design-eastbourne.co.uk\/News\/scripted-art-web-design-latest-news\/"},{"@type":"ListItem","position":2,"name":"Eliminate render-blocking JavaScript and CSS in above-the-fold content"}]},{"@type":"WebSite","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#website","url":"https:\/\/web-design-eastbourne.co.uk\/News\/","name":"Scripted Art Web Design News","description":"Grow with us","publisher":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/web-design-eastbourne.co.uk\/News\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization","name":"Scripted Art Web Design News","url":"https:\/\/web-design-eastbourne.co.uk\/News\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/logo\/image\/","url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/HomepageHeader.gif","contentUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/HomepageHeader.gif","width":906,"height":601,"caption":"Scripted Art Web Design News"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ScriptedArtWebDesign\/","https:\/\/x.com\/scriptedart","https:\/\/www.youtube.com\/@scriptedart9508","https:\/\/www.pinterest.co.uk\/ScriptedArt\/"]},{"@type":"Person","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/person\/52653b471130e58f9af7a0b6168fa59a","name":"Keir Chapman","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","caption":"Keir Chapman"},"description":"I am a self-motivated, passionate website designer and developer. I have over ten years of experience in building websites and have developed a broad skill set including web design, frontend and backend development, and SEO. Using my growing knowledge base I have built my own company (scriptedart.co.uk) creating websites,\u00a0e-commerce stores and producing custom graphics and web app functionality for a range of local businesses.","sameAs":["https:\/\/keirchapman.co.uk\/","https:\/\/www.facebook.com\/keir.chapman.9\/","https:\/\/www.linkedin.com\/in\/keir-chapman-6a138158\/"],"url":"https:\/\/web-design-eastbourne.co.uk\/News\/author\/webdesigneastbournenewsblogadmin7\/"}]}},"_links":{"self":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":1,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":655,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/287\/revisions\/655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}