Download speed - a very important factor in the rankings on the SERP ( the S earch E ngine the R esult P age), or on the search results page. Google's PageSpeed Insights is a great tool for optimizing the loading speed of your website. It not only shows the current speed , but also identifies problems that slow down your resource. In this guide, we will show you how to fix one of the most common problems you may encounter while testing your site. So if you see a warning: “ Eliminate render-blocking JavaScript and CSS in above-the-fold content ”, - do not worry, the solution is in this article.
What the Warning Means “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
In the Google PageSpeed rules , you will find the following requirement: “Eliminate render-blocking JavaScript and CSS”. Failure to do so may significantly affect the loading speed of your site - slow it down. Surely you have a question, how can JavaScript and CSS slow down a site?
Simply put, whenever you install a new plugin or theme, the front-end is updated with new JavaScript and CSS code. Consequently, browsers may need more time to download this code, and therefore the web page.
The top of the page, or ATF ( A bove T he F old), is the part of the site that the user sees immediately after loading it. Any other part - all that you see, scrolling down - this is BTF ( B elow T he F old), or the lower part.
Now the essence of this warning is becoming much clearer, isn't it? If, when you visit your site, any irrelevant JavaScript and CSS are loaded, you will receive a warning to reduce the number of JavaScript and CSS code that blocks rendering at the top of the page
Searching for “Render-Blocking JavaScript and CSS” Using Google Page Insights
, PageSpeed Insights:
- , URL- “Enter a web page URL”.
- “Analyze”, .
c — 50 70 . Google .
JavaScript CSS, , .
, , 100 — . — UX.
, , UX, PageSpeed Insights.
, Google , . , , -!
“Eliminate render-blocking JavaScript and CSS in above-the-fold content”
JavaScript CSS, , WordPress . WordPress, :
W3 Total Cache
— W3 Total Cache. , , WordPress:
- Performance -> General Settings
- , Minify, .
- “Enable” Minify. Minify mode — “Manual”.
- “Save all settings”.
- JavaScript CSS, . Google PageSpeed Insights .
- , , , Performance -> Minify.
- JS. JS, “Operations in areas”. Non-blocking using “defer” embed type — Before <head>.
- “Add Script” JS file management. URL- JavaScript PageSpeed Insights .
- CSS. “CSS file management”, “Add a style sheet”. , URL- CSS Google PageSpeed Insights .
- , “Save Settings & Purge Caches”.
Autoptimize
, JavaScript CSS, — Autoptimize. . :
- Settings -> Autoptimize.
- “JavaScript and CSS Options” “Optimize JavaScript Code?” “Optimize CSS Code?”.
- “Save Changes and Empty Cache”.
, . .
, , Google PageSpeed Insights . , — ! .
- Settings -> Autoptimize.
- “Show Advanced Settings”.
- , “Also aggregate inline JS” “Also aggregate inline CSS” selections.
- .
Speed Booster Pack
, — Speed Booster Pack. JavaScript CSS . , :
- Speed Booster Pack , “Advanced”.
- “JavaScript Optimization”, “JavaScript Optimization” “Defer parsing of Javascript files”.
- “CSS Optimization” “CSS render-blocking optimization”.
- , Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS . , .
, . — “ ”, FOUC (Flash Of Unstyled Content). , , , CSS, .
, , Google PageSpeed Insights , .
, , .
Google’s PageSpeed Insights , . , , WordPress, “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, .