Addressing the problem of slow loading web pages


As web developers we normally confront the user requirement that the page renditions be instant without any delay. In traditional web applications, we normally have the thumb rule of 8 second rule as a threshold to indicate that the pages should complete their rendition in less than 8 seconds. And now with RIA expectations and Web 2.0 standards, the pages behave akin to desktop applications diminishing the difference between desktop application and web application to submerge the wait time between round tri

Divide and Rule



Do not have the entire page post between the response. You can make use of partial postbacks in various AJAX frameworks so that only relevant portions of the page refresh instead of the whole page. This also saves a lot of bandwidth for both the server and the client. Add to it the savings from unnecessary processing of redundant portions of the web page for the server. When sections of the page refresh, you can also try using a progress bar in those areas alone.

Tips



You can try making use of Caching for the following parts in the web page to speed up the renditions:


  1. Images in the web pages/static content

  2. Common and frequently used files like JQuery, JQuery UI can be loaded from CDN URLs instead of local. Since these URLs would have been visited by the browsers already,there is a good probability for having these cached.
    Google, Microsoft and MediaTemple CDNs are a few common and frequently referred CDNs by websites.

  3. Try using the minified versions of the scriptlets in the production servers which enhances the rendition times. Small droplets make the big ocean.
    Starting with .NET framework 4.5, System.Web.Optimization namespace provides an elegant way to bundle all JavaScript and CSS files from a given folder into a single file.

  4. Portions of the web page that does not need frequent processing can be turned into caching through Page/Fragment caching as appropriately.
    Try to see if frequently accessed page contents can be cached at the server instead of making repeat database calls.

  5. Viewstate is another place where you can try minimizing the response state heaviness. It is actually an hidden field to maintain the state of controls that is optionally MAC encrypted besides having a base64 encoding. Hence make a judicious call on what goes into this state persistence mechanism. Disable ViewState for controls and page that is not required by an explicit EnableViewState=false directive.



Summary


I hope that these small tips and tricks would help a beginner to tremendously enhance the user experience in the rendition of their web pages.


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: