Tips On Optimizing Frontend Web Application

"80-90%” of the end-user response time is spent on the frontend. Start there. 
-Steve Souders

Myth About Major Cause of Slow Web Performance

• Poor application architecture
• Slow Database Access
• Low Hardware Specification such as ram, processor, etc
• Low quality or poor configuration of Web Server

Facts

While all of this things can contribute to web application performance, it only takes 15% of the cause. If we focus our attention on the picture below, most of the time spent is on frontend resource pulling. Most of these resources are JavaScripts, HTML, CSS, Images, and Flash.

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

Reasons for Optimizing Web Performance

• Speed is the number 1 reason;
• Provide a better user experience;
• Time is Money. If visitors are annoyed on your website, they go to another website;
• Mobile browsing is growing and mobile bandwidth is very limited;

Tips on Optimizing The Frontend Web Application

1. Fewer HTTP Request
Loading lots of resources in one page will surely slow down your website. Long pages especially on the Home Page is not beneficial to you as well to your visitor. Your visitor won't read this at once anyway.

How To Achieve Fewer HTTP Request:

• Provide a proper Navigation Experience
• Provide a summary of your Web Content on your Home Page
• Apply Paging to avoid Long Pages
• As much as possible avoid full-page refresh, use jQuery/JavaScript to do the heavy lifting of data. 


2. Client-Side Caching
Client-Side Caching is great tool to reduce/too much communication/traffic from the server and the client. Once resources is rendered on the client side, it will not fetch those resource from the server again. Well, this is true as long as you stay and navigate on the site. Closing the site and revisiting the site will send you back to square one. Technologies such as AngularJS and KnockoutJS does an excellent job on this area.


3. Gzip
GZip is a tool that compress files before sending over the net. When it reached the destination, the browser decompresses the files and render it on the browser.

I will refer you to some excellent blogs on how to enable GZip compression on IIS and Apache:

• http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
• http://ericsowell.com/blog/2013/6/7/enabling-gzip-in-iis-on-windows-8


4. UI Thread
HTML 5 have web workers, asynchronous, and multi-threading capabilities. Use it for smooth UI response and avoid UI freezing.


5. Use CDN (Content Delivery Network)
CDN helps shorten the distance traveled from the client and the server. The browser will pull the resources from the nearest server in your region. 


6. Expires/Cache-Control Header
HTTP caching is storing copies of web resources on the local browser for future utilization. The browser will no longer connects to the server to fetch those resources again. Stable resources such as jQuery 1.9.0, BootStrap 3.0, and other resources that does not change or updated are good target for chaching.


7. Stylesheet at the Top and Scripts at the Bottom
Stylesheets such CSS are the primary decorators of the page, therefore these should be loaded before pages are rendered on the browser.

JavaScripts that are needed after the document is in ready mode should be place at bottom of the page. Why? JavaScripts is one of the resources that are greedy while loading. It freezes the screen while processing take place.


8. Avoid CSS Expressions, Use JavaScript Instead
CSS Expressions are embedded JavaScript codes in CSS. The problem with this is that CSS expressions are evaluated every time an activity occurs. Moving the mouse around the screen alone will be evaluated.


9. External JS/CSS
CSS and JavaScripts are usually cached on the client side but placing them inline with html markups will not be cached. For better caching, readability, and maintainability; put them in a separate file.


10. Minify and Concatenate JS/CSS
Minification will remove white spaces, comments, and unused lines. This reduce file size thus file transfer is faster. Concatenation is bundling your JS and CSS files into one. Note that most browsers can only have 6 parallel connections per host.


11. Image
One of the most expensive resources to load are images. Below are some ways to optimize images:

• Use Icon Fonts such as GLYPHICONS. These load 14% faster than regular images./li>
• Leanify Images. This can reduce image size as much 500% but does not blow up the quality. These are the sites to help you do this:
  • http://www.smushit.com/ysmush.it/
  • http://imageoptimizer.net
  • http://pmt.sourceforge.net/pngcrush/
• Avoid referring to non-existing image resource.

There are many more things we can do to optimize frontend's web application. But the above mentioned are major ways to optimize the frontend.

Hope you enjoyed reading. Make your web faster with these tips.

Your comments are valuable. You can add more tips!