Inline Small CSS
Inline CSS is a great technique to speedup your website.Put your CSS into HTML file instead of keeping it on external CSS file.So,it will reduce the files the browser has to download and display user requested page.Many developers apply inline CSS for website homepage only.Because of it has to be load fast.For rest of the website pages,they use several external CSS files.This is really bad idea,always Inline CSS for entire site.
One CSS is more than enough for any website.If you use an external CSS file,than browser first loads HTML file and again it lookups to download files from another external CSS files.Server getting extra requests from browser,obviously it has to take time to download files.
How a to Inline CSS
To Inline Small CSS,you need not to work hard,it's pretty simple method.First copy the content of external CSS file and paste it in your HTML file.This code should be added between style tags in head section as shown in below.
<style type="text/css">
</style>Putting your external CSS file content into head section of your HTML file is not only reduces extra file but also saves time to browser to download files from one CSS only.It's a best practice to reduce the server time.After implementing this technique just checkout your page speed in Google page speed and YSlow.The code should be added properly in order to get success of Inline CSS.
Example of Inline Small CSS :
body {
color: #222;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
ine-height: 1.625;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-family: 'Raleway', sans-serif;
font-weight: 500;
line-height: 1.2;
margin: 0 0 16px;
margin: 0 0 1.6rem;
}
h1 {font-size: 3.6rem;}
h2 {font-size: 3rem;}
h3 {font-size: 2.4rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.8rem;}
h6 {font-size: 1.6rem;}WordPress is a powerful blogging platform,many using different themes,which contains several external CSS files.Inline Small CSS for WordPress,Joomla,Drupal,Magneto and all kind websites.