vue-lazyload VS purgecss

I'd you are using a frontend framework, you can use lazy loading that loads more content on scroll. For Vue: https://github.com/hilongjw/vue-lazyload For React: https://github.com/twobin/react-lazyload

What I use → In my case I'm using Vue Lazyload to lazy-load my images and background images: https://github.com/hilongjw/vue-lazyload#demo

Tools like PurgeCSS and UnCSS can remove unused CSS rules by analyzing your HTML. This is especially useful if you’re using large frameworks like Bootstrap or Tailwind.

Manually remove unused CSS with tools like PurgeCSS

👉 Check out PrugeCSS for more details.

PurgeCSS is a powerful tool that scans your project files for any class names used and removes the unused ones from the final CSS file. This significantly reduces the size of the generated CSS, making your application load faster.

As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.

[0] https://purgecss.com

A similar question was already posted here but, I think looking at the raw html, we will be able to better determine the required css than what Purgecss does.

PurgeCss

Webpack minifies JS and CSS files by default when we build them in production mode. But it does not remove useless styles or classes. For this, you can use libraries like https://purgecss.com/ Do not forget to check the dependency, connect only the functionality that you use.

When I searched online I couldn't find an "industry standard" solution to this problem. What I ended up doing was using the popular tool PurgeCSS along with a quick Python script to generate the appropriate command. What the PurgeCSS tool does is search for all your HTML files, gather all the CSS classes used, and then "purge" all the unused ones from the CSS file. You just need to declare all the HTML files you have.

Skeleventy gives you a rock-solid foundation to build fast and accessible static websites, with clean, understated design. Features include a minimal build pipeline with Laravel Mix, the Sass-powered utility class generator Gorko, Purge CSS, an HTML minifier, SEO-friendly page metadata, image lazy loading, responsive navigation, and an XML sitemap.