lazysizes VS cssnano

Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.

Normally I would write some client-side JS to do this but as this project is solely server-rendered I opted to use a simple tried-and-true library for this: lazysizes.

I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques:

1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...

2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes)

I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!

lazysizes is better than loading="lazy"

Since browsers support native lazy-loading, do we need libraries like this https://github.com/aFarkas/lazysizes?

Use Lazy loading for below-the-fold images. (You can use different 3rd party libraries like Unveil, lazysizes, etc.)

⚡️ Lazy load images with lazysizes

You can also use this really great library for handling the loading of images in a holistic and well-supported way or you can look at manually implementing the LQIP technique.

And, lazyloading is only for images. If you use e.g. lazysizes you can do anything with it. I'm a digital publisher so I use it for ads and embedded tweets/IGs and so on.

There are a number of tools available to minify CSS in development or as part of your build pipeline including, but not limited to, cssnano and Vite. If you’re using sass, it’s as straightforward as adding --style=compressed to your sass command. The results you achieve may vary depending on the complexity of your CSS, but you may see numbers similar to this (processed with sass):

Since Tailwind is a PostCSS plugin, we can also add cssnano plugin to compress the bundle.

Minifying your CSS involves removing unnecessary whitespace, comments, and reducing property names. This results in smaller file sizes and faster downloads. Use tools like UglifyCSS and CSSNano for this purpose.

For the sake of simplicity, my example setup uses a single-file plugin and puts all styles directly into a single style.css file without using further theme.css or theme.json files, which we might want to use depending on the requirements for customizability. Likewise, SASS / SCSS support can be added if it makes life easier for the developer(s) involved. But as we already use PostCSS to control autoprefixing and cssnano minification, we can also use it to support the latest and even upcoming CSS sytax like native CSS nesting.

The cssnano plugin can minify/compress CSS and make it suitable for production use. Install cssnano plugin using this command:

CSS minification by cssnano

cssnano

cssnano is used to ensure that the final result is as small as possible for a production environment.

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them. Optimize styles Optimize Scripts Create Sourcemaps