SEO Post

Read Our SEO POST, on how to SEO your Website!

Tips & Tricks about Content, Local or Technical SEO optimization for every website

Read more and discover tips & trics on "How to optimize my website". Specific code optimization techniques for Pagespeed or GTmetrix reports, to speed up your Wordpress and help you reach the top organic rankinks, at the first page of Google results.

Photo of post: How to Fix : Avoid CSS @import on GTmetrix Performance Report

How to Fix : Avoid CSS @import 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. In general, using  the CSS @import 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 a css @import 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 to CSS @import  😉

The common suggestion to avoid using @import 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'>

Another fix (?) is
<style>
@import url('myAwesome.css');
@import url('Fantastic.css');
</style>

which some propose and I don’t recommend (the 2nd solution) due to the JavaScript errors it might cause.

Another fix to use, as a replacement trick, for the CSS @import 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 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:

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.

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

 

Related tags:
Back to SEO Blog

Oct 2020
Some parts of this website are under development, like this dummie post!

Photo credit: Senivpetro / Freepik

Our Blog is still under development...

... 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.

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

SEO Implementations on Websites that I helped to get a better Google Ranking

These are a few websites on which I performed SEO (Search Engine Optimization) and of course, they now get traffic from the first page of Google results.