Cómo mejorar el puntaje de rendimiento de su faro para su sitio web de WordPress

Cada vez que Google cambia la forma en que planea clasificar los sitios web, todos tienen que prestar atención y en ese momento en este momento. Google ha expresado claramente las intenciones de lanzar Core Web Vitals como parte de un nuevo factor de clasificación y es algo que debe estar frente a su sitio de WordPress. Es por eso que, en este artículo, profundizaremos lo que significa todo esto y cómo puede usar Google Lighthouse para optimizar el rendimiento de su sitio, ¿cuál es Google Lighthouse? Google Lighthouse es una herramienta gratuita de código abierto que mide el rendimiento de su sitio y proporciona una serie de valores e información que lo ayuda a mejorar la experiencia general del usuario. El instrumento en sí es simple de usar y, en solo unos segundos, presentará un informe con toda la información relevante de Web Web Vitals, así que puede evaluar exactamente cómo funciona su sitio.

Google Lighthouse Informe-Source: Informe del faro de Google Chrome Dev Tools Este puntaje de rendimiento se calcula sopesando diferentes valores de rendimiento y ofrece una visión integral del rendimiento de su sitio. Si desea comprender más sobre cómo se calcula el puntaje, Hay una computadora muy útil disponible aquí. Es muy importante llevar a cabo un faro que regrese a quienes lo rodean para optimizar las cosas. El despacho del informe del faro y los valores se dividen en cinco categorías diferentes, a saber: rendimiento, accesibilidad, mejores prácticas, SEO y web progresiva Aplicación (PWA). Todos estos sirven para mejorar la calidad general de las páginas web. 1. Auditoría de rendimiento
Sección de “rendimiento” – Fuente: Informe de faro de Google Chrome Dev Tools

La primera pintura contenta (FCP) marca el primer punto donde un usuario puede ver cualquier cosa en la pantalla y, como resultado, se considera la velocidad de carga percibida. ️ Este valor tiene un peso del 10% en comparación con su puntaje de rendimiento. Los mejores sitios allí tienen un rendimiento de 1.5 segundos, pero mientras su FCP sea menos de 2 segundos, todavía se considera que está en el grupo “rápido”, que es donde debe estar.
El índice de velocidad (SI) muestra qué tan rápido se llena el contenido de una página web. ️ Esta medición también tiene un peso del 10% al calcular el puntaje de rendimiento. Idealmente, busque un tiempo de índice de velocidad por debajo de 4.3 segundos, que se correlaciona con un índice de velocidad de 75 y más. La pintura de contenido más grande (LCP) es un valor que mide cuánto tiempo la reproducción lleva el elemento visible más grande del sitio. ️ Esta medición especial se ponderó al 25%, lo que lo convierte en uno de los elementos de corrección más importantes para optimizar la puntuación de rendimiento. Un buen puntaje en este departamento es de aproximadamente 2.5 segundos o menos, ya que esto proporciona la mejor experiencia para el usuario.
El tiempo de interactivo (TTI) es un valor que identifica los casos en que una página parece interactiva para un usuario, pero en realidad no lo es. El propósito aquí es minimizar el tiempo entre FCP y TTI. ️ Este valor está ponderado en un 10% en el puntaje de rendimiento general. Un buen nivel para ver aquí es estar por debajo de 3.8 segundos, que Google considera “rápido”.
Total de bloqueo de bloqueo (TBT) m cuantifica la respuesta de carga de su página a la entrada de su usuario. Se puede usar para reemplazar su puntaje FID (primera demora de entrada). Miden cosas diferentes (frente a la entrada del usuario de la interacción del usuario), pero mejorando TBT, generalmente mejorado y FID, que es una red central de vitalidad. ️ Este es otro componente crucial de la puntuación de rendimiento con un peso del 30%. Se considera que un buen tiempo de TBT es un poco inferior a 300 milisegundos.
El cambio de diseño acumulativo (CLS) mide cuán estable es visualmente una página al cuantificar la frecuencia con la que los usuarios pueden experimentar una apariencia inesperada. ️ Este valor está ponderado en un 15% en el puntaje de rendimiento general. Se considera que una buena puntuación es 0.1 o menor, lo que aproxima la experiencia óptima del usuario. Auditoría de accesibilidad
Fuente de la sección “Accesibilidad”: Informe del faro de Google Chrome Dev Tools El puntaje de accesibilidad se refiere a cuán utilizable es su sitio web para todos los usuarios, en toda su diversidad. Idealmente, su sitio debería funcionar también para aquellos que tienen deficiencias visuales, motoras, auditivas o cognitivas, así como para aquellos que tienen la suerte de estar libres de estas preocupaciones. Debes apuntar aquí tan cerca de un 100 perfecto. La forma más común de mejorar esto es asegurarse de que su texto tenga un alto contraste para que sea fácil de leer. Su sitio solo debe navegar de manera efectiva con un teclado, y sus imágenes deben tener textos alternativos relevantes para aquellos que no pueden verlos.
El pensamiento aquí está alineado con los principios web Directrices de accesibilidad de contenido (WCAG) 2.0, que presenta las diferentes prácticas en las que todos deberíamos trabajar. 3. Auditoría de las mejores prácticas
La sección “Mejores prácticas” -Source: Informe del faro de Google Chrome Dev Tools Esta sección lleva a cabo una serie de auditorías en su sitio web para buscar las mejores prácticas que ofrecen una excelente experiencia para el usuario. Estas son las frutas que debe cuidar con certeza, por lo que si no tiene 100 años aquí, mire las auditorías que no han pasado e implementan esos cambios para optimizar esta medida especial. El pasado tiene un lugar verde a continuación, y cada sección se extiende . Si hace clic en ellos, encontrará una explicación detallada de cada auditoría.

Ejemplo de la lista de “auditorías pasadas” – Fuente: Informe del faro de Google Chrome Dev Tools 4. Auditoría SEO
Sección “SEO”: el informe del faro de Google Chrome Dev Tools Sección Penultada de los parámetros del faro es la sección SEO que analiza su sitio para garantizar que esté optimizado para los motores de búsqueda. Esto no es para mirar sus palabras clave específicas, por supuesto, sino solo asegúrese de que la estructura general de su página esté bien configurada para fines de clasificación.

Aquí buscará contenido generado automáticamente, esquemas de enlaces, desenmascarar, redirecciones ocultas, texto oculto, páginas de puertas, contenido raspado y similares, por lo que no cree que pueda deshacerse de él. Realmente deberías ser auténtico y superior en este departamento. 5. Auditar la aplicación web progresiva (PWA). La última sección es PWA. Estas comprobaciones validan los aspectos de una aplicación web progresiva. Un PWA es una API construida y mejorada que ofrece mejores capacidades, confiabilidad y estabilidad para todos, donde sea que se encuentren en el mundo. Por ejemplo, Uber ha sido reconstruido a partir de cero siguiendo los principios de PWA.Rport PWA – Fuente: Informe del faro de Google Chrome Dev Tools y esto forma el sistema de medición del faro 6.0! Ahora, veamos exactamente cómo probamos el rendimiento. Cómo probar la velocidad y el rendimiento utilizando el faro hay cuatro herramientas diferentes que puede usar para ejecutar una auditoría del faro en su sitio, todos utilizan los mismos valores explicados anteriormente, así como los mismos KPI.
Web.dev: una herramienta intuitiva que ejecuta la auditoría completa (rendimiento, accesibilidad, SEO y mejores prácticas), pero no tiene en cuenta el dispositivo para el que realiza el análisis.

Herramientas de desarrollador de Google Chrome: la herramienta más completa que analiza todos los KPI mencionados anteriormente (más PWA) tanto en dispositivos móviles como en escritorio.

Google PageSpeed ​​Insights (PSI): la herramienta más popular que mide solo el KPI de rendimiento de su sitio.
GTMetrix: una herramienta de rendimiento popular que mide los valores del rendimiento del faro.

1. Web.dev La primera herramienta es una herramienta basada en el navegador.dev, donde simplemente ingresa a la URL de su sitio, haga clic en “Ejecutar auditoría” y hará su trabajo. Listo para ejecutar la fuente: Web.dev una vez que se haya completado la auditoría , le mostrará un informe que se ve así:
Auditoría WP Rocket (todos los valores son verdes) -Source: Web.dev Asegúrese de hacer clic en el botón “Ver el informe” para profundizar cada valor y obtener la información que necesita. Web.dev no proporciona dos informes diferentes para dispositivos móviles o de escritorio, solo recibe un informe de análisis. 2. Herramientas para los desarrolladores de Google Chrome La segunda forma en que podría hacer esto sería en las herramientas de desarrollo del navegador Chrome. Para realizar una auditoría en Chrome, siga estos pasos:
Abra Google Chrome en modo de incógnito.
Navegue al sitio web que desea hacer la auditoría. Echemos un vistazo a WP-Rocket.me.
Haga clic en la derecha en cualquier lugar de la página y luego haga clic en “Inspeccionar”.
Luego, tendrá que buscar la pestaña llamada “Lighthouse”, que podría ocultarse detrás de las flechas en la parte superior de la sección Herramientas del desarrollador.

Izquierda: Sitio web de WP Rocket en el modo de incógnito I Right: Herramientas de origen: Herramientas de desarrollo de Google Chrome

Una vez que esté allí, haga clic en “Generar informe” para obtener una auditoría completa del faro.
Generación del informe del faro – Fuente: Google Chrome Dev Herramientas ️ Sugerencia: también puede descargar la extensión de Chrome llamada “Lighthouse”, pero Google dice que “si no tiene una razón en particular, debe usar el trabajo de Chrome DevTools en lugar de esto Flujo de la cosa con la extensión cromada. El flujo de trabajo DevTool permite la prueba de sitios locales y páginas autenticadas, mientras que la extensión no lo hace ”. 3. Google PageSpeed ​​Insights (PSI) Google PageSpeed ​​Insights es la herramienta más utilizada de nuestros clientes para medir el rendimiento. El instrumento es bastante simple. Todo lo que tiene que hacer es ingresar cualquier URL y analizarla en unos segundos. Accesibilidad y mejores prácticas ”.

Informe FAR para WP Rocket en PageSpeed ​​Insight – Fuente: PSI La relación contiene seis secciones principales. Veamoslos y veamos cómo se organizan los valores del faro.
Puntuación global: cuál es la nota de rendimiento general de su sitio puede ser rojo (0-49), naranja (50-89) o verde (90-100)

“Datos de campo”: basado en usuarios de la vida real

“Datos de laboratorio”: un conjunto de datos artificiales.
Datos de campo vs. Del laboratorio definido por Google: Field Data es un informe histórico sobre cómo una determinada URL ha funcionado y representa datos de rendimiento anónimos de los usuarios en el mundo real en una variedad de dispositivos y condiciones de red. Los datos de laboratorio se basan en una carga simulada de una página en un solo dispositivo y en un conjunto fijo de condiciones de red, los primeros datos presentados por Lighthouse incluyen vitales de web principales y otros tres valores. Los elementos básicos vitales:

El umbral aceptable de Google para cada valor – Fuente: Google aquí son los otros cuatro valores medidos por Lighthouse:
Índice de velocidad (SI)

Tiempo de interactivo (TTI)
Tiempo total de bloqueo (TBT)
Primera pintura contenta (FCP).
La sección “Diagnóstico” le dice lo que debe mejorarse.
Informe de diagnóstico para WP Rocket en PageSpeed ​​Insight-Source: la sección “Oportunidades” de PSI le brinda algunas sugerencias sobre cómo cargar su sitio más rápido.
El informe de diagnóstico para WP Rocket en PageSpeed ​​Insight – Fuente: Sección de PSI “Auditorías pasadas”: siempre es relajante ver un color verde cuando ejecuta una auditoría. Esta parte prácticamente te dice lo que hiciste bien.

El informe de auditoría aprobado para WP Rocket en PageSpeed ​​Insight-Source: PSI 4. GTMETRIX GTMTRIX es otra herramienta de rendimiento popular que analiza el rendimiento de su sitio y mide los valores de iluminación de rendimiento. Puede probar su sitio desde diferentes ubicaciones. Por defecto, el instrumento realizará la prueba en el escritorio. Solo tiene que incluir la URL y hacer clic en “Prueba el sitio”.
La página inicial de GTMTRIX Una vez que se complete la auditoría, obtendrá una nota de rendimiento y sabrá cómo funciona Core Web Vitals: la clase GTMTRIX, la herramienta le ofrece más pestañas, comenzando desde el resumen. Será fácil ver cuánto dura la página para cargar y cuáles son los principales problemas.
GTMetrix – Pestaña Resumen Por lo tanto, la pestaña Performance le ofrece una imagen general completa de los valores del faro:
Pestaña de rendimiento gtmetrix le recomendamos que explore las otras pestañas: proporcionarán información útil sobre el rendimiento de su sitio. Cómo analizar el informe de rendimiento del faro después de haber llegado al informe, el siguiente paso es analizar los resultados e identificar cómo Puede mejorar el puntaje de rendimiento de su sitio ️ Asegúrese de hacer clic en el botón “Ver el informe” cuando llegue allí, de lo contrario, solo se quedará con los títulos y no con los detalles.
Notas globales Para cada categoría (WP Rocket) – Fuente: Informe del faro Al hacer clic en el informe detallado, podrá mirar cada componente individual y ver exactamente lo que está sucediendo, incluidos diagnósticos y auditorías pasadas. Lea el informe cuidadosamente y asegúrese de abrir todas las pestañas para verificar todos los valores (rendimiento, accesibilidad, mejores prácticas, SEO y aplicación web progresiva).
Verificar cada parte del informe del faro – Fuente: Google Chrome Dev Tools

Tómese el tiempo trabajando en cada uno de ellos y analizando dónde sugiere mejoras. Por lo general, la mensajería es bastante simple e intuitiva, por lo que debería poder tomar esos consejos a bordo, cambiar lo que debe cambiar y luego ejecutar el informe nuevamente. Ahora, centrémonos en la categoría de rendimiento de nuestro informe del faro. ¿Cómo se lee los puntajes de la sección de rendimiento? La sección “Performance” muestra las puntuaciones centrales de Web Vitals (FCP, LCP y CLS) y los valores y TBT y TTI.

El primer contenido lleno de contenido es 0.5 s (lo cual está bien, porque Google establece los límites en 2.5 s)

El índice de velocidad es 0.7 s (que está por debajo del umbral de 4.3 s recomendado por Google)

La pintura de contenido más alta es de 0.6 s (que está por debajo de 2.5 s recomendada por Google)

El tiempo de interacción es de 1.2 s (lo cual está bien, porque la puntuación debe estar por debajo de 5 s)

El tiempo de bloqueo total es de 100 ms (lo cual está bien, porque Google recomienda un puntaje por debajo de 300 ms)


El cambio acumulativo de apariencia es 0.065 s (que también es aceptable por Google, considerando que está por debajo de 0.1 s).

Interpretación de una buena puntuación de rendimiento para uno no tan bueno: ejemplo de buena puntuación (valores con ⬤ = bueno)

Ejemplo de buena puntuación – Ejemplo de PSI de valores de puntaje no muy buenos con ▲ = valores malos con = requiere mejorar
Ejemplo de puntaje no demasiado bueno PSI Cómo optimizar su puntaje de rendimiento del faro en WordPress Hay varias formas de optimizar el rendimiento de su faro en su sitio web de WordPress. Pasemos por algunos de ellos para darle una idea de cómo puede mejorar los valores del faro: configure la memoria de la página, que acelera significativamente el tiempo de respuesta del servidor y ayude a mejorar la pintura contable (LCP) más grande. Esta es una parte integral de la solución de cohete WP.

Optimice la memoria de su navegador para asegurarse de tener las políticas adecuadas para mantener archivos estáticos en el navegador. WP Rocket puede ayudarlo a obtener el tiempo de vencimiento óptimo automáticamente aquí, eliminando este estrés completo. Se encargará de la nota de LCP nuevamente.
Optimice las fuentes, las imágenes y el código para asegurarse de no cobrar archivos CSS o JavaScript no utilizados que eviten su contenido principal (y la puntuación LCP). Puede hacer este tipo de optimización fácilmente con la pestaña de optimización de archivos desde WP Rocket, que ayuda a eliminar los recursos que bloquean la representación, para evitar encadenar solicitudes críticas, minimizar los archivos JS y CSS, eliminar CSS e imágenes perezosas no utilizadas. También puede usar un instrumento como Imagify para optimizar el tamaño de su imagen en su sitio web de WordPress.
Optimice su ejemplo de fuentes, use la precarga de fuentes para mejorar el rendimiento del desplazamiento del diseño (CLS).
Use una red de entrega de contenido (CDN) si opera en varios países para que se asegure de ofrecer una gran experiencia en todo el mundo. Nuestro servicio RocketCDN es perfecto para mejorar LCP. Utilice la compresión a nivel de servidor para reducir el tamaño de su sitio para una carga rápida. WP Rocket activa automáticamente la compresión de GZIP para este propósito y también se encarga de la puntuación LCP.
Asegúrese de que todas sus imágenes e incorporación tengan dimensiones, especialmente las que agrega manualmente usando el código. WordPress se agregará automáticamente para cualquier imagen que cargue a través del editor, pero no puede atrapar las manuales. Esta acción te ayudará a mejorar el CLS.
No inyecte dinámicamente ningún contenido por encima del contenido existente a menos que sea una respuesta a la acción de un usuario. Una vez más, reducirá los cambios de aspecto acumulativo.
Retrasar o eliminar JavaScript o CSS innecesario: si se esfuerza por mejorar el tiempo para interactuar (TTI) y el tiempo de bloqueo total (TBT), debe verificar si hay JavaScript y CSS innecesario que ralentiza la página. Normalmente son culpables comunes. Si no se siente cómodo con la optimización de JavaScript y CSS, WP Rocket tiene opciones para hacer frente a ambos casos y lo ayuda a eliminar la reproducción de CSS y JS.
Minimice el trabajo en el hilo principal o reduzca el tiempo de ejecución de JavaScript para mejorar el índice de velocidad (SI).

Estos son solo algunos ejemplos de cosas que puede hacer para optimizar su puntaje del faro. Como puede ver, WP Rocket es una forma muy fuerte de resolver inmediatamente el 80% de estos problemas sin preocuparse por nada. Ni siquiera tienes que tocar la configuración. Es una herramienta plug-and-play que ofrece mejoras de rendimiento excepcionales casi de inmediato. Si desea mejorar la puntuación de su faro y la experiencia del usuario del usuario como resultado, debe intentarlo. Pero veamos cómo funciona WP Rocket en un ejemplo de la vida real. Auditaré un sitio web con y sin cohete WP para ayudarlo a decidir. Medir y optimizar el rendimiento de mi sitio de WordPress con Lighthouse y WP Rocket Performating Medating Tool es PSI. Escenario 1: Análisis de ejecución sin WP Rocket instalado

En primer lugar, tenemos que ir a PSI
Luego ejecutamos el informe para el siguiente sitio web: (URL: https://wordpress.fridayfactory.dev/)
Seleccionamos el dispositivo “móvil”, porque es el más difícil de optimizar. Por supuesto, puede ejecutar un informe similar utilizando el modo “Desktop”.
Los resultados de mi prueba de velocidad para investigar cada KPI del informe del faro:
Core Web Vitals y otros valores de PSI y aquí están los detalles del informe del faro: Extracto de auditorías pasadas (24) No hay nada que optimizar aquí, ¡buenas noticias!
Auditorías pasadas: oportunidades y diagnósticos de PSI que se encuentran en los dispositivos móviles: esta sección destaca los principales problemas que se llevarán a cabo después de la auditoría. Quédate con nosotros porque, en la segunda parte, te mostraré cómo repararlos con WP Rocket. Al ejecutar la prueba de rendimiento, Lighthouse ha sugerido algunas mejoras para hacer, como: las imágenes no tienen un ancho y altura explícitos
Reduzca CSS y elimine el CSS no utilizado
Habilitar compresión de texto (GZIP)
Eliminar los recursos que bloquean la representación
Establezca una política efectiva de almacenamiento de caché.
Diagnósticos y oportunidades de mi escenario de Audit-PSI 2: ejecute el mismo análisis con WP Rocket para mejorar mi puntaje actual (79/100) al menos (90/100), activé WP Rocket en el mismo sitio.
El tablero de cohetes WP en WordPrips Mejora que obtengo desde el principio ya es muy alentador. ¡Mi indicador de velocidad ahora está en verde! LCP ha mejorado, pero todavía está en “naranja”. Quédese con nosotros: mostraremos cómo mejorar la nota de LCP y el puntaje de rendimiento general aprovechando algunas poderosas funciones de cohetes WP.
Mis puntajes después de activar WP Rocket – PSI

Sugerencia: WP Rocket aplica automáticamente el 80% de las mejores prácticas de rendimiento web, inmediatamente después de la activación.> Si desea explorar su configuración, hemos combinado algunas de las Las mejores prácticas a tener en cuenta al configurar WP Rocket: No active todas las opciones simultáneamente. Haga tiempo, revise una por una y ejecute nuevas pruebas cada vez que se activa una nueva opción. Cuando ejecute una nueva prueba, asegúrese de hacerlo en una ventana de incógnito y/o desconecte de su sitio de WordPress: Realización de la segunda auditoría utilizando el modo de incógnito ¿Cómo mejorar su puntaje de rendimiento del faro con WP Rocket, así que recuerde nuestros problemas de rendimiento en el informe del faro? Te mostraré cómo resolverlos usando WP Rocket. Problema #1: Las dimensiones de las imágenes faltan en la sección de diagnóstico, tenía el siguiente problema: “Los elementos de la imagen no tienen ancho y altura explícitos”, es decir, debo verificar cada uno de ellos (¡75!) Y agregar un Ancho y altura específicos. La solución del cohete WP: en el tablero, acceda a las dimensiones de la imagen de los medios y verifique la casilla “Agregue las dimensiones de la imagen que falta”. WP Rocket agregará atributos de ancho y altura para la imagen. El tablero WP Rocket ️ para ejecutar una nueva auditoría PSI (todavía en modo de incógnito) para que podamos comparar los resultados. Buenas noticias, mi sección de diagnóstico ya no tiene “los elementos de la imagen no tienen ancho y altura explícitos”: La sección de diagnóstico de mi informe Lighthouse-PSI De hecho, el problema ha desaparecido y el KPI “La imagen a la dimensión correcta” ahora se ha trasladado a la sección “Últimas auditorías”: Pasé la sección de auditar mi faro de informe – Problema de PSI #2 – minimiza la solución CSS de WP Rocket – En la pestaña Optimización de archivos, WP Rocket ofrece minimizar los archivos CSS como se muestra a continuación: Miniificación CSS – Problema de cohetes WP #3 – Elimine los recursos que bloquean el número 1 del Rocket WP – WP Rocket proporciona una función sólida para cumplir con JS Ranning: “Cargando JavaScript”. Solo tiene que seleccionar la opción, y el complemento se encargará de todo: Carga de JavaScript pospuesto – Solución de cohete WP no. 2 de WP Rocket – WP Rocket lo ayuda a cumplir con la representación de CSS debido a la función Optimizar la entrega de CSS. La entrega de CSS Optimize – WP Rocket ️ Tenemos una nueva auditoría en PSI (todavía en modo de incógnito) para comparar los resultados. Nuevamente, buenas noticias, mi sección de diagnóstico no contiene ningún problema relacionado con CSS o JS: La sección de diagnóstico después de optimizar la configuración de “optimización de archivos” del cohete WP: PSI Mi nota de rendimiento final después de activar WP Rocket y ajustar algunas configuraciones en el tablero de WordPress es muy buena:
Orange Mine tiene puntajes. Cuando ejecuto mi primera auditoría sin WP Rocket – PSI	My New (Green) tiene puntajes después de instalar WP Rocket – PSI

Conclusión, puedo decir que WP Rocket definitivamente ha ayudado a mejorar mi puntaje de alto rendimiento. Antes de WP Rocket con WP Rocket Grado de rendimiento general