Mobile app version of vmapp.org
Login or Join
Si4351233

: Eliminate render-blocking JavaScript and CSS in above-the-fold content When you seek speed score in Google Page Insight, you may be seen a warning like "Eliminate render-blocking JavaScript and

@Si4351233

Posted in: #GoogleSearch #PageSpeed #Seo

When you seek speed score in Google Page Insight, you may be seen a warning like "Eliminate render-blocking JavaScript and CSS in above-the-fold content ", i have been looking for a solution to fix this issue.

I know, there are already few geeks replied, to move CSS and Js file to the bottom of webpage, then it will load only after webpage content loaded. But unfortunately, it isn't the correct answer. This issue is all about how we allowing the above field content to render. So anybody have a solution (except "move CSS and Js to footer of webpage) ?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Si4351233

3 Comments

Sorted by latest first Latest Oldest Best

 

@Si4351233

You can change all your script calls to load "async" and dont use doc/window ready in functions if you can help it. Then make a script to load CSS files asynchronously as well using something like github.com/filamentgroup/loadCSS
As far as 3rd party scripts/source/cache/etc though, you are out of luck. Its ironic how google scripts reduce your google pagespeed score considering they are the proponents of all these rules.

10% popularity Vote Up Vote Down


 

@Correia994

At last i found a solution my self,

By default CSS is treated as a render blocking resource, which means that the browser will hold rendering of any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.

To fix this issue, what you need to do is identify the style sheet rule that applies to the above fold content, just remove them from the external css file, minify them and deliver it as inline CSS. And then move your external css link to bottom of the page. Like below,

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>


After making the style rule delivery of above fold as like this, i could achieve speed score 100/100 for one of my landing page. You can have a look on speed insight score.

NOTE: Never use inline css delivery if style rule is to heavy

10% popularity Vote Up Vote Down


 

@Lengel546

You can fix just Go to the Google page speed tester and find out what are the things which increases your page time loading , after analysis of your whole website , it shows overall result, your site problems and how to fix that problem. you just click on (how to fix), after clicking on that , Google give you solution how to fix.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme