Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Cómo quitar CSS no utilizado para archivos CSS de Leaner

No es ningún secreto que los sitios web más ágiles funcionan más rápido que los hinchados. No dejes que CSS innecesarios pesen tus proyectos web; use las herramientas y técnicas descritas a continuación para ayudarlo a eliminar CSS no utilizado y mejorar el rendimiento general de su sitio web.

¿Qué es CSS no utilizado?# #

No importa cuán experimentado sea como desarrollador, existe una buena posibilidad de que su sitio web contenga CSS que no tenga impacto en los elementos de la página actual. Por ejemplo, marcos como Bootstrap vienen con docenas de estilos CSS que probablemente no necesites. Si agregó una característica durante el desarrollo y la eliminó más adelante, aún podría haber reglas asociadas con esa característica persistentes en sus hojas de estilo. El CSS no utilizado solo agrega peso muerto a sus aplicaciones y contribuye al crecimiento del tamaño de la página web , por lo que debe asegurarse de tener el menor exceso de código posible.

¿Por qué debería eliminar CSS no utilizado?# #

Dado que CSS define cómo se muestra el contenido de un documento HTML, el navegador del usuario debe descargar y analizar todos los archivos CSS externos antes de que pueda comenzar a procesar el contenido. En consecuencia, cuanto más CSS contenga una página web, más tiempo deberán esperar los usuarios para ver algo en sus pantallas. Alinear CSS pequeñodentro de su archivo HTML y minimizar sus hojas de estilo externas puede ayudar a optimizar la representación del contenido, pero eliminar CSS inútil es una estrategia mucho más efectiva para mejorar el rendimiento general. La combinación de todos estos métodos garantiza que los usuarios vean el contenido tan rápido como lo permita su conexión a Internet. Además de ralentizar el rendimiento general de su sitio web, el exceso de CSS puede causar dolores de cabeza a los desarrolladores. Las hojas de estilo limpias y ordenadas son más fáciles de mantener que las desordenadas. Haz un favor a tus usuarios y a ti mismo abandonando el CSS no utilizado.

Cómo eliminar CSS no utilizados manualmente#

Si está usando Chrome, la pestaña DevTools tiene una herramienta útil que le permite ver qué código se está ejecutando en una página y qué no. Para acceder a esta herramienta, siga los pasos a continuación:
  1. Abra Chrome DevTools
  2. Abra el menú de comandos con: cmd + shift + p
  3. Escriba "Cobertura" y haga clic en la opción "Mostrar cobertura"
  4. Seleccione un archivo CSS de la pestaña Cobertura que abrirá el archivo en la pestaña Fuentes
Cualquier CSS que esté al lado de una línea verde continua significa que el código se ejecutó. Rojo sólido significa que no se ejecutó. Una línea de código que es roja y verde, significa que solo se ejecuta algún código en esa línea.
devtools unused css
El hecho de que un estilo no se use en una página no significa que no se use en otro lugar, por lo que debe auditar varias páginas en su sitio y realizar un seguimiento de qué reglas siguen apareciendo en la lista no utilizada. Puede hacerlo copiando y guardando los resultados de cada auditoría en un documento de Hojas de cálculo de Google. Los que parecen más probablemente se pueden eliminar de forma segura.

Herramientas para eliminar CSS no utilizado#

La mayoría de los desarrolladores tienen mejores cosas que hacer que eliminar las reglas CSS no utilizadas una por una. Es por eso que hay una variedad de herramientas diseñadas para automatizar el proceso. Aquí hay una descripción general de las herramientas más populares diseñadas para ayudar a los desarrolladores web a eliminar CSS no utilizado de sus proyectos web:

1. No utilizado CSS#

unused css
El nombre simple es indicativo de la facilidad de uso de este programa. Simplemente conecte la URL de su sitio web en UnusedCSS y deje que haga todo el trabajo. Además de identificar y eliminar las reglas CSS no utilizadas , le indica cuánta memoria ha guardado. Puede probar UnusedCSS de forma gratuita, pero debe pagar una membresía mensual para descargar sus archivos CSS limpiados. Los miembros Premium pueden programar optimizaciones automáticas de CSS y tener acceso a otras funciones; Sin embargo, debe tenerse en cuenta que UnusedCSS solo funciona con sitios web en vivo, por lo que no es útil en la fase de prueba.

2. PurifyCSS#

PurifyCSS es una herramienta gratuita que elimina el CSS no utilizado de sus archivos HTML, PHP, JavaScript y CSS antes de ponerlo en funcionamiento. En el lado negativo, debe especificar manualmente qué archivos escanear uno por uno, lo que hace que el proceso sea algo tedioso. En lugar de modificar sus archivos originales, PurifyCSS genera un nuevo archivo con el CSS optimizado. Dado que PurifyCSS no funciona con sitios web en vivo, deberá usarlo en un entorno de desarrollo. Es posible que desee utilizar PurifyCSS durante el desarrollo y actualizar a UnusedCSS más adelante.

3. PurgeCSS#

purgecss
PurgeCSS se inspiró en PurifyCSS, por lo que se ve muy similar, pero es un poco más ágil e intuitivo de usar. Funciona comparando su contenido con sus archivos CSS y eliminando selectores que no coinciden. El único inconveniente importante es que debe incluir manualmente en la lista blanca CSS no en las rutas especificadas, lo que puede ser un dolor de cabeza si su sitio web utiliza ciertos complementos, como formularios HTML.

4. UnCSS#

UnCSS es más preciso que PurgeCSS ya que examina las páginas web reales en lugar de los archivos individuales, pero es más lento y requiere una configuración más manual. UnCSS es más útil cuando se usa con otras herramientas. Por ejemplo, puede combinar UnCSS con Grunt y Node.js para automatizar la eliminación de CSS no utilizada.

Una palabra de advertencia sobre la eliminación de CSS no utilizado#

Las herramientas discutidas en este tutorial no son perfectas . Existen algunos métodos diferentes para identificar los selectores CSS de rouge; sin embargo, hacer coincidir selectores con elementos en el DOM puede ser complicado si tiene elementos que dependen de API y scripts de terceros. Si desea intentar eliminar manualmente el CSS no utilizado, debe tener mucho cuidado para no dañar accidentalmente su aplicación eliminando algo importante. Dicho esto, debe conocer su sitio web mejor que nadie, y la función de auditoría de DevTools puede proporcionar información valiosa para ayudarlo a crear CSS más estricto desde el principio.

Cómo automatizar la eliminación de CSS no utilizada con UnCSS#

Ahora, veamos cómo podemos usar una de las herramientas enumeradas anteriormente para recortar sus hojas de estilo. Este tutorial, gracias a Dean Hume , explicará cómo configurar Node.js, Grunt, UnCSS y otro complemento llamado CSSmin en una máquina Windows para eliminar automáticamente CSS no utilizado y minimizar los resultados.

1. Instale Node.js#

Descargue la última distribución del sitio web Node.js y siga las instrucciones de instalación.

2. Instalar Grunt#

Abra Node.js e ingrese lo siguiente en el símbolo del sistema:
npm install -g grunt-cli
Grunt debería descargarse e instalarse automáticamente.

3. Abra la carpeta de su proyecto#

Usando el símbolo del sistema Node.js, navegue a la carpeta que contiene los archivos que desea que UnCSS escanee. Puede hacer esto ingresando la ruta del archivo. Por ejemplo:
cd C:TestProject

4. Instale UnCSS y CSSMin#

Ingrese lo siguiente en el símbolo del sistema Node.js:
npm install grunt-uncss grunt-contrib-cssmin --save-dev
UnCSS y el paquete CSSMin se instalarán en la carpeta del proyecto especificado.

5. Crear un gruntfile.jsarchivo#

Cree un archivo JavaScript llamado gruntfile.jsen el directorio raíz de su proyecto. El gruntfile.jsactúa como un archivo de configuración de plugins como UnCSS. Ingrese este código en el símbolo del sistema Node.js:
module.exports = function (grunt) {
    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'cleancss/tidy.css' }
                ]
            }
        },
        cssmin: {
            dist: {
                files: [
                    { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks
    grunt.registerTask('default', ['uncss', 'cssmin']);
};
Las instrucciones anteriores le dicen a UnCSS que escanee su index.htmlarchivo en busca de CSS no utilizado y cree un archivo CSS recortado dentro de una carpeta llamada cleancssEl complemento CSSmin luego minificará el nuevo archivo CSS, que se llamará tidy.cssde forma predeterminada. Las últimas líneas son especialmente importantes ya que cargan y registran ambos complementos.

6. Ejecute Grunt#

Finalmente, debe volver a su carpeta de archivos de origen y ejecutar Grunt así:
cd C:TestProject>grunt
Eso debería establecer UnCSS y CSSmin en acción. Si hiciste todo correctamente, tendrás un archivo CSS limpio y minimizado esperándote en la carpeta especificada. ¡Algunos desarrolladores han afirmado que este método redujo el tamaño de sus archivos CSS en más del 95 por ciento ! Eso es un gran ahorro para un esfuerzo mínimo. Solo tiene que realizar el proceso de configuración una vez. En el futuro, puede ejecutar Grunt para eliminar automáticamente su proyecto de CSS no utilizado.

Resumen#

Además del CSS no utilizado, su sitio web probablemente tenga algo de HTML y JavaScript que podría prescindir. Antes de comenzar a concatenar, minificar y comprimir sus archivos, asegúrese de que no estén llenos de código innecesario y elimine el CSS no utilizado.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas