Lazy Loading Css to drastically Improve Page Speed
Loading big CSS file at the end of the document makes sense because some times CSS takes up a lot of time to load. Learn how to defer CSS loading which makes your website super-fast. PageSpeed is a tool by Google where you can find the website speed.
Why lazy load css?
- Why lazy load css?
- How to load CSS at the end?
- Problems I faced while lazy loading css
- Inline critical CSS
- Inline SCSS in Jekyll
Many a times - on a slow connection - a user may wait for a maximum of 5 to 6 seconds and if the website is blank and still busy loading your head tag with a huge
css file, the user may hit the back button!
You just lost a potential subscriber or even customer if you are selling something. Using a pre-loader like I did on my website can engage the users for a few more seconds but not forever. So you should not make your users wait for the main content.
This ensures that even if the style or script fails to load, the user can still read the content (if the content is text). You can also minify your blog for faster loading.
What I did was, I put a script at the end of the html document to insert the css link tag only after loading the document. This was helpful because my
main.css is a huge file and also font awesome stylesheet that loads from a CDN.
After testing in PageSpeed I found that my website is faster than ever! Do use this tool to find out what is slowing down your website.
Another very good tool to analyze website loading time is GT Metrix. This tool will give you a deep analysis on why your website is slow and provides optimized files to use.
How to load CSS at the end?
This is possible if I declare my link tag at the end of the document. But it is advised by w3c to place link tags only in the head section. So I’m using a script to place the link tag( linking css) in the head section.
I suggest you to check the PageSpeed Insights before and after implementing this. You sure will notice the difference.
The above code loads two CSS files. One is local
main.css and the other is remote
font-awesome.min.css. You can make use of this code and change it accordingly. Make sure you edit the path properly.
Keep contents within
<noscript> tag in the head file. This will be loaded only of the website is loaded in a browser which doesn’t run any script or with a noscript plugin.
Problems I faced while lazy loading css
This problem occurred because I have Adsense. My AdSense code is responsive. It adjusts to the screen size mentioned in the media query. And the media query is inside
main.css which I have made to load at the very end!
Adsense script loads before
main.css and assumes that the screen is full width whereas my content is not full width. My content only goes in the center leaving some gap on both left and right sides. But AdSense has already assumed that it is full screen and adjusts its ad size to full screen and hence the ad flows out of the content.
Inline critical CSS
I struggled hard to tackle this. And after a while, I realized that I can define the width of my content with inline-css even before the AdSense code loads! Thus avoiding it to overflow. You can inline any style that you think is required in the beginning.
So that solved the problem :) You can in-line important css this way. When the css file is made to load at the end, your content will not have any styling which means the content may show up on the left side of the screen for a fraction of a second, fonts appear with a default web-font and some SVGs and images may show up in their full size.
To avoid this, in-line some of the css which makes everything look smooth. Do not in-line too much css though. It is not a good practice and also your users shouldn’t get an impression that you do not know how to use css.
Inline SCSS in Jekyll
Jekyll supports sass preprocessor. So any number of
scss files can be used to make a single
main.scss file which in turn generates a
main.css file upon build.
And also, Jekyll supports linking
scss file directly inside html and can be changed to
css file using scssify filter.
But remember, the scss file you want to include should be inside _includes folder.
I hope this article has helped you to speed up your website. Let me know how it went. Leave a comment if you have any suggestion. I would be happy to implement it.
Thanks for reading!