Page Load Performance: Import vs link in CSS -Which is better?

When it comes of web page optimization, developer always use to ask this question on CSS loading on the page.
Is it advisable to use import or link in CSS? What is the difference between import and link in CSS?

Here comes the answer from experts:
@import has a negative impact on web page performance – How and Why?
If you use @import on your pages, the browser won’t be able to download stylesheets parallely, which will result in more page load time.

Its better to use LINK instead of @import if you want stylesheets to download in parallel resulting in a faster page load.

There are two ways to include a stylesheet in your web page. You can use the LINK tag:

<link rel=’stylesheet’ href=’style.css’>

Or you can use the @import rule:

<style>
@import url(‘style.css’);
</style>

For better page performance always use <link> instred of @import. More over you need to always use @import at the top of your page. Avoiding @import is better for performance.

If your HTML document contains the following style block

<style>
@import url(‘style1.css’);
@import url(‘style2.css’);
</style>

If you always use @import @import in this way, then there is no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions.

But if you use
<link rel=’stylesheet’ type=’text/css’ href=’style1.css’>
<style>
@import url(‘style2.css’);
</style>

The above method causes the stylesheets to be downloaded sequentially, downloading resources in parallel is key to a faster page.

It’s simpler and safer to use LINK to pull in stylesheets:

<link rel=’stylesheet’ type=’text/css’ href=’style1.css’>
<link rel=’stylesheet’ type=’text/css’ href=’style2.css’>
Using LINK ensures that style-sheets will be downloaded in parallel across all browsers.