JoomlArt Forums 32,862 posts

[comraseliteunit Friend comraseliteunitJoin date: September 2010Posts: 40Downloads:1Uploads:5 Thanks: 10 Thanked: 3 times in 1 posts]

#157663

Overview

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

Details

CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:

@import url("second.css")

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Recommendations
Use the <link> tag instead of CSS @import

Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

<link rel="stylesheet" href="first.css">
<link rel="stylesheet" href="second.css">

so to the JA Developer, can you update the template plugin so that we can choose from TEMPLATES MANAGER > JA SOCIAL > GLOBAL > Css & Javascript Compress > Optimize CSS

as the <link> tag instead of CSS @import

thank you so much, this will make the site much faster and powerful
source: http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImport

[jobnomade Friend jobnomadeJoin date: September 2012Posts: 13Downloads:0Uploads:0 Thanks: 4 Thanked: 2 times in 2 posts]

#396648

Hey comraseliteunit,

this post is a bit older, but just want to add that I am quite interested in website performance improvements. I didn’t know that page speed delay issue with @import. Learned something new today. Thanks for sharing this with us.

[younuotui Friend younuotuiJoin date: July 2011Posts: 1Downloads:0Uploads:0]

#400646

Thanks for this useful article,i’m learning it for my ugg boots günstig[/url] site!

[Author]

Posts