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.