DotNetNuke Tips & Tricks

Wednesday, September 30, 2009 by Cuong Dang

Best Practices to Improve Site’s Performance through Front-end Development

Filed under: Tips & Tricks

Some claims DotNetNuke is notorious when it comes to performance. I beg to differ. Consider the advantage that you’ll get from using an enterprise-level platform for every web project can possibly build, a little bit of performance sacrifice is worth the tradeoff in my opinion.

But that’s not the point. You can build DotNetNuke sites that have kick-ass performance if you do it the right way. There are many respected developers in the community have spoken about this specific topic, but rarely touched on the front-end aspect. In this post, I’d like to share a few best practices that help to get the most out of your DotNetNuke site's performance by just improving front-end development approaches.

1. Optimize Your Site Layout

Develop your web site layout using web standards approach is strongly recommended. If you think weather to use table for layout or pure CSS technique is controversy, then look to performance for the differences. W3C recommends using XHTML/CSS for layout among other benefits, performance is one of them.

CSS is about the separation between content and presentation. It meant to let the browsers do less work by rendering the necessary markup, then load CSS related to present the design. It’s no rocket science. If you have more HTML markup on your site, it will take more time for the browser to load. By using the web standards approach, you let the browser loads just what it needed, your site performance will be better.

2. Smarter CSS Techniques

Organize your CSS file intelligently. Try to reuse CSS selectors by naming them in a meaningful way so you can re-use across the site. This way you don’t need to write much CSS rules that makes the file larger. Also, CSS shorthand is a great way to reduce file size and increase productivity.

3. Use CSS Sprite

CSS sprite is one of the techniques widely used by many web designers across the world. The concept is to reduce the number of files from your server requested by a browser. The more files it asks, the longer it takes to load the page.

The idea behind CSS sprite is to combine all images into one large file and use CSS to position it to use across the site. The only downside of this is it requires careful panning in your CSS so had any changes occur in the future, you’re able to modify the image easily without re-doing everything again.

4. Reduce HTTP Requests

DotNetNuke does load many Javascript and CSS files. This causes some issues with performance. If you wish to achieve the optimal performance of a DNN site, have multiple versions of your Javascript and CSS files to work with but only use one minified Javascript file and one combined (of course this is also a minified version) CSS file for production.

Timo Breumelhof, DotNetNuke Skinning team lead, created a skin object called UnloadCSS, you use this skin object to remove some of the CSS files that you wish not to use. By reducing the number of files a browser needs, it helps to speed up your site performance tremendously.

These are just a few techniques that are essential for front-end work that you can do to speed up site’s performance. I will be giving two presentations in Las Vegas at OpenForce conference this November to share more interesting techniques. Be sure to stop by and say hi.

Comments


Thursday, October 1, 2009 1:40 PM
Comments from the following blog entry: http://topsy.com/tb/bit.ly/16Ermf
chinmi
Thursday, October 1, 2009 3:51 PM
thanks a lot for this writeup, much appreciated
Zycznia Urodzinowe
Wednesday, November 4, 2009 5:05 AM
Use CSS Sprite – I think this is the best option to make your website appear faster.
Great tips, thanks!
Jeff Cochran
Friday, December 18, 2009 12:51 PM
Does anyone use CSS sprites in DNN, especially for things like navigation? While I'll agree they do make the page "snappy," it's a bit difficult to separate CSS sprites from some of the areas in DNN they would be most useful. Navigation, for example, would require a fully CSS navigation skin object/widget, would it not?
Cuong Dang
Friday, December 18, 2009 1:01 PM
@Jeff, I don't know of any other skin object or nav provider out there allows you to accomplish this. I've used it before for a few clients using straight HTML/CSS for the nav. Since their core services rarely change, it allows better typography on the site.
dotnetnuke
Monday, January 11, 2010 3:57 PM
It was a nice read, except the bottom spam comments..
dnnGallery
Monday, January 11, 2010 4:06 PM
@dotnetnuke, thanks for the comment. I've cleaned up all the spam - I don't know how I missed all of those!

-Ian
dotnetnuke
Monday, January 11, 2010 4:09 PM
No worries Ian, the guy also catched up my dnn site :)
Leonard Lee
Sunday, February 21, 2010 6:25 PM
Good tips Ian! Thanks!
blog comments powered by Disqus