@import basically allows the browser to continue rendering the page, and when it finishes loading, applies the styles.
There are conflicting views on whether this is a better user experience. For example, is it okay that the user sees unstyled text at 0.5 seconds until the CSS downloads at 1.2 seconds, and things rearrange? Visually, that’s what’s happening (see the start render line showing at 0.5 seconds in the @import example, and 1.2 seconds in the .
I do know some developers (not designers) that do think @import is preferable. Most designers want the design to be in tact from the start to make a good impression. I tend to side with the latter crowd, but it’s worth exploring and paying attention to the visual rendering (not just Pagetest results). Throttle your bandwidth with Charles Proxy and look at what slower connections do.
What is curious about the test, however, is that if you look at the @import example: http://www.webpagetest.org/result/7NS/1/details/
Notice that the request for bg.sprite2.png starts even before the CSS starts downloading - this is impossible. The other test has it right.
I then looked at the HTML source - you are inlining some duplicative CSS, including the bg.sprite2.png. I would recommend removing your inline CSS and re-running the test.
I would also consider losing those extra domains and sticking with one static domain (at most, 2) - DNS lookups are not something you want to take lightly, even though Pagetest tells you the times are short, these times vary by ISP and we have seen 2 second DNS lookup times for sites as popular as the NYTimes (well, popular in the U.S., anyway).