CSS Tricks: How to Make your Website Load Faster

CSS Tricks: How to Make your Website Load Faster

When it comes to CSS coding, there are several things that you can do in order to make sure that your code runs as smoothly as possible. By writing your CSS effectively for browser rendering, you will allow your website or blog to take less resource memory from your visitor’s computer so that your website will display much faster.

The first important CSS trick to get right is that of page rendering. Avoid any overflow by making sure that you always specify your image dimensions.  Do not use universal selectors, as they are the least efficient when rendering speed, ID’s are the most efficient.

By doing some quick online research using the information on the websites and blogs mentioned in this article, you will gain a better understanding on how to tweak your website so that it will display quickly no matter what type of browser or connection your visitors are using. This will help to ensure that they will come back to visit your website again and again.

Check out this handy article over at CSS-Tricks it will answer your questions about how many css files you should use for every specific type of site. The answers may surprise you but an obvious rule Chris Coyer says,  “If you make a unique CSS file for each page, users will need to request a new stylesheet for each page they visit”. This will affect your load time negatively.

Compressing your CSS files also known as Gzipping will provide a reduction in file size in the neighborhood of 70-80%, pretty significant weight loss. Basically gzipping can be accomplished two different ways; the first method adds a bit of php to the top of your css file and then renaming the extension as a .php file. The second method, which is preferable, because the code is cleaner, involves adding two files, one an .htaccess file, the other a PHP file that contains the same snippet of code used in the first method.

All the code and methods you need are at the fiftyfoureleven weblog. Make sure you read the comments and feedback of this post because people have helped add to the code library.

Do you want your text to do some cool tricks like having a gradient giving it that sleek web 2.0 look? Most of us would head to Photoshop to create an image with a gradient. Not so fast! If the browser has to render an image it will slow your load time down, which is what we don’t want. Why not have CSS do the work for you? By following the tutorial created on Web Designer Wall you will learn how to use a gradient text effect with a PNG image (pure CSS, no Javascript or Flash). This will speed your load time a lot, especially if you have a lot of images.

Finally, let’s look at overall position of elements on a page. Content loads in a specific order, so it’s good to get that order right when you are designing your site so you don’t have to make a huge overhaul of it later. In general, columns load from left to right.

If you select a two column right or three column right layout for your CSS it will allow the posts to load first before your sidebars. Sidebars will mostly contain ads and widgets, which it’s safe to assume can load last.  To improve your overall knowledge on how webpages load and how you can make them load more efficiently with CSS tricks checkout this article over at the Typepad knowledge base.

Happy Rendering!

Front Cover Image provided by Shutterstock

Image: Css code via Shutterstock

Posted in CSS

Written by Joel Jacob

Joel Jacob designs websites at VIA Studio and Tweets at  @_viastudio_ Joel uses his mastery of XHTML and CSS to ensure client’s websites are cross-browser compatible, accessible and adhere to all the latest web standards. His exceptional JavaScript skills allow him to create rich and responsive User Interfaces. He’s a little sensitive about the name though; so you may just want to call him Joel Jacob…it’s for your own safety…we assure you.
  • Samantha

    That was really helpful. Thanks!