Eliminate render-blocking JavaScript and CSS
If you use Googles neat PageSpeed Insights tool found here (https://developers.google.com/speed/pagespeed/insights/) you will most likely encounter an optimization suggestion to Eliminate render-blocking JavaScript and CSS in above-the-fold content
You can do this by using something called a Critical Path CSS generator
Why use this?
Without these tweaks a user will see a blank web page when accessing your site in the seconds it takes to render the stylesheets and HTML
A Critical Path CSS Generator takes your CSS file contents and filters out the styles needed to load first.
Ok, so what do I do then?
You simply copy this filtered styles and minify them on www.minifier.org
This minifier online tool removes whitespace, strips comments, combines files, and optimizes/shortens a few common programming patterns.
You then paste that "minified" code between the <head></head> tags of your webpage with the <style></style> tags
But you're not done yet
Cut the line of code that links your external CSS file and paste it before the webpage's </body> tag
Why?
The filtered code you paste in the <head></head> tags will load first and start rendering the webpage while the other elements or styles load
The page thus renders quicker and improves your page speed times
My explanation is very brief so check out Jonas Ohlsson's webpage and generator with a detailed explanation here https://jonassebastianohlsson.com/criticalpathcssgenerator/
You can do this by using something called a Critical Path CSS generator
Why use this?
Without these tweaks a user will see a blank web page when accessing your site in the seconds it takes to render the stylesheets and HTML
A Critical Path CSS Generator takes your CSS file contents and filters out the styles needed to load first.
Ok, so what do I do then?
You simply copy this filtered styles and minify them on www.minifier.org
This minifier online tool removes whitespace, strips comments, combines files, and optimizes/shortens a few common programming patterns.
You then paste that "minified" code between the <head></head> tags of your webpage with the <style></style> tags
But you're not done yet
Cut the line of code that links your external CSS file and paste it before the webpage's </body> tag
Why?
The filtered code you paste in the <head></head> tags will load first and start rendering the webpage while the other elements or styles load
The page thus renders quicker and improves your page speed times
My explanation is very brief so check out Jonas Ohlsson's webpage and generator with a detailed explanation here https://jonassebastianohlsson.com/criticalpathcssgenerator/
Comments
Post a Comment