homefinance blog
Si es un usuario de WordPress, le recomiendo que el sitio sea prioritario. Al proporcionar páginas de carga rápida a los visitantes, mejorará sus motores de búsqueda, aumentará el tráfico en el sitio y brindará a los lectores una excelente experiencia de usuario. Una parte clave de la optimización de un sitio web es el análisis de páginas web que utilizan herramientas de evaluación de rendimiento comparativas, como Google PageSpeed Insights, Gtmetrix y Pingdom Sitiop Speed Speed Test. Estos servicios evaluarán el rendimiento de una URL, confirmarán el tamaño de la página y confirmarán cuánto tiempo dura la página.
Informe de rendimiento de GTMTrix para wordpress.org.
Las herramientas para la evaluación comparativa de rendimiento no solo analizan sus páginas web, sino que también muestran lo que debe abordarse para mejorar el tiempo de carga de la página. Por ejemplo, se le puede recomendar que elimine el código CSS no utilizado o reduzca el peso de las imágenes en su sitio web. Una recomendación que verá con frecuencia es eliminar los recursos que bloquean la representación de WordPress. En este artículo, explicaré cuáles son los recursos que bloquean la representación en WordPress y mostraré cómo puede mejorar el tiempo de carga de su sitio eliminándolos.
¿Cuáles son los recursos para bloquear en WordPress? La optimización del sitio se refiere a la entrega de las páginas de su sitio a los visitantes lo antes posible. Una página típica contiene muchos elementos diferentes.>
Una página web típica usa HTML, CSS y JavaScript. Cuando alguien visita una página en su sitio, su navegador procesará el código de página de arriba hacia abajo. Esto generalmente se llama “Renderización de la página”. Si el navegador está pidiendo archivos CSS o JavaScript, debe detener la representación de la página y descargar estos archivos CSS y JavaScript antes de ser procesados. Por lo tanto, estos recursos se consideran “bloqueando la lesión”, porque detienen el proceso de representación de la página. Los recursos de bloqueo de la carrera aumentan el tiempo requerido para que el navegador muestre al usuario el contenido principal, que es una importante medida de clasificación de motor de rendimiento y clasificación que Google llama First Meningful Paint (FMP). Tenga en cuenta que el texto y las imágenes no bloquean la representación y no todos los archivos CSS y JavaScript bloquean la representación. Tienden a ser archivos CSS y JavaScript que ralentizan la página.
Cómo identificar los recursos que bloquean la fila en WordPress Ranning Resources en WordPress se pueden identificar fácilmente utilizando herramientas de evaluación de rendimiento comparativas. Todo lo que tiene que hacer es ingresar la URL de la página que desea probar. Google PageSpeed Insights destaca el tiempo total que los recursos de bloqueo de recubrimiento se suman a la primera imagen de su página a continuación, verá un desglose que muestra la URL de cada recurso que bloquea la línea y el tamaño del archivo. También muestra qué tan rápido se puede cargar su página si se elimina el recurso de bloqueo de la resurrección. Los recursos de bloqueo Randy se destacan en Google PageSpeed.
GTMetrix también enumera cada recurso que bloquea la línea, el tamaño del archivo y el tiempo para descargar el archivo.
Los recursos que bloquean la representación se destacan en GTMetrix.
Aunque la prueba de velocidad del sitio de Pingdom no tiene una sección específica que resalte los recursos que bloquean la representación, puede ver qué causa la desaceleración de las páginas en el área de “solicitudes de archivo”. Destacará los recursos que bloquean la representación, como los iconos, fuentes y archivos de JavaScript. El archivo del archivo, el tamaño del archivo y el tiempo de descarga se muestran para cada recurso. El área de solicitud de archivo también es útil para ver qué imágenes aumenta el tiempo de carga de la página.
Las solicitudes de archivo se muestran en la prueba de velocidad del sitio de Pingdom.
Debido a que WordPress requiere diferentes archivos CSS y JavaScript en su sitio web, es importante ejecutar pruebas de rendimiento para varias páginas, de modo que se detecten todos los recursos que bloquean la representación. Por ejemplo, puede ejecutar pruebas de rendimiento para áreas clave de su sitio web, como su página de inicio, índice de blog, publicación de blog, página y página de contacto. Identificación de recursos críticos Un recurso se considera crítico si es necesario mostrar la primera imagen de una página web. Todos los demás recursos se consideran poco críticos. Una de las formas más simples de identificar recursos críticos es utilizar la pestaña de cobertura de Chrome DevTools. Resalte exactamente qué porcentaje de archivos se necesitaban para mostrar la carga inicial de la página correctamente. El estilo crítico se muestra en verde, mientras que el estilo necrítico se muestra en rojo. En la captura de pantalla a continuación, puede ver que en WordPress.org, no se utiliza un alto porcentaje de código de los archivos CSS y JavaScript que bloquean la representación. Esta situación es más grave en muchos sitios de WordPress, la prueba de cobertura que destaca varios archivos en los que el 100% de cada archivo no se usa.
La pestaña de cobertura de Chrome se puede utilizar para identificar recursos críticos.
Eliminar el CSS que bloquea la fila en WordPress usando llamadas en línea Google recomienda mover todo el código esencial de los recursos que bloquean la fila en una llamada en línea en su página HTML. El estilo que es esencial para la primera pintura de una página se puede definir utilizando un bloque de estilo en la sección principal de su página, mientras que las funciones esenciales de JavaScript se pueden llamar en línea en su página utilizando etiquetas de script. En una plataforma dinámica, como WordPress, donde el código CSS y JavaScript se agrega a un sitio web a través de temas y arados, puede ser imposible mover manualmente el estilo crítico. Como tal, muchos usuarios de WordPress usan servicios como nitropack y CSS crítico, de modo que las hojas de estilo críticas se muestran automáticamente y se muestran en línea en la sección principal. Instantrias automáticas críticas de CSS aseguran que las hojas de estilo crítico se muestren en línea.
Si el estilo del sitio se encuentra en archivos CSS pequeños, puede usar el complemento de rendimiento de limpieza de activos de WordPress para integrar automáticamente el estilo de las hojas de estilo pequeño.
La limpieza de activos le permite ingresar automáticamente archivos CSS pequeños.
Elimine JavaScript que bloquea la fila de WordPress utilizando Async y diferir los recursos de JavaScript que bloquean la fila de WordPress se puede eliminar utilizando dos técnicas llamadas async y diferir. Ambos métodos permiten que el navegador continúe reproduciendo la página, mientras que los archivos CSS y JavaScript que bloquean la línea desde la página de arriba de WordPress se descargan en segundo plano.
Puede ser preferible usar async o diferir en una página, por lo que es importante probar ambos y ver qué técnica ofrece los mejores resultados. Sin embargo, notará una reducción en los tiempos de carga de la página, independientemente del método que use. Archivos tan pronto como estén disponibles
async y aplazan los archivos de ejecución en diferentes momentos. Async y Difer se pueden aplicar a todo el sitio web utilizando un complemento de rendimiento de WordPress. En mi blog personal, utilizo el complemento Async JavaScript para posponer JavaScript en las páginas. Desarrollado por el creador de AutoPtimize Frank Goossens, Async JavaScript le permite aplicar Async y diferir a los archivos JavaScript y le brinda la opción de aplicar diferentes configuraciones de archivos JQuey. El experto en configuración del complemento ejecutará múltiples pruebas en GTMTRIX para determinar la mejor configuración.
Elegí JavaScript Async, ya que se aplica automáticamente a Async o diferir a mi sitio.Este es, sin duda, el enfoque más simple para eliminar los recursos que bloquean la fila de WordPress, pero puede ver mejores resultados con WordPress HTTP/2 Push PRELOAD.Una vez que haya identificado recursos que bloqueen la reproducción en su sitio web de WordPress utilizando el instrumento de cobertura de Chrome o un servicio de evaluación de rendimiento comparativo, tal precarga basada en el archivo con el archivo.Si está dispuesto a probar el Async y diferir el rendimiento para cada archivo, podrá encontrar la mejor técnica para cada recurso.Esto puede conducir a un mayor descuento en los tiempos de carga de la página. HTTP/2 Push PRELOAD le brinda un excelente control sobre cómo se cargan los archivos JavaScript.
