Home   |   About   |   Terms   |   Contact    
Read & Learn
 

Eliminate Render Blocking of CSS

Web Design & Development

◄ All Articles


A new product.






Popular Google Pages:




This article is regarding Eliminate Render Blocking of CSS.
Last updated on: .



◕ Truly speaking CSS files make our website slow. Because by default CSS is a render blocking element. This means that the browser will hold displaying the Webpage until the CSS file is executed. In other word we can say, every CSS file delays the Webpage from being visible.

☯ For this reason we should keep your CSS simple and clean.

☯ We should deliver it as quickly as possible so that it does not block the rendering of our Webpage.

☯ Bigger the CSS file, longer the page to load.

☯ More the CSS file, longer the page to load.

To avoid this render blocking we should use media types and media queries . Beside this we should also remember some points. These are given bellow with example.



◕ 1) <link href="style.css" rel="stylesheet">

Between head tags if we call CSS like this. Then this CSS is applicable for all pages and it is purely render blocking. Use of this code is a bad practice.



◕ 2) <link href="printFile.css" rel="stylesheet" media="print">

If we call the stylesheet like this. Then this stylesheet will use only when somebody wants to print my Webpage. So this CSS stylesheet will not block the rendering of the Webpage.

Here media="print" is an example of media type .
Use of this code is a good practice.



◕ 3) <link href="minWidth.css" rel="stylesheet" media="(min-width:720px)">

If we call the stylesheet like this. Then this stylesheet will use only for the browser minimum width 720px.

Here media="(min-width: 720px)" is an example of media queries .
Use of this code is a good practice.



◕ 4) Always try to make both of your CSS file size and Quantity less. Try to combine your CSS files. This will increase the speed.



◕ 5) Try to avoid importing CSS file, use external CSS file as shown in the above example codes.



◕ 6) Try to avoid inline CSS style. These are some points which we should remember to increase the speed of our Webpage. We should remember these to avoid blocking our Webpage to display by CSS.

◕ All the best!



◕ Related articles:
► How to make XML Sitemap?
► Robots.txt Fetch Error
► How to find URL of my Twitter Account?
► Difference between .html & .htm
► List of wildcard used in MySQL
► MySQL match a string





Popular Google Pages:





Top of the page

Amazon & Flipkart Special Products

   


Top of the page