Billed as 'an inspiring day of talks from the pioneers of the World's favourite JavaScript framework, and wider industry experts', jQueryUK has become one of the foremost front-end developer conferences in Europe. This year's conference was bigger than ever before and e3's senior front-end developers were there on the front lines to take it all in.

The front-end developers at e3 are no strangers to page optimisation and we work hard to squeeze every last bit of performance out of our website builds. In that respect it should come as little surprise that, for us, Google's Paul Lewis and his talk about building a 'frictionless' experience was the highlight of the day. Frictionless within this context meaning where the performance of the website doesn’t become a barrier to the end user achieving their goals within it.

When approaching page optimisation, most developers will focus on network performance and Paul's talk kicked things off the same way, looking at the main optimisation tools in a front-end developer’s arsenal: concatenation, minification and compression. 

Taking the load

When loading a page, your web browser makes requests for each additional CSS or Javascript file that it requires for the page to run. Each of these requests adds to the time it takes to load the page, so the more requests a page makes, the slower the experience. Concatenation joins all of these disparate pieces into one file, thereby reducing the number of requests. Minification and compression reduce the file size of that request even further. Lastly, placing the concatenated javascript file in the footer then allows the page to render quickly without having to wait for the script to load.

On the move – inside web browsers 

The real gem of Paul's talk however, was when he took a fascinating and in-depth look at the internals of web browsers and how they draw web pages to your screen. He explained that, at a very base level, whenever something in a web page moves, your browser creates a rectangle around the area of the page that has changed and then redraws everything that falls inside it. This is very demanding on both your CPU (Central Processing Unit) & GPU (Graphics Processing Unit) so the more that has to be redrawn, the slower a page will run.

The implications of this on modern sites are very clear. Most browsers will render the page at 60 frames per second, but popular graphical effects like parallax backgrounds, which involve different sight levels and animations, trigger large areas of the screen to be redrawn every frame. The more layers of content that the browser has to draw per frame, the fewer frames per second it can handle overall. This makes the experience sluggish. On desktop devices the impact on CPU / GPU performance may not be noticeable but the stuttering on mobiles can seriously damage the user experience.

The need for speed – a way forward 

All is not lost. CSS tricks can be used to trigger hardware acceleration which helps alleviate the issue. 

Additionally, javascript that triggers the page to redraw (i.e. parallax) should be 'debounced' to prevent it flooding the browser's memory. Debouncing, Paul explained, essentially stops javascript queues and forces it to wait until the browser is ready to draw each frame. With careful planning, pages can be built to keep graphical redraws to a minimum and keep the experience speedy.

Looking to the future, it's safe to say that there is no longer a silver-bullet answer to improving page speed. Compression and minification alone are no longer sufficient to producing a 'frictionless' experience. Rather, creating the best possible experience for your site requires a considered approach at all stages of the build.