On October 9th, We Love Speed, France’s first event dedicated to web performance, was held in Bordeaux.
This event, which brings together web and e-commerce professionals was born from the desire to share a collective knowledge and experiences around web performance.
Web performance is a top concern for Clever Age that we address throughout our consulting or implementation projects. From design, conception all the way to the implementation, we like to keep in mind the challenges related to web performance and push best practices to our clients.
It was therefore natural for Clever Age to join We Love Speed as a partner and sponsor for this first-time event, alongside prestigious colleagues from the web; Google, CDiscount, Fasterize, Dareboost or Akamai.
We Love Speed has brought together talks of dozen web performance experts. We are sharing here a summary of the talks given by our consultants.
Web Performance Metrics Explained
By Jean-Pierre Vincent
Jean-Pierre Vincent introduces the metrics that make it possible to measure the user experience through web performance. Of course, useful measurements cannot be obtained by quantifying the way users feel when viewing a web page. We can, however, set up measurements that are practical, quantifiable and understandable by all stakeholders, while being representative of the UX and relevant for business.
Jean-Pierre presented the following indicators:
- Page Loading Time: not very representative of the user experience
- First Paint: first non-white pixel displayed on the screen
- First Contentful Paint: first non-white pixel that belongs to an image or text
These two indicators can be retrieved via tools (WebPagetest, Lighthouse) or via JS APIs. They only represent the first step in the page loading process.
- SpeedIndex: the sum of pixel percentages multiplied by the number of seconds that these pixels are displayed. On the 40 most visited mobile sites, the median SpeedIndex is around 6300 ms, and Google’s own target is a SpeedIndex (100 percent of all final pixels) of less than a second. One of the limitations of SpeedIndex is that it is distorted by animations, videos, carousels, pop-ins.
The following measurements are used to determine the moment when the page becomes usable:
- DomContentLoaded: an event used by JQuery developers, retrievable via tools (RUM) or a js API.
- First Meaningful Paint: evaluates the moment when frameworks like React calculate the highest number of new layouts that are visible in the viewport. Only available in Chrome and not representative on all sites.
The following indicators are used to measure the responsiveness of the user interface:
- First CPU Idle: the beginning of the first 5 seconds of idle CPU time
- Time To Interactive: the beginning of the first 5 seconds of idle CPU time and a period of idle network activity
- First Input Delay: click response time — the number of milliseconds between the moment the user clicks or scrolls and the execution of the first associated function. This measurement is only available in RUM.
These generic indicators must be validated in the context of your site to ensure that they are relevant and suitable to monitor the web performance of your site.
These indicators can be completed by setting up Custom Metrics to measure specific “moments” in the loading of a page: display of the logo or product image, initialization of a tracker, availability of a functionality (search engine). These metrics are more accurate and more aligned with business objectives..
Custom Metrics are retrieved in js via the User Timing standard which makes it possible to pinpoint these particular moments and make them accessible via Webpagetest, for example. To measure events such as the loading time of an ad or a font, it is also possible to analyze HTTP requests.
Jean-Pierre recommends implementing metrics that are meaningful to your business and can be easily communicated within your company, even if their maintenance requires development and a lot of attention.
This introductory talk was an excellent reminder of the various metrics used to measure a website’s performance, which will be repeated throughout the day in different presentations.
Lightning Fast UX: Faking Performance When There’s No Code Left to Optimize
By Stéphanie Walter
Talk slides available here (in french).
Stéphanie Walter is a UX and UI designer with specific expertise on mobile and performance. She had actually already co-held a conference on mobile adaptation strategies (link in French) with Jean-Pierre Vincent at the Blendwebmix event in 2015.
This new conference by Stéphanie focuses on the perception of performance, a salutary step back from the highly technical measurements that are more common when talking about web performance. It is also in line with the need, mentioned by Jean-Pierre in his talk, to find performance indicators that reflect user perception in a really meaningful way, while being technically measurable (in particular to make automation possible).
Based on very concrete experiences, Stéphanie introduces multiple techniques to create an illusion of performance when the actual performance is clearly not as good as it could be and it is no longer technically possible to make improvements (or when time and/or funding have run out).
The overall idea is to keep users’ minds busy while they are waiting, so that the unpleasant sensation of waiting is minimized, or even disappears. It ranges from “simple” animations to richer visuals, taking advantage of the unavoidable waiting time and making it an opportunity rather than a weakness.
Stéphanie also shows how to organize work between UX designers, UI designers and developers, how to make everyone aware of the possibilities and constraints of others, etc.
The conference ends on a counterintuitive point, showing that sometimes it is actually necessary to work on the UX to hide a technical performance that is too good, since the value given to the result often depends on the effort that is required — or perceived as such — to obtain it.
Ultimately, it was an excellent conference that showed once again that technology is only one of the performance drivers, serving the UX, and that teams need to work together.
CSS Rendering Performance
By Thomas Zilliox
Thomas Zilliox is a web developer specializing in front technology who considers himself to be a “CSS expert”, and for good reason. He is constantly striving for simplicity, maintainability and modularity in the CSS and Javascript languages. He shares his expertise and insights in conferences, online articles, and more recently through the book he wrote about the Flexbox CSS spec.
In this talk titled “CSS Rendering Performance” Thomas focuses on the impact, in terms of performance, of various CSS properties applied to a web page. The idea is to stop minimizing — as has been done too often — the benefits of style sheet optimization. Instead, we try to optimize each property so that the interface remains smooth while scrolling, manipulating content, and during the transition from one content to another.
Thomas recommends questioning the impact of each CSS property, and front-end development choices in general, in order to contrast their contributions to the interface with their cost in terms of performance. For example, AirBnB removed or reduced the shadows applied to most blocks on the site because they degrade the rendering performance of the page when scrolling.
These performance-oriented considerations on CSS lead us to dissect the way web pages are displayed by browsers: Layout – Paint – Composition – Pixels (model from the conference). All of our CSS properties will define our final display once all steps in the above model have been performed by the browser. Interactions with our page will change the display of the already loaded page and thus relaunch one or more steps of the browser’s display process. Each step represents additional resources, which is why they must be chosen carefully. Here is a resource shared by our CSS expert to identify the various browser events triggered by each property: CSS Triggers.
Thomas encourages us to adopt a new way of thinking when creating style sheets: anticipate costs – look for possible workarounds or optimizations – try to produce the most minimalist and maintainable code possible – test the performance of your approach on all the browsers included in the project scope.
Coming Up Next…
The other talks from the We Love Speed 2018 event will be presented in a second article, to be published very soon!
