Deep dive on solving website performance Part 2

In Part One, we had a look at how Pulse Real User Monitoring can help you identify performance issues. So here are some workflow optimizations and JavaScript quick-fixes to quickly deal to some common client-side website/webapp performance problems. Enjoy!

1. Basic web optimizations

1. Concatenation and compression of CSS and JS

– File concatenation: grunt-contrib-concat/gulp-concat

– JavaScript compression/minification: grunt-contrib-uglify/gulp-uglify

– CSS compression: grunt-contrib-cssmin/gulp-cssmin

2. Lossless compression of images

– Workflow plugin: grunt-contrib-imagemin/gulp-imagemin

– Mac desktop app: ImageOptim

– 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

Organise 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 reving.

Not sure which website performance issues your site is struggling with? **Try Raygun free for 14 days, **no credit card needed.