Avoid CSS import

[Prisca]

Hello

Testing my site on GT Metrix and compring to other similar site I see that I am the lony one with a bas red mark for CSS import.

Avoid CSS @import I am at 85 and the 2 competitors are at 100.
B (85)
A (100)
A (100)

Is there a way to avoid CSS import in the next updates for all themes?

Thank you 🙂

[Prisca]

Sorry – here is what I found out about CSS import:

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.

If you could fix this that would be great.

Thanks again 🙂

[Anonymous]

Dear Prisca,

Thank you very much for your feedback and concern we appreciate that 🙂

As far as I know, @import has been used only in editor-styles.css file. And this file is not used anywhere in the front of the website which impact the loading of the site. editory-style.css file is used in the editor in the backend to show the visuals on the editor as close as front end. You can read about it about it here : http://codex.wordpress.org/Editor_Style

And there are times where you’ve chose between usability vs code standard and we’ve chosen usability here as it’s not impacting the loading time of the site for the users who are visiting the site.

If you’ve found imports in other places do let us know we’re happy to fix them.

[Prisca]

Hello Roshan

Thank you so much for your fast reply 🙂

I have the css import in the child theme but you know, I agree I am probably way too often checking my site on GTmetrix … ha… but everything which can slow down and be easily fixed is good anyway.

Now may be it is child theme plugin which creates that?

I tested on a test site the child theme (top) changed
/@import url
(“../mysite/style.css”);

to
/

(“../mysite/style.css”);

It did not break anything.

I don’t know if it helps much but that’s following the GTmetrix stuffs that says “Using CSS @import in an external stylesheet can add additional delays during the loading of a web page”

You gonna think I am a maniac…yes, I am really trying hard to make my sites as user friendly as possible but I have to emphasize again that your themes are one of the lightest and again, the absolute best for responsive out there so don’t take offense..ha..

Thank you again so much for your fast reply.

Kindest regards, Prisca

[Anonymous]

Thanks Prisca for feedback. It’s always good to use those sort of tool to optimize your site. Is there any child theme is provided with @import ? If yes then let us know we correct that.

Furthermore, what you did is find do work but it’s always good to enqueue the script rather than using <link href tag on WordPress .

See the example of how it is done in Pure & Simple child theme.

function puresimple_child_enqueue_scripts_styles() {
  wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}  

[Prisca]

Ah..thanks so much for the tip (functions)

I use one click child theme plugin for all my sites and at the top it uses the @import. As I said before may be it is the plugin that does that?
Anyway thanks for the tip and for your fast reply. I appreciate it 🙂

Cheers, Prisca

[Anonymous]

Sure Prisca. Happy to help you anytime 🙂

[Author]

Posts