Video streaming is complicated with dozens of potential variables, all of which can affect the quality of the playback to your customers.

Le goulot d'étranglement de la performance n'est plus uniquement la bande passante. Le CPU entre aussi en jeu…

The Chrome User Experience Report (CrUX for short) addresses this gap by providing aggregate data from real users across the top sites on the web. With it, you can confidently perform a competitive analysis of sites knowing that the data is backed by real user experiences.

Techniques for faster rendering

The journey to Thumbor, part 3: Development and deployment strategy

The book begins by focussing on the basics of Progressive Web Apps and then soon dives into their core features and demonstrates how to implement them on your own websites. The book dissects existing PWAs that many large organisations around the world have built and explores the different tips and tricks that you can use to improve your own Progressive Web Apps.

"Your end goal should always be focused on your users and improving their experience."

"Striking the right balance between security and user experience is undoubtedly a big challenge for both large enterprises and small businesses. Yet with a proper DEM solution in place, it doesn’t have to be quite so daunting."

Nature, opportunités et risques autour de WebAssembly

Mutating Web content using DOM Ranges

"Image compression is a biiiig subject, and we certainly haven’t covered every aspect of it here, but having discovered our preferred compression methods across each file type, these are the new guidelines for image compression at Kyan"

"There may be a lot of low-hanging fruit 🥝 affecting performance in areas you might not track very closely but are still very important."

Sergey introduces a collection of design patterns for fast web sites http://www.speedpatterns.com/

HTTP/2 has been designed from the ground up to address the inefficiencies of HTTP/1. Triggering a large number of requests in an HTTP/2 environment is no longer inherently bad for performance; transferring unnecessary data is.

"En ce moment, chez Capgemini, j’ai la chance de travailler sur un projet agile où la qualité est le maître mot grâce à une volonté du client de prime abord, et bien sûr, de l’équipe de réalisation."

"Using Low Quality Image Placeholders (LQIP) ensures that your users are presented with a usable page much faster. When combined with a lazy loading technique using Intersection Observer, your users save on bandwidth too. It has been fun to experiment with LQIP!"

CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, if you didn’t code your animations with performance in mind and add more complexity, website users will soon take notice and possibly get annoyed.

"The result was a set of filters that whilst not vastly visually different, finally became interactive for more of our users as the loaded bundle was reduced to 53KB; a 70% reduction. Once gzipped that reduced further to 13KB."

"Tinder are still iterating on their Progressive Web App but have already started to see positive results from the fruits of their labor. I’m excited to hear more about their progress in the near future!"

Improving Web Advertising (by changing the Web)

Une des meilleures synthèse en français sur l'écriture inclusive.

So which method should you use to load your webfonts? Unfortunately the answer is it depends:

• If you’re looking for a quick and simple method you can have working within an hour, use Amazon’s method
• If you want something a bit more thorough and are alright with the limited browser support for now, try using font-display: optional
• And if you really want to make an effort to optimize your webfont loading, take the dive and look into the localStorage technique

"By utilizing a collection of UI patterns and speed optimisation techniques, you can improve not only the actual speed of a site, but the perception of how quickly a user thinks your site is loading."

What to expect in 2018?

A lot of knowledge and effort must be made to create a user-friendly and accessible website, including something as seemingly trivial as an icon. With a lot of hard work I hope you find the icon solution that’s right for you and your website—at least for now.

SWOT of WebAssembly for the Web.

"In order to decide which recipes lead to the best results in practice, some kind of cost-benefit analysis is desirable. But any cost-benefit analysis demands numbers, not just words, and the best numbers come from measurements."

"Hopefully the recommendations above give you some hard, quantitative data to help you pare down the options available. While they may be technical, they’re easy to find — and Dareboost does a good job of supplying tools, as well as tips and advice to help you understand the issues they’re highlighting."

A quick look at Client Hints and Server Timing Headers for better performances and monitoring.

• Always prefer classes
• Co-locate component code
• Use consistent class namespacing
• Maintain a strict mapping between namespaces and filenames
• Prevent leaking styles outside the component
• Prevent leaking styles inside the component
• Respect component boundaries
• Integrate external styles loosely

"In this article we have looked into using caching in order to enhance website performance. The enhanced performance will in turn lower operating costs for our websites and preserve our users’ flow, leading to a great user experience."

Web Content Accessibility Guidelines—for People Who Haven't Read Them

"Image placeholders in SVG are ready for prime time thanks to browser support and good rendering performance. By automating SVG shape creation that mimics main features visible inside an image and compressing the result appropriately, we can achieve SVG-based image placeholders weighing in at only ~400 bytes. SQIP is a tool to make this process easy to integrate into your deployments."

Utility to automatically subset fonts for serving on the web.

Baromètre du numérique 2017 : équipement, usages et compétences numériques des Français

"I’m afraid you’ll have to learn the entire Service Worker API along the way."

This post quickly gives a way to measure the “ad weight” rather than “page weight” which is well-known. This is important consideration, given that it represents the bytes attributable to revenue.

"The key takeaway is that today’s ‘standards’ are no longer good enough. We can push the boundaries of web design and development whilst creating a fast, responsive website. We shouldn’t sacrifice performance for creating a beautiful website."

First 5G NR Specs Approved

"Tout seul on va plus vite, ensemble on va ailleurs." @scopyleft

Pocket Guide to Writing SVG

"At trivago, we are using Memcached mostly as our caching layer. We have a cache interface that “hides” the logic, so we (the developers) don’t have to think much about its implementation just to know how the interface works."

La stratégie de cache CDN à L’Equipe

A comprehensive guide to Website Speed Optimization applied to Wordpress.

Improve Web Performance and save money by doing so

"So, in conclusion, if you want to invalidate a script or other subresource, I would use the Iframe + POST technique today, which works in all browsers for both same-origin and cross-origin."

Safari just landed Cache Storage API support, another step closer to PWAs on iOS

To successfully manage your website performance, you first have to adopt a reliable and rigorous measuring tool and then, identify and use a combination of several performance indicators, meeting your objectives. If you would have to keep a single one, It should be the Speed Index.

"The growing presence of Chinese companies will most likely initiate a new software evolution for the web through browsers, PWAs, search engines and geolocated services – and Google (Alphabet) is at the cutting edge of these four fields."

Automating Your Accessibility Tests with aXe and pa11y

Use a Fast DNS Provider ; Change TTL Values to Take Advantage of DNS Cache ; Reduce Number of Domains (hostnames) ; Use Alternative Services With Faster DNS ; Move and Host Resources on a CDN ; Take Advantage of DNS Prefetching ; Defer Loading of JavaScript ; Take Advantage of ANAME Records and CNAME Flattening

Peter Hedenskog works in the performance team at the Wikimedia Foundation and explains how the monitoring is done with sitespeed.io.

"Le Perceptual Speed Index est un indice de performance de chargement de page qui indique à quelle vitesse le contenu d’une page commence à être visible."

"Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience."