homefinance blog
Al ejecutar una auditoría de rendimiento en Google PageSpeed Insights, encontrará que Google recomienda “eliminar los recursos que bloquean la representación” casi cada vez. Significa que siempre debe cargar el CSS y el JavaScript crítico con prioridad.
Pero, ¿cómo decidir qué CSS es crítico y cuál no? ¿Qué parte de su sitio debe “retrasar” para acelerar a otra? Todo se trata de prioridades y en encontrar los recursos esenciales de CSS y cómo optimizar su entrega. Vamos a bucear. ¿Qué es el crítico de CSS y por qué es importante para el rendimiento? CSS Critic es una técnica que extrae el CSS por encima del pliegue para mostrar la página lo antes posible. Es como tomar el CSS mínimo para mostrar el contenido visto por un visitante.
CSS Critic ubicado sobre la página
La velocidad de la página también puede afectar el rendimiento del SEO debido al nuevo factor de clasificación, incluidos los centrales vitales de la web. Son un conjunto de factores implementados por Google para medir la experiencia del usuario, incluida lo rápido que es una página. Cuanto mejor sea la experiencia, mejor será su clasificación. ¿Estás familiarizado con los seis valores del faro que miden el rendimiento? Dos de ellos de la primera pintura contentful (FCP) y el primer retraso de entrada (FID)-Medida la velocidad percibida de su sitio web. Si estos valores están en buenas condiciones, se medirá su experiencia de usuario de Google. Sin embargo, si ambos KPI están en rojo, es mejor que optimice su crítico crítico.css explicado en inglés simple, el crítico de CSS es una tarea de optimización. Es como decirle a su navegador que cargue solo el CSS visto por el visitante. Esto ayuda a mejorar la velocidad percibida, es decir, qué tan rápido parece el sitio web de un visitante. Hagamos un ejercicio rápido con la imagen a continuación. Imagine que es un usuario móvil que accede a un sitio web. Escenario #1: en la parte superior, hay una página CSS que bloquea la representación. Verá una página vacía hasta que se cargue todo el archivo CSS. Escenario #2: en la parte inferior, el CSS crítico se reproduce por primera vez. Comience a ver la página antes, porque el navegador ya ha comenzado a cargar la hoja de estilo más importante.
Pregunta: ¿Qué escenario “te sientes” más rápido?
UP: Carga de una página con CSS que bloquea la parte inferior: CSS Critic In Line (Contenido sobre la página) Respuesta: Todos estamos de acuerdo en que la velocidad percibida del resultado es mejor. Su visitante sentirá una disminución percibida en el tiempo de carga de la página debido a la representación de página más rápida cuando se realiza correctamente. ¿Por qué se requiere crítico de CSS? Cargar una hoja de estilo CSS suele ser la forma en que atasca su sitio de WordPress. CSS es el lenguaje utilizado para describir una página web como colores, apariencia y fuentes. Sin CSS, la Web se vería como nuestra columna izquierda a continuación:
¿Qué significa la planificación crítica de CSS? La ruta de reproducción crítica es la serie de tareas que el navegador debe realizar para reproducir una página en la pantalla del visitante. Por ejemplo, estas tareas incluyen descargar fotos, fuentes y texto para mostrar en la página web. Como se vio anteriormente, el navegador también debe descargar sus archivos CSS para reproducir la apariencia correcta de la página. Si sus archivos son realmente grandes, los visitantes esperarán hasta que se descargue todo el archivo. Pero, ¿qué pasa si el navegador pudiera comenzar a reproducir CSS a medida que avanza la descarga?
Imagine una forma de mitigar el bloqueo y comenzar la entrega CSS lo antes posible. Esta técnica se conoce como la optimización de la reproducción crítica.
La ruta de representación crítica El navegador sigue cinco pasos hasta que presenta la página de los visitantes. Muchos pueden suceder durante este proceso. Es por eso que debemos asegurarnos de que cada paso se complete lo antes posible. Aparecen dos preguntas: ¿cómo optimizar cada paso? ¿Cómo asegurarnos de que tengamos la entrega CSS más efectiva? Estas preguntas nos llevan a la siguiente sección. Aprenderá a mejorar el tiempo de representación con la técnica CSS Critic (optimizar la entrega de CSS) y eliminar los errores de CSS que bloquean la representación. CSS no se entrega de manera óptima, puede llegar a una página web lenta. Por lo tanto, una de las mejores formas de mejorar el rendimiento de su sitio de WordPress es optimizar cómo y cuándo se entrega el código CSS. Hay tres pasos principales para optimizar la entrega de CSS para su sitio de WordPress, a saber: Paso 1: Encuentre y genere el CSS crítico, que identifica el código CSS mínimo que necesita para mostrar el contenido por encima de la página. Debe averiguar qué puede ver el usuario en la ventana al cargar la página por primera vez. Determinar el CSS crítico correcto para una página puede ser complejo, porque los visitantes usan muchas dimensiones de pantalla diferentes, como escritorio, tableta y móvil.
Contenido diferente por encima de la página para escritorio, tableta y teléfono inteligente – Fuente: Kinsta Cómo encontrar CSS Critic WebDev le ofrece tres herramientas que puede usar para identificar CSS Critic:
Crítico: extrae CSS por encima de la página (y también en línea y lo minimiza)
CriticalCSS-Another Module que extrae CSS CriticPenthouse: una buena opción si su sitio tiene mucho CSS
Paso 2: Alinee este CSS crítico, es decir, agregando el CSS crítico al del documento HTML para eliminar todas las solicitudes adicionales para hacerse cargo de estos estilos. En el ejemplo de WebDev a continuación, introdujeron el CSS crítico en el archivo , para que el navegador pudiera entregarlo más rápido y jugar algo a los usuarios lo antes posible.
CSS CRITIC INLINET en mi fuente HTML: WebDEV Paso 3: Cargue el resto de CSS asincron: esto retrasa el CSS necrítico para que se pueda cargar después de que sus visitantes puedan ver el contenido de su página web. Esta técnica también se conoce como “carga pospuesta”. WebDev explica muy bien todo el proceso manual.
Después de estos tres pasos manuales, optimizará su entrega CSS y la ruta de reproducción crítica. Sin embargo, existen métodos más simples para optimizar la entrega de CSS WordPress: ¡utilizando un complemento de WordPress! Cómo generar CSS Critic y optimizar la ruta de reproducción crítica con un complemento Afortunadamente, puede optimizar la entrega de su CSS crítico y posponer recursos menos importantes utilizando un complemento de WordPress. Esto le ahorrará tiempo y evitará el cambio manual en los archivos de código. Hemos inventado una lista para que pueda probar qué herramienta es mejor para usted.
WP Rocket: el complemento de caché más completo que detecta su CSS crítico en línea y lo pospuso de la manera más simple. Pasará un ejemplo práctico en la siguiente sección.
Optimización de CSS en dos clics con WP Rocket
Autoadeo: inyecta CSS en el cabezal de la página de forma predeterminada y también puede integrar y posponer el crítico de CSS.
Limpieza de activos: archivos en línea CSS (automáticamente especificando la ruta a las hojas de estilo).
Alineando el archivo CSS con la limpieza de activos Cómo optimizar la entrega de CSS con WP Rocket en WP Rocket 3.10, la opción de carga CSS asincrónicamente aborda la recomendación de velocidad de página que vi anteriormente: “Elimine los recursos que bloquean la representación”. WP Rocket cubre dos optimizaciones principales de CSS:
Genera el CSS crítico necesario para reproducir la parte visible de su sitio (el contenido por encima de la página).
Cargue todos los demás archivos CSS en modo asincrónico (prioridad que debe cargarse primero).
Para optimizar la entrega de CSS, simplemente siga estos pasos desde el tablero de cohetes WP:
Vaya a Configuración> WP Rocket
Haga clic en la pestaña Optimización de archivos.
Desplácese hacia abajo a la sección del archivo CSS y haga clic en el cuadro etiquetado optimizar la entrega de CSS.
Seleccione la opción de eliminación CSS (opción recomendada) no utilizada. Esto solo extraerá el CSS necesario en la página y también lo incluirá.
Retire el CSS no utilizado o la carga asíncrona de CSS no utilizada: WP Rocket Alternativamente, WP Rocket también le permite cargar Asynchron CSS y proporcionar una opción de repuesto para el CSS crítico. Use este campo alternativo si el complemento no puede generar el CSS crítico correcto.
CRÍTICO DE SEGURIDAD CSS – WP Rocket
| Eliminar CSS no utilizado es la forma recomendada de eliminar CSS que bloquea la reproducción. Tenga en cuenta que no es posible haber activado. Los valores de rendimiento de Google, como la pintura de contenido más grande (LCP) y el tiempo de bloqueo total (TBT) también se verán afectados. LCP y TBT tienen un peso total del 55% en Google PageSpeed y Core Web Vitals, por lo que es esencial mantener esos valores saludables. Computadora de puntuación del faro: Fuente: Lighthouse para probar esas opciones de cohetes WP en un sitio de WordPress con una mala nota en PSI (Mobile). Verá cómo WP Rocket nos ayudará en nuestro proceso de optimización de la velocidad de la página. Antes de optimizar mi CSS crítico, mi nota de rendimiento era solo 43/100, que puso mi sitio móvil en rojo: La puntuación de mi sitio de WordPress en Mobile (sin WP Rocket) -Source: PSI también recibe dos advertencias: “Reducir CSS sin usar” y “eliminar los recursos que bloquean la representación”. Ahora, para instalar WP Rocket y active la opción “Eliminar CSS no utilizado”. Elimine la opción CSS no utilizada – Fuente: los resultados del rendimiento del cohete WP ahora son excelentes en el móvil. Llegué a 94/100 solo en unos pocos clics. WP Rocket optimizó mi forma de ordenar y también se encargó de mi CSS crítico.  Los resultados de rendimiento con WP Rocket Wars advierten “Eliminar los recursos que bloquean la retición” y “Reducir CSS no utilizados” ahora están en la sección “Las últimas publicaciones”. Los últimos editores con WP Rocket – Fuente: PSI como yo, puedes usar WP Rocket para optimizar la entrega de la entrega Nuestro CSS crítico. Es un complemento confiable y eficiente que me ayudó a lograr objetivos de rendimiento increíbles en unos pocos clics. WP Rocket |
con WP Rocket | |
| nota general | 43/100 | 94/100 |
| El contenido más grande lleno de contenido | 10.2 s | 0.7 S |
| tiempo de bloqueo total | 540 ms | 0 ms |
| “Reduzca CSS no utilizado” | problema | auditoría pasada |
| “Elimine los recursos que bloquean la reproducción” < | El problema | Audit pasando |
finalizando su optimización crítica de CSS, pero no tiene que ser así, debido a complementos como WP Rocket. He visto que WP Rocket ayudó a eliminar las advertencias rojas relacionadas con los recursos de recursos de Google PageSpeed Insights. Ahorrará un tiempo precioso porque WP Rocket aplica automáticamente el 80% de las mejores prácticas de rendimiento web, y verá una mejora instantánea en la activación. Además, siempre puede contar con nuestra garantía de reembolso del 100%. Aunque creemos que nunca querrá uno, lo complaceremos con un reembolso si lo solicita dentro de los 14 días posteriores a la compra.
