What is @ CSS import?
It is a method of importing one css file from inside another css file. It looks like this...
Why not use it?
The @import method of retrieving CSS files creates some problems that affect your page speed. The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower.
How to avoid css @ imports
Look in your HTML and CSS files and locate the @ import calls.
Again, they look like this and will usually be near the top of the file.
Rather than call that css file using the import method it is better to just keep that additional css in just one file (copy and paste the imported css into the original css file). If you can not do that for some reason, include those css files from the html file using the following code...
Make sure to replace "style.css" with the location and name of your CSS file.
If a CSS file calls another CSS file via the @ import method, it is particularly bad for page speed.
This adds additional steps for the browser to load your web page, causing the browser to download, parse, and then go out and get the next CSS file before it starts displaying your page.
This can be avoided by using the link method shown above.
It is best if no @imports are used at all
It is a method of importing one css file from inside another css file. It looks like this...
PHP:
@import url("style.css")Why not use it?
The @import method of retrieving CSS files creates some problems that affect your page speed. The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower.
How to avoid css @ imports
Look in your HTML and CSS files and locate the @ import calls.
Again, they look like this and will usually be near the top of the file.
PHP:
@import url("style.css")Rather than call that css file using the import method it is better to just keep that additional css in just one file (copy and paste the imported css into the original css file). If you can not do that for some reason, include those css files from the html file using the following code...
PHP:
<link rel="style.css" href="style.css" type="text/css">Make sure to replace "style.css" with the location and name of your CSS file.
If a CSS file calls another CSS file via the @ import method, it is particularly bad for page speed.
This adds additional steps for the browser to load your web page, causing the browser to download, parse, and then go out and get the next CSS file before it starts displaying your page.
This can be avoided by using the link method shown above.
It is best if no @imports are used at all
