: 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
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) ?
More posts by @Si4351233
3 Comments
Sorted by latest first Latest Oldest Best
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.
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
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.