Suggested Methods to Improve Browser Rendering

Obviously, keeping your website pages small is a great way to ensure your site loads quickly. I’m also guessing many of you want to add a little flair to your site, so at some point you will have to say enough is enough. Hands down, you announce you have made your site load as fast as it can. Unfortunately, if you thought you were done speeding up your site by crunching file size, there is still more to do. Download time is one thing, rendering that download into a page the visitor sees is a whole new game.

Google’s advice to improve rendering speeds heavily relies on optimizing your CSS file. They also mention to make sure to specify image sizes as well. You know, with width=”this” and height=”that”.

It’s All About the CSS File

If you have read my recent posts, you will find several mentions about the CSS file. In a variety of ways it can play an important roll in speeding your website up. Here are the last three tips for speeding up your website.

The first most important tip is to remove all unused styles in your CSS file. When your page is being rendered the styles have to be matched up with the content. The more lines in the CSS file, the longer this will take. It is as simple as that. You should also make a point to be as specific as possible by using class or ID specifiers. Avoid using tag specifiers.

The next tip is to avoid CSS expressions in an effort to solve IE problems. I see a lot of people using this. Think about your website. Don’t start making hacks (though working) just to get your template up. Try to solve the problem another way first. Caution, you may get a headache doing this, but there is usually a work around.

The third and final tip is to avoid inline styles within your HTML. Get it out, and move it into your CSS file. Here is what I like to do for this. Way to often, it’s just too easy and fast to the fix the style within the HTML. I say just do it. You may be deleting it the next day. If you find it sticking around for a while, and have that CSS file open, then start transferring those styles to your CSS. The real main lesson here is to use a CSS file, and make sure you reference it within your header content. Google suggest using the <link> tag.

That’s pretty much it from me in regards to speed improvement tips. It really all points to clean code, tight code, and a little understanding of what is going on in the background.

If you are new to BWI, this post was the last of a series that I started here: Slow Websites are a Dying Breed.