Deep Dive on Solving Website Performance

Previously, we had a look at how Pulse Real User Monitoring can help you identify performance issues. Here are some workflow optimizations and JavaScript quick-fixes to quickly deal with some common client-side App performance problems. Enjoy!

1. Basic Web Optimizations

1. Concatenation and compression of CSS and JS:
   1. File concatenation: grunt-contrib-concat or gulp-concat
   2. JavaScript compression/minification: grunt-contrib-uglify or gulp-uglify
   3. CSS compression: grunt-contrib-cssmin or gulp-cssmin
2. Lossless compression of images:
   1. Workflow plugin: grunt-contrib-imagemin or gulp-imagemin
   2. Mac desktop app: ImageOptim
   3. Web app: TinyPNG
3. Leverage browser caching: By setting sensible cache time limits on static assets, you can drastically improve the time load a page.
4. Enable gzip compression of assets: If your server and clients supports gzip compression, enabling it could cut down your transferred response by up to 90%.

2. Browser Compatibility Quick Fixes

Need to support legacy browsers? Here are some handy open-source polyfills to solve some common older browser issues.

1. Selectivizr: IE9 and below have limited CSS3 support, and therefore many (if not all) of the useful modern CSS selectors are not available without a polyfill.
2. Respond.js: IE8 and below do not support CSS media queries. Load this in after your stylesheets have loaded and your long-suffering IE users will thank you.
3. Webshim: This is legacy browser polyfill library which allows developers to dynamically load in polyfills for commonly used HTML5 features including forms, geolocation and even Canvas.

3. Mobile and Tablet Quick Fixes

Here are a couple of awesome open-source JS projects which will help boost your app’s performance on mobile devices.

1. FastClick: Removes the awkward touch delay between a user’s finger hitting the screen and the ‘click’ event firing. Particularly useful for iOS, as while Chrome on Android can remove the delay with user-scalable=no, and IE11+ has touch-action: manipulation, Mobile Safari has no such setting currently available.
2. Offline: Let your user know when they’re going offline, and stores their actions for when they are back online.

4. JavaScript Module Bundling and Package Management

Organize your client-side code with a bundler like Webpack, Browserify, RequireJS or JSPM with System.js (especially awesome if you have a lot of third-party dependencies, and can run in either unbundled local dev mode or bundled production mode).

Bundlers cut down on blocking JS requests, compress code and to only load the scripts which are currently being used on the page.

5. usemin

Introduce usemin as part of your workflow to automagically replace non-optimized assets referenced in your templates. usemin also easily integrates concatenation, compression and file revving.