With the rise of very high density “super retina” displays in the newest high-end devices, capping image fidelity to 2x leads to a big improvement in terms of rendering speed, and no perceivable quality loss for your users. Here’s a new best practice on how to do that. Images x screen densities In June…

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts — a low CLS helps ensure that the page is delightful. What you might not know is: CLS is measured continuously. In fact, its value is…

In this article we explain how we at YOOX NET-A-PORTER optimized the Chloé website for a couple of Core Web Vitals: Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Web vitals Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a…

After we updated our iPhones to iOS 13.4, we found that Apple introduced a bug in the rendering of boxes with specific CSS properties for the box-shadow rule. After we found the problem on some websites, we created a new Codepen to isolate and identify the problem. …

On April 6th 2019, Addy Osmany wrote about native image lazy-loading. Two days later Yvain, a front-end developer from Paris, asked me if my vanilla-lazyload could be a loading attribute polyfill, inspiring me to develop and release version 12 of the script, which features a new use_nativeoption to enable native…

How to make a potentially wide table fit on small devices, without losing readability and accessibility? Here are simple solutions to make tables look like lists, lists look like tables, in responsive and accessible design. So let’s say you have an HTML <table> containing some orders, each one having: a…

What would you do if somebody asked you to load a DOM element (like an image, or a video) only if it stays inside the viewport for a given time? This is exactly what the GitHub community asked for as new feature in vanilla-lazyload, to avoid loading elements which users…