Top 10 HTML Performance Tips to Speed Up Your Website

We live in a time where a 2-year-old can make Skype calls on their mom's iPads and watch YouTube videos while having their nappies changed, in short: things are changing and they are changing fast!

Patience is no longer a virtue, it has been replaced by instant gratification – in another word: speed! Things have to go lightning-fast to keep captivating people's interest. If it takes too long to get from one website window to another we go elsewhere, and we go elsewhere fast.

Website performance can make or break a business. Hence, it is absolutely essential to figure out how to substantially increase your HTML performance! There is a lot of valuable information on the web but it can take ages to filter out the useless stuff... So, we've comprised an educated top 10 list for HTML performance for you that you can instantly put to use to improve your site/s. In our opinion the following ten tips do work. However, depending on your website particulars, they might not necessarily have to be in the order we put them in, but they are equally relevant for HTML performance.

They are so good that it raises the question why nobody has come up with designing an app according to these top 10 tips to resolve any potential performance issues right from the beginning!!

It's all about reduction:

1. Create as little output as possible
   
   Common sense one should think, but it needs to be included here. Keep your page sizes to a minimum - preferably smaller than 35K.
   
   
2. Keep the number of DOM elements to a minimum and reduce the manipulation and access of the DOM hierarchy wherever you can
   
   It'll minimize the number of experienced reflows. Also avoid things like activating CSS pseudo classes or changing the style or className properties, using relative or static positioning, resizing browser windows, complex or nested & manipulated tables or layout information, changing fonts or stylesheets.
   
   
3. Keep things short and keep them simple
   
   Less bytes travelling from the server to the website user create faster downloads. Small pages render fast, duh!
   
   
4. Always conform to all standards!
   
   
5. Reduce the number of meta tags and ensure that ALL tags are closed
   
   
6. Execute code strictly in the following order:
   
   
   1. Download & execute needed-now scripts,
   2. Wait for onload,
   3. Download & execute needed-soon scripts,
   4. Download & execute maybe-needed-later scripts,
   5. Download components needed on the next page.
   
   
7. Use static HTML and keep it seperate from the CSS
   
   
8. Reduce the amount of iframes and empty src href attributes
   
   
9. Reduce unnecessary white space, comments, attributes and tags (images should always have alt tags though)
   
   
10. Standards Mode must be enabled (through the use of a strict DTD)
    
    

If you can stick to these 10 easy, comprehensive tips and simply use some common sense, your site will certainly run a lot faster than it would take that formentioned, tech-savy 2 year-old to say the word "papa". Enjoy creating supersonic turbo-blistering fast websites! Godspeed, fellow HTML masterminds!

Guest Author

Gary Harris is a writer for Monitor.Us who provides free website monitoring & network monitoring.  Gary writes about many different topics such as website security, website efficiency and how to best use website monitoring tools to improve user experience.

Image from: Get Free Image