Una Inmersión Profunda en GTmetrix Herramienta de Test de Velocidad

Actualizado June 19, 2017

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.

¡Saber cómo funciona @GTmetrix es información inestimable para los propietarios de los sitios WordPress! Haga clic para Tweet

GTmetrix Herramienta de Test de Velocidad

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

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.

Opciones de formato de prueba GTmetrix

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. Aquí está un informe de comparación genial en el sitio de Smashing Magazine. No es sorprendente que el que con anuncios el tiempo de carga fue 2.3 segundos más lento.

GTmetrix opciones extras

Las opciones adicionales incluyen detener la prueba (de lo que hablaremos más adelante), ser capaz de enviar una cookie junto con su solicitud, usar autenticación HTTP y la habilidad de poner a lista blanca y lista negra las direcciones URL.

Análisis Mediante 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)

Al ejecutar su sitio web en WordPress a través de GTmetrix éste genera un informe que incluye su puntuación PageSpeed, puntuación YSlow, tiempo de carga total, tamaño de página total, y el número de solicitudes que tenga en su sitio web. En nuestro ejemplo, estamos usando nuestro estudio de caso perfmatters.io que se aloja en Kinsta. En nuestra primera test de velocidad nuestro tiempo de carga fue de 1.1 segundos.

GTmetrix informe de rendimiento

Luego ejecutamos una prueba adicional y ahora nuestro tiempo de carga total es de 485 ms. ¿De que se trata todo esto? Usted puede notar esto también si está ejecutando su sitio web a través de GTmetrix la herramienta de test de velocidad varias veces. Una de las razones por las que esto sucede es la cache, caching tanto del DNS como del servidor. Descubra por qué más adelante en nuestro análisis.

GTmetrix test de velocidad de carga total

Otra cuestión que surge a menudo es ¿por qué GTmetrix herramienta de test de velocidad muestra siempre velocidades más lentas que Pingdom? Por ejemplo, ejecutamos el mismo sitio a través de un test de Pingdom y demuestra que es bastante más rápido.

Compare Pingdom a GTmetrix

Compare Pingdom to GTmetrixTras ejecutar miles de pruebas de velocidad, podemos decirles que Pingdom casi siempre muestra velocidades más rápidas que GTmetrix. Ninguno está equivocado. Ellos simplemente calculan las velocidades en formas diferentes y por lo tanto no debe comparar los dos. Cuando se trata de usar las herramientas de test de velocidad de sitios web, usted realmente debe elegir uno que le guste y quedarse con él. Esto le proporcionará una buena base métrica para luego comparar contra pruebas adicionales. Asimismo, a partir del 8 de febrero de 2017, GTmetrix utiliza lo que ellos llaman tiempo de carga completo.

Según GTmetrix herramienta de test de velocidad, el tiempo de carga completo es el punto después de que el evento Onload se active y no haya ninguna actividad de la red durante 2 segundos. Para decirlo simplemente, ahora ellos esperan hasta que su página deje de transferir datos antes de completar la prueba, lo que resulta tiempos de carga de páginas más consistentes. Anteriormente se utilizaba tiempo Onload que en algunos casos produjeron cosas que no aparecieron en los informes de rendimiento, tales como los anuncios que se cargaron de forma asincrónica, o capturas de pantalla faltantes.

PageSpeed

GTmetrix usa reglas Google PageSpeed Insight para darle a su sitio web un puntaje. Las calificaciones van de 0 a 100 (F a A). Hay más de 25 recomendaciones. Vamos a intentar cubrir las más comunes y populares que vemos que los propietarios de sitios WordPress tienen problemas. Asegúrese de marcar esta publicación como favorito ya que estaremos actualizándola constantemente. Si mejora a estos puntos en su sitio, debe ver una disminución en sus tiempos de carga globales.

GTmetrix puntuación en PageSpeed

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.

Servir imágenes escaladas

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.

Poner en línea CSS pequeños

Inline small CSSPara poner fácilmente en inline sus CSS puede utilizar 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.

Autoptimize inline CSS

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, puede utilizar un plugin gratuito como Autoptimize.

Poner en línea Javascript pequeños

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.

gtmetrix leverage browser caching

Leverage browser caching

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.

Servir recursos de una URL coherente

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.

Aplazar el análisis de Javascript

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.

Minificar CSS y Javascript

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

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.

Optimizar imágenes

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.

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.

Minificar HTML

El plugin gratuito Autoptimize es fantástico también para esto. Basta con activar la opción “Optimizar el código HTML”.

Autoptimize minificar 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.

Habilitar compresión GZIP

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.

Minimizar redirecciones

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. Nota: encabezados de HTTP caching se agregan automáticamente en todos los servidores Kinsta.

Especificar un validador de cache

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 specify a vary: accept-encoding header

Specify a vary: accept-encoding header

YSlow

GTmetrix herramienta de test de velocidad usa también YSlow para darle a su sitio web una puntuación. Hay más de 15 recomendaciones. Vamos a intentar cubrir las más comunes y populares con las que hemos visto que los propietarios del sitio WordPress tienen complicaciones. Algunas de ellas ya han sido cubiertas en las recomendaciones anteriores de PageSpeed. Asegúrese también de poner un marcador en esta publicación ya que estaremos actualizando constantemente. Generalmente, si se mejoran estos puntos en su sitio, usted debe ver una disminución en sus tiempos de carga globales.

GTmetrix puntuación de YSlow

Haga Menos Solicitudes HTTP

Esto es algo de sentido común, pero todo lo que carga en su sitio web, plugins, imágenes, fuentes, etc. todo genera una solicitud HTTP. Esta es una razón por la que no desea instalar 100 plugins todos a la vez, porque lo más probable es que esté llamando CSS y JavaScript, que a su vez generaría cientos de solicitudes HTTP. Cuanto menos mejor.

Haga menos solicitudes HTTP

Agregar Encabezados Expires

Según los desarrolladores de Google HTTP caching es: Encabezado Cache-Control fue definido como parte de la especificación HTTP/1.1, y sustituye los encabezados anteriores (en este caso el encabezado Expires) utilizados para definir las políticas de cache de respuesta. Todos los navegadores modernos admiten Cache-Control, de ahí es todo lo que usted necesita. Sin embargo, no le dolerá nada si tiene a ambos, pero recuerde que sólo uno será utilizado. El encabezado Expires utiliza una fecha real, mientras que el encabezado Cache-Control permite especificar una cantidad de tiempo antes de su expiración. Sin embargo, recuerde que usted no tiene control sobre los recursos de terceros. Nota: Encabezados Expires se agregan automáticamente en todos los servidores de Kinsta.

Añadir encabezados Expires

Para agregar el encabezado Expires en Apache, basta con añadir el siguiente código a su archivo .htaccess.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Para agregar encabezados Expires en NGINX, simplemente, agregue el siguiente código a su archivo de configuración.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}

Utilizar una CDN (Red de Entrega de Contenido)

Esto es bastante autoexplicativo. Siempre recomendamos utilizar una CDN, especialmente si tiene visitantes de todo el mundo. Una CDN mantiene una copia en cache de su contenido sobre los POPs ubicados más cerca del visitante, que a su vez acelera el tiempo de carga para ellos reduciendo la latencia. Cloudflare y KeyCDN son proveedores CDN altamente recomendados que usted puede usar fácilmente con su sitio WordPress.

Use una CDN

Utilizar Dominios Libres de Cookies

Generalmente, cuando están sirviendo contenido como imágenes, JavaScript, CSS, no hay ninguna razón para que una cookie HTTP le acompañe, ya que crea una sobrecarga adicional. Una vez que el servidor establece una cookie para un dominio determinado, todas las subsiguientes solicitudes HTTP para ese dominio deben incluir la cookie. Esta advertencia se ve típicamente en sitios con una gran cantidad de solicitudes. Algunas maneras de solucionar esto incluyen el uso de un proveedor de CDN que quite las cookies o configure un dominio o subdominio independiente para servir a las cookies. Eche un vistazo a nuestra publicación en profundidad sobre cómo arreglar la recomendación usar dominios libres de cookies.

Use dominios libres de cookies

Reducir las Búsquedas DNS

Cada dominio que consulte genera una búsqueda DNS la primera vez hasta que se almacene en la cache. Así, por ejemplo, digamos que usted carga 10 activos de la CDN, 2 desde Google web fonts, y 5 desde un único anunciante de terceros. Esto daría como resultado 3 búsquedas de DNS y que cada uno de esos grupos está consultando un único dominio. Las búsquedas de DNS pueden volverse rápidamente fuera de control cuando comience a agregar servicios externos. Un ejemplo de una manera de ayudar a reducir esto es alojar las fuentes de Google en su propia CDN, que a su vez se deshace de las búsquedas de DNS a Google.

Reducir búsquedas de DNS

Use Favicon Pequeño y Cacheable

Un favicon, o favicon.ico, es un pequeño archivo de icono de imagen que está asociado con su sitio web y se muestra en la barra de direcciones de su navegador (o cuando lo define como un marcador). Aunque los favicons son muy pequeños, aún debe optimizarlos siempre. Cualquier cosita ayuda. KeyCDN tiene un excelente tutorial en profundidad sobre cómo hacer a su favicon pequeño y cacheable.

Hacer favicon pequeño y cacheable

Configurar Etiquetas de Entidad (ETAG)

El encabezado ETag es muy similar al último encabezado modificado. También se utiliza para validar la cache de un archivo. Si está ejecutando Apache 2.4 o superior, el encabezado ETag ya se agrega automáticamente utilizando la directiva FileETag. Y en cuanto a NGINX va, desde 2016 el encabezado ETag está habilitado de forma predeterminada. Si usted está viendo este aviso le recomendamos contactar a su proveedor de hosting.

Configurar ETag

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.

GTmetrix gráfico de cascada

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.

Bloqueo

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.

Segunda búsqueda de DNS

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-prefetchpreconnectprefetchprerender.

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.

Conexión

Envío (Rojo)

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

Envío

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.

Espera

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.

Recepción

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.

Tiempos de evento

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.

Cabecera de respuesta HTTP

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.

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.

Comparar reportes de GTmetrix

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. HHVM y PHP 7 son ambas conocidas por su impresionante rendimiento. Kinsta le permite cambiar entre las dos pulsando tan solo 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!

Este artículo fue escrito por Brian Jackson

Brian enfoca en nuestros esfuerzos de marketing a través de las redes sociales: desde el desarrollo de la nueva estrategia de crecimiento online, creación de contenido, optimización técnica de buscadores hasta nuestra expansión en la comunidad WordPress. Es apasionado por Wordpress lleva usándolo desde hace más de 8 años e incluso está desarrollando su propio plugin exclusivo. A Brian le encanta el blogueo, películas, montar en bici y trabajar con sitios web.

Artículos relacionados

Deja un comentario

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend