Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Speed up your website – Part 3: CSS

Monday, July 9th, 2018 by Servage

This is the third part of a simplified explanation of the “Yahoo best practices for speeding up your web site“. Read the second part here. The third part is about CSS related optimization.

Include stylesheets in the head section

Use the <link> tags in the <head> section of your HTML code to include CSS files. This enables your website to load progressively, instead of waiting for style information in the middle, or at the bottom of your page. It means that content can be rendered when it is ready, because the style information has already been loaded in the beginning. This makes the page appear to load faster.

Do not use CSS expressions

CSS expressions gives your programable elements in your stylesheet, allowing JavaScript-like CSS coding like:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

This type of CSS coding may seem nice, but it does decrease performance dramatically, and it is deprecated since IE8.

Use <link> instead of @import

The YUI guide is short and concise on this point: “In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.” (you want to include CSS at the top of your age, like stated above)

Avoid filters

The IE proprietary AlphaImageLoader reduces performance of your website, because the browser blocks rendering and freezes while downloading the image. Furthermore it heavily increases memory consumption with the client. The recommendation if you absolutely need this functionality is with the _filter hack, which wont affect IE7+ users negatively.

Speed up your website - Part 3: CSS, 3.8 out of 5 based on 8 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.