Take page speed to extreme

Aside of optimizing your web application according to following articles, I will try to write list of few other hints which you can use to save bytes in html responses.

• Yahoo Best Practices for Speeding Up Your Web Site
• Google PageSpeed Tools
• Performance Advent Calendar 2009

1. To define charset use: <meta charset='utf-8'> instead of <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

2. When you are using html5 doctype, you should omit type attribute in link tag for stylesheet: <link rel='stylesheet' href='style.css'> (instead of <link rel='stylesheet' type='text/css' href='style.css'>).

3. In case of using webfonts for icons on your page use: <i class='i-comment'></i> instead <span class='i-comment'></span>

4. In case of dynamically serving content (eg. images) implement server handler to consume path instead of parameters:
www.yourdomain.com/i?i=someimageidentifier
www.yourdomein.com/i/someimageidentifier

5. Use overflow: auto/hidden to clear floats (as explained on QuirksMode) instead using additional markup with clear property set.

6. Use relative path in stylesheet for urls (eg. bg.png) instead of absolute paths (/style/bg.png). Relative paths are always shorter and they allows you to test without using local server.

Not to do:

One of the things not to do is to use p tag instead of div. The reason is explained on Sitepoints html tag reference

Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn't the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.

Also have in mind those limitations on placing only inline elements into following tags:

Heading elements h1..h6 may contain any text content, but they can't include any block-level elements: only inline or phrase elements can be included.

blockquote element is used to mark up one or more paragraphs, which may themselves contain other inline elements (for example, strong, em or a elements).


This article is written by developers of itumb.com.