Cómo mejorar el índice de velocidad (y) en WordPress

¿Sabe cuántos segundos tarda su sitio en cargarse en la pantalla de su visitante? La respuesta indica el índice de velocidad (SI), una medición de rendimiento afectada por cualquier cosa se refiere a la superficie. El índice de velocidad (SI) contribuye a la puntuación de rendimiento general en el informe del faro. Mantener un buen índice de velocidad conduce a una excelente experiencia para el usuario: significa que el contenido en la ventana de vista se entrega rápidamente. Para mejorar su puntaje de rendimiento, hay seis valores para optimizar, y el índice de velocidad tiene el 10% de esta nota global calculada por Lighthouse.
¿Qué es un buen índice de velocidad? ¿Cómo se mide? ¿Qué herramientas son las más confiables? ¡Puede ser abrumador ejecutar una auditoría de rendimiento para su sitio! Siga nuestra guía paso a paso para controlar su índice de velocidad y realizar un proceso de optimización de rendimiento eficiente. Explicaremos en detalle la métrica y las herramientas gratuitas que puede usar para medir su rendimiento y algunos consejos técnicos para obtener una buena nota (por debajo de 3.4 s). ¿Cuál es el índice de velocidad en Lighthouse? Speed ​​Index es un valor de rendimiento del faro que muestra qué tan rápido y visible es el contenido de una página de usuario.
El índice de velocidad indica el tiempo de carga de la parte visible sobre el pliegue de una página web (en la ventana de vista). Mide todo el proceso de carga lo que los usuarios ven antes de ejecutarse. De hecho, Lighthouse realiza un video del proceso de carga y calcula la diferencia entre todos los cuadros. Luego Lighthouse usa el módulo Speedline Node.js para calcular la puntuación final y. (Puede encontrar más información sobre este módulo en GitHub). El índice de velocidad es el resultado de un cálculo: es la tasa promedio de reproducción de una página web y su progreso visual, también llamado finalización visual. Es un valor de laboratorio significativo para medir el tiempo de carga que afecta directamente cómo los usuarios perciben el rendimiento. de un sitio web. Ilustremos este complemento visual con dos escenarios: la página A está optimizada, mientras que la página B no es:
Explicación visual y finalización: Fuente: Frasterizar
Un puntaje de índice de baja velocidad significa que su página hace que el contenido visible sea bastante rápido, dando a los visitantes la percepción de una página de carga más rápida. El valor y es centrado en el usuario: sigue la progresión visual. El índice de velocidad es un valor de rendimiento de carga que muestra qué tan rápido son visibles los elementos de una página en la ventana de vista. ¿Qué tan rápido se ven sus visitantes? ¡Esta es exactamente la pregunta que está tratando de responder cuando mide su rendimiento web!

Y está representado en la imagen a continuación, casi al final del proceso de finalización visual:
Explicación del proceso de carga: la fuente: Dev.To ahora, veamos cómo se compara el índice de velocidad con otros 5 kpi medidos por Lighthouse. El peso y la puntuación del faro en el puntaje de rendimiento del faro V8, el peso y se redujeron del 15% al ​​10%. Computer V8 de puntuación del faro (incluido SI) – Web.dev ¿Cómo calcular el índice de velocidad? Web.dev explica que su puntaje de índice de velocidad es una “comparación entre el índice de velocidad de su página y las indicaciones de velocidad de los sitios web reales”.

La versión V8 Lighthouse calcula seis valores para generar la puntuación de rendimiento final. Incluye los vitales web básicos, el tiempo total de interacción, el tiempo de bloqueo total y, finalmente, el índice de velocidad:
kpi peso ¿Cuál es un buen puntaje? (área verde) la primera pintura satisfactoria 10% 0-2 s índice de velocidad 10% 0-3.4 s la pintura más grande llena de contenido 25% 0-2.5 s tiempo para interactivo 10% 0-3.8 S Tiempo de bloqueo total 30% <200 ms cambio acumulativo 15% 0 – 0.1

El índice de velocidad es una medida de laboratorio importante porque define si su página se percibe tan rápido o lento.

Fórmula del índice de velocidad: intervalo de tiempo * (1 – integridad visual/100)

antes de brindarle algunas recomendaciones técnicas para mejorarlo y, si es necesario, debemos determinar cuál es una buena puntuación y según Lighthouse. Y esto nos lleva a la siguiente sección: el umbral del índice de velocidad. ¿Cuál es un buen puntaje de índice de velocidad? Un buen puntaje de índice de velocidad debe estar por debajo de 3.4 segundos. Pragses y – Fuente: Web.dev
Speed ​​Index vs Pinte satisfactoria si está familiarizado con la reciente actualización de Core Web Vitals, el índice de velocidad puede parecer similar a KPI First Paint (FCP). Permítame explicar la diferencia principal y por qué ambos valores son importantes.
La primera pintura contenta también es un valor visual que mide el tiempo hasta que el navegador reproduce cualquier contenido por primera vez. El índice de velocidad describe la velocidad a la que todo el contenido aparece por encima del pliegue.

FCP VS y KPI-Source: más rápido, lo que acelere su FCP mejorará su índice de velocidad (y es mejor que un usuario vea algo en lugar de la pantalla blanca de miedo). por encima del pliegue y mejora la interactividad también ayudará a mantener un buen índice de velocidad. Para medir la estabilidad visual, Google utiliza el cambio de diseño acumulativo (CLS) de las señales de experiencia de la página. CLS mide cambios repentinos en una página que no son deseados por un usuario, como ventanas emergentes o anuncios intrusivos que arruinan la experiencia del usuario:
Ilustración CLS – Fuente: En caso, por lo tanto, una buena puntuación significa una buena estabilidad visual y puede afectarlo positivamente. Mantener uno bueno es excelente para el rendimiento, pero también para el marketing. Veamos cómo. Cuatro beneficios de marketing para mantener un índice de alta velocidad 1. Reduzca bien la tasa de rechazo, imagine que intenta acceder a un sitio web, pero en lugar de ver cualquier contenido de inmediato, mire una pantalla vacía. ¿Qué estás haciendo? Te vas. Este escenario (que todos queremos evitar) se llama “un salto”. Alguien visita su sitio y se va de inmediato, sin interactuar con su sitio. Si reduce el índice de velocidad, los usuarios que visiten su sitio estarán dispuestos a quedarse más tiempo en el sitio y visitar más páginas. 3. Aumente las tasas de conversión Cuando un usuario pasa tiempo en su sitio debido a una buena velocidad, tiene otro beneficio: es más probable que compre. Responda sus necesidades: encuentre la respuesta o el producto deseado lo antes posible. 4. Mejore el SEO si sus visitantes disfrutan de la experiencia de estar en su sitio, y a Google le gustará y lo recompensará con una mejor posición en los resultados del motor de búsqueda.
Cómo medir el índice de velocidad del faro es una herramienta de código abierto que ayuda a los desarrolladores a medir el índice de velocidad y otros valores de rendimiento. El instrumento automático crea informes en profundidad sobre velocidad, rendimiento, accesibilidad, UX y SEO. Siga nuestra guía completa que explique cómo mejorar su puntaje de rendimiento del faro en WordPress. Para medir el índice de velocidad y la puntuación de rendimiento general, puede usar Google PageSpeed ​​Insights y Gtmetrix, dos instrumentos populares impulsados ​​por la tecnología Lighthouse. Uso de Google PageSpeed ​​(PSI) para medir el valor y:

Usar gtmetrix para obtener la nota y:

Ambas herramientas ofrecen una puntuación diferente, pero ambas están en el área verde:
Puntaje y (psi): 0.8 s
Puntaje y (gt meCox): 1.1 s

La realización de una auditoría de rendimiento no siempre es fácil. Consulte nuestra guía completa sobre pruebas y pruebas de rendimiento y velocidad. Lo ayudará a identificar las herramientas que necesita y cuáles son los umbrales aceptables para cada medida. Las causas de una puntuación y la alta se pueden identificar en la sección de diagnóstico de Google PageSpeed ​​Insights. Por lo general, tenemos cuatro problemas principales que contribuyen a una puntuación débil, a saber:

Javascript y JS no utilizado JS

Tiempo de ejecución de JavaScript
Trabajar en el hilo principal
Código de tercera parte
Debido a las secciones “oportunidades” y “diagnóstico” generados por Lighthouse, puede encontrar cómo mejorar su nota de rendimiento. Su enfoque reducirá drásticamente la calificación del índice de velocidad y aumentará la experiencia general de su sitio de WordPress. Nuestro objetivo es simple: queremos que el visitante vea el contenido por encima de la página lo antes posible. Para mejorar el índice de velocidad, enumeramos las principales recomendaciones de PSI:
Eliminar los recursos que bloquean la representación
Minimizar el trabajo con el hilo principal (minimice las tareas del navegador)
Reducir el tiempo de ejecución de JavaScript
Asegúrese de que el texto permanezca visible durante las cargas de fuentes web (use fuentes personalizadas)
Eliminar js sin usar

Reducir el impacto del tercer código parcial
Evite encadenar solicitudes críticas
Precarga las solicitudes de clave
Mantenga el número de solicitudes bajas y pequeñas dimensiones de transferencia
Reducir los tiempos de respuesta TTFB y del servidor
Asegúrese de usar imágenes para cargar archivos en el formato correcto
Ahora veamos cómo implementar cada uno de ellos. Cómo mejorar el índice de velocidad: 8 Consejos de rendimiento Hay ocho técnicas de rendimiento a seguir para mejorar la velocidad y la velocidad general de su sitio de WordPress, a saber:
Posponse js
Retrasar JS y eliminar JS no utilizado
Minimiza JS y minimiza CSS
Optimizar la entrega de CSS y eliminar CSS sin usar
Optimizar imágenes + carga perezosa
Utilice la compresión de datos
Use un CDN
Precargar y optimizar las fuentes
Investigamos cada uno de ellos. 1. Los archivos JS JS posponen se cargarán después de que el navegador haya mostrado el contenido más relevante. Este proceso permite al navegador cargar todo el contenido sin esperar a que se carguen las Escrituras. Posponiendo los archivos JS, priorizados y el tipo de contenido que desea mostrar primero. En nuestro caso, debemos centrarnos en cualquier cosa por encima del pliegue: todos los JS no esenciales debajo del pliegue deben posponerse. Problemas reportados por Lighthouse: “Elimine los recursos que bloquean la obra”, “Elimine JavaScript” y “evite encadenar las solicitudes críticas”. Reproducción de JavaScript usando complementos populares: WP Rocket tiene una opción para posponer archivos JS WordPress, como se muestra a continuación:
Cargue la función JS de aplazamiento – Fuente: WP Rocket Dashboard
Limpieza de activos: este complemento gratuito escanea y detecta el contenido que se cargará en la página. Simplemente seleccione el código CSS o JS que no debe representarse primero. El autor del complemento recomienda el uso de la limpieza de activos con un caché como WP Rocket para obtener los mejores resultados de rendimiento.
Pack Speed ​​Booster – pospone archivos JS después de que se reproduce todo el HTML.
Async JS: le brinda control sobre los scripts que desea agregar un atributo de “aplazamiento”.
APUESTO DE JAVASCRIPTO USO MODO MANUAL
Atributo de diferir: use los atributos booleanos “diferir” para la etiqueta del script en HTML y pospondrá las JS que desea apuntar. Con el atributo de deferencia activado, el archivo de script se descarga en paralelo, mientras que el documento HTML todavía se analiza. Lo bueno es que el script no se realiza hasta que se complete el análisis HTML.
Cómo funciona el atributo de diferir – Fuente: jozeffacek.cz 2. retrasar JS y eliminar la ejecución de JS JS no utilizada JS y eliminación JS no utilizado le permite mejorar el rendimiento y la puntuación y. La pestaña de cobertura de Chrome DevTools puede ayudarlo a encontrar el código JavaScript no utilizado:

Un código que cubre la fuente del informe: DevTools Otra forma de realizar la auditoría e identificar el JS para optimizar es el uso de PSI o GTMetrix:
Función en cascada para identificar los scripts más difíciles JS – Fuente: Problemas de GTMTrix informados por Lighthouse: “Reduzca JS sin usar” y “evite encadenar aplicaciones críticas”. Soluciones manuales:
Cree un retraso en la ejecución de JS con la función del método setTimeOut (). Esto llamará a una función después del tiempo que especifique en MS. Puede usar esos fragmentos de código para retrasar las funciones JS de su elección.
Nota: Lighthouse señala cualquier archivo con más de 20 kb de código JS no utilizado, por lo que el retraso manual de cada archivo JS puede ser un poco decepcionante. Use un complemento de WordPress para retrasar JS:
Scripts de vuelo: un complemento para retrasar JS y proporcionar recursos de archivo JS más críticos. Ayuda a priorizar el contenido de JS para ser cobrado de prioridad.
WP Meteor: un complemento para posponer los guiones JS y mejorar enormemente la velocidad percibida por los visitantes.
Gonzales: permite la desactivación condicional de CSS y JS.

Perfmatters-Helps para acelerar su sitio desactivando los scripts que no se pueden usar.

Retraso js con perfmatters

Organizador de complementos: modifica el orden en el que se cargan los complementos. La limpieza de activos: le permite seleccionar CSS/JS que no son necesarios para la carga.
Cache WP Rocket Plugin: la mejor solución sin interrupciones. Con el complemento WP Rocket, la función JS JS se utiliza para reducir el JS no utilizado. Puede retrasar fácilmente los archivos JS con un solo clic:
El retraso en la función de ejecución de JavaScript en WP Rocket 3.9 3. Minimiza la minificación JS y CSS es el proceso de eliminar todos los caracteres innecesarios en el código JavaScript sin cambiar su funcionalidad. En inglés simple, la minimización del código significa eliminar cualquier signo de puntuación innecesario y desordenado, como nuevas líneas, comentarios, espacios, puntos y coma, etc. La reducción de la hinchazón lanzará el tiempo para el hilo principal. Nuevamente, se trata de hacer espacio y tiempo para el contenido por encima de la página. Problemas identificados por Lighthouse: “Reduzca el tiempo de ejecución de JavaScript”, “Minimice el trabajo del hilo principal”, “Minify JS” y “Minify CSS”. Aquí hay algunas opciones para usted.
Minimización manual del código: IMPORTANTE: Le recomendamos que tenga una copia de seguridad de su sitio o archivo que desea comprimir. Es mejor hacer tal manipulación en un entorno de desarrollo. Si no es amigable con la tecnología, le recomendamos que use un complemento.
Use un editor de texto como texto sublime o código de Visual Studio.
Abra el archivo que contiene su código y elimine los comentarios, espacios blancos, nuevas líneas y hendiduras.
Acorta los nombres de las ID, clase o variables tanto como sea posible y optimice sus declaraciones condicionales.

Guarde el archivo nuevamente. Minimando el código utilizando una herramienta en línea:
Vaya a minifycode.com y abra la pestaña de su elección: JS, CSS, HTML, etc.
Pegue el código de su archivo al campo principal y haga clic en el botón Minify JS.
El instrumento JS Minifier – Fuente: MinifyCode.com Las mejores herramientas de minería JS y CSS:

Compilador de cierre de Google, una opción sólida para considerar, analizar y analizar JavaScript, reescribe el código cuando sea necesario y minimiza JS después.

UglifyJS minimiza, analiza y optimiza JavaScript.
AutoPtimize es una opción muy popular para la optimización CSS y JS.
La herramienta de compresor YUI de Yahoo es una herramienta de minimización CSS y JavaScript.
WP Super Minify combina, minimiza y memoriza archivos JavaScript y CSS en caché
CSS Nano (preprocesador CSS)
CSSO (preprocesador CSS)
UNCSS (preprocesador CSS)
WP Rocket le permite reducir los archivos JS y CSS en unos pocos clics como se muestra a continuación:

Función de reducción de archivos de JavaScript – Dashboard WP Rocket
Función de reducción de archivos CSS – WP Rocket. Dashboard 4. Optimizar la entrega de CSS y reducir la CSS sin usar de WordPress es un gran ecosistema, y ​​la mayoría de los temas proporcionan muchos efectos de aspecto y diseño, lo que conduce al uso de muchos CSS. La cuestión es que todos necesitamos CSS porque es el código que da forma a nuestro contenido web. Por un lado, no queremos un sitio web feo de la década de 2000, pero al mismo tiempo, tenemos que proporcionar un buen rendimiento. Se trata de encontrar el equilibrio perfecto y optimizar cómo se reproduce/entrega el CSS en su página. Los archivos CSS afectan el tiempo de carga de su sitio y debe abordar el problema para mejorar el rendimiento y la puntuación y. Veamos diferentes tácticas para optimizar la entrega de CSS. Problemas identificados por Lighthouse: “Mínimo El trabajo del hilo principal”, “Reduzca CSS sin usar”, “Elimine CSS que bloquea la representación”. Soluciones manuales: Combine, comprime y alinee sus scripts CSS: significa que las páginas no se cargan con archivos CSS separados. En cambio, toda la información de estilo requerida para una página se incluye con la página (y no se cargará una hoja de estilo innecesaria).
Prioriza las reglas CSS: los contenidos por encima de la página deben cargarse primero.
Retire/reduzca el CSS no utilizado, viajando su código.
Los complementos de WordPress que puede usar para optimizar la entrega de CSS:
Optimización automática: simplemente active la casilla de verificación “Optimización del código de bacalao” desde el tablero de WordPress.
Acelera – Optimiza la entrega de CSS – Bueno, ¡está en nombre!
El complemento WP Rocket Cache: lo ayuda a optimizar su entrega de CSS eliminando CSS no utilizado directamente de la pestaña Optimización de archivos. Si la función no funciona para usted, puede elegir la función de carga CSS asincron. Optimizar el cohete CSS Delivery-WP. Optimice las imágenes y use la función de carga perezosa para optimizar las imágenes de su sitio porque son una de las fuentes más grandes de la fuga más grande de Tiempo de carga. Afortunadamente, hay algunas herramientas que lo ayudan a cambiar el tamaño y comprimirlas sin una pérdida perceptible de calidad. Otra forma de optimizar sus imágenes es implementar una carga perezosa en ellas. Es un conjunto de técnicas que posponen la carga de imágenes en una página más adelante, cuando esas imágenes deben ser visibles para el usuario. Problemas identificados por Lighthouse:
El tamaño correcto de las imágenes: cambie el tamaño de las imágenes grandes a las dimensiones correctas.
Codificar las imágenes de manera efectiva, significa que debe comprimirlas.

Servir imágenes en formatos de nueva generación – Convertir JPEG/PNG a WebP.

Posponga las imágenes fuera de la pantalla: imágenes de carga perezosa e imágenes de fondo.
Cambiar el tamaño de las imágenes manualmente con aplicaciones y herramientas en línea:
GIMP – GRATIS para Windows y Mac.
Vista previa para Mac: es gratuita y ya está instalada.
Photoshop: puede ser abrumador, pero es el software de diseño más completo.
Befunky: un software de diseño gráfico basado en la web.
Picmonkey.com-edit y producir contenido visual, incluidos logotipos.
Pixlr.com – Editor de fotos gratuito y fácil de usar.

Fotor.com-una plataforma de creación visual todo en uno.
Photopea-abre un archivo PSD gratuito (Photoshop) directamente desde el navegador. Compresión de herramientas en línea antes de cargarlas en su sitio de WordPress:
GIMP (opción de escala de imágenes)
Photoshop (opción de rescate web)
JPEG Optimizer (opción de compresión básica)
Tiny PNG (opción de compresión inteligente con pérdidas)
Jpeg.io (opción de optimización avanzada JPEG)
Optimización de imágenes con un complemento de WordPress (imágenes existentes y nuevas):
Imagify-La herramienta más avanzada para optimizar las imágenes con un solo clic: Obtenga imágenes más fáciles sin perder calidad, convierte WebP y comprimirlas en el bloque (función de optimización a granel). Imagify puede optimizar todos los formatos de imagen: JPG, PNG, PDF y GIF. Imagify es gratuita para aproximadamente 200 imágenes, entonces tendrá que actualizar a la versión premium.
Imsanity: coloque un límite de carga en su biblioteca de WordPress y cambie automáticamente las grandes imágenes. También comprime las imágenes JPG en el proceso de cambio de tamaño utilizando la compresión estándar de WordPress. Sin embargo, continúan recomendando el uso de un complemento más orientado a la compresión, como EWWW Image Optimizer o Imagify.
EWWW Image Optimizer: automatiza todo, y las imágenes se comprimen automáticamente, se escalan para que coincida con la página y se conviertan en el formato de próxima generación.
Aplique la tarea perezosa en las imágenes utilizando un complemento de WordPress:
ROCKET DE LABO DE WP: una ayuda gratuita para arados desarrollados por nosotros, aplicando el guión de carga perezosa. También puede reemplazar los iframes de YouTube con una miniatura de vista previa para acelerar su sitio.

IMPORTANTE: El complemento de caché de cohetes WP viene con la función LazyLoad, por lo que si ya es un usuario de WP Rocket, no necesita un complemento de carga perezosa por WP Rocket.

WP Rocket: nuestro complemento de caché también viene con una carga perezosa para fotos y videos, como puede ver en la pestaña de medios a continuación:
Característica LazyLoad – Dashboard de WP Rocket
Otros complementos de carga perezosa: eche un vistazo al artículo que escribí sobre los mejores complementos que puede usar para implementar la función de carga perezosa.
6. La compresión de compresión de datos es el proceso de reducir las dimensiones del archivo en su sitio web para mejorar su puntaje de rendimiento. Es simple: a medida que envía archivos más fáciles al navegador, el tiempo de juego será más rápido. La sintaxis HTML es repetitiva y utiliza etiquetas como
, , ,
, por lo tanto, puede ser útil usar un método llamado “compresión GZIP” para comprimir y descomprimir el código. Activación de compresión GZIP utilizando un complemento de WordPress:
El complemento de compresión GZIP le brinda el poder de activar y deshabilitar la compresión GZIP en su sitio web de WordPress.
WP Rocket activa la función GZIP en el archivo .htaccess utilizando el módulo mod_deflated incluso después de activar el complemento. Una vez más, puede optar por nuestra solución todo en uno en lugar de instalar múltiples complementos.
7. Use un CDN (red de entrega de contenido) Un CDN le permite distribuir los archivos de múltiples servidores ubicados en diferentes lugares del mundo. Debido a este sistema, se mejora el tiempo de carga de su sitio, especialmente para los visitantes internacionales. Uso de un complemento de WordPress para activar su cohete CDN: WP tiene dos opciones:
1. Suscríbase por $ 7.99/mes a Rocketcdn. El CDN se configura automáticamente con el resto de las funciones de cohetes WP, que es muy conveniente. 2. Integre su propio CDN directamente en el tablero de WordPress.
Se muestran ambas opciones de CDN – Fuente: pestaña CDN en el cohete WP 8. precarga y optimice las fuentes de precarga de fuentes significan que “solicita” al navegador de un visitante para cargar fuentes importantes y retrasar todas las secundarias. El índice de velocidad se basa en lo que está sucediendo por encima del pliegue, por lo tanto, la precarga de las fuentes asegura que el contenido visible se muestre correctamente para los visitantes. Las fuentes web personalizadas también pueden causar cambios de apariencia repentinos y a Google realmente no le gusta. En realidad, sus visitantes pueden enfrentar dos problemas principales:
Fout (el estilo no se aplica, por lo que la fuente no es atractiva)
FOIT (texto invisible y alto tiempo de espera para ver la fuente en la pantalla)
Para mantener una buena experiencia de usuario y evitar tales casos, le recomendamos que precarga sus fuentes web. Problema identificado por Lighthouse: “Solicitudes de clave de precarga” y “Asegúrese de que el texto permanezca visible durante la carga de fuente web”. Usando una solución manual para precargar las fuentes: puede usar la etiqueta y los atributos rl = “precargar” para pedirle al navegador que precarga la fuente. Ejemplo de la vida real: ¿Dónde poner la etiqueta re = “precargar”? Entre las etiquetas de cabeza de HTML para cada script CSS y archivos de fuentes cargados en el sitio. Usando un complemento de WordPress para precargar las fuentes: use el cohete WP para precargar las fuentes. Vaya a la pestaña “precarga”, ejecute a “fuentes de precarga” y simplemente especifique las direcciones de URL con fuentes que desea precargar:
Fuentes de precarga – Dashboard WP Rocket Cómo aumentar el índice de velocidad del cohete WP: resultados antes y después de que puede reducir su nota del índice de velocidad usando WP Rocket, el mejor caché de WordPress. De hecho, cualquier cosa se refiere a la optimización de los archivos JS/CSS y la precarga de las fuentes probablemente mejorará. Buenas noticias: ¡cada característica de WP Rocket ha sido diseñada para el rendimiento web! No crees la palabra. Permítanos mostrarle cómo funciona un sitio web antes y después de usar WP Rocket. Analizando el impacto del cohete WP en la partitura y realizamos una auditoría de rendimiento para un catering francés llamado “Le Point Gourmand …” utilizando Google PageSpeed ​​Insoight. Echemos un vistazo a nuestros hallazgos. Tr>

Puntuación del faro antes del cohete WP: 51/100
En naranja: TTI era de 7.0 s, TBT era 480 ms

En rojo: el índice de velocidad fue de 6.0 sy LCP 7.1 s
Puntuación del faro en WP Rocket WP Activación: 95/100
En verde: TTI, FCP, TBT, CLS y … Índice de velocidad!
Mi sitio no estaba en una muy buena forma antes de activar el cohete WP y PSI identificó muchos problemas: PSI:
Problemas identificados por Lighthouse (extracto) – Activación de PSI de las funciones de rendimiento del cohete WP en la activación del cohete WP, activó algunas opciones y siguió la lista de técnicas de optimización recomendadas en la sección anterior. A continuación se presentan todas las opciones de cohetes WP que han estado en el área verde:
Optimización de mis archivos JS (carga JS cargada, retraso en la ejecución de JS y eliminación de JS no utilizada) la pestaña de optimización de archivos JS – WP Rocket
Minimizar, combinar archivos CSS y optimizar la entrega de CSS:
Optimización de los archivos CSS – Dashboard WP Rocket

Eliminación/reducción de CSS no utilizada:
Eliminar/reducir el CSS no utilizado – WP Rocket
Panel antes de usar WP Rocket, se han identificado dos oportunidades: “Reducción de CSS no utilizada” y “Reducir los problemas de JS”. Después de optimizar Mis archivos con WP Rocket “Reducir CSS sin usar” y “Reducir los problemas JS” ahora están en la sección de auditoría aprobada.

Compresión de imagen. Utilicé la configuración “agresiva” Imagify para la segunda auditoría:

Uso del nivel “agresivo” – Fuente: Imagify Dashboard

Precarga de fuentes:

Agregar fuentes para precargar en el tablero de cohetes WP de acuerdo con el PSI


La lista de “auditorías pasadas” ha aumentado después del uso de WP Rocket – Fuente: PSI








Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

gkOVSBm5B8SgiXmo

Shopify vs WooCommerce – ¿Cuál es la mejor plataforma?(Comparación)

Shopify vs WooCommerce

Leave a Reply

Your email address will not be published. Required fields are marked *

Conclusión al activar WP Rocket: mi lista de “publicaciones anteriores” es mucho mejor y muchos problemas como “minificar JS”, minimización principal principal -Shread Work “,” Eliminar JS no utilizado “o” eliminar los recursos de bloqueo de renderizado “han desaparecido. Mi puntaje y está en el área verde.