How To Optimise Or Minimize External CSS (Font Awesome, Fonts) Links In Blogger
Hello, Friends. Still on the topic "Speed Up Blogger Blog". Today I will show you a guide on How To Optimise Or Minimize External CSS (FontAwesome, Fonts) Links In Blogger. I have listed this among the sure ways to increase blogger loading speed.
On PageSpeed Insight tool, External links are tagged together with Remove Rendering blocking JavaScript as Eliminate render-blocking JavaScript and CSS in above-the-fold content. This is because they both (CSS and JS) prevent your blog from loading its content. Almost all external files do this until you optimize its delivery.
What is CSS?
Cascading Style Sheets (CSS) performs a vital function of describing how blog HTML elements are to be displayed on laptops, mobile phones etc and in other media. CSS can efficiently control the layout of many web pages all at once thereby saving a lot of work and time.
Every colour, style, Font you see on Blogger, WordPress etc is done with the use of CSS links, stylesheet etc. We can host it on our blog server (internally) or better still host it externally. CSS is what we use on various break points to design responsive templates.
What is Rendering Blocking CSS?
CSS is a must use and the way you choose to use it matters a lot. When we use External CSS links such as FontAwesome etc without optimizing it, it becomes a rendering blocking CSS because each time a user loads a page on your blog, HTTP request will be sent for the extraction of the CSS. This is why it is advisable to either host or optimize CSS delivery.
Optimize External CSS Delivery
Since external CSS are loaded each time. It will be a priority to optimize the delivery of this CSS sheet. You could decide to host them yourself or better still delay the loading of these sheets. By delaying (optimizing CSS delivery) you tend to increase your blog page speed drastically.
How To Locate Rendering Blocking CSS
It is easy to identify a rendering blocking CSS. You can either use PageSpeed Insight tool for this, or better still go to your template HTML section and search for ".css" using CTRL + F. They are mainly located after the "<head>" and before the "</head>" in the form bellow.
2 Ways To Eliminate/Optimize Rendering Blocking CSS
1. Host Your Own CSS.
You can host your own CSS and improve your blog loading speed. This will reduce the number of HTTP requests your blog have to make before displaying its content. CSS links are a major speed killer and you can try out this method to minimize all external CSS.
First thing first, backup your blogger template.
Test your blog with PageSpeed Insights and watch out for the Eliminate render-blocking JavaScript and CSS in above-the-fold content >> Optimize CSS Delivery.
Each link under this tab has a ".css" attached to it. Hover on each of the URLs, and the full URL will show up, copy it and visit the URL on your browser (not search). Once that is done you will see a page full of codes (CSS stylesheet). Using CTRL + A copy the entire code and paste it in a notepad.
Go to blogger.com >> Template >> Edit HTML. Now simply search for ]]></b:skin> once found, paste the entire code you copied right above ]]></b:skin>. Do the same thing for all of the URLs.
Now that you have hosted your own CSS, it is time to remove the default CSS. Search for ".css" in your HTML section. You will find many of such links with .css added to it. You will notice that the URL of the CSS is same with the once you found on PageSpeed Insight tool.
Simply delete each of them one by one. After deleting run a test and you will notice some of the CSS links will leave and your page speed will improve but some will not leave (default blogger CSS) this is because they are embedded thus you need to go an extra mile to do this. Coming up soon.
2. Optimize CSS Delivery (Recommended)
The second and recommended method to minimize external CSS links is to Optimize it's delivery by this I mean delay its loading till the entire blog have been loaded. I found this trick on Kompi Ajaib and it has done wonders for me.We are going to apply the same method in "Host your Own CSS" but this time we will not search for the code. We are going to make use of only the URL (e.g http://fonts.googleapis.com/css?family=Oswald ) of the external CSS.
Copy the above code and paste it before </body> in your blog Edit HTML section. Replace LINK URL HERE with your external CSS URL. below is an example where I have added FontAwesome, Roboto Font, Default Blogger CSS and Oswald Font.
You can add more than 10 CSS links to this code. All you need to do is add a new line as shown below with the link you will to optimize.
loadCSS("LINK URL HERE");
After adding the above scripts, you have to deactivate the previous CSS links by searching for them and deleting them. Example below. This method will work for all CSS, including FlexSlider, Owl Slider etc.
More From Author
This is a convenient way of increasing the page load speed of any blogger blog. How To Optimise Or Minimize External CSS (FontAwesome, Fonts) Links In Blogger is a part of speed up blogger template series. Be sure to check out other articles in this series.
BERITA LENGKAP DI HALAMAN BERIKUTNYA
Halaman Berikutnya
0 Response to "How To Optimise Or Minimize External CSS (Font Awesome, Fonts) Links In Blogger "
Posting Komentar