Optimizing Your Web Page Speed

Fast delivery is the key to success. Website speed optimization (load time) can help you increase conversion rates, win more customers and improve their satisfaction. Think of Google’s approach to search and the milliseconds it takes to display results; it was one of many reasons people loved it when it first came out, though this speed is taken for granted today.

In this article you will learn how to minimize page load times by reducing HTTP requests, optimizing graphics, optimizing multimedia, converting tables to CSS, optimizing JavaScript and more.

Speed Optimizing Your Website

Start by stripping out all inline style and converting files into pure HTML code. Look at the pages and see if elements can be created more efficiently (usually tables can be converted to CSS). Once pages are stripped of all style, you can put those styles into an external CSS file.

  • Reduce the number of HTTP requests.

  • Put all visuals into an external style sheet and position it on top in the <head>.

  • Put all JavaScript in external files and position it at the bottom of the <head>. This will enable browsers to load content (HTML) and visuals (CSS) first, and then take care of javascript functionalities (which are not used until a page loads).

Switching to semantic mark-up also helps, but it’s not a requirement. The basic idea is to strip pages down to their HTML structure, group content by div tags and target div tags with CSS IDs and Classes.

Each object on a web page requires a request to the server. If you have 20 images on the web page, then each image will require a separate request, totaling 20 altogether.

When the number of objects is high (10+), object requests dominate page download times. By minimizing the number of objects, you can minimize the number of HTTP requests, thus reducing page download time.

Follow those steps:

  • Convert graphic-based text to CSS. Graphic-based text in headers, and other page elements, requires the image file to be larger than it has to be (since too much compression reduces quality). Use CSS-style headers to achieve the same or a similar look. The trade off is one more HTTP request for a smaller image size and some CSS tweaking.

  • Combine external CSS and JavaScript files. Sometimes developers create style sheets and import them to the pages as required. This approach creates additional HTTP requests. By combining files, you will reduce download time by 1 HTTP request. You can also combine CSS and JavaScript files together by telling the server to parse CSS files for PHP commands. Search the web for more information.

  • Get rid of frames. Frames are extremely evil, since bots have trouble identifying web pages. They’re just as evil as Flash in terms of SEO.

Convert JavaScript to CSS

JavaScript is used widely for a variety of purposes. The problem with JavaScript is that search engines do not read it (though technology already exists to even fill out JavaScript forms), and it requires a separate external file, which increases page download time.

Use CSS to perform commands similar to JavaScript: hover, dropdown, hide/show etc. You have to be pretty good with both languages, though, or instruct your  web person to do it.

After replacing JavaScript with as much CSS as possible, you can optimize the remaining code to minimize file size. There are a number of free tools on the web which will help reduce script file size by eliminating white space and using abbreviated object, variable and function names.

  • http://www.xtreeme.com/javascript-optimizer/

You can do the same with CSS:

  • http://www.google.com/search?q=optimize+css&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a

You can also rewrite the same code to achieve a smaller file size, though this requires more time/money.

Images are usually the largest files on a web page and take up most of the download time, hence image optimization is crucial.

First off, stay away from the following formats: TIFF and BMP. Use JPEG, GIFF and PNG instead. All three have good compression and are suited for various purposes.

(Photoshop is the standard in image editing, for web and other purposes)

  • Use JPEGs with photographs, product images and presentation images. Anywhere you need a high quality picture at the smallest possible size, JPEG is the best choice. You’ll find little difference between high quality JPEG and medium quality, yet sizes can be up to three times smaller.

  • Use GIFF compression for icons, backgrounds and small graphics.

  • Use PNG for high quality screen shots, transparent graphics and icons.

Here are some more image optimization tips:

  • Resize image to the exact dimension that you want to use on the web page. Extra size adds weight and download time.

  • Use CSS backgrounds and borders instead of images.

  • Minimize bit depth in GIFs and PNGs.

  • Adjust layers in Photoshop to minimize the width of the drop shadow for better compression.

Videos

Video optimization is only useful if you’re hosting videos on the server, and if you are, I must ask a question: why? It eats too much bandwidth and requires manual optimization of files, taking extra time. Unless you absolutely must host video, use the following websites. They will compress your videos to the smallest possible size, while maintaining a good level of quality.

  • http://www.youtube.com/

  • http://www.metacafe.com/

  • http://video.yahoo.com/

Flash

A basic Flash mistake is lack of image optimization. Use Photoshop for optimization instead of Flash. You might not notice the difference at first, but as you do it to hundreds of images, you will feel the overall weight reduction as it adds up.

Avoid Flash optimizers, free or not. They degrade quality too much. Real optimization is manual.

Using CSS can save you up to 50 percent of web page markup.

First see if you can achieve table layouts with DIV tags, and then strip down the content of tables and build it back using CSS. You can use CSS to position an entire page layout just as successfully as with tables.

Put Important Content Up Front

You can decrease the perceived load time of your web pages by loading something useful first. For example, if visitors go to your site for content, then load content first and everything else second. If users come for a web application, then load that application first.

You can achieve this by layering your DIVs.

External JavaScript Embeds

Web outsourcing is as popular as job outsourcing to China, India and other countries with cheap labor. Webmasters can outsource video, slide show presentations, images, advertisements, music playlists and more. The problem with outsourcing and widgets is they can delay your page load time, and there’s nothing you can do to optimize it.

Though Google maintains huge server farms to streamline download time, other third party providers do not have this luxury, so watch who you embed and always put external scripts on the bottom of the page, close to the </head> (if possible), as it ensures that external files will load last.

Semantic Markup

Semantic mark-up is not necessary to achieve high search engine rankings, but it can help with page load time, as browsers will render pages faster. If you plan your design from the beginning using a CSS layout, then use main DIVs such as #footer, #header, #content, #navigation, etc to declare style for ALL elements, without the need to embed classes in HTML.

  • Use CSS IDs for main elements that show once on the page (header, content, footer, etc).

  • Use classes for everything else.

Here are some more tips:

  • Make Ajax code cacheable to avoid HTTP requests.

  • Remove duplicate scripts from different pages and use an external script file sheet.

  • Avoid redirects, as they slow down load time and can lose link power from the previous domain.

  • Reduce domain name system lookups.

Measuring Page Load Time

Dreamweaver has a neat indicator on the bottom right hand corner which estimates page load time at different connection speeds and shows page file sizes (located near zoom, and screen resolutions). You can customize connection speed.

Also browse this Web Master World thread for more information on applications that measure the speed.

Make sure to test pages on different computers. I have a habit of checking our sites whenever I see a computer, whether at my friend’s house, store or other company. You can check how fast your page loads, but also see how the website looks on a different monitor, at a different resolution, with a different graphics card.

Aim for page load times below three seconds. Anything larger can be felt by visitors, and there’s nothing more annoying than waiting for a page to load. Keep in mind that Google spoiled the Internet population with an abundance of super relevant results and lightning fast load times. Users take this for granted and will not tolerate 10 seconds of wait time. They would rather go back and find someone who loads faster.

I hope this article helped. Leave us your comments, thoughts and additional tips on how to decrease page load time.

Google+ Comments

Google+ Comments