Si su sitio de WordPress utiliza un tema de WordPress de pago o uno popular del repositorio oficial de Temas de WordPress, es probable que el tema se desarrolle para una variedad de casos de uso. Y es posible que solo esté utilizando un pequeño conjunto de todas las funciones disponibles en el tema.
En ese caso, su sitio está cargando una gran cantidad de CSS sin usar que no es necesario para diseñar las páginas de su sitio. Por ejemplo, el tema de WordPress que está utilizando también puede tener estilos para las páginas de WooCommerce, pero si solo está ejecutando un blog en su sitio de WordPress, entonces no está utilizando el CSS incluido para las páginas de WooCommerce en su sitio y, por lo tanto, no está utilizando. CSS a los usuarios.
Si ha probado su sitio web en la herramienta Google Pagespeed, probablemente ya sepa que su sitio tiene problemas de CSS sin utilizar. En esta guía, le mostraremos cómo verificar primero el CSS no utilizado y luego usar una herramienta gratuita para eliminar el CSS no utilizado de su sitio de WordPress.
Cómo comprobar CSS no utilizado
Google Chrome DevTools (el que ve cuando hace clic en la opción "Inspeccionar" en el menú contextual) tiene una función de Cobertura dentro de la pestaña Fuentes. Puede utilizar la opción Cobertura para encontrar CSS y JS no utilizados que carga su sitio web.
- Abra su sitio web en Chrome en el escritorio.
- Haga clic con el botón derecho en un espacio en blanco vacío en su sitio y seleccione Inspeccionar desde el menú contextual.
- Clickea en el Fuentes pestaña, presione Ctrl + Mayús + P para abrir una ventana de comando, luego escriba cobertura y seleccione Comience a instrumentar la cobertura y vuelva a cargar la página de los comandos disponibles.
- En la pestaña Cobertura, haga clic en el Filtro de URL e ingrese el dominio raíz de su sitio aquí para mostrar solo los archivos CSS / JS internos.
└ Compruebe el Bytes no utilizados columna para ver el porcentaje de datos que se cargan en un archivo CSS / JS desde su tema.
- Haga clic en un archivo CSS para ver el CSS no utilizado (marcado con barras rojas) cargado por su sitio. El CSS que se está utilizando en la página actual se mostrará con barras verdes.
Una vez que haya analizado todo el CSS no utilizado que se está cargando en su sitio web, es hora de eliminarlo. Hay varias herramientas gratuitas disponibles para eliminar CSS no utilizado de páginas web. A continuación se muestra una de las herramientas populares que he probado y utilizado en mis propios proyectos.
Utilice PurifyCSS en línea para eliminar CSS no utilizado
Por lo general, puede encontrar un complemento para casi todo en WordPress. Pero para eliminar CSS no utilizado, desafortunadamente, no hay un solo complemento disponible. Por lo tanto, usaremos herramientas manuales que no son específicas de WordPress para eliminar CSS no utilizado de su sitio.
PurifyCSS es el más herramienta amigable para no desarrolladores que puede encontrar para tratar con CSS no utilizado. La herramienta tiene una interfaz de usuario simple que permite a los usuarios proporcionar la URL del sitio web O el código HTML y CSS. Para WordPress, usaremos la opción de URL y proporcionaremos enlaces a todo tipo de páginas en su sitio para permitir que la herramienta tome CSS de todos y optimice para CSS no utilizado.
A continuación, se muestra una lista rápida de páginas que debe incluir en la herramienta:
- URL de la Pagina Principal
- Varias URL de página de publicación de cada categoría en su sitio
└ Esto es para garantizar que se incluya CSS para todos los elementos de la publicación.
- Contacto, Acerca de, Privacidad y todo tipo de páginas diferentes que pueda tener en su sitio.
- Página de archivo, página de búsqueda, páginas de autor
- Páginas de tipo de publicación personalizadas
Buen dato: Cree una publicación / página de 'características' con todos los elementos del tema que use o pueda usar en el futuro, como una Tabla, Galería de imágenes, Código, Pre, Listas ordenadas, Listas desordenadas, Formularios, Pestañas, Acordeones, Bloques Gutenberg que usa generalmente etc.
Utilice esta URL de publicación de "características" en la herramienta PurifyCSS Online para asegurarse de que se incluye CSS para los elementos de uso común.
Golpea el Limpiar CSS una vez que haya agregado todos los tipos de URL relevantes de su sitio en la herramienta PurifyCSS Online.
Copie el nuevo CSS generado por la herramienta y utilícelo en su sitio. Asegúrese copia de seguridad del style.css original y otros archivos CSS en su tema antes de reemplazar el nuevo CSS generado por PurifyCSS.
Propina: Puede usar el Editor de temas de WordPress incorporado para editar los archivos CSS de su tema, o puede usar un programa FTP / SFTP para conectarse al servidor y editar archivos cómodamente usando un editor de Bloc de notas.