Mi objetivo es eliminar el CSS y JS que bloquean el renderizado en un sitio web.

Google sugiere identificar el CSS/JS usado a través de la cobertura y mover ese código de la URL de bloqueo de procesamiento a una etiqueta de secuencia de comandos en línea en su página HTML. Cuando se cargue la página, tendrá lo que necesita para manejar la funcionalidad principal de la página.

Por ejemplo, para el núcleo CSS:

 <style type="text/css"></style>

El resto del CSS se puede cargar de forma asíncrona a través de la precarga.

 <link rel="preload" href="non-core-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="non-core-styles.css"></noscript>

Me encontré con Purgecss que puede eliminar CSS no utilizado.

purgecss --css bootstrap-grid.min.css --content index.html --out dist/

Pero preferiría extraer el CSS no utilizado para cargarlo asíncronamente a través de la carga previa como se explicó anteriormente para evitar problemas con el sitio web en sí.

¿Cómo se puede lograr esto con Purgecss o cualquier otra herramienta, por favor?

Lo mismo ocurre con javascript. El núcleo se puede cargar así:

 <script src="app.js"></script>

Mientras que las partes no críticas se pueden cargar asíncronamente de esta manera:

 <script src="app.js" async></script>

Pero, ¿hay alguna herramienta que pueda extraer el JS no utilizado de mi sitio?

Gracias