@import Question

If I understand correctly, you’re asking if AO can move @imports for external files in the original CSS out of the aggregated CSS and into the head as link-elements instead?

This currently is not possible, but if this has performance benefits I could add it to the “candidate improvements”-list off course.

Does link-ing instead of @import-ing indeed have some a positive performance impact, or is this rather a personal preference?

frank

Yes, that’s what i wanted to say.

It does indeed have a performance-impact because @imported files are downloaded sequentially. So the browser has to first download der AO-css-file and will then learn that he needs those imported files. If you use the link method instead the downloads can be parallelized. It’s one factor in the google page speed and the recommendation is to avoid @import.

(For reference)

For me it would be enough to just have an option to leave those @imports out but it sure would be a nice feature if you instead changed it to linking.

Best Regards,
Andreas

For now, leaving those imports out out could already be accomplished using the “autoptimize_css_after_minify” filter from the AO-api (better switch to the pre-1.9.3 version though, as I moved that filter a tad later to make sure all CSS aggregation/ minification had been done). With that filter you can alter the aggregated CSS, in you case removing (with a regular expression) the imports?

I’ll add the idea to my “possible enhancements”-list, thanks for the tip!

kind regards,
frank

Thanks for the tip to you, too. I’ll try my luck with the filter ??

Just in case someone else finds it useful add this to your functions.php to delete the imports:

function autoptimize_delete_imports( $css )
    {
        $css = preg_replace("/@import\s([^>]*);/","",$css);
        return $css;
    }
add_filter('autoptimize_css_after_minify','autoptimize_delete_imports');

Then instead link whatever imports you deleted in your header.php, for example:

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" media="screen">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans" media="screen">

kudo’s for sharing winnephew!!

frank

quick heads-up; for v1.9.3 I’m probably going to change “autoptimize_css_after_minify” into “autoptimize_filter_css_after_minify” to make sure it adheres to the naming convention I had in mind (other filters might be impacted as well).

frank