Eliminate render-blocking JavaScript and CSS in above-the-fold content
-
Hi, I use your plugin to get my last few errors resolved that Google PageSpeed Insight’s reported.
Now there is only one last css error left, and it is a css from Autoptimize itself.Here the exact message from Google:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
…cache/autoptimize/css/autoptimize_5a89f2e2115279d38ef47671418a9661.css**
By the way, it’s about the page http://www.premiumshopping.net
Thank you so much! Would be so cool, if I could get this one last thing resolved with your help. Because even though your plugin resolved 12 other issued perfectly, Google still gives me only 84/100 because of the last issue. Starting from 85 is “green”, which is my goal.
Can you help me?
Thanks!
-
Hello, i maked edit .htacces file but i ahve few mroe problems left.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.taurusmedia.lt%2F
Leverage browser caching for the following cacheable resources:
https://connect.facebook.net/en_US/sdk.js (20 minutes)
https://maps.googleapis.com/…tTr98FPglJL7nEodRmS_9oMD8562RE7c&ver=3.0 (30 minutes)
https://www.google-analytics.com/analytics.js (2 hours)How i can fix it? my website is http://www.taurusmedia.lt
Hi Frank @futtta,
Very cool plugin. I am trying to leverage it for my site, specifically to improve the PageSpeed Insights score. Currently, my above the fold content is slowing down rendering. I followed your video (https://youtu.be/k56E_7SFQoE) to eliminate render blocking css above the fold, but when I enabled Inline and Defer CSS, and pasted in the critical css, I get all my content shifted to the right, with a big white column on the left. See this image- https://ibb.co/dZsSQk
It is disabled on my site currently so the css should look correct at http://www.californiabeardco.com
After enabling the inline css and defer css, my PageSpeed Insight score actually went down to 64 from 70. Any thoughts?
Edit 1: When the inline css and defer css is enabled, I get a flash of unstyled content before the style is applied.
Edit 2: The critical CSS that was created from the generator is: html {
margin-top: 32px !important;
}@media screen and (max-width: 782px) {
html {
margin-top: 46px !important;
}
}and it seemed incredibly short compared to the one suggested in the video. I generated critical CSS using a different tool, which gave me a lot more css to copy, but the outcome was the same. The website style is still broken and not appearing properly.
My browser is usually maximized. When I refresh, the layout is all broken. However, if I resize the browser, then re-maximize it, the layout comes together and looks correct. I have no clue what to do about that.
- The topic ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ is closed to new replies.
