Deep dive on solving website performance Part 2Posted Nov 25, 2015 | 3 min. (434 words)
1. Basic web optimizations
Concatenation and compression of CSS and JS
– File concatenation: grunt-contrib-concat/gulp-concat
– CSS compression: grunt-contrib-cssmin/gulp-cssmin
Lossless compression of images
– Workflow plugin: grunt-contrib-imagemin/gulp-imagemin
– Mac desktop app: ImageOptim
– Web app: TinyPNG
– By setting sensible cache time limits on static assets, you can drastically improve the time load a page.
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.
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.
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.
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.
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.
Let your user know when they’re going offline, and stores their actions for when they are back online.
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.
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.