Monthly Shaarli
January, 2018

"Quantum Render (or WebRender) is a major graphical system overhaul that’s coming to Firefox this year, and it promises hardware-accelerated painting of web content with huge performance wins."
No more requirejs calls in network!

"With the DNS prefetching flag in Google Chrome on Android enabled, Chrome scans the page for clickable links and resolves the URLs to IP addresses. By the time you head to any of the pages, their addresses will have been returned to your device, mitigating any DNS speed issues — the only bottleneck will be your own connection. (Optionally, it will use your device’s own DNS servers and won’t touch Google’s unless you want it to.)"
TL;DR : Reduce the weight of your files by using optimization strategies that depend on the content and purpose of your videos ; Optimize streaming by encoding your videos to serve metadata as soon as possible ; Propose alternatives to MP4, such as WebM.Be careful with autoplay, consider dedicated solutions for Full HD and don’t hesitate to hide videos when needed.

Using page speed in mobile search ranking
"Instead of search results being generated favoring the desktop version of a site, Google will begin to favor mobile versions. If you have a half-hearted mobile site and a full-fledged desktop site, you better be careful once Google starts favoring the mobile site."
"Once web teams have policies like that in place for popular searches that bog down web performance during beyond-peak, it’s easy enough to set up a dashboard with toggles for web teams to switch between rich and powerful searches and redirects when needed."

"There is a different hint [that fetches the DNS, negociate TLS and setup the connection], called preconnect. It works much in the same way as dns-prefetch but sets up the rest of the connection as well."

TL;DR: We are making changes to how AMP works in platforms such as Google Search that will enable linked pages to appear under publishers’ URLs instead of the google.com/amp URL space while maintaining the performance and privacy benefits of AMP Cache serving.

8 Web Performance Expert Insights for 2018

A bible for typolovers.

La vie est bien faite : il existe des alternatives accessibles pour toutes les problématiques de design web. Je n’en ai évoquées que quelques-unes dans cet article, mais il en existe bien d’autres.
La vieille croyance selon laquelle l’accessibilité ferait peser une contrainte graphique sur les sites, qui seraient de facto « forcément moches » s’ils sont accessibles, provient peut-être du fait qu’on a longtemps eu une vision jusqu’au-boutiste de l’accessibilité, ce qui a pu aboutir à des résultats graphiques malheureux.

"Lack of accessibility in agency work is a problem that we can solve with a little awareness and education. Beautiful and interactive sites can be accessible."

"This post will perform an honest audit of the entire “cost” of Boomerang on a page that it is measuring. We will review every aspect of Boomerang’s lifecycle, starting with the loader snippet through sending a beacon, and beyond. At each phase, we will try to quantify any overhead (JavaScript, network, etc) it causes. The goal is to be open and transparent about the work Boomerang has to do when measuring the user’s experience."

"Whenever performance testing AMP, keep in mind that a test from origin will include potentially suboptimal server settings like bad cache headers or missing image optimizations. Also the biggest speed gain (near instant load through prerendering) will not be reflected in commonly used performance tools and metrics."

Just because your site isn't for emerging markets, doesn't excuse you from web performance optimisation

"webpack is a fantastic, versatile, tool that does not need to cost the earth. These techniques have helped us reduce our median build time from 170 to 17 seconds and, while they have done much to improve the deployment experience for our engineers, they are by no means a complete work."

"Third-party scripts are probably the #1 cause of poor performance and bad UX on the web. It's no wonder things like AMP exist. The fact that it disallows third-party scripts is probably the largest contributor to it making sites fast. Controversial as hell, though, in its other choices."
"Publishers should not be compelled by Google’s search dominance to put their content under a Google umbrella. The Web is not Google, and should not be just Google."

"In a year since Facebook’s blog about Cache-Control Immutable, we can see that it’s usage has spread beyond Facebook and is being used by a handful of large 3rd parties and ~4150 additional domains. Across all of the pages in the HTTP Archive, 2% of requests and 30% of sites appear to include at least 1 immutable response. Additionally, most of the sites that are using it have the directive set on assets that have a long freshness lifetime."

"Due to recently disclosed security vulnerabilities for nearly all computers, you should disable any JavaScript cookie manipulation on your website (e.g. when using the critical CSS technique) by setting your cookies to be SameSite and HttpOnly on the server, as recommended on the Chromium wiki. Otherwise, sensitive data, like session keys, may be exposed to malicious third parties."

"It may be a bit early to draw conclusions as there is still a lot of work and improvements to make. However our feeling is that the implementation of the PWA helped us to make a technical leap forward. We see it as a critical first step in supporting our mobile growth."
"What we would like you to gain from this article is that JS is expensive and should be used sparingly. Make sure you test your website’s performance on low-end devices, under real network conditions. Your site should load fast and be interactive as soon as possible. "

The Web Payments Working Group is not stopping at the Payment Request API. Work is also underway on other standards, including the Payment Handler API which will allow web applications to act as a third-party payment app.
How To Remove Unwanted HTTP Response Headers

"Managing your service worker cache invalidation is a key step in making your progressive web app a rich robust experience. It ensures that the content your customer sees and interacts with is the freshest content possible. It also guards your app from overstepping the cache quota and potentially causing a complete purge of everything you stored."

"IntersectionObserver is a very straight-forward technology. It has a pretty good support in the modern browsers and if you want to implement it for browsers that still (or won’t at all) support it, of course, there is a polyfill for that. But all in all, this is a great technology that allows us to do all sorts of things related to detecting elements in a viewport while helping to achieve a really good performance boost."


"Some of these technical aspects are often overlooked. Also, don’t be afraid to change things around and set yourself up to test several variants of code on your website."

JavaScript a un coût (The Cost Of JavaScript). Je continue de préférer, tel un vieux développeur que je suis, à construire des coquilles. Je ne dénigre pas le JavaScript ou les applications, mais quand on code un site qui va être chargé par tous types d’utilisateurs, il est important de prendre en compte les cas de faibles connexions.

"In Drupal 8, there are specific tools and modules to optimize the site performance."

"The HTTP Archive is open source and the raw data is available to download. If you want, you can download all of the data, process it locally and query it as much as you want. However, that would require a lot of effort to set up. Google BigQuery makes this much easier, since the data is already loaded and can be easily queried. And because of the processing power behind BigQuery, even some of the most complex queries you write will run extremely fast."
I’m harvesting credit card numbers and passwords from your site. Here’s how.

"For the Internet to work well in the long run, it needs to provide value to end users, avoid ossification, and allow networks to operate. The changes taking place now need to meet all three goals, but we need more input from network operators."

Full Page Caching With Personalized Dynamic Content

"Rather than give up or wait for clients to ask, we’ve found that the practices I outlined in this article lead to a lasting culture at Viget that values thinking about accessibility throughout a project and throughout the company."
"If you’ve been waiting to try out React, Gatsby is a great place to start! If you’re struggling to make your React app fast, try switching to Gatsby! If you’re tired of using technology X to build websites and have a huge secret crush on React, well, Gatsby is waiting with open arms"
The next time you get something done with DevTools, ask yourself if it makes sense to automate it, and how much time this will save down-the-line.