Medición del rendimiento de WordPress utilizando herramientas de desarrolladores de Chrome

Esta es una publicación para los invitados. Las opiniones y recomendaciones son del autor. Nosotros, la gente de Savvii, amamos los sitios web de carga rápida tanto como tú y las personas detrás de WP Rocket. Si su sitio no es tan rápido como quiere ser, es hora de mejorar. Antes de mejorar, debe medir el tiempo de carga actual. En este artículo, le mostraré cómo identificar fácilmente bloques y errores en su sitio web de WordPress con herramientas de desarrollo de Chrome en unos minutos. Cómo abrir las herramientas de desarrollo en primer lugar, navegue en Chrome en la página que desea probar. Presione el comando+opción+I (Mac) o control+Shift+I (Windows y Linux). Verá el panel de instrumentos de desarrollo abierto. Haga clic en la pestaña “Red”, aquí está la magia.
Emular a sus usuarios Cuando pruebe un sitio web, es importante replicar la conexión y el dispositivo que usan los usuarios de sus herramientas de desarrollo tienen algunas opciones hermosas para ello. Puede elegir su conexión haciendo clic en “en línea”, ahora puede pasar a una conexión móvil 2G, por ejemplo. Al hacer clic en el icono del dispositivo, puede cambiar entre los dispositivos más comunes, siendo el escritorio la opción predeterminada. Consejo de bonificación: haga clic en el icono de la cámara para ver una cinta de cine. Esto visualizará su contenido para los usuarios tan rápido. Nota: Es más importante que un usuario lea y escanee un sitio lo antes posible que interactuar con una página.

Para almacenar o no en caché, es útil cambiar la caja “deshabilitar el caché”. Esto nos dará el tiempo de carga de la página sin ningún caché del navegador y, por lo tanto, nos dará una mejor información sobre dónde mejorar. La memorización de caché no siempre es posible para todas las páginas. Siempre es posible hacer clic derecho en las herramientas de desarrollo para eliminar las cookies y el caché del navegador. ¿En qué medida centrarse? Antes de hacer nuestra primera prueba, es importante explicar las métricas más importantes que los instrumentos le mostrarán: carga. El tiempo para “cargar” indica el momento en que la página está lista y disponible en la pantalla, incluidos todos los demás elementos que la página tiene que cargar, como imágenes, CSS y Escrituras. Y la pestaña de red está abierta en la herramienta Dev . Realice una recarga (las instrucciones son visibles en las herramientas de desarrollo). Chrome generará un diagrama de cascada para usted. Verá los resultados con diferentes activos cronometrados y se ve en un diagrama de cascada. Ahora sabemos exactamente cómo se carga esta página del navegador.
Encontrar primero a los culpables, veamos a qué hora tenemos para “cargar”. Tenga en cuenta este número y vea si podemos mejorarlo. Al verificar y reparar los elementos a continuación, deberíamos poder reducir algo de tiempo durante el tiempo de carga actual.

Reproduzca los scripts de bloqueo antes de que un navegador pueda decir qué mostrar en la página, tendrá que analizar todos los scripts que carga la página. Entonces, si coloca un archivo JavaScript en un encabezado de página, el navegador debe leer todo el código en este archivo antes de decidir qué jugar en la página. Estos scripts llegan tarde cuando un usuario ve algunos de su sitio en su pantalla. Para reducir la tasa de rechazo, es muy importante mostrar algo en la pantalla lo antes posible. Puede encontrar scripts para bloquear la reacción mirando la línea azul que indica “DomcententLoaded”. Los scripts que se cargan antes de esta línea probablemente bloquean la representación. Puede investigarlos haciendo clic en ese script y marcando la pestaña Vista previa. Trate de hacer estos guiones asincrónicos, muévalos cerca de la etiqueta de cierre del cuerpo (wprockt puede hacer esto por usted) o deshacerse de ellos por completo. Google ha escrito un excelente artículo sobre el bloqueo de renderizado frente a JavaScript asíncrono. El estado sospechoso bods de todos los activos que se descargan de un servidor vienen con un código de estado. Estos códigos estatales dicen mucho. Un código de estado de 200 significa “OK”. Desea que todos sus activos tengan un código de estado de 200. Puede encontrar códigos de estado sospechosos clasificando los activos en la pestaña de red de acuerdo con la columna de estado. Salta sobre los años 200 y concéntrese en los demás. Los códigos de estado que desea remediar son principalmente:
4xx – Errores del cliente, principalmente 404 (archivo no encontrado)
3xx – redirecciones, principalmente redireccionamientos 301 (permanente) y 302 (temporal)
5xx (errores del servidor)
Consulte HttpsStatuses para la lista completa. Grandes Lays no sorprenderá que las altas demandas sean malas. Son lentos y consumen mucho ancho de banda (especialmente para usuarios con suscripciones limitadas a teléfonos móviles). Ordene en la columna “Dimensión” para encontrar los activos más grandes. La mayoría de las veces estos grandes activos serán imágenes o archivos de video. Asegúrese de que el tamaño de la imagen coincida con las dimensiones de cómo las usa en su sitio y guárdalas con una cantidad de compresión que aún funcione para mirarlas. Un servicio como Imagify comprimirá estas imágenes aún más, mientras se verá bien.
Las solicitudes lentas altas demandas a menudo son lentas, pero las demandas lentas no significan que siempre sean altas. Por lo tanto, es una buena idea ordenar la columna “tiempo”. Las solicitudes lentas a menudo son scripts externos para el seguimiento o la funcionalidad específica. Puede ver en la columna del iniciador qué material ha solicitado descargar este material. Además, use la pestaña Vista previa para verificar el contenido del material si no está seguro de qué es. Los scripts externos son muy difíciles de optimizar. Si ralentizo demasiado su sitio, considere otro proveedor.
Cómo examinar los activos más profundos que ya hemos mencionado algunas cosas que puede hacer utilizando la pestaña Vista previa. Se merece su tiempo para explorar las otras pestañas: encabezados, respuesta, cookies y sincronización.

Los encabezados son útiles para verificar los encabezados en busca de declaraciones sobre el almacenamiento de caché. Hay diferentes formas de optimizar las estrategias de almacenamiento de caché. Google ha desarrollado un buen diagrama. Las políticas de almacenamiento de caché pueden ser establecidas por muchas entidades diferentes, incluidos tanto el servidor como el sitio en sí. Nosotros, las personas de Savvii, usamos el caché de barniz para acelerar su sitio. Si desea verificar si el barniz funciona correctamente en una página, esta información del encabezado puede salvar la vida. Al agregar información adicional a los encabezados, puede ver fácilmente si la página se sirve de barniz o no. Responder La pestaña Vista previa le mostrará la representación visual de un material (como HTML o una imagen) siempre que sea posible. La pestaña Respuesta le mostrará el código de activo (no disponible para imágenes). Cookies Esto es especialmente útil para verificar las cookies de phpSesid. Si tal cookie está presente, se usa una sesión. Esta sesión podría ser absolutamente necesaria, por ejemplo, si un usuario tiene un elemento en su carrito de compras. Si no ve una razón para usar una sesión, asegúrese de que no se inicie ninguna sesión. Las sesiones hacen que el almacenamiento en caché sea mucho más difícil.
Sincronización Debido a que estamos hablando de la optimización del tiempo de carga, la pestaña de sincronización es importante.En esta pestaña, verá los calendarios de las diferentes fases necesarias para descargar un material.Los más importantes para analizar son: en la cola, los materiales se pueden colocar en la cola, porque HTTP 1.0/1.1 puede administrar solo seis conexiones del mismo dominio en un momento dado.Si tiene muchos activos pequeños, esto puede retrasar su sitio.Busque reducir el número de activos (como el uso de sprites), use el intercambio de dominios (con un CDN, por ejemplo) o mejor: