Avoid CSS Import


Part One Chapter 17

CSS

The Wrong Way

CSS @ import is one of the methods to include external CSS files within a mobile web page. The typical syntax looks like the below example.

@import url("style.css")

Your mobile website should avoid using CSS @ import at all cost, as this method of retrieving CSS files can slow down your page load speed.

  • The CSS @ import method loads CSS files sequentially and does not allow parallel loading. This means when your page has to load multiple CSS files, one has to wait for the other to complete loading.
  • The sequential file loading takes up more unnecessary time and makes your mobile web page load slower than it should.

The Right Way

The correct way to make use of external CSS files is to request the files normally. For example if your external CSS file is called “style.css”, then your page should request the CSS file through the “link” tag method in the head section.

<head>
<link rel="stylesheet" href="style.css" />
</head>


Gordon Choi’s Mobile Website Book has been available since November 2016.







Content on Gordon Choi’s Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book