Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

Inline Small CSS To Speed Up Your Website

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.

Related Posts

  • How to Add WordPress Pagination Without a Plugin
  • How to Display Google Adsense After First Post in WordPress
  • How to Combine External JavaScript files in WordPress
  • How to Disable Emojicons in WordPress 4.2
  • How to Minimize DNS Lookups
  • Show one category Posts on Home Page in WordPress 2015 theme
  • How to Create a Mobile Friendly Responsive Menu in WordPress
  • Speed Up Your WordPress Cache Without Plugins
  • How to Create Custom WordPress Sitemap Without Plugin
  • The Ideal WP Fastest Cache Settings 2016

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial