GTmetrix Herramienta de Test de Velocidad (2019)

Hay un montón de opciones que tiene como propietario de un sitio web a la hora de ejecutar pruebas de velocidad para comprobar el rendimiento. Previamente echamos un vistazo en profundidad a la herramienta Pingdom. Hoy vamos a sumergirnos en entender y utilizar los datos del popular GTmetrix herramienta de test de velocidad. Las herramientas de este tipo se basan en sistemas de clasificación y puntuación, junto con las advertencias que describen los problemas en su sitio. En ocasiones, estos pueden resultar muy confusos y por tanto, tomar algún tiempo para interpretar lo que significan en realidad puede ayudarle no sólo aumentar su puntuación, sino también el rendimiento de su sitio, que es lo que realmente importa.

GTmetrix fue desarrollada por GT.net una empresa con sede en Canadá, como una herramienta para sus clientes de alojamiento para determinar fácilmente el rendimiento de su sitio. ¡Además de Pingdom, es probablemente una de las herramientas de velocidad más conocidas y utilizadas en la web hoy día! De hecho, la razón por la que estamos escribiendo esto es que tenemos un montón de clientes Kinsta que siempre nos preguntan cómo seguir los consejos que ven en sus informes GTmetrix. En comparación con otras herramientas de desarrollador, GTmetrix es bastante fácil de usar y el principiante puede entenderlo con bastante rapidez. Utiliza una combinación de Google PageSpeed Insights y YSlow para generar puntuaciones y recomendaciones.

La herramienta de test de velocidad GTmetrix

Opciones de análisis de GTmetrix

La versión básica de GTmetrix herramienta de test de velocidad es completamente gratuita y usted puede acceder a una serie de opciones simplemente al inscribirse para una cuenta. También tienen planes Premium, pero hoy en la publicación estaremos usando la versión gratuita. Si usted tiene una cuenta, puede especificar un número de opciones de análisis adicionales.

La primera es la posibilidad de elegir la ubicación en la que desea poner a prueba su URL. La ubicación física que usted elija es realmente muy importante ya que se refiere dónde su sitio web está alojado en realidad. Cuanto menor es la latencia, sus tiempos de carga serán más rápidos. Ubicaciones disponibles actualmente incluyen:

Dallas, EE.UU.
Hong Kong, China
Londres, Reino Unido
Mumbai, India
Sídney, Australia
São Paulo, Brasil
Vancouver, Canadá

Puede elegir qué navegador desee utilizar. Puede probar con Chrome (Desktop) y Firefox (Desktop). Versiones móviles están disponibles en sus planes premium. También le permiten cambiar la velocidad de conexión, lo que significa que puede simular diversos tipos de conexión para ver cómo afectan las cargas de la página.

Las opciones adicionales incluyen la posibilidad de crear un video. Esto puede ayudarle a depurar problemas ya que se puede ver cómo funciona la página. El Adblock Plus es una característica agradable. Si está ejecutando una red de anuncios de terceros, como Google Adsense, puede activar esta opción para ver el impacto total de anuncios sobre sus tiempos de carga.

Las opciones adicionales incluyen detener la carga de la prueba (en la que nos sumergiremos más adelante), poder enviar una cookie junto con su solicitud, utilizar la autenticación HTTP, la posibilidad de poner en la lista blanca y negra las direcciones URL, la resolución de la pantalla y la proporción de píxeles del dispositivo, y la anulación del agente de usuario.

Análisis con la Herramienta de Prueba de Velocidad GTmetrix

Una página web se compone de diferentes activos, como HTML, JavaScript, CSS y las imágenes. Cada uno de estos genera peticiones para representar lo que ve en su sitio web. Normalmente mientras más solicitudes haya, más lento su sitio web se carga. Eso no es siempre el caso, pero sí es cierto, en la mayor parte del tiempo.

A continuación, vamos a dividir cada sección de GTmetrix y explicar con más detalle lo que la información significa en lo que se refiere al rendimiento general de su sitio web y qué hacer acerca de las recomendaciones. Recuerde que no debe obsesionarse demasiado con las puntuaciones, más bien hacer mejoras de velocidad reales en su sitio.

Resumen de GTmetrix (puntuaciones de rendimiento y detalles)

Cuando ejecutas tu sitio web de WordPress a través de GTmetrix genera un informe de rendimiento que incluye tu «Grado de GTmetrix» y «Web Vitals».

El grado de GTmetrix se calcula a partir de dos métricas: Rendimiento y Estructura.

GTmetrix Performance es el puntaje de rendimiento de la herramienta de auditoría del sitio Lighthouse
GTmetrix Structure es una métrica de rendimiento patentada que mide el rendimiento general de una página.

En 2020, Google introdujo un conjunto estandarizado de métricas de rendimiento web y de experiencia del usuario llamado Web Vitals. Web Vitals consiste en una variedad de métricas, pero las que tiene en cuenta GTmetrix son Largest Contentful Paint (LCP), Total Blocking Time (TBT), y Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) es la cantidad de tiempo que tarda en cargarse la mayor parte de la página. En algunos sitios, la LCP puede ser una gran imagen de héroe, mientras que en otros sitios, la LCP puede hacer referencia al texto del cuerpo.
Total Blocking Time (TBT) es la cantidad de tiempo que una página se bloquea antes de que un usuario pueda interactuar con ella. El CSS y el JS de bloqueo de renderizado pueden tener un gran impacto en el TBT.
Cumulative Layout Shift (CLS) se refiere al desplazamiento de elementos mientras se carga una página. Por ejemplo, el diseño de una página que contiene tweets incrustados puede cambiar drásticamente a medida que la página se carga.

En nuestro ejemplo, estamos usando nuestro dominio de estudio de caso kinstalife.com, que está alojado en Kinsta. En nuestra primera prueba de velocidad, nuestro sitio registró las siguientes estadísticas.

GTmetrix Grado – B
Rendimiento de la GTmetrix – 85%
Estructura de la GTmetrix – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

Prueba de velocidad de GTmetrix para kinstalife.com.

Luego hicimos una prueba adicional y ahora nuestro grado de GTmetrix es «A»! ¿De qué va todo esto? Podrías notar esto también si estás corriendo tu sitio web a través de la herramienta de prueba de velocidad GTmetrix varias veces. Una de las razones por las que esto sucede es por el caching, tanto el cacheo del DNS como el del servidor. Averigua por qué más abajo en nuestro análisis de cascada.

Nuestra segunda prueba de velocidad con GTmetrix.

La página de resumen de GTmetrix también contiene una visualización de la velocidad, que muestra una línea de tiempo de los eventos clave durante una carga de la página. En la siguiente captura de pantalla, puedes ver TTFB, FCP, LCP, tiempo de carga, tiempo de interactividad y tiempo de carga completa para kinstalife.com.

En la parte inferior de la página de resumen, también hay secciones de «Temas principales» y «Detalles de la página». En «Temas principales», puedes ver una lista de elementos de alta prioridad para corregir, mientras que «Detalles de la página» proporciona desgloses de porcentaje y tamaño de archivo de tu página.

Temas principales de GTmetrix y detalles de la página.

Rendimiento

A continuación está la pestaña «Rendimiento» de GTmetrix, que muestra una serie de útiles métricas extraídas de los datos de rendimiento de Lighthouse. Además de los LCP, TBT y CLS que se muestran en la página de resumen, la sección «Performance Metrics» también muestra el índice de velocidad (SI), el tiempo de interactividad (TTI) y el primer contenido de pintura (FCP).

Mientras que la sección «Performance Metrics» no te muestra exactamente lo que necesitas arreglar, sí da una buena visión general sobre qué métricas clave de la experiencia del usuario puedes mejorar.

Más abajo en la página, GTmetrix también muestra algunas estadísticas más tradicionales de «Tiempo de Navegación» incluyendo Tiempo de Carga, Tiempo al Primer Byte, Tiempo de Carga Completa, y más. En el pasado, estas métricas tradicionales eran muy importantes. Sin embargo, con Google allanando el camino con métricas estandarizadas con Web Vitals, recomendamos la optimización para ellas en su lugar. En la mayoría de los casos, verá que la optimización para Web Vitals también resultará en una buena métrica de tiempo de navegación.

Métricas de tiempo de navegación de GTmetrix.

Estructura

La pestaña de «Estructura» de GTmetrix es donde puedes ver los problemas específicos que afectan al rendimiento de tu sitio. Esta página es muy útil porque te proporciona información procesable como «eliminar los recursos de bloqueo de renderizado» y «minificar el CSS» para empezar a optimizar tu sitio.

Intentaremos cubrir los más comunes y populares con los que vemos que los propietarios de sitios de WordPress tienen dificultades. Asegúrate de marcar también este post ya que lo actualizaremos constantemente. Generalmente, si mejora estos en tu sitio, deberías ver un aumento en el rendimiento.

Servir Imágenes Escaladas

Cuando se trata de trabajar con imágenes en su página web, siempre debe intentar subirlas de forma escalada y no dejar CSS que redimensione su tamaño. De lo contrario terminará con la advertencia servir imágenes escaladas. Si está usando WordPress, por defecto se ajusta el tamaño de las imágenes al subirlas a la biblioteca multimedia. Estos ajustes se pueden encontrar en «Ajustes > Medios». Usted querrá asegurarse de que el ancho máximo esté cerca a la anchura de su sitio. De esta manera CSS no estará intentando cambiar el tamaño de la imagen para que se encajen. También puede redimensionarlas automáticamente con un plugin de optimización de imagen.

Poner en Línea CSS Pequeños

Poner en línea sus CSS generalmente no se recomienda ya que aumentará el tamaño de descarga total de la solicitud de página. Sin embargo, si el sitio es pequeño, con solicitudes mínimos, podría mejorar su rendimiento.

Para alinear fácilmente tu CSS puedes usar un plugin gratuito como Autoptimize. Simplemente marque la opción de la casilla «Inline todos CSS?» y después, asegúrese de que se haya excluido los archivos CSS adicionales que no pone en línea.

Inline JavaScript Pequeño

Al igual que con poner inline CSS pequeños, lo mismo se aplica para poner inline pequeños JavaScripts. Generalmente no es recomendable, ya que aumentará el tamaño de descarga total de la solicitud de página. Sin embargo, si el sitio es pequeño, con pocos solicitudes, podría mejorar su rendimiento. De nuevo, puedes usar la configuración de JavaScript de Autoptimize.

Leverage Browser Caching

Leverage browser caching es una recomendación muy común y un problema para muchos. Esto se genera debido a que no tiene los encabezados de cache HTTP correctos en su servidor web. Vea nuestra publicación en profundidad sobre cómo resolver los errores de leverage browser caching. Sólo puede corregir esto en los recursos que usted controla. Por ejemplo, si está viendo esto en las redes publicitarias de terceros, no hay nada que usted pueda hacer.

Servir Recursos desde una Dirección URL Coherente

Si se está viendo “serve resources from a consistent URL” lo más probable es que haya recursos idénticos siendo servidos desde la misma URL. Muchas veces, esto puede suceder cuando hay cadenas de consulta involucradas. Compruebe cómo retirar las cadenas de consulta de recursos estáticos. Una vez que se han ido, ya no deberían cargarse dos veces.

Aplazar el análisis de JavaScript

JavaScript y CSS son bloqueadores de visualización por defecto. Esto significa que pueden impedir que la página web se muestre hasta que se descargue y sea procesada por el navegador. El atributo defer indica al navegador que aún no descargue el recurso hasta que se complete el análisis de HTML. Algunas maneras fáciles de solucionar este problema es utilizar los plugins gratis Autoptimize o Async JavaScript. Asegúrese de comprobar nuestra publicación en profundidad sobre cómo eliminar bloqueadores de visualización JavaScript y CSS.

Para una explicación más detallada, lea: Cómo Diferir el Análisis de la Advertencia de Javascript en WordPress (4 Métodos).

Minificar CSS y JavaScript.

Minificación es quitar esencialmente todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad. Esto podría incluir saltos de línea, espacios vacíos, sangrías, etc. De esta forma, se puede ahorrar bytes de datos y acelerar la descarga, análisis, y tiempo de ejecución.

Otra vez, el plugin gratis Autoptimize es genial para esto. Simplemente asegúrese de que «Optimizar código JavaScript» y «Optimizar el código CSS» estén activados. Si usted tiene un sitio de gran tamaño, es posible que también desee jugar con la configuración avanzada por debajo, ya que algunos podrían perjudicar el rendimiento de su sitio web. Poner inlining o combinar CSS y JavaScript en sitios grandes generalmente no se recomienda. Aquí es donde el poder de HTTP/2 entra en juego.

Autooptimize minificar código de CSS y Javascript

Si eres un cliente de Kinsta, puedes aprovechar la función de minificación de código que está integrada en el panel de control de MyKinsta. Esto permite a los clientes habilitar rápida y fácilmente la minificación automática de CSS y JavaScript con un solo clic, acelerando tus sitios sin ningún esfuerzo manual.

Optimizar Imágenes

Según HTTP Archive, en abril de 2017, las imágenes constituían en promedio el 66% del peso total de las páginas web. Así que, cuando se trata de la optimización de su sitio WordPress, ¡las imágenes están en primer lugar en que usted debería de comenzar! Es más importante que los scripts y fuentes.

En un mundo perfecto, cada imagen debe ser comprimida y optimizada antes de cargar a WordPress. Pero por desgracia, simplemente no es realista. Por esta razón, recomendamos usar un buen plugin de optimización de imagen. Esto ayudará a comprimir automáticamente sus imágenes, cambiar su tamaño, y asegurarse de que sean ligeras y rápidas de cargar en su sitio. Eche un vistazo a nuestra publicación en profundidad sobre cómo optimizar las imágenes para la web.

Reducir el tiempo de respuesta inicial del servidor

Para WordPress, el principal culpable de la lentitud de los tiempos de respuesta del servidor inicial es la falta de almacenamiento en caché de las páginas. Sin el almacenamiento en caché de páginas, WordPress usa PHP para construir dinámicamente páginas para cada solicitud individual, lo que significa que puede verse abrumado con solicitudes rápidamente. Con el almacenamiento en caché de páginas habilitado, tu sitio puede servir archivos HTML pre-generados, lo cual es mucho más rápido y más escalable que el uso de PHP para cumplir con cada solicitud de página.

Si estás alojado en Kinsta, no tienes que preocuparte por la caché de páginas porque nosotros nos encargamos de eso por tí con nuestra configuración de Nginx. Si tu host de WordPress no soporta el cacheo de páginas, puedes instalar un plugin de cacheo como WP Rocket o W3 Total Cache. Para reducir aún más el tiempo de respuesta del servidor, recomendamos integrar Cloudflare APO con tu sitio de WordPress. Este innovador servicio de optimización de Cloudflare distribuye las páginas HTML de tu sitio en todo el mundo, lo que puede reducir el tiempo de respuesta del servidor a nivel mundial.

Minificar HTML

Al igual que CSS y JavaScript, HTML también puede ser minimizado para eliminar los caracteres innecesarios y ahorrar bytes de datos para acelerar el tiempo de ejecución.

El plugin gratuito Autoptimize también es genial para esto. Simplemente habilita la opción «Optimizar el código HTML».

Habilitar Compresión GZIP

GZIP es un formato de archivo y una aplicación de software que se utiliza para la compresión y descompresión de archivos. La compresión Gzip está habilitada en el servidor y permite una mayor reducción en el tamaño de su archivo HTML, hojas de estilos y archivos JavaScript. No funciona con imágenes ya que estas ya están comprimidas en una forma diferente. Algunos han visto reducciones de hasta un 70% debido a la compresión. Es probablemente una de las optimizaciones más fáciles que podría hacer cuando se trata de WordPress. Nota: La compresión Gzip está habilitada de forma predeterminada en todos los servidores de Kinsta.

Para habilitar la compresión gzip en Apache, basta con añadir el siguiente código a su archivo .htaccess.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Si se ejecutan en NGINX, simplemente agregue lo siguiente a su nginx.conf.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Asegúrese también de checar nuestras publicaciones en profundidad sobre cómo habilitar la compresión gzip.

Minimizar Redirecciones

Minimizar las redirecciones HTTP desde una URL a otra recorta RTTs adicionales y el tiempo de espera para los usuarios. Eche un vistazo a nuestra publicación sobre redirecciones de WordPress en la que descubrimos que 2 redirecciones malas aumentaron los tiempos de carga del sitio en un 58%! Simple y llanamente, las redirecciones de WordPress ralentizan a su sitio. Por eso, vale la pena tomar el tiempo para minimizar el número de redirecciones para mejorar la experiencia del usuario en el sitio.

Especificar un Validador de Cache

La recomendación de especificar un validador de cache aparece cuando faltan encabezados de HTTP caching. Estos deben ser incluidos en cada respuesta del servidor de origen, ya que validan y ajustan la longitud de la cache. Si no se encuentran los encabezados, se generará una nueva solicitud para el recurso cada vez, lo que aumenta la carga en el servidor. Utilizar encabezados de cache garantiza que las solicitudes posteriores no tengan que ser cargadas desde el servidor, así ahorrando ancho de banda y mejorando el rendimiento para el usuario. Y recuerde, usted no puede corregir esto con recursos de terceros que no controla.

Hay una serie de diferentes encabezados de HTTP caching involucrados que pueden utilizarse para solucionar esta recomendación. Eche un vistazo a nuestra publicación en profundidad sobre cómo especificar un validador de cache.

Especificar las Dimensiones de la Imagen

Al igual que usted no debe dejar que CSS cambie el tamaño de sus imágenes, también deberá especificar las dimensiones de la imagen. Esto significa incluir la anchura y altura en su código HTML.

Incorrecto

<img src="https://domain.com/images/image1.png">

Correcto

<img src="https://domain.com/images/image1.png" width="200" height="100">

Especificar las dimensiones de la imagen

Retirar las Cadenas de Consulta de Recursos Estáticos

Sus archivos CSS y JavaScript suelen tener la versión del archivo en el extremo de su URL, como domain.com/style.css?ver=4.6. Algunos servidores y servidores proxy son incapaces de poner en cache cadenas de consulta, incluso si un encabezado cache-control:public está presente. Con su eliminación, a veces se puede mejorar su caching. Esto puede realizarse fácilmente con código o plugins gratuitos de WordPress.

Eche un vistazo a nuestra publicación en profundidad sobre cómo retirar las cadenas de consulta de recursos estáticos. Y recuerde, usted no puede corregir esto en recursos de terceros que no controla.

Retirar cadenas de consulta de recursos estáticos

Specify a Vary: Accept-Encoding Header

Este es un encabezado HTTP y deberían incluirse en cada respuesta del servidor de origen, tal como se indica al navegador si o no el cliente puede manejar versiones comprimidas de los contenidos. Normalmente, cuando se habilita la compresión gzip, esto también es fijo. Pero asegúrese de comprobar nuestra publicación en profundidad sobre cómo arreglar el Specify a Vary: Accept-Encoding Header. Y de nuevo, no se puede arreglar esto con recursos de terceros.

GTmetrix – Gráfico de Cascada

El gráfico de cascada de GTmetrix herramienta de test de velocidad muestra todas las solicitudes individuales en su página web (como se muestra abajo). A continuación, puede analizar cada solicitud para ver qué está causando retrasos y problemas de rendimiento en su sitio. Debajo está un resumen más en profundidad y/o definición para ver qué significa cada uno de los colores en cada solicitud.

Bloqueo (Marrón)

Cuando un navegador carga una página web, JavaScript y recursos CSS usualmente impiden que la página web se muestre hasta que se descarguen y procesen por el navegador. Esta demora se muestra como el bloqueo en el gráfico de cascada GTmetrix. Eche un vistazo a nuestra publicación en profundidad sobre cómo eliminar bloqueadores de visualizción JavaScript y CSS para más información.

Búsqueda DNS (Cerceta azul)

Usted puede pensar en búsqueda de DNS como una libreta de teléfonos. Hay servidores llamados servidores de nombre de dominio que contienen la información acerca de su sitio web y muestran a qué IPs son dirigidos. La primera vez que se ejecuta el sitio web a través de GTmetrix herramienta de test de velocidad, realiza una nueva búsqueda, y tiene que consultar los registros DNS para obtener la información de IP. Esto se traduce en algo de tiempo de búsqueda adicional.

Al ejecutar su sitio web a través de GTmetrix por segunda vez, éste cachea el DNS porque ya sabe la información IP y no tiene que realizar la búsqueda otra vez. Esta es una razón por la que podría notar que su sitio web aparece más rápido después de ejecutarlo a través de GTmetrix herramienta de test de velocidad varias veces. Como se puede ver en la siguiente pantalla, en la 2 ª prueba que ejecutamos, el tiempo de búsqueda de DNS en el DOC de carga inicial es de 0 ms. ¡Esta es una zona que mucha gente mal interpreta! Le recomendamos que ejecute la prueba varias veces y tome la media, a menos que desee DNS como parte de su informe, en cuyo caso puede tomar la primera prueba.

Lo mismo se aplica a los activos (JavaScript, CSS, imágenes) si está utilizando una CDN. La cache de una CDN trabaja como DNS, una vez que se cacheada, será mucho más rápido en cargas consecutivas. Otra sugerencia para acelerar el DNS es utilizar precarga de DNS (prefetch). Esto permite que el navegador realice búsquedas de DNS en una página de fondo. Puede hacerlo agregando algunas líneas de código a la cabecera de su sitio WordPress. Vea algunos ejemplos a continuación.

<!– Prefetch DNS for external assets –>

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

O si está ejecutando la versión de WordPress 4.6 o posterior, es posible que desee utilizar sugerencias de recurso. Los desarrolladores pueden usar el filtro wp_resource_hints para añadir dominios y URL personalizados para dns-prefetch, preconnect, prefetch o prerender.

Conexión (Verde)

El tiempo de conexión en GTmetrix se está refiriendo a la conexión TCP, o el tiempo total requerido para crear una conexión TCP. Usted realmente no necesita entender cómo funciona esto, pero esto es simplemente un método de comunicación entre el host / cliente y el servidor que ha de tener lugar.

Envío (Rojo)

El tiempo de envío es simplemente el tiempo que tarda el navegador web para enviar datos al servidor.

Espera (Violeta)

El tiempo de espera en GTmetrix herramienta de test de velocidad en realidad se refiere al primer byte, también conocido como el TTFB en algunas herramientas. TTFB es una medida usada como una indicación de la capacidad de respuesta de un servidor web u otro recurso de la red. Generalmente, algo por debajo de los 100 ms es un TTFB aceptable y bueno. Si se acerca a la gama de 300-400 ms podría tener algo mal configurado en el servidor o podría ser el momento para actualizar a una mejor pila web. Como puede ver en la siguiente prueba fue de aproximadamente 100 ms, lo cual es genial.

Algunas maneras sencillas para disminuir su TTFB es garantizar que su host tenga buen cache establecida utilizando una CDN. Eche un vistazo a nuestra publicación en profundidad sobre todas las formas de reducir TTFB sobre su sitio WordPress.

Recepción (Gris)

El tiempo de recepción es simplemente el tiempo que tarda el navegador web para recibir datos desde el servidor.

Tiempos de Evento

Cada vez que solicita una página esta tiene sincronización de eventos en que las cosas son prestadas y cargadas.

Primera pintura (línea verde): El primer punto en el que el navegador no hace ningún tipo de renderización de la página, como por ejemplo mostrar el color de fondo.
DOM cargado (línea azul): El punto en el que el DOM (Modelo de Objetos del Documento) está listo.
Onload (línea roja): Cuando el proceso de la página está completo y todos los recursos de la página (imágenes, CSS, etc.) han terminado de descargar.
Completamente cargado (línea lila): El punto después de que el evento onload se active y no ha habido ninguna actividad en la red durante 2 segundos.

Cabeceras de Respuesta HTTP

También puede hacer clic en una petición individual para ver lo que ellos llaman las cabeceras de respuesta HTTP. Esto proporciona información valiosa. En la pantalla siguiente podemos ver instantáneamente tal cosas como si gzip está habilitado en el servidor web, si se ejecuta sobre HHVM, si se sirve de la cache (HIT, mostraría MISS de lo contrario), los encabezados de cache-control, arquitectura de servidor (esto no es siempre visible), encabezados Expires, el agente de usuario del navegador y mucho más.

Otra cosa a tener en cuenta es que GTmetrix herramienta de test de velocidad soporta HTTP/2, a diferencia de Pingdom, porque actualmente está usando Chrome 58+ para ejecutar las pruebas. Chrome añadió soporte HTTP/2 en la versión 49. Así que téngalo en cuenta a la hora de elegir qué herramienta de test de velocidad desea usar.

Video

Para ayudarte a depurar los fallos visuales y los problemas de rendimiento de la interfaz, la última versión de GTmetrix incluye una pestaña «Video». Con la función de video habilitada, GTmetrix grabará automáticamente un video incrustado que muestra cómo se carga una página para cada prueba de rendimiento. Esta característica es muy útil para depurar problemas visuales que sólo aparecen en ciertas combinaciones de navegador y tamaño de pantalla.

Historial

Bajo la ficha Historial puede ver todas las últimas pruebas de velocidad. Hay un límite de cuántas están guardadas en las cuentas gratuitas. También puede supervisar una URL que le permite realizar un seguimiento del rendimiento a lo largo del tiempo y ver los cambios cuando se produzcan.

Una característica realmente novedosa es que usted puede seleccionar sus últimos informes y compararlos uno al lado del otro. Esto puede ser muy útil, especialmente cuando se están realizando optimizaciones en su sitio para ver si hay mejoras. Recuerde, a veces se sobreoptimiza también.

Estudio de Caso la Configuración del Dominio

Si ha llegado hasta acá en nuestro artículo de GTmetrix herramienta de test de velocidad entonces ¡enhorabuena! Siempre es molesto ver a la gente compartir consejos y estudios de casos, pero luego no compartir cómo llegaron allí. Lo siguiente es la configuración exacta para el estudio de caso de dominio utilizado arriba! Siéntase libre de replicarlo.

Arquitectura

El estudio de caso de dominio (perfmatters.io) está alojado en Kinsta en Google Cloud Platform de en los EE.UU. (ubicación central). Kinsta utiliza HTTP/2, Nginx, MariaDB, todas las cuales contribuyen a la rapidez de los tiempos de carga.
El sitio está utilizando HHVM. PHP 7.3 está ahora disponible en Kinsta, que es incluso más rápido que HHVM! Puede cambiar a las versiones PHP con sólo pulsar un botón.
El sitio no utiliza ningún caching plugin. Kinsta pone la cache en el nivel de servidor que simplifica enormemente las cosas, ¡y en la mayoría de los casos es más rápido!

Plugins de WordPress

Y aquí está una lista de los plugins utilizados en el sitio WordPress.

El plugin gratuito CDN Enabler se usa para implementar KeyCDN.
El plugin gratuito CAOS es utilizado para sincronizar Google Analytics localmente.
El plugin premium perfmatters se utiliza para deshacerse de las peticiones HTTP innecesarias y desactivar cosas como Emojis y Embeds.
El plugin premium Gonzalez se usa para deshabilitar ciertos scripts de carga.
El plugin premium Imagify es utilizado para comprimir imágenes.

Tutoriales recomendados para seguir leyendo:

Resumen

Como puede ver, el conocimiento más profundo de cómo GTmetrix herramienta de test de velocidad trabaja y qué significan todos los gráficos pueden ayudarle a tomar una decisión más impulsada por datos cuando se trata de rendimiento. Un análisis de cascada como la llamamos es crucial para saber cómo sus activos individuales se cargan. Y recuerde, al compararlo con Pingdom, son herramientas diferentes y por lo tanto es mejor quedarse con una o la otra ya que calculan las cosas de manera diferente. ¿Tiene otro gran consejo acerca de GTmetrix?

¡Si le gustara ver más artículos detallados como el anterior por favor, háganoslo saber a continuación en los comentarios!

Brian Jackson

Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.