How to Fix : Avoid @import CSS rule on GTmetrix Performance Report

On this post learn how to fix the Avoid CSS @import recommendation on GTmetrix Performance Report, even if the CSS @import expression is generated by a caching plugin on WordPress or an add-on in PrestaShop.

What is the purpose of @import css?

In general, using  the @import css rule allows style sheets to import other style sheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which is bad, as this practice adds additional round-trip times to the overall page load. For instance, if we have a .css file named: myAwesome.css and contains the following content: @import url(“Fantastic.css”), the browser must download, parse, and execute myAwesome.css before it is able to discover that it needs to download Fantastic.css .

Can we delete @import css expression to get a better score?

However, Cascading Style Sheets (CSS) is a necessary style sheet language used by webmasters for describing the look and formatting of a document on a website and quite often it is needed to be downloaded in parallel with other .css files. Why so? Because, a .CSS file’s main purpose is to separate the document’s content elements like layout, fonts and colors. In general, what we see, is what a developer writes inside as a backbone of styles, to be used by the browser. Without css style-sheet, the look of a website is different, deleting or altering one might be destructive to our eyes.

The Fix : @import CSS 😉

The common suggestion to avoid using @import css rule is the use of the LINK tag for each CSS as mentioned below:
<link rel='stylesheet' type='text/css' href='myAwesome.css'>
<link rel='stylesheet' type='text/css' href='Fantastic.css'>

example on how to avoid @import google fonts:

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>

I don’t recommend the following code due to the JavaScript errors and performance problems it might cause.
<style>
@import url('myAwesome.css');
@import url('Fantastic.css');
</style>

Another fix to use, as a replacement trick, for the @import css rule:

My next recommendation can be used as a quick fix, even if the CSS @import expression is generated by a caching plugin on WordPress or an add-on in PrestaShop (especially by older 1.6 versions).

1. Firstly, run a GTmetrix scan to test the performance of your web pages and let it find for you the file which contains the problematic CSS code.
2. Afterwards, use an FTP program to download your file locally, preferably using SFTP. If you can’t or not filling comfortable to do so, then you are really in need of a webmaster, because you are about to make some changes!
3. Anyway, after taking a full backup of your website (files and DB) proceed to the following…
4. Run a search on the downloaded file (press CTRL+F) and spot among the codes of line the @import css expression. Luckily, for those who deal with PrestaShop, this rule often appears at the active cached CSS file, inside the /themes/yourtheme/cache/ path.
5. Then, replace the deprecated code with the new one.

SOLUTION for PrestaShop:

Let’s say, that your report at the third suggested recommendation mentions: The following external stylesheets were included in https://www.yoursite.com/themes/theme123/cache/v_160_ec6xxxxxxxxxxxxxxxxfd20_all.css using @import. What does it mean? What do you do?

– Easy, You open your .CSS file and as already said, at the top of it you see: @import url(‘//fonts.googleapis.com/css?family=Old+Standard+TT’);@charset “UTF-8”; .

– Put it inside the symbols /* and */or completely remove the mentioned expression in italics and replace all with @charset “UTF-8″;@font-face{font-family:”Old+Standard+TT”;src:url(“//fonts.googleapis.com/css/”); font-display:swap;}

That’s it, upload the .css file back to it’s position using SFTP(secure FTP), check your website if it works fine and perform a GTmetrix test to verify your Technical SEO implementation. This fix may deliver you an A 100% score, if it was the only problem you had!

Last but not least, if the file you altered is a product of a caching mechanism, remember checking regularly your project, in order to fix any newly created files in the future.

Wait! » We have a 2nd solution on how to avoid @import on WordPress

Like scripts, loading your stylesheets properly on WordPress is very easy. Instead of using wp_enqueue_script, you can use wp_enqueue_style. The proper way to import a style sheet, is shown with the example of code below. Just paste in your plugins file or in your theme’s functions.php file the correct snippet and upload on your server.

Some mistakenly use the wp_head function to load their scripts and stylesheets.
<?php add_action(‘wp_head’,’wrong_way_script’); function wrong_way_script() {echo ‘jQuery goes here’;} ?>
While the above code may seem easier, it is the wrong way of adding scripts on WordPress, and it leads to more conflicts in the future.

Note: If you are using the enqueue scripts function in your theme, use get_template_directory_uri() . If you are working with a child theme,  use get_stylesheet_directory_uri().

SOLUTION for WordPress (example: stylesheet):

<style>
function load_stylesheets()
{
//Suppose our .css file is located at /httpdocs/wp-content/themes/[your-theme]/css/
wp_register_style('mystyle', get_template_directory_uri() . '/css/style.css' , array(), 1, 'all' );
wp_enqueue_style('mystyle');

//Suppose our 2nd .css file is also located at /httpdocs/wp-content/themes/[your-theme]/css/
wp_register_style('mystyle2', get_template_directory_uri() . '/css/style2.css' , array(), 1, 'all' );
wp_enqueue_style('mystyle2');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
</style>

Explanation

Firstly, create a general function inside the style tags. Start writing your code e.g. at your functions.php and afterwards give it a name. I named it load_stylesheets, because it holds data for CSS styling. On the above example, we enqueue two (2) different stylesheets, located at the same folder. We can call a .css file from anywhere, you can change the path /css/style2.css with another, like /secondcssfile/style2.css, if this is the position of your other file. The first .css is located at /httpdocs/wp-content/themes/[your-theme]/css/ and I name it ‘mystyle’. Giving a name, helps our wp_register_style hook to identify it correctly, then it calls the file and passes it to wp_enqueue_style. Like before, inside the new wp_enqueue_style hook we also use the same name, which we gave to our stylesheet in the previous step. Repeat this process for every stylesheet you want to include. Finally, all magic happens inside the add_action(), where we call the function ‘load_stylesheets’.

Notice: Inside add_action, I used wp_enqueue_scripts action hook for styles. Despite the name, this function works for both, styles and scripts.

How to enqueue stylesheets from external websites, inside WordPress

Sometimes you will want to enqueue stylesheets from external websites, for example, if you use Font Awesome or Google Fonts. To do this, we can use the wp_enqueue_style() function oncemore in the functions.php.

Back to our solution, the first parameter will be the name of your file. But, the second parameter will be the URL of the stylesheet. Pay attention to the http: or https: remove from the path!

Here is an example. I want to enqueue a stylesheet from Google Fonts for the Roboto font, from the URL: https://fonts.googleapis.com/css?family=Roboto. This is what it would look like in my functions.php file:

function theme_external_files() { 
    wp_enqueue_style('my_external_theme_font', '//fonts.googleapis.com/css?family=Roboto'); 
} 
add_action('wp_enqueue_scripts', 'theme_external_files');

Heads up and be proud, you did it! Or not? Please, tell me on skype, user: Efthimios.

• CSS fix

... Any published article or post on SEO is valid. You can follow any posted recommendations to fix your code in order to get a better score on GTmetrix or PageSpeed Insights. Whenever I find time, I continue developing my website.

Also, if you have a new SEO technique or want to publish a fantastic new SEO strategy online that converts into leads or sales, especially in the e-commerce space, please contact me and I will host your (strictly relative) article, with all proper credits to the author, for at least one month.

Moreover, I will be especially happy if I receive from you an email related to search engine optimization in Greek, which is my native language. Of course, I can provide you with any help you need and it concerns SEO in Greek or creating websites, since I have developed the Wordpress theme that you literally read from scratch. If you are an SEO specialist in Greece, share your opinion with me! So do not hesitate to contact me, I am waiting for you for any advice, question or suggestion to improve my site or anything related to SEO in Greece.

My message in Greek
Θα χαρώ ιδιαιτέρως, αν λάβω από εσάς email σχετικό με search engine optimization στα Ελληνικά, τα οποία αποτελούν τη μητρική μου Γλώσσα. Φυσικά, μπορώ να σας παράξω οποιαδήποτε βοήθεια χρειαστείτε και αφορά SEO στα Ελληνικά ή δημιουργία ιστοσελίδων, μιας και έχω αναπτύξει το Wordpress theme που διαβάζετε κυριολεκτικά από το μηδέν. Αν είστε SEO specialists στην Ελλάδα, μοιραστείτε την άποψή σας μαζί μου! Μην διστάσετε, λοιπόν, να επικοινωνήσετε, σας περιμένω για οποιαδήποτε συμβουλή, απορία ή πρόταση για βελτίωση του site μου ή οτιδήποτε σχετικά με SEO στην Ελλάδα.