MyTricksTime

Speed up our blog by hosting CSS files externally

Nowadays, blogs and websites are ranked on basis of various factors and page load speed is also one of the factor on which your search rank depends.
If you are on Blogger then the reason you don’t get good search results if compared to similar WordPress blogs is because WordPress sites load faster and that’s because the CSS for the website is hosted externally.

In blogger templates the CSS styles are always internal and those CSS lines are 100s in number. The simple template in Blogger have more than 20kb of CSS styles inside the document.You maybe thinking how 20kb of CSS can slow down your page, 20kb can be downloaded easily with speed or even slow internet connection but here it’s not about your internet connection speed, it is about your page’s speed. Every single bytes can decide your rankings on search pages.

The first thing you must check is your current page speed marks, the highest score you can get is 100.
[Click here to check your Page Speed]

If you get less than 90 then you should now host the CSS externally and speed up your site.

Get your CSS codes into a stylesheet file

Note: The first step to out the CSS styles in your template on an external stylesheet file. To do that you have to make changes into your template, so i suggest you to keep a backup of your template for future.

You are now ready to remove the CSS from your template and put it into a CSS file. Follow the instruction below.

Create a CSS file

Before you take out the CSS codes from the template you have to make a stylesheet file. You don’t need any special tool to create a .css file. You just need a plain text editor (notepad).

  1. Open Notepad, don’t type anything 
  2. Click on the file menu and click on Save As
  3. Locate where you want to Save the file
  4. Now name your file with .css at end, in Save As type place select ‘All Files’ and in Encoding select ‘UTF8’ that is it. See what it should look like this

  5. Save the file and it will be in a .css format if you did it right

Continue the next section to learn how to take out all the CSS in your blogger template and then put it into the stylesheet file

Move style code from template to stylesheet

Now you have to open up your template code, you can do it by going to Blogger Dashboard -> Template -> Edit HTML ->  and Proceed.

Now copy all the CSS codes you have in your template and paste it into the stylesheet file we just created and delete the codes from template as you have now pasted it already into the file.


Note: You can not normally use the Blogger’s default CSS code which has dollar sign into it’s values for example font: $(body.font); as the value of a property is fetched from database, so you can’t use it into a normal stylesheet file. If you want to speed up your blog page more efficiently than you can ask me to make the blogger’s CSS code compatible with a stylesheet for as low as $8 as a donation amount. Contact me on my email i[email protected] or [email protected] or both

Host the file

Now when you have made the stylesheet file ready with the codes you can now upload it to your hosting service [Click here to know how to use free DropBox as CDN]. When the file is uploaded, get the hotlink (direct link) to it.

Attach it to your template

This is the last step, you now have to link the hosted CSS file to your template so it fetches the styles from the stylesheet. To do that go to your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F5 to find </head> and paste this code above </head> 
1
<link rel='stylesheet' type='text/css' href='http://host.com/files/stylesheet.css'/>
You obviously have to have the link in the href value, replace this link in above HTML

http://host.com/files/stylesheet.css

With the link to CSS file hosted by you.

Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Meta