In this article we’ll be looking at what makes the page slow, and how we can speed web pages up. Make sure to read this and you can smell the burning rubber next time your page loads!

Many websites are nowadays pretty slow to load due to graphics-heaviness and use of a lot of Flash and JavaScript content. Obviously this is partially because of the higher internet speeds available nowadays, but delivering the page quickly to the visitor should still be a goal. There’s always room for some improvement.

First let’s take a look at what makes a web page slow to load.

• File sizes. The combined size of all your files that are downloaded from the server, images, HTML files, stylesheet files and JavaScript files. Obviously it takes some time to download these from the server.
• HTTP requests. The browser sends a HTTP request to retrieve a file from the server. A lot of HTTP requests to deal with may slow down the load time.
• Flash content. And you know why.

Now let’s take the steps to optimize the speed.

File Sizes

HTML & CSS

Don’t use tables for layout. Tables won’t be visible until every object in them is loaded. If everything is wrapped in a <table> tag, the viewer has no idea of the content until the whole page loads. And especially if you have a content-heavy site. It takes a while to load everything and the visitor might think it’s not loading and leave the page.

Don’t use elements that are not needed. For example, if you need an <ul> list element to be inside a box, just apply “display: block;” for the element, you don’t have to wrap it with a <div> element!

Don’t use HTML alone. If you use HTML alone, then you have to enter styling for each element. Use Cascading Style Sheets (CSS). With CSS’s multiple selectors and rules, you can achieve the same and even better results with less code and shrink the file size.

Make use of the CSS selectors (= the ones that you use to target elements on a page, for example element selectors, link selectors or  child selectors). CSS has a large variety of selectors. Instead of giving each and every element their own class/ID and apply rules in CSS for those, use pseudo-classes, attribute selectors and child selectors combined with the regular selectors to create general rules and exceptions with very little code, thus reducing the file size. And group the selectors together and apply rules if they are the same anyway, this saves time and space.

Images

Use the right formats. If you don’t need transparency, use a JPEG, if the image doesn’t have more than 256 colors in it and doesn’t need semi-transparency, use a GIF image and so on. Make sure your JPEG images don’t look horrible on screen after compression tho. Adjust the compression so the quality doesn’t suffer. If you need a semi-transparent, lossless format, use the PNG format.

Optimize the image. There is software for this purpose. For example OptiPNG. Reducing the amount of colors in an image also helps a lot in reducing file size. Many graphics editors have options to save images for the web, make use of them!

Javascript & Flash

The advice here is simple, don’t use what you don’t need. You don’t need a fancy flash clock on your site, nor do you need a javascript one. Don’t make sites completely in Flash, as some people (me included) have Flash disabled globally. Also, Flash takes time to load and search engines don’t crawl Flash, so it’s like digging yourself a grave (well not exactly, but you get the idea).

HTTP requests

Embedded files

By combining many of your files, you’ll reduce requests. Face it, you don’t need many separate CSS or JavaScript files, combine them into one big .css or .js file and use commenting in the code to quickly find the section you want with the search tool of your code editor. Don’t do this with an out-of-the-box publishing platform like WordPress or Joomla! tho, it might (probably will) cause problems.

Background images

You can also reduce HTTP requests by combining images together! Then, when you give some elements background images in CSS, if you have an image consisting of multiple images, you’ll use “background-position:” property in CSS to change the positioning of your background image. Here is an example tutorial of making an interactive background image with this method. Don’t use this method with anything more than a simple RSS logo or a navigation link background image, as editing the image later will be a pain.

Use CSS3 instead of images when possible

CSS3 is the new CSS version containing all kinds of cool new features. You can do things like rounded corners, blurred drop-shadows and use RGBA (=just like RGB, but an added Alpha channel, so you can alter opacity) only with CSS. So you don’t need images! Well, that would be the ideal situation, but since every developer’s and designer’s friend Internet Explorer is kind of lazy with the standards (= doesn’t support it), you might not want to do this. I strongly recommend doing this tho, the more sites start using it, the more support it gains. And don’t worry about the IE using visitors if they are under 30% of your visitors. It’s not bad to give a more simplified but still functional look of your website to people using browsers that don’t support CSS3.

Those are my tips, and using them will make your pages load faster. If you have more ideas on web page optimization, feel free to comment.

NOTE: That’s all for this week, I apologize for the lack of new content on the site recently, I was very busy. But I’m back now and I’ll try to publish at least one article every week.

Don’t forget to drop a comment below!