Understanding how fast your website is as experienced by real users is a critical first step to begin to optimize performance. But there has been a blind spot in our performance toolbox. Until recently, there hasn’t been a way to compare your website’s real user performance against your competitors. Having this data is critical to benchmarking your competitive edge.
The Chrome UX Report is a one-of-a-kind dataset that makes these kinds of insights available, so that you can put your performance into perspective. In this talk we will explore how it works and how you can leverage it to better understand the user experience on the web.
Lightning fast UX: faking performance when there’s no code left to optimize #
You have optimized every line of code of your site / mobile application, used all the techniques at your disposal to have the fastest loading time possible. I bet you also don’t have an Instagram or Pinterest’s budget, right? Let’s take a look at a few projects I worked on to learn how to use different design techniques and UX to work performance also at the level of user perception.
Stéphanie is a UX and UI Designer with almost a decade of experience. She focuses on building a great user experience for mobile apps and responsive web sites. She’s passionate about her work and likes to share her knowledge with other people on blogs, at conferences and with the students she teaches to.
Building a Web performance culture in the workplace is not easy. Managers must imagine how projects are organized (transversal or specialized teams, champions, etc.), define budgets, make their teams adhere to new values by using various motivational leverage. Several French actors will exchange during this roundtable to compare their experiences.
User Experience & Performance: Metrics that Matter #
Whenever we speak about measuring web performance and user experience, we typically refer to static events in the browsing experience. Modern websites, however, are far from static, and user interactions with these websites have continuous aspects that cannot be represented by distinct events.
In this talk, we’ll look at some of the new user experience metrics that the boomerang team has been collecting. We’ll find out how to measure page responsiveness, smoothness, jank, and usability. We’ll learn about things like Rage Clicks, Missed Clicks, and Dead Clicks. We’ll also look at real user data that we’ve collected showing how these aspects of the page affect user behaviour.
In his spare time, Philip enjoys cycling, reading, cooking and learning spoken languages.
Philip has spoken at several conferences around the world, including Velocity, Fluent, JSConf, Paris Web, IPC, Webinale, FOSSDEM, FOSS.IN, FREED.IN, Ubuntulive, Linux Symposium, OpenSource Bridge, PHP Quebec, ConFoo, WebDU, and Midwest.IO. He also writes for Smashing Magazine, blogs and is @bluesmoon on Twitter.
You can watch some of Philip’s past talks on Youtube.
Optimize performance by selecting optimal dimensions of responsive images #
The use of recent standards for responsive images (mainly srcset-w) has become unavoidable, but is not always accompanied by a fundamental reflection on their proper use.
To be more specific, too many sites use arbitrary image sizes in their srcset-ws, neglecting a significant performance optimization opportunity.
We will discuss different methods to define the best possible dimensions for these images, which will optimize performance for visitors, but also optimize the amount of computation, storage and bandwidth required on the server side.
Please note that this conference will not deal with optimal compression rates, image encoding formats or solutions that automate the management of all these optimizations.
Nicolas is a co-founder and senior consultant at Clever Age. He helps companies design the right technical architecture to cover their digital needs. He also brings front-end technical expertise about web performance, RWD, PWA, etc. Drawing on over 20 years of Web experience, he advocates a pragmatic use of Web technologies, defining and applying good technical and methodological practices.
Fluid animations is sometimes difficult to obtain. We will see together how a browser works and why we have to be careful with SVGs, some units, and most CSS properties. This does not mean that we are deprived of possibilities. We’ll take this opportunity to take a look at what we have in our toolkit!
Thomas - Freelance CSS Expert. Thomas helps technical teams produce maintainable styles. Web developer, teacher, trainer, lecturer, speaker, he multiplies his hats to share his passion for the web. His last challenge was the writing of “Départ immédiat pour: Flexbox” with le Train de 13h37.
The page loading time is (very often) silly. Other generic and much better metrics exist but each have their weaknesses (speedIndex, first contentful paint, Time to Interactive …). So, I’m going to teach you how to measure what really counts for YOUR website: technical loading metrics, visual metrics, client CPU and custom metrics.
User Experience & Performance: Metrics that Matter #
I’ll talk about a key concept for building a real performance culture for your web projects: the performance budgets.
It’s a kind of budget that isn’t expressed in dollars nor euros, but in seconds, megabytes or even in number of requests!
Fighting against milliseconds, megabytes or dozens of tags is what webperf addicts do every day and it is obviously a necessity for our beloved Internet users. But the reason that we all work in this ecosystem, is that Amazon has one day put figures on the business impacts that this work had (100ms, etc. you know?;-). Since then, dozens and dozens of studies have shown with varying degrees of success the correlation between webperf and business.
I propose you to go beyond this notion of correlation and to present methods to measure concretely what is the impact of the webperf on your Web site: distributions, A/B tests, Chi2 tests, etc… but also to illustrate this with real cases met during my long life as Webperf expert.
For 10 years, Stephane Rios was CTO of RueDuCommerce.com, leader of French eCommerce.
He has supported the growth of a website that has seen its traffic double every year. Member of the Executive Committee, he actively participated in the success of one of the few eCommerce pure players that become profitable.
Obsessed with the byte in excess, waste of time and energy, Stéphane Rios hoisted RueDuCommerce at the top of performing sites before launching the Fasterize adventure. He has managed large technical teams while remaining a geek having passion for Web development and architecture.
Avoiding the common mistakes and hidden bottlenecks that hinder your site from going fast on all devices and different network conditions by considering multiple options and choosing the one that works best for you. Best practices and common tips do not always apply and you might actually find that they hurt your website’s performance.
Building all sorts of things @Algolia with performance and end-user experience in mind. Always trying to find edge cases and exceptions to rules. Doubt everything, do what works best for you and your users.
Some company are still hesitating to invest a lot of time and money into Web Performance because the matter is highly technical and the gains are neither obvious nor guaranteed. Let me show you how how the “Rue Du Commerce” webperf journey started from a purely technical project to an important indicator the whole company is now looking at. We will discuss the methodology, the tooling, the challenges we faced and the excellent results we had.