[Solved] What is faster... @import or <link href?

Hi all

I’m just wondering what is the best approach, what is fastest and reduce page loading times most.

I’m using font awesome to add icons which is loaded on every page as shown below:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" media="all">

Though, I’ve seen people adding this file directly inside their css/sass file like:

@import "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css";

So what is the correct/best way to do this?

I’m thinking inside my CSS because we’ll only mention this once, whereas I’m calling the file on every page if I place inside the <head></head>.

Thanks, Barry

Actually using <links> is far faster because it allows for parallel downloads. If you use @include - first the browser has to download the first CSS file then download the @included file.

2 Likes

According to this, link is faster:-
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

1 Like

Cool, ok thanks guys… I think that clears things up for me :sunglasses:

<link> it is

Cheers, Barry

If the CSS file is relatively small consider storing on your own server and echo Php file_get_contents( CSS style-sheet ); between the header <style>

You can only do that if you don’t have your security headers set up to prevent injection by disallowing inline CSS.

Now back on my computer.

@computerbarry

http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
filesize: 29,063 Bytes

I checked the size and content of the above CSS file and you could try saving the CSS contents to something like /assets/css/font-awesome.css then echo the contents like this:

<?php 
  $fCss  = '/assets/css/font-awesome-v-4.6.3.css';
  $sCss = file_get_contents( $fCss );

?>
<!DOCTYPE HTML>
<html>
<style type="text/css"> 
   <?= $sCss ?>
</style>
...
</head>
</body>

It is worth noting that the CSS file has numerous links with parameters such as …/fonts/fontawesome-webfont.eot?v=4.6.3’) which will prevent caching for subsequent pages!

I would be tempted to find an alternative solution :slight_smile:

Thanks guys!

I compile everything into a main styles.min.css file based on all my assets/sass so, the ideal approach would be to add font-awesome.css into the mix so it also gets added into the final styles.min.css

Would it be better to do it this way?

Or are you saying we should add it inline?

And wondering how much weight I will save, meaning will the page load faster if I do this?

Barry

Try it, make sure all fonts are working and test with

Don’t forget to post the differences.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.