Web applications are becoming increasingly interactive. As a result, more code is shifting to the client, and JavaScript performance has become a key factor for many web applications, both on desktop and mobile. Just look at this still ongoing discussion kicked off by Jeff Atwood’s “The State of JavaScript on Android in 2015 is… poor” post: https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/240.

Devices nowadays offer a wide variety of form factors and capabilities. On top of this, connectivity – whilst widely available across many markets – varies considerably in quality and speed. This presents a huge challenge to anyone who wants to offer a great user experience across the board, along with a need to carefully consider what actually constitutes “the board”.

In this session I’m going to show you how to optimize the client experience. We’ll take an in depth look at Chrome Dev Tools, and how the suite of debugging, data collection and diagnostic tools it provides can help you diagnose and fix performance issues on the desktop and Android mobile devices. We’ll also take a look at using Safari to analyse and debug web applications running on iOS.

Throughout I’ll use examples from https://arcade.ly to illustrate. Arcade.ly is an HTML5, JavaScript, and CSS games site that I developed specifically to allow me to talk about client-side performance without needing to reveal any code or user interface that might identify my customers. It supports both desktop and mobile play, and the topics I cover will be relevant for any web app featuring a high level of interactivity or code execution on the client. In particular, as examples I'll use my versions of Star Castle (https://arcade.ly/games/starcastle) and Asteroids (https://arcade.ly/games/asteroids), but maybe with a bit of Space Invaders action too.

Topics covered include:

• Page lifecycle
• HTTP/2
• Making efficient use of memory
• Profiling with Chrome Dev Tools
• How to handle long-running scripts (don't have them!)
• Canvas and CSS
• Taking control of resource loading
• Several other small matters

Slides for the last time I gave this talk can be found at https://www.slideshare.net/bartread/client-side-performance-for-back-end-developers-camb-expert-talks-nov-2016.