Making the web faster and more user-friendly
Various techniques to render SVGs compared, including inline SVGs, the `<img>` tag, CSS backgrounds, and SVG sprites. Here's a summary of the key insights and recommendations from a design and web performance standpoint.
On 17 September 2024, I spoke at the We Love Speed 2024 conference about enhancing web responsiveness. Specifically, I discussed how to debug and avoid slow interactions based on my experience on auditing Interaction to Next Paint (INP) on clients' websites. This is the video of my talk.
“Online publishing as we have known it for the past twenty years is now dead and buried”. Reposting an article from my friend Antonio Moro aka Itomi, one of those who has been part of “online publishing” in Italy since the early days.
A detailed account of my participation and insights gained from attending and contributing to performance.now(), the top web performance conference in Europe.
Learn how to enhance your Google Meet experience by using Companion mode to separate shared content and attendees' faces across two screens for better focus and engagement.
Tired of the lack of a true full-screen option for shared content on Google Meet, I created a bookmarklet to solve the issue, available on GitHub.
After years of both remote and office work, I’ve found that while remote work offers flexibility and focus, it can lack the spontaneous connections that spark creativity and build team bonds.
In May 2024, I began speaking at conferences and meetups about enhancing web responsiveness. Specifically, I discuss debugging and avoiding slow interactions based on my experience on auditing Interaction to Next Paint (INP) on clients' websites. Videos, slides, dates and locations of my talk.
With each new iOS release, I always look forward to exploring the latest features Apple has to offer. iOS 18 has introduced several changes, some small and subtle, others more profound, that have significantly enhanced my user experience. Here are my favorite new features in iOS 18 and why I think they’re a game-changer.
Exploring a practical solution for mitigating Cumulative Layout Shift (CLS) caused by promotional banners. Prevent unexpected layout shifts by using sessionStorage to remember the banner's content and display state across page loads.
As well as last year, I was invited to Google I/O Connect EMEA 2024. And as a Google Developer Expert (GDE), on the next day I also took part to the GDE Forum in Berlin Google offices. My impressions are in this blog post.
Jake Archibald's talk "In the loop" is still one of the best sources of information on how browsers process tasks and are able to respond to user input. As I didn't find anything as comprehensible as that in text format, I transposed his talk into this blog post.
After keeping them on my computer for some days, I decided to publish on GitHub this set of web performance snippets to debug INP in Chrome developer tools, or to report data to your analytics.
Google Chrome is introducing a new feature called scheduler.yield. This feature allows web developers to explicitly tell the browser to yield control to the main thread. Here are the key points.
As a web performance consultant, I'm always on the lookout for new developments that impact the user experience of websites. One such upcoming change is the introduction of a new metric called Interaction to Next Paint (INP) by Google. Set to become a Core Web Vital in March 2024, INP is designed to measure the time it takes for a website to respond to user interactions. In this blog post, we will delve into what INP is, why it matters, and how companies can prepare themselves to ensure their websites meet this crucial web performance metric.
In 2023 I've been speaking about web performance at conferences, Google Developer Groups (GDG) and local meetups all over Europe. The title of this talk is "How and Why ($) to improve web performance, practical tips for 2023".
In December 2023 I became a Google Developer Expert (GDE) for Web Performance. Google Developer Experts is a Google program to create a global network of professionals, influencers, and thought leaders, and enable them to share their knowledge with the developer community, like speaking at events, sharing best practices, and mentoring others.
To avoid layout shifting and optimize for the Cumulative Layout Shift (CLS) Web Vital in you web pages, you need to reserve space for any content that might be rendered later in time. This is the case for images, videos and any asynchonously loaded content (e.g with AJAX calls). Here's a new way to do it.
I like to take part to local meetup events. They are informative, fun, and socially engaging at the same time. Sometimes, the meetup organizers get asked to stream events online. It would be a cool feature, I guess, but if you ask me, it would do more harm than good the community. Let me explain why.
Back in the day, when browser support for native lazy loading wasn’t widespread, the best practice was to use `data-src` attributes and a JavaScript library like my vanilla-lazyload to load images as they entered the viewport. Is this still best practice today?
On June 24th, 2022 I spoke about how to automate responsive images optimisation at the LazyLoad Conference 2022. Here's the video of my talk.
On April 1st 2022 I spoke about responsive images optimisation 4.0 at the CSS Day Conference 2022 in Faenza, Italy. This talk – in Italian language – is on how to become more productive by automating responsive images.
Now that zsh is the default shell on Mac OS terminal, you might want to setup you new Mac or VS Code terminal to have a smart integration with git, something similar to git bash for Windows.
Say you have multiple carousels in a page, each one containing multiple images, and you want to download only the images that are inside the visible portion of the page, and maybe save some CPU time by lazily create the carousel instances. I think I’ve found a valuable and elegant technique to do so.
As the author of vanilla-lazyload, it's not the first time I get asked the question: What are the differences between vanilla-lazyload and lazysizes? This blog post is the answer to that question.
Quicklink is a lightweight library created by Addy Osmani (Google) that prefetches pages linked to the current page, as the links to those pages enter the visible portion of the page (viewport). Here's a case study for it.
Before the day Safari started to support WebP images, we were forced to use the picture tag to serve WebP images to browsers supporting it. Today all modern browsers support WebP, so there's probably a clever way to do that using a single tag, img.
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.
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.
Do you want to boost performance on your website? You can do that by using **responsive images and lazy loading! In this article, you will find the HTML, JavaScript, and CSS code to lazy load responsive images, to make browsers use modern image formats like WebP and Jpeg2000, and to enable native lazy load where supported.
A practical guide on how to productively use the new Chromium-based Microsoft Edge browser
My blog used to be run by Jekyll on GitHub pages and its CSS was built using SASS. Today I decided to boost performance even more inlining the render-blocking critical CSS, but even searching the internet I struggled to find an easy way to do it. This post is for you, in case you want to do the same.
Today I experimented with the Web Share API and implemented it on this website, just to begin. Here's what I did and how you can implement it on your website.
Some of my workmates and I took part to a Google Hackathon about Progressive Web Application and we learned a lot, so I've decided to enable this website as a PWA. Here's what I did.
On May 6th, 2019 I wrote my first article on Smashing Magazine: Hybrid Lazy Loading, A Progressive Migration To Native Lazy Loading.
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 my script, which features a new use_native option to enable native lazy-loading where supported. You can already use it today.
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.
In the latest years, both at my job and as maintainer of a LazyLoad script, I've specialized in lazy loading of responsive images. Today I'm going to show you what HTML, CSS and JavaScript code you need to write in 2019 in order to serve responsive images and load them lazily.
What would you do if somebody asked you to load a DOM element only if it stays inside the viewport for a given time? You would use vanilla-lazyload, wouldn't you?
Let's see how to write a JavaScript library using ES2015 transpiled with Babel, featuring ES modules packed up using Rollup via Gulp, and Jest to test your code.
In August 2017 the Intersection Observer API, a new exciting browser API, finally gained quite wide support. We can use it to know when two DOM elements intersect, or when a given DOM element enters the browser viewport. The lazy loading of images is just the case.
Here I show you how you can CSS variables, popular name of CSS custom properties, to scale your layout spaces across different media queries.
If you had to change the color of some fixed-positioned text based on the lightness of its scrolling background, how would you do that? CSS filters, blend modes? But what if you had to support all browsers, including Internet Explorer? Here are a couple of ways to do that using CSS clip and clip-path.
It's official. Responsive images are a W3C recommendation since November 2016, featuring the brand new picture tag and new attributes for the img tag: srcset and sizes
Say you have a responsive website layout where images are sized at 100% of the container, but the container is not always as wide as the viewport. Do we need to use the picture tag, or the img tag is enough?
It's now possible to have lazy loading on responsive images to make our images to adapt to users screens and keep our website fast. In this article, we'll see what markup we need to write and which Javascript libraries we're gonna need to do that.
Spriting is a way to improve performance in your website by putting many images (or icons) in a single larger image, in order to make a single HTTP request instead of many. Here's how you can make sprites using Compass.
In the latest days I've been working on websites performance optimization and I realized that there is no way to take advantage of the progressive JPEG image format on websites if you're using jQuery_lazyload from Mika Tuupola, so I decided to write my own lazy load, which turned to be better for multiple reasons.
We used GIF images to create animations for years, but they aren't pretty to be used over gradients or pictures (no alpha channel, no anti-aliasing) of which modern web sites are full. There are many workarounds to animate PNG images instead, but...