Andrea Verlicchi - Blog
Hello! I'm Andrea and I wrote...
I am now a Google Developer Expert
This post is just to inform that I am now a Google Developer Expert for Web Technologies, specifically Web Performance.
Read more →Against online streaming of local meetups
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.
Read more →Do we still need lazy loading libraries and `data-src` in 2022?
Back in the days, as browser support for native lazy loading was not widespread as today, the best practice was to markup our images with data attributes like data-src and use a JavaScript library like my vanilla-lazyload to start loading them as they entered the visible portion of the page. Is it still a best practice today?
Get speedy with responsive images - LazyLoad Conference 2022
On June 24th 2022 I spoke about responsive images optimisation 4.0 at the LazyLoad conference 2022.
Read more →Images optimisation 4.0, a user-driven approach. A talk on automating your workflow with responsive images @ CSS Day (IT) 2022
On April 1st 2022 I spoke about responsive images optimisation 4.0 at the CSS Day 2022 Conference in Faenza, Italy. The speech was on how to improve performance on your website by automating responsive images.
Read more →How to integrate git in Mac OS Terminal (shell)
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.
An elegant technique to lazyload images in Swiper, and lazily create Swiper instances
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.
Read more →vanilla-lazyload vs lazysizes
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 case study: faster pages, increased page views
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).
Read more →aspect-ratio: A modern way to reserve space for images and async content in responsive design
To avoid layout shifting and optimize for the Cumulative Layout Shift 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.
Read more →A clever way to serve WebP images to modern browsers and JPG to IE
Before the day Safari started 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.
How to cap image fidelity to 2x and save 45% image weight on high-end mobile phones
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.
Read more →How to optimise for CLS when loading more content asynchronously
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.
Read more →Lazy load responsive images in 2020
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.
Read more →How to productively use the new Chromium-based Microsoft Edge browser
Here’s a practical guide on how to productively use the new Chromium-based Microsoft Edge browser: download it, change the default search engine, install extensions, and more.
Read more →Critical CSS with Jekyll and SASS
This site is run by Jekyll on GitHub pages and its CSS is 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.
Read more →Web Share API, the step after PWA
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.
Read more →This website is now a Progressive Web Application
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…
Read more →A smashing article on hybrid lazy loading
On I wrote my first article on Smashing Magazine: Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading.
Read more →Native lazy loading and js-based fallback with vanilla-lazyload 12
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_native option to enable native lazy-loading where supported. You can already use it today.