Everything about Web and Network Monitoring

9 Popular Website Performance tips

by | Jun 15, 2012

top-ten-website-performance-tipsYour friends at Monitor.Us created a survey a few weeks ago. Developers, system administrators, and others were asked to identify the top website performance tips that had made the biggest difference in their webapps. The results are now in. The top ten tips, according to you, are outlined below.This survey dealt with loading and rendering tips. Other categories of tips will be in separate surveys over the next few weeks. The HTML survey is available now.

And the Top Ten Website Performance Tips Are….

Well, actually, it’s not a top ten; it’s a top nine. We’ve got to go where the data takes us, and these data had four tips tied for #1 and five tips tied for #2. If we were to include the five tips in the #3 spot, we’d have a top 14 list. Let’s go for the top nine instead.With 44% of the respondents voting for these four tips, they are tied for #1:

 

  • Follow the KISS rule: Keep it short and simple.

 

  • Avoid manipulating the DOM hierarchy as much as possible.

 

  • Create less output.

 

  • Reduce the number of DOM elements.

 

There seems to be a bit of a theme here in the #1 spot. It looks like you are advising webapp designers and developers to keep things small and simple, which sounds like good advice to me. This particular advice is mentioned repeatedly in the different articles I read each week, but no one ever seems to make a big fuss about it. Maybe it’s time to start making a fuss.The short, simple approach offers the best performance for several reasons. The fewer bytes that make the trip from the server to the client, the faster we can download the components. The smaller the web page, the faster it renders. The less we manipulate the DOM tree, the fewer reflows we’ll experience. The KISS rule rules!There are other benefits of this design philosophy. In particular, simplified designs make it easier for the user to figure out how to use our web pages. Because of the visual complexity of some web pages, users have trouble figuring out how to interact with the page and they give up very quickly. They figure they can find the same thing elsewhere without so much fuss and bother. This flies in the face of our current “more functionality, more images, more animations, more popups” thinking.Next on the list, with 25% of the respondents recommending each of these, sharing the #2 spot:

 

  • Comply with all standards.

 

 

  • Load below-the-fold components asynchronously after above-the-fold components.

 

 

  • Execute code in this order: Download and execute the needed-now scripts; Wait for onload; Download and execute the needed-soon scripts; Download and execute the maybe-needed-later scripts; Download the components that are likely to be needed on the next page.

 

 

  • Avoid accessing the DOM hierarchy as much as possible.

 

 

  • Avoid reflows by avoiding their triggers (e.g., manipulating the live DOM tree, changing the style or className properties, resizing the browser window, manipulating a table, using static or relative positioning, requesting layout information, changing the font, adding or removing a stylesheet, activation of CSS pseudo classes).

 

These tips tell us to treat the DOM tree with respect. Build it in the order that achieves interactivity soonest. Access it as little as possible. The more dynamic it is, the more performance problems we’ll have.

Conclusion

Your selection of the top nine website performance tips agrees wholeheartedly with the most recent buzz on the web. The experts seem to agree that these tips are among the most important. In fact, if one were to design a webapp according to these top nine tips, many of the potential performance issues would be resolved right up front.

Coming Up Next

Get in on the action. The next survey is already available. Share your expertise by identifying the best-of-the-best HTML tips. Don’t delay, though. We’ll be moving on to the third list in a week or so.
Post Tagged with

Category: Website Performance | Tagged No Comments.

About Warren Gaebel

Warren wrote his first computer program in 1970 (yes, it was Fortran).  He earned his Bachelor of Arts degree from the University of Waterloo and his Bachelor of Computer Science degree at the University of Windsor.  After a few years at IBM, he worked on a Master of Mathematics (Computer Science) degree at the University of Waterloo.  He decided to stay home to take care of his newborn son rather than complete that degree.  That decision cost him his career, but he would gladly make the same decision again. Warren is now retired, but he finds it hard to do nothing, so he writes web performance articles for the Monitor.Us blog.  Life is good!