Make Your Site Faster

We know that users prefer websites and applications that work fast. There is a lot of evidence that link performance to revenue. Let’s see what are main parts of the user experience that relate to the perception of ‘speed’ and how we can improve it.

RAIL performance model

RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in very different ways. You can see in the image below the 4 main aspects and what are the time limits to each stage.

The TL;DR

• Focus on the user – the end goal isn’t to make your site perform fast on any specific device, it’s to ultimately make users happy.
• Respond to users immediately – acknowledge user input in under 100ms – In mobile always use touch events and not click events (yep, click events still got this 300ms delay on mobile browsers)
• Render each frame in under 16ms and aim for consistency. Users notice “jank” because in most cases it will ‘jump’ to their eyes.
• Keep users engaged – deliver interactive content in under 1000ms.

Advertisement

Chrome 45 New Features

Time flies!
Since my last update on Chrome 44 we had the chance to see the market crash and quite a lot of new features that were baked into Chrome 45.
The main improvements you should take a closer look at:

• A set of new ES2015 features including:
  • Arrow functions – Arrow functions are always anonymous and effectively turn function (arguments) { expression } into arguments => expression.
  • New methods on Array
  • New methods on TypedArray
  • Object.assign() copies the values (of all enumerable own properties) from one or more source objects to a target object.
    It has a signature of Object.assign(target, ...sources)
• SMIL is deprecated – to learn more please check out the discussion.
• This (long time) bug is fixed.
• Web Bluetooth is now available in Chrome OS 45.
  It’s still in Developer Preview and the team is actively looking for developer feedback.

Chrome for Android Media controls
On Android, native apps can show media controls in a system notification when playing audio, making it easy for users to control audio while multitasking. Chrome 45 brings this capability to the web by showing a notification with media controls when audio is playing in web content. The controls will automatically show up when <audio> or <video> tags play audio longer than 5 seconds. It will look like this:

Chrome 44 New Features

Chrome 44 is now in stable channel and there are many updates and improvements:

• Improvements to Notifications API and promoted add to homescreen.
• The Push API has undergone several minor breaking changes in order to keep up to date with the evolving specification.
• A new implementation of multi-column layout, solving historic issues with incorrect column balancing.
• Developers should now use the scroll attributes of document.scrollingElement instead of document.body as the latter has several well known issues.
• ES6 extended Unicode escape sequences allow developers to use the extended set of Unicode characters in JavaScript string literals, where previously characters whose escape sequences contain more than four hexadecimal values were unable to be denoted.
• What a quick summary? you got it all in under 4 min video!

And there are a lots of other improvements and security fixes.

What is hot and new on the web?

Polymer And Web Components At I/O 2014

This talk cover three main subjects:

• State of the union – What has change in the past 3 years
• Problems solved by web components – When it comes to build complex web applications, there are many ways we can do things better. In this section we will see how/why.
• Thinking in components – What are the implications when you coming to design and build web apps.

== Psst… It’s in raw format – I will polish it after I/O is over ==

State of the union

Once many years ago… We had HTML4 with all its problems. Later, well few years back, HTML5 was the answer for everything. It specifically, tried to show developers what can be done on the web modern platform and moreover APIs browser vendors could add to help developers boost their productivity. In the past 18 months we saw a lot of things like: templates, shadow dom, data binding etc’. It’s been a long journey. Now, we have Polymer.