PageSpeed : Inline Small CSS
Published by Aslam
Inlining small stylesheets into the main HTML page cuts down on RTTs and delays in downloading other resources.
If your webpage is calling an external stylesheet (.css file), your browser has to download your webpage first and CSS file next. Calling an external file makes additional requests to server and thus it cause delay in loading and rendering your webpage. so if you have any .CSS file that has less content in it, you should consider inlining the codes into webpage itself.
Why "inlining small stylesheet"?
inlining small stylesheet means that if you have external stylesheets like fisrt,css and secon.css and the contents are little, then you can embed that styles inside the html code itself. thus the RTTs(Round Trip Times) and Delay in loading other resources cuts down.
How to inline Small CSS?
If you have small .css files, then you can inline the contents of that CSS file by copying and pasting it inside a style block will help you score on this rule.
For Example, you are calling small.css file like this:
<link href='small.css' rel='stylesheet'/>
and contains below code :
h1,h2,h3,h4,h5,h6{font-family:"Open Sans",sans-serif}
Then you can inline that code inside your html code like this :
<style type="text/css">
h1,h2,h3,h4,h5,h6{font-family:"Open Sans",sans-serif}
</style>
Pros and Cons
Inlining css files reduces RTTs (Round Trip Times)
Your CSS code will not be cached.
when you have an external CSS file, most browsers will download and save it in local machine.and will not ask to server again for that resource until the resource has changed.
When you inline your CSS code, those codes will not be cached by browsers.
It is recommended to inline Small CSS files.
Comments
Post a Comment