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