Usando CSS Me Not Bookmarks trucos CSS - Aprender Marketing
CSS

Usando CSS Me Not Bookmarks trucos CSS

Él está de pie Absolutamente correctoPor mucho que amemos el CSS, sigue siendo un factor importante en la forma en que se cargan los sitios web, y es bueno usarlo menos. Tiene un nuevo bookmarklet llamado CSS Me Not, que puede ayudar a diagnosticar archivos CSS innecesarios, pero hablaremos de eso más adelante.

Esta [problem] Sí, CSS está en la ruta crítica, bloquea el renderizado, incluso a menudo ejecución de JavaScriptNos encanta CSS, es increíble, puede hacer hazañas asombrosas y arreglar una interfaz de usuario corrupta, y manipular imágenes y dibujar imágenes increíblesNos encanta CSS. Solo queremos… menos debido a su naturaleza inherente de bloqueo.

A veces nuestro sitio web utiliza toda la hoja de estilo Esto es simplemente innecesario. Odio admitirlo, pero WordPress es un intruso conocido aquí, cargando hojas de estilo para complementos y bloques que quizás ni siquiera uses. Mientras escribo, estoy en esta posición en este sitio. Simplemente no tengo tiempo para desarraigar algunas hojas de estilo pequeñas que no necesito cargar.

Stoyan Cree una etiqueta rápida llamada CSS Me Not Ver todos estos archivos CSS. Eso sí, la mayor ventaja es que te permite saber a lo que te enfrentas.

También puede encontrar estas hojas de estilo en DevTools, pero la etiqueta CSS Me Not lo hace aún más fácil y tiene una característica adicional excelente: Cierre estas hojas de estilo. Mientras pruebo el marcador CSS-Tricks, puedo ver las cuatro hojas de estilo que carga WordPress (debido a configuraciones y complementos) que sé que no necesito.

Si desea hacer esto en DevTools, puede filtrar sus solicitudes de red por CSS, buscar la hoja de estilo que desea excluir, hacer clic con el botón derecho y bloquearla, luego volver a cargar.

Captura de pantalla de la ventana DevTools con el panel Red abierto y un menú de selección abierto en las hojas de estilo enumeradas con la opción para bloquear las URL de consulta resaltadas en azul brillante.

Durante años he estado luchando con esta lucha para eliminar scripts y estilos que no quiero en WordPress.

Eliminar completamente las hojas de estilo sin usar es una clara victoria, pero eliminar el CSS sin usar tiene problemas aún más extraños. Mencioné en este artículo que la única forma de averiguar realmente si un CSS en particular no está en uso es agregar un background-image a cada selector, luego verifique los registros del servidor después de un largo tiempo de producción para ver qué imágenes nunca se solicitaron. Stoyan confirma mi historia aquí:

UnCSS es algo así como un «laboratorio». El mundo real puede sorprenderte. Entonces, un truco que hacemos en SomeCompany Inc. es encontrar todas las declaraciones CSS durante la construcción, donde cada selector obtiene una imagen de fondo transparente de 1 × 1. Luego, revise los registros del servidor durante aproximadamente una semana para ver qué se está utilizando realmente.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba