Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Deep Dive on Solving Website Performance

DZone's Guide to

Deep Dive on Solving Website Performance

Here are some workflow optimizations and JavaScript quick-fixes to quickly deal with some common client-side website/web app performance problems.

· Performance Zone
Free Resource

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.

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. SelectivizrIE9 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.jsIE8 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. WebshimThis 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. FastClickRemoves 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. OfflineLet 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 WebpackBrowserifyRequireJS 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.

Learn tips and best practices for optimizing your capacity management strategy with the Market Guide for Capacity Management, brought to you in partnership with BMC.

Topics:
website ,application development ,performance

Published at DZone with permission of Gary Tuohy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}