Gtmetrix : GUÍA completa

Hoy en día, una ralentización de cualquier tipo en una web puede generar pérdidas tanto a nivel SEO como a nivel de facturación.

La investigación también ha demostrado que el 88% de los usuarios de Internet ya no regresan a un sitio cuando lo consideran demasiado lento. Esta estadística refleja los requerimientos actuales de los internautas en cuanto a la experiencia que buscan en un sitio web.

De hecho, no solo quieren sitios que ofrezcan contenido de calidad, sino también, y sobre todo, que estos sitios se carguen más rápido.

Fuente: Google

Por lo tanto, para esperar atraer visitantes, convertir prospectos e incluso tener un buen lugar en los resultados de búsqueda, es imperativo que estés interesado en el tiempo de carga de tu sitio web.

Por esto no tienes que preocuparte ya que ya existen herramientas que brindan a los propietarios información sobre el tiempo de carga de su sitio web.

Estas herramientas también les ofrecen acciones a tomar para remediar la lentitud observada.

Este es el caso por ejemplo de Gtmetrix, una herramienta que te invito a descubrir a lo largo de este artículo.

Pero antes de sumergirte en el mundo de esta herramienta, te mostraré las diferentes razones por las que tener un sitio rápido es fundamental.

Capítulo 1: ¿Qué tan importante es la velocidad de carga de su sitio para su estrategia digital?

Este primer capítulo me permitirá explicar primero las razones por las que es importante estar interesado en la velocidad de su sitio web. A continuación, muestro las causas que podrían justificar la carga lenta de un sitio web.

1.1. Los efectos positivos de la velocidad de un sitio web en tu estrategia digital

Entre los efectos que la velocidad de carga de tu página web puede tener en tu estrategia digital, puedes destacar: 

1.1.1. El impacto de la velocidad en el SEO

Como factor de medición de la experiencia del usuario, La velocidad de carga ha sido un factor muy importante en la visualización de sitios web en los resultados de Google desde 2009.

De hecho, dado que los usuarios pasarán más tiempo en sitios web que se cargan rápidamente, Google ha hecho de la velocidad un criterio de clasificación y relevancia. Por lo tanto, los sitios web que se cargan más rápido tienen más probabilidades de obtener una clasificación más alta en los resultados de búsqueda.

1.1.2. El impacto de la velocidad del sitio en la publicidad en las redes sociales.

Al igual que los anuncios pagos en plataformas como Google y Facebook, la mayoría de las plataformas sociales priorizan la distribución de contenido pago en sitios que tienen velocidades de carga rápidas. 

De hecho, las redes sociales aseguran proporcionar a los usuarios de Internet contenido de calidad. Por lo tanto, favorecen ciertos criterios, incluida la velocidad de carga, para mostrar el contenido de sus noticias. 

Facebook, por ejemplo, tuvo en agosto de 2017 una Cambio de algoritmo que prioriza la experiencia del usuario y la velocidad de carga.

Entonces, si bien muchos factores entran en juego para el algoritmo de Facebook con los anuncios sociales, el tiempo de carga rápido influye en cómo aparecen las publicaciones y los anuncios en la sección de noticias, mientras que el tiempo de carga lento produce el efecto opuesto.

1.1.3. El impacto de la velocidad del sitio en la experiencia del usuario 

La velocidad de carga es una de las razones por las que vemos una alta tasa de rebote en algunos sitios. la tasa de rebote se refiere a la cantidad de personas que abandonan su sitio web después de visitar solo una página. 

Si un sitio tiene un tiempo de carga lento, las personas no se quedarán más tiempo y se irán sin ni siquiera ver si la página les puede interesar o si van a encontrar la información que necesitan. 

Este hallazgo respalda la idea de que los sitios lentos tienen una tasa de rebote muy alta, mientras que los sitios más rápidos tienden a tener una tasa de rebote más baja.

Fuente: Backlinko

Además, la relación entre la tasa de rebote y la cantidad de personas que abandonaron un sitio después de visitar solo la primera página, permite comprender que la tasa de rebote es lo que permite medir la calidad de la experiencia del usuario del sitio. a nivel de sitio. 

Sin embargo, tenga en cuenta que la tasa de rebote también forma parte de los criterios para referenciar una página web. 

Así, más rebotes significan un mal posicionamiento en los resultados de Google, mientras que una tasa baja implicaría una buena posición.

1.1.4. El impacto de la velocidad de carga de un sitio en la

conversión La tasa de conversión de un sitio web viene determinada por la relación entre el número de visitantes y el número de personas que han realizado una acción. Si nos referimos a la venta, es el número del porcentaje de personas que realizaron una compra. 

El tiempo de carga de una página web también influye en esta cifra ya que representa un elemento importante para determinar la tasa de rebote. Si las personas rebotan debido a tiempos de carga lentos, no se convertirán.

Esto es especialmente cierto si su sitio web tiene un proceso de compra o conversión más largo. Asimismo, si su sitio es rápido, las personas encontrarán rápidamente la información que buscan.

Aunque esta lista no es del todo exhaustiva, te mostraré las diferentes razones que justifican la carga lenta de un sitio web.

1.2. Algunas causas que pueden justificar la lentitud de un sitio web

La causa de la lentitud de tu sitio web puede provenir de: 

1.2.1. La existencia de varios contenidos flash en el sitio

Flash o Adobe Flash es un entorno de desarrollo web destinado a la creación de contenidos multimedia e interactivos para Internet.

Ha sido lanzado desde 1996 y permite agregar contenido interactivo o multimedia a un sitio. Estos contenidos se ejecutan mediante un reproductor (flash player) integrado en los navegadores o servidor web.

Flash, aunque es una buena manera de agregar contenido a un sitio web, puede ser una de las razones por las que este último es lento. 

De hecho, el contenido flash suele ser voluminoso. Sin embargo, como sabes, más volumen corresponde a más solicitudes HTTP y, por lo tanto, justificaría un tiempo de carga elevado.

1.2.2. Mala codificación de las distintas páginas del sitio

Las razones de la lentitud de un sitio web también pueden deberse a la codificación. Ya sean los códigos de su hoja de estilo o los archivos JAVA, es posible que al crear su sitio web, se le agreguen ciertos elementos innecesarios que hagan que estos archivos sean voluminosos. 

Estos incluyen, por ejemplo: 

• Espacios frecuentes;
• Líneas de comentarios innecesarias;
• Y muchos otros.  

1.2.3. Mostrar una gran cantidad de anuncios 

Los anuncios que muestra en las páginas web son una buena manera de monetizar un sitio web. 

Sin embargo, no deben favorecerse a expensas de una buena experiencia de usuario. Porque ralentizan el sitio al provocar varias solicitudes HTML.

Fuente : Knowonlineadvertising

La solución recomendada, por tanto, no consiste en dejar de utilizarlos, sino en utilizarlos sólo cuando realmente sea necesario.

1.2.4. Fallas del servicio de hosting 

La carga lenta de tu sitio web puede deberse a la baja capacidad del host utilizado. 

Además, si el servidor en el que aloja su sitio es lento, es probable que el sitio sea aún más lento.

Esta lentitud también puede ocurrir cuando se encuentra en un host gratuito de mala calidad o cuando la configuración de su sitio requiere un servicio de alojamiento más eficiente.

1.2.5. Scripts mal escritos o mal posicionados

Cuando coloca un script Java en su página HTML, es posible que cuando se carga la página, el navegador del cliente primero intercepte el código Java. 

Luego dejará de cargar todos los demás elementos mientras termina de analizar, interpretar y ejecutar el script Java.

Fuente : Wikihow

modo, un código mal escrito puede entrar en conflicto con otros elementos de su sitio, lo que resulta en tiempos de carga excesivos.

1.2.6. La ausencia de un almacenamiento en caché

En primer lugar, el caché designa una memoria temporal. Su función es mantener la información de una fuente durante un tiempo cuando accede a ella por primera vez. 

Así, durante un segundo o posteriores accesos, el tiempo de carga de información desde la misma fuente es más rápido que la primera vez. 

Esto te permite ver que la existencia de un caché permite que tu servidor guarde una versión de las páginas que los usuarios consultan en tu sitio web. Esta copia guardada se cargará, promoviendo así la carga rápida de las páginas de su sitio. 

Por otro lado, la ausencia de caché obligará al servidor a reanudar la carga desde cero. Lo que probablemente tomaría más tiempo.

1.2.7. La sobrecarga de la base de datos a nivel de su sitio web

La base de datos a nivel de su sitio tiene la función de registrar y clasificar toda la información relativa al sitio. Así, cuanto más antiguo sea, más probable es que haya acumulado información inútil que pueda ralentizarlo.  

Esta información puede referirse a: archivos de registro, información de complementos, archivos de temas y cualquier otro elemento que pueda sobrecargar la base de datos, lo que resulta en tiempos de carga prolongados.

1.2.8. Mala optimización de JavaScript 

Más allá de estas muchas características, el lenguaje Java es lo que permite que su sitio sea agradable para navegar. 

Sin embargo, si no está optimizado, puede causar problemas de latencia en el sitio web. Podemos encontrarnos por ejemplo: “Un Java bloqueando la carga de la página”.

Fuente : Interworks

De hecho, cuando sus páginas web intentan cargarse y encuentran un código java, la carga de la página en HTML se detiene, lo que permite que se carguen todos los archivos java. 

1.2.9. No usar una red CDN 

Las redes de entrega de contenido (CDN) son servidores descentralizados que le permiten cargar elementos de su sitio desde un servidor más apropiado. 

Además, debido a su distribución en varios lugares del globo, ofrecen cierta proximidad que permite a los usuarios beneficiarse de un rápido acceso a su sitio.

La inexistencia de una red CDN para su sitio supone que los elementos de su sitio y todas las solicitudes de carga se realizan desde un único servidor. 

Esta es la causa de la sobrecarga de su servidor, que luego tardará más en responder. 

Los usuarios internacionales también tendrán muchas dificultades antes de iniciar sesión en el sitio.

1.2.10. Uso de varios complementos

Los complementos le permiten agregar varias funciones a un sitio web. Dada su cantidad y las miles de funciones que permiten agregar a los sitios web, es seguro que estamos buscando instalar una multitud de ellos. 

Sin embargo, lejos de aumentar el rendimiento de su página web, los complementos contribuyen a aumentar el tiempo de carga del sitio web debido al trabajo que requiere del servidor. 

A veces, este problema puede deberse a que los complementos no coinciden con la configuración de los sitios en los que están instalados.

1.2.11. Una página de inicio sobrecargada

La página de inicio es el escaparate de su sitio, por lo que se recomienda causar una buena impresión allí para interesar a los internautas. Pero, esta recomendación no debe usarse como una razón para que la sobrecargues con gráficos, imágenes o videos. 

Si lo hace, es posible que se esté perdiendo su objetivo de atraer visitantes. 

De hecho, cuando sobrecarga su página, aumenta su tamaño, lo que sería la fuente de altas solicitudes HTTP y, por lo tanto, de una carga que no cumple con los deseos de los usuarios de Internet.

Ahora que conoce las diferentes causas de un sitio web lento, descubramos la herramienta GTMETRIX.

Capítulo 2: Gtmetrix, una herramienta para potenciar el rendimiento de tu sitio web 

En este capítulo, presento en detalle la herramienta Gtmetrix. Descubrirás estas características y las razones por las que te lo recomiendo.

2.1. GTmetrix: ¿Qué es?

Gtmetrix es un software que le permite analizar el rendimiento relacionado con la velocidad de carga de su sitio web.

En concreto, esta herramienta proporciona análisis detallados sobre la velocidad de carga de una página web y ofrece vías de mejora a sus propietarios. 

Fue desarrollado por la empresa Carbone60 : Una empresa canadiense especializada en la nube y con sede en Toronto.

Gtmetrix ha estado en línea desde 2009 y tiene más de 350,000 usuarios. Ya se ha utilizado para analizar más de 350 millones de páginas web. 

El objetivo que persigue Gtmetrix es proporcionar un análisis detallado de las páginas web que le son remitidas. 

Como resultado, produce un conjunto de informes que informan sobre las causas de la lentitud de un sitio web.

En resumen, Gtmetrix analiza su sitio y proporciona:

• puntajes de Pagespeed e Yslow;
• Tiempos de carga de la página.

 La herramienta se ofrece en dos versiones.

Una versión gratuita que te da acceso a los servicios básicos y una versión pro que te permite acceder a otros servicios mediante el pago de una suscripción mensual. 

La versión gratuita o básica le permite: 

• Supervisar el rendimiento de 3 páginas web;
• Guarde hasta 20 archivos de informes de sitios escaneados;
• Obtenga hasta 20 accesos a la API por día;
• Cree hasta 3 filtros de análisis personalizados.

La versión pro le permite tener acceso no solo a las ventajas de la versión básica, sino también a otras funciones. 

Tienes planes como: 

El plan Bronce : Este plan cuesta $14.95 por mes y te permite tener acceso a funciones como:

• Monitoreo de 10 URLs;
• Almacenamiento de 100 informes;
• Filtros de informes ilimitados;
• Ver reducido el tiempo de carga de sus análisis;
• Monitoreo remoto por horas y creación de videos.

El plan Plata que cuesta $49.95 por mes y le permite:

• Monitorear hasta 20 URLs;
• Guarde 200 informes de análisis;
• 500 créditos para acceso API;
• Filtros de informes ilimitados;
• Ver reducido el tiempo de carga de sus análisis;
• Monitoreo horario y remoto, creación de videos de alerta.
• Descarga de informes en PDF con sus logotipos

El plan GOLD : el plan Gold tiene un valor de $ 149,95 por mes. Al elegir este plan, tendrá acceso a:

• 50 URL monitoreadas. 
• 500 informes de análisis grabados 
• 1500 créditos API
• Filtros de informe ilimitados
• Tiempos de carga reducidos para sus análisis,
• monitoreo por hora y remoto, creación de videos de alerta.

El plan personalizado: Este es un plan gratuito que te da la posibilidad de elegir los elementos de tu suscripción. En este caso, la tarifa se determina sobre la base de los servicios que le das. 

Cada uno de los planes profesionales le da derecho a la Desarrollar kit de herramientas.

2.2. Las diferentes características u opciones de Gtmetrix

En cuanto a las opciones de Gtmetrix, se pueden clasificar en dos categorías. 

El primero se refiere a opciones simples.

Estos son: 

• La opción Test Region : Esta opción te permite analizar tu sitio desde varias ubicaciones o ubicaciones:
  • Dallas (EE.UU.); 
  • Hong Kong, China); 
  • Londres, Inglaterra); 
  • Mumbai, India); 
  • Sydney, Australia); 
  • Sao Paulo (Brasil) 
  • y Vancouver (Canadá).
• La opción Navegador : Con esta opción, tiene la posibilidad de seleccionar el navegador desde el cual le gustaría realizar su análisis;

• La opción de conexión : La opción de conexión te permite ver cómo un tipo de conexión puede afectar tu página web;
• La opción AdBlock Plus : esta opción le permite evitar la carga de anuncios durante el análisis de su página;
• La opción de video : esta es una característica que le muestra visualmente el comportamiento de carga de su página.

La segunda categoría incluye opciones avanzadas. Estas opciones se refieren a:

• identificación HTTPS : que le permite conectarse al sitio que requiere identificadores HTTPS;
• Autorización de una URL : esta opción le permite autorizar solo la carga de recursos correspondientes a una lista de direcciones URL (a definir).
• Bloqueo de una URL: que bloquea la carga de una selección de dirección URL (por definir);
• La opción Cookies: que permite analizar una página que requiere el envío de una cookie para conectarse.

Más allá de todos estos elementos, la herramienta te ofrece comparar URLs, configurar la monitorización de URLs con la posibilidad de recibir informes por correo electrónico.

Del mismo modo, si usa una cuenta profesional, Gtmetrix le brinda acceso a más funciones mejoradas. 

Por ejemplo, puede elegir la resolución de visualización de los resultados para ver el comportamiento de su página en varios tipos de medios: Esta es la Developer Toolkit.

Otra característica de esta herramienta se refiere a las alertas. Le permiten recibir una notificación tan pronto como la página que está monitoreando exceda un valor que haya establecido. También tienes la posibilidad de descargar el informe de análisis de tu sitio en PDF.

Una vez en el sitio de Gtmetrix, lo primero que recomiendo es comenzar por registrarse. 

El registro es fácil ya que solo necesita ingresar su nombre y apellido, una dirección de correo electrónico y una contraseña. Una vez hecho esto, validas tu cuenta y empiezas a disfrutar de los beneficios del plan básico.

2.3. ¿Por qué utilizar GTmetrix? 

Entre las razones que podrían justificar el uso de Gtmetrix, tienes:

2.3.1. El impacto de la velocidad de carga de una página web 

Además de las razones mencionadas en el capítulo 1, una búsqueda en el sitio dareboost me permitió ver que la velocidad de carga de una página web tenía un impacto en los resultados del sitio en varios niveles. Por ejemplo, a nivel:

Comercial: Cuando el tiempo de carga de tu página supera un tiempo determinado, la tasa de conversión puede disminuir hasta en un 7%. 

Además, el 67% de los compradores en línea dijeron que la tasa de carga de un sitio era una razón para el abandono del carrito.

Experiencia de usuario: En cuanto a la experiencia de usuario, dareboost te dice que el 60% de los internautas abandonan un sitio por su competidor cuando el tiempo de carga es mayor a 5 segundos. 

SEO: Desde el punto de vista SEO, Google penaliza desde 2010, el 1% de los sitios que tienen un tiempo de carga demasiado largo.

A la vista de todas estas estadísticas, podemos decir que la velocidad de carga de una página es muy importante ya sea para atraer visitantes o vender productos.

Por lo tanto, parece obvio que cuando espera obtener resultados con su sitio, es necesario un análisis de rendimiento de velocidad. Este análisis le permitirá:

• Conocer su velocidad de carga;
• Identificar cuellos de botella;
• Lluvia de ideas para mejorar la velocidad. 

¡Esto es exactamente lo que obtienes con la herramienta Gtmetrix! La segunda razón para usar Gtmetrix se refiere a:

2.3.2. Las características de la herramienta en sí

Una visita rápida al sitio de Gtmetrix le permite ver que es una plataforma intuitiva que se integra perfectamente con su navegador. 

Está diseñado para ser utilizado por cualquier persona y se basa en un diseño simple. 

Además, con Gtmetrix, puede acceder a la herramienta de análisis y hacer su análisis incluso si aún no ha creado una cuenta. Lo cual me parece muy práctico para hacernos una idea de la herramienta y sus diferentes posibilidades.

Gtmetrix también es recomendado por el sitio Codeinwp como la herramienta más adecuada para realizar un análisis detallado sobre el rendimiento de un sitio. 

A diferencia de algunas herramientas, Gtmetrix brinda multitud de opciones de análisis en cuanto a la configuración:

• Navegadores;
• Ubicación;
• El tipo de conexión;
• Y dispositivos a utilizar para estimular el análisis.

La tercera razón para usar Gtmetrix es:

2.3.3. Disponibilidad de documentación

Dado que Gtmetrix es una herramienta accesible para todos, proporciona diferentes guías para un uso óptimo por parte de cualquier persona.

De hecho, tan pronto como se registra, tiene acceso a un mensaje de bienvenida en el que Gtmetrix se ofrece a guiarlo a lo largo del análisis de su sitio web. 

Entre otras cosas, descubrirá en estas guías:

• El proceso de análisis de su página web;
• Los elementos para entender sus informes;
• Cómo configurar y monitorear sus diversas URL;
• Etc.

Capítulo 3: ¿Cuáles son los diferentes usos de Gtmetrix?

En este capítulo, le muestro las diferentes formas de usar Gtmetrix.

3.1. Realizar pruebas de velocidad

3.1.1. Haz un análisis sencillo

Para hacer un análisis sobre la velocidad de carga de tu sitio con Gtmetrix de la forma más sencilla, solo tienes que: Ir

• al sitio de Gtmetrix luego inicie sesión o cree una cuenta (crear cuentas es fácil y le brinda acceso directo a las funciones básicas).

• Rellena la URL de la página: Un simple copiar y pegar es suficiente.
• Finalmente, haga clic en analizar y espere a que aparezcan los análisis.

3.1.2. Haz un análisis configurando las opciones de Gtmetrix 

Una vez que te registres, encontrarás que Gtmetrix no te limita a copiar y pegar y presionar una dirección. También tienes la posibilidad de hacer pruebas modificando varios elementos.

En realidad, todo lo que tiene que hacer es presionar «Opciones de análisis» y elegir los parámetros para sus pruebas. 

Con el parámetro de ubicación, elige la ubicación de su prueba. Esta es una opción muy importante para analizar el rendimiento de su sitio web, ya que se relaciona con la ubicación de sus servidores. 

Con este parámetro, puede comprender de manera efectiva los problemas de conexión y la velocidad de su sitio desde varios lugares del mundo y así ver las dificultades de carga que podrían encontrar sus usuarios potenciales. 

Aparte de la ubicación, puedes elegir realizar tu prueba usando el navegador: Google Chrome o Firefox.

3.1.3. Realiza un análisis desde las opciones avanzadas de Gtmetrix

Además del análisis simple y el análisis por elección de parámetros, Gtmetrix te ofrece un análisis avanzado que te permite, por ejemplo, analizar las versiones de un sitio que se está creando.

También puede, gracias a las opciones avanzadas, analizar rápidamente los sitios protegidos por identificación HTTPS. Finalmente, la herramienta le brinda la posibilidad de acceder a páginas que requieren el uso de cookies. 

3.2. Comparar URLs 

Para comparar URLs, simplemente realice un primer escaneo o elija entre las páginas que ya ha guardado. 

Luego haga clic en «Comparar» que aparece en el menú a la derecha de la pantalla. Una vez que haga clic en este menú, aparecerá una nueva ventana. 

Luego ingrese la dirección URL de la página con la que desea hacer una comparación. Y presione comparar. 

Espere a que se cargue la nueva ventana, que tardará poco en aparecer, allí encontrará los dos informes uno al lado del otro.  

Esta disposición le permite ver claramente los elementos de análisis de la primera URL, así como los de la segunda URL.

Luego puede estudiarlos a su gusto y determinar el sitio más optimizado. 

3.3. Monitorea una o más URLs 

En la opción básica, tienes la posibilidad de monitorear hasta 3 URLs.

Cuando desee configurar el seguimiento de su dirección URL, simplemente haga clic en «Supervisar».

Una vez que presiona Monitor, puede ver en la nueva ventana que aparece, una lista desplegable. Elija de esta lista el seguimiento que más le convenga.

Este puede ser un seguimiento diario, semanal o mensual. Si tiene una cuenta pro, estas tres formas de seguimiento se complementan con un seguimiento por horas.

Puede programar varias URL para que se supervisen a intervalos regulares (diariamente, semanalmente o mensualmente).

3.4. Crear alertas 

Gtmetrix te ofrece en esta parte crear condiciones que, cuando se alcancen o excedan, activarán una alerta que te será notificada por correo electrónico.

Para ello, primero deberás elegir la opción de crear alertas que encontrarás en el menú que aparece a tu derecha en la pantalla o en la parte superior si estás utilizando un móvil. 

Una vez elegido, marque «Habilitar alerta de correo electrónico» y cree las diferentes condiciones para las que le gustaría recibir una notificación.

Haga clic en agregar una condición que luego se encuentra en la parte inferior y elija la naturaleza de su condición. Estos pueden ser puntuaciones de rendimiento, tiempo de carga o tamaño de página. 

Una vez elegido, define en la segunda casilla si la alerta se envía cuando el elemento elegido es inferior o superior a un valor que debes introducir en la última casilla. Finalmente presione guardar.

3.5. Crear una API 

La API (Application Programming Interface) es un programa que permite que las funcionalidades de una aplicación sean utilizadas por otra. 

La API de reinicio de GTmetrix le ofrece una integración de pruebas de rendimiento en sus diferentes plataformas de desarrollo o en una aplicación. Pero antes de usarlo, necesita una clave API. 

Esta clave o contraseña establece la conexión entre las dos aplicaciones para darle acceso al uso de datos de otra aplicación.

Para generar los detalles de esta API, solo tiene que ir al final de la página y elegir Gtmetrix REST API: 

Haga clic en él y tendrá los detalles sobre cómo obtener los elementos de identificación de su API, a saber, la clave y el correo electrónico. Dirección.

Para obtener los detalles completos de la API de Gtmetrix, primero debe ir a: https://gtmetrix.com/api/0.1/

Una vez que acceda a esta dirección, deberá iniciar sesión con su dirección de correo electrónico y contraseña de GTMETRIX.

Luego puede generar claves de API simplemente haciendo clic en el cuadro Clave de API.

Para realizar solicitudes de análisis, necesita créditos API. Los créditos API se le pagan diariamente y de acuerdo con su plan. 

Un crédito corresponde a una solicitud mientras que 5 corresponden a una solicitud de video.

Capítulo 4: ¿Cómo interpretar un análisis Gtmetrix?

Aquí les presento los elementos de un análisis de Gtmetrix.

4.1. ¿Cuáles son los diferentes elementos de un análisis Gtmetrix?

Cuando realice su análisis en Gtmetrix, ya sea un análisis simple, personalizado o avanzado, obtendrá en la nueva ventana que aparece varios elementos.

Primero, tiene el icono de una vista previa de su sitio seguido del nombre del informe:

Puede leer en la pantalla información como:

• La URL analizada;

• La localidad o posición geográfica de la prueba;
• La fecha y hora en que se generó el informe;
• El navegador utilizado para hacer la prueba;
• El tipo de sitio que utiliza;
• Un mensaje que le indica si su sitio es lento o no.

En la parte inferior de esta primera información tienes tus puntuaciones de PageSpeed ​​e Yslow así como los detalles de tu página. Estos detalles incluyen:

• El tiempo de carga;
• El tamaño de la página;
• Los recursos cargados o solicitados desde el servidor para mostrar la página.

A la derecha de la pantalla tienes un menú que te da acceso a las otras acciones que puedes realizar de las que hablamos en el Capítulo 2.

Una vez que te desplazas hacia abajo puedes ver una tabla con detalles de 6 columnas. Estos son los resultados de su análisis. 

Incluye:

4.1.1. El análisis de PageSpeed

​​El análisis de PageSpeed ​​se basa en la herramienta de análisis Información sobre la velocidad de la página de Google. 

Los primeros dos elementos de la tabla brindan información sobre las pruebas de PageSpeed ​​​​e Yslow:

Los detalles del análisis de esta herramienta se registran en una tabla en 4 columnas:

• La primera columna contiene una lista de buenas prácticas : Se enumeran recomendaciones mejores prácticas debe hacer para que su sitio sea más rápido. Cuando toca una recomendación, se muestra la lista de acciones a realizar.
• La segunda columna se llama CLASE, muestra el porcentaje de finalización de una recomendación en su sitio web.
• La columna 3 le informa sobre la naturaleza de los archivos a corregir (CSS, JavaScript, archivo del servidor, imágenes, etc.).
• Finalmente, la última columna le informa sobre la prioridad de una tarea. Las prioridades pueden ser, por ejemplo, alta (minimizar redireccionamientos), Media (preferir recursos asincrónicos) o baja (evitar un juego de caracteres en la etiqueta META). La puntuación asignada está entre 1 y 100.

Las buenas prácticas para el análisis de velocidad de página son: Aplazar el análisis de 

• JavaScript;
• Minimizar las redirecciones;
• Aproveche el almacenamiento en caché del navegador;
• Minimizar Java;
• Minimizar CSS;
• Especifique un validador de caché;
• Optimizar imágenes;
• Habilitar la compresión;
• Evite las malas solicitudes;
• Evite los redireccionamientos en la página de destino;
• Habilitar Keep-alive;
• CSS en línea pequeño;
• Integre JavaScript para sitios pequeños;
• Reducir el tamaño de la solicitud;
• Ponga CSS en el encabezado de la página;
• Servir recursos desde una URL consistente;
• Sirve imágenes a escala;
• Combina imágenes usando Sprite CSS;
• Evite CSS @import;
• Preferir recursos asincrónicos;
• Especifique un juego de caracteres al principio;
• Especifique las dimensiones de la imagen;
• Evite un conjunto de caracteres en la etiqueta meta.

4.1.2. Yslow

El análisis de Yslow también se proporciona en el mismo formato que pagespeed. Es decir un sistema de puntuación entre 1 y 100. Dispones de un display de prácticas en diferentes colores para informarte de la tarea que tienes entre manos. 

Así, el color: 

• Verde indica las partes ya optimizadas en su sitio;
• El rojo representa las piezas que necesita optimizar;
• Naranja muestra las partes cuya optimización aún no está completa.

La lista de recomendaciones de YSlow son:

• Agregar encabezados caducados;
• Use una red de transmisión CDN;
• Evite los redireccionamientos de URL;
• Reducir las búsquedas de DNS;
• Comprimir los componentes;
• Realice menos solicitudes HTTP;
• Utilizar dominios sin cookies;
• Minimice JavaScript y CSS;
• Reducir el número de elementos DOM;
• Evite el filtro Alphaimageloader;
• caché Ajax;
• Eliminar JavaScript y CSS duplicados;
• Evite el error HTTP 404 no encontrado;
• Use Obtener para solicitudes Ajax;
• Evite las expresiones CSS;
• Reducir el tamaño de las cookies;
• Reduzca el tamaño del favicon y guárdelo en caché; 
• Configurar etiquetas de entidad de etiqueta electrónica;
• Haga que JavaScript y CSS sean externos.

Sin embargo, vale la pena recordar que los dos parámetros, aunque se refieren a la misma consulta, se distinguen por el hecho de que analizan según criterios diferentes. 

Esto, sin duda, justifica la diferencia en la calificación de las dos herramientas.

4.1.3. Gráficos

de cascada La herramienta de cascada es la herramienta que le permite conocer con precisión:

• Los elementos cargados en su página;
• Orden de carga y tiempo de carga.

Así, gracias a esta herramienta podrás ver de forma concreta los elementos que ralentizan la carga de tu página web. 

Tenga en cuenta que la información proporcionada por Gtmetrix se puede descargar en formato PDF.

En el nivel de la herramienta en cascada, tiene 4 columnas:  

• El columna URLdel archivo o recurso que se analiza. Cuando pasa el mouse sobre uno de los archivos, puede ver la ruta completa y la extensión del archivo;

• La segunda columna se relaciona con el estado del análisis. Con la información desplegada podemos saber si el análisis de este archivo fue exitoso o no;
• La tercera columna que corresponde al tamaño le indica el peso del archivo. Como puede imaginar, cuanto más pequeño sea este tamaño, más rápido será su sitio;
• La última columna de los gráficos en cascada le brinda información sobre la carga cronológica de su archivo. 

La parte que comprende la carga cronológica te permite visualizar la película de la carga de los diferentes elementos de tu página web. 

En efecto, cuando coloca el cursor sobre las bandas que se encuentran al nivel de esta columna, puede ver:

• El orden de carga de los elementos de su página web;
• Los detalles de una solicitud, así como su tiempo de ejecución;
• También verá el tiempo necesario para enviar, descargar y completar una solicitud.

Del mismo modo, cuando se acerca aún más a los elementos en la columna de carga de la línea de tiempo, puede ver barras de colores allí. 

Por supuesto, cada color tiene un significado. 

En efecto, el color: 

• Maron : Te informa sobre el tiempo de espera de una solicitud antes de que sea enviada al servidor.
• el color turquesa indica el tiempo de búsqueda de DNS.
• El verde representa el tiempo para establecer la conexión entre el host (servidor) y el cliente (navegador).
• El color Rojo indica el tiempo de envío y descarga de una solicitud
• El color Violeta, este color te permite ver el tiempo que esperó el servidor antes de contestarte.
• color Gris : El color gris corresponde a la recepción. En otras palabras, es el tiempo durante el cual el navegador descargó la respuesta del servidor.

Más allá de estos diferentes colores, el archivo en cascada también muestra 4 líneas que representan el calendario de eventos. 

Estas líneas incluyen:

• La línea verde que representa la visualización de la primera representación de su sitio web.
• La línea azul que representa el tiempo de carga del DOM.
• La línea roja que indica cuándo el navegador ha descargado y ejecutado todos los elementos de la página analizada.
• La línea morada significa que la página está completamente descargada, te indica el tiempo de inactividad de la red.

4.1.4. Los tiempos de carga de tu página

El tiempo te muestra los tiempos de carga de las páginas. Desde la orientación hasta la visualización completa, pasando por los tiempos de conexión y el tiempo que emite el servidor para responder. 

También ves en esta parte el tiempo de carga de la primera información en tu sitio web, el tiempo del primer renderizado, etc.

Los tiempos te muestran:

• El tiempo de respuesta de tu servidor;

• El tiempo de carga de la primera información. En su sitio y (primer byte);
• El tiempo de redirección : el tiempo entre el paso y la carga de la URL desde otra; 
• El tiempo total de carga : el tiempo de carga de todos los recursos de tu página; 
• Your Page Speed ​​Index : Esta es una métrica que te muestra qué tan rápido se llena la página. Cuanto menor sea este índice, mejor será su índice;
• Doms interactivos (el tiempo que lleva mostrar y analizar datos HTML);
• First Paint : Marca el tiempo real de carga del contenido en la página. Te da una idea de la experiencia de los internautas que visitan tu página.

4.1.5. Creación de un video que muestre la carga de su página web

La herramienta de video que permite a los usuarios realizar una grabación de video de la carga de las páginas para identificar de manera efectiva los problemas de carga. 

De hecho, el video le permite visualizar imagen por imagen cómo cargar su página para que pueda ver de manera concreta los cuellos de botella de la conexión de su sitio. 

4.1.6. El historial

La herramienta Historial le muestra el gráfico en relación con el tiempo de carga de los elementos de tiempo de una página durante varios días.

Con el historial, verá:

El gráfico sobre la sincronización de las páginas de su sitio;

Este gráfico te muestra la evolución de los tiempos de carga de los diferentes elementos de tu página en segundos y días. Puede ver:

El gráfico sobre el tamaño de la página y el número de solicitudes de las solicitudes HTTP a nivel de su página;

Este gráfico le brinda una descripción general del tamaño de su página y la cantidad de solicitudes registradas durante un período determinado. 

Descubrirá en particular

• El tamaño de los datos HTML cargados representados en rojo; 
• El tamaño total de la página para cada día representado por el color azul; 
• La evolución del número de solicitudes representada por el color verde. 

El gráfico de puntuación de Pagespeed e Yslow es el último elemento de la pestaña de historial:

En este gráfico, encontrará detalles sobre las puntuaciones de Pagespeed e Yslow de su página web en diferentes días.

Los datos de velocidad de página se representan en amarillo, mientras que la curva que muestra la evolución de las puntuaciones de Yslow se representa en azul.

La herramienta Historial le permite, entre otras cosas, agregar notas al nivel de cada gráfico. También tiene la opción de establecer una fecha de inicio y finalización para la visualización del historial. 

Tenga en cuenta también que si tiene un plan profesional, puede definir y ver todos estos gráficos durante 1 día, una semana, varios meses e incluso un año.

El historial proporcionado por el análisis de Gtmetrix se puede descargar en formato CSV. 

Ahora que ha visto las diferentes partes del análisis de Gtmetrix, aprenda cómo hacer la 

lectura del gráfico de cascada 4.2. ¿Cómo interpretar los resultados en cascada?

La herramienta de cascada es el elemento que te iluminará sobre el rendimiento de tu sitio web.

Entre otras cosas, proporciona información que le permitirá reconocer problemas y diagnosticar/resolver problemas de rendimiento en su sitio.

Cuando se trata de gráficos en cascada, es importante que sepa primero que las bandas son escamoso. Es decir que la longitud de las tiras se reparte según el tiempo total de carga de la página. 

La ausencia de esta información podría sesgar su análisis y hacerle creer que tiene un problema, cuando no es así. 

Para leer estos resultados, siempre debe mirar el tiempo de carga completa y la duración real de la demanda, para asegurarse de que está leyendo el gráfico en el contexto correcto.

La mayoría de los problemas informados con pagespeed y yslow se pueden encontrar en el nivel del encabezado. Para mostrar el encabezado de un archivo, simplemente vaya a la pestaña de cascada y haga clic en un elemento.

Cuando vea los nombres de archivo en rojo, significa que ocurrió un error al intentar cargar la aplicación. Entonces, el navegador que no puede recuperar esta solicitud simplemente la ignora.

Además, si ve barras largas en su archivo de cascada, esto puede indicar la presencia de demasiadas solicitudes HTTP y señalar varios problemas.

Por ejemplo, cuando encuentre:

• Una barra gris larga, significa que hay archivos grandes en su sitio.
• Una barra morada larga indicará que su servidor está tardando mucho en responder, por lo que debe buscar las razones de su sitio lento en ese lado.
• Una barra granate larga significa que el navegador inició su solicitud, pero está bloqueada o pendiente.
• Si la barra larga es verde, significa que tiene problemas de conexión con la red y el servidor.
• Sin embargo, si hay largos espacios en blanco entre solicitudes, significa que hay scripts que bloquean la ejecución de ciertos recursos.

Ahí lo tienes, ahora sabes cómo leer el rendimiento de tu sitio web, ahora verás cómo usar las recomendaciones dadas por Gtmetrix.

Capítulo 5: Algunas mejores prácticas recomendadas por Gtmetrix para optimizar tu sitio web

En este capítulo, te proporciono una lista de las mejores prácticas generalmente recomendadas por Gtmetrix y que tienen el poder de reducir los tiempos de carga de tu sitio web.

De hecho, Gtmetrix presenta los elementos de problemas e instrucciones para mejorar el rendimiento de los sitios web después de cualquier análisis: 

Echemos un vistazo más de cerca a lo que significan estas recomendaciones y otros consejos para optimizar su sitio web.

Tenga en cuenta que para una mejor comprensión, algunas capturas de pantalla de algunas partes traducidas al francés. 

5.1. Algunas buenas prácticas para optimizar tu sitio web

5.1.1. Minimice el CSS y minimice el script Java

Estas dos recomendaciones se basan en una técnica de optimización de código. La minificación, pues de eso se trata, es una técnica que consiste en reducir el tamaño de un código para aumentar el tiempo de carga en los servidores. 

Concretamente, se tratará de eliminar caracteres innecesarios, márgenes, saltos de línea. Y cualquier cosa que pueda aumentar el tráfico de red.

Entonces, para minimizar sus archivos JAVASCRIPT CSS, puede usar un complemento o hacerlo manualmente.

Para hacerlo manualmente, este es el procedimiento a seguir:

• Guarde el archivo y descargue una copia de su servidor;
• Abra el archivo desde un editor de código;
• Eliminar comentarios, espacios; 
• Reducir los nombres de clases o variables; 
• Transforma matrices en objetos; 
• Encuentre respuestas a expresiones constantes básicas;
• Optimizar instrucciones;
• Guarda y sube a tu sector. 

Esta manipulación puede ser compleja, te invito a utilizar las herramientas de minificación. 

Entre estos tienes: 

• Minifier.org : este es un sitio web que te permite copiar y pegar tu código y presionar minify para hacer que tus archivos java o CSS livianos estén directamente en línea.

• Mejor WordPress minify : este es un complemento incorporado de WordPress que optimiza directamente sus archivos Java y CSS.

Aquí un video que permite tener más información sobre el tema: 

&

5.1. 2. Optimice las imágenes 

Cuanto más grandes sean las imágenes, más difícil será para su sitio web cargar.

El proceso de optimización de imágenes consistirá por tanto en reducir sus tamaños para conseguir el equilibrio entre el tamaño más pequeño que corresponde a una imagen de calidad. Para realizar esta operación, uno de los métodos utilizados es comprimir las imágenes antes de enviarlas a su sitio. 

Para ayudarte, puedes usar el Tinybeest. Esta es una extensión gratuita que te ayuda a optimizar rápidamente tus imágenes.

Asimismo, es importante utilizar un buen formato de imagen para su sitio. Los mejores formatos de imagen actuales son sin duda los archivos: PNG, JPEG y GIF. Tienen la ventaja de ser aceptados por la mayoría de los navegadores.

El otro requisito es elegir una buena calidad de compresión frente al tamaño encontrando un equilibrio entre las proporciones de compresión y el tamaño del archivo.

5.1.3. Habilitar la compresión GZIP GZIP 

es tanto un formato de archivo como una aplicación que se utiliza para descomprimir y comprimir archivos. 

Una vez activado, reduce el tamaño de sus archivos. 

Para activarlo, puede usar: 

• Un complemento: Para activar la compresión GZIP usando un complemento, puede usar WP ROCKET que agrega reglas de compresión automáticas a su archivo htaccess. El archivo Htaccess se encuentra en el nivel raíz de su sitio. Este es un archivo oculto al que puede acceder a través de un administrador de FTP.

• Modificar el archivo Htaccess : Modificar el archivo htaccess para habilitar la compresión GZIP implica agregar una línea de código al archivo Htaccess.

Estas son las líneas de código para agregar al archivo htaccess:

# Comprimir HTML, CSS, JavaScript, texto, XML y fuentes

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application /x -font

AddOutputFilterByType DEFLATE aplicación/x-font-opentype

AddOutputFilterByType DEFLATE aplicación/x-font-

otf AddOutputFilterByType DEFLATE aplicación/x-font-truetype

AddOutputFilterByType DEFLATE aplicación/x-font-ttf

AddOutputFilterByType DEFLATE aplicación/x-javascript

AddOutputFilterByType DEFLATE aplicación /xhtml +xml

AddOutputFilterByType DEFLATE aplicación/xml

AddOutputFilterByType DEFLATE fuente/opentype

AddOutputFilterByType DEFLATE fuente/

otf AddOutputFilterByType DEFLATE fuente/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/

html erByType LATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Eliminar errores del navegador (solo es necesario para navegadores muy antiguos)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no -gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header add Vary User-Agent

¿Dónde encontrar el archivo htaccess? El archivo htaccess se encuentra en la raíz de su sitio. Este es un archivo oculto, pero se puede encontrar a través de un administrador de archivos FTP como Filezia.

5.1.4. Minimice los redireccionamientos 

El redireccionamiento le permite dirigir a los visitantes que ingresaron la URL incorrecta, por ejemplo, a la dirección URL correcta. Se pueden realizar de forma permanente o temporal. 

Los redireccionamientos también hacen que tu página sea accesible desde varias URL. 

Sin embargo, puede suceder que cometa un error al configurar su dirección URL. De tal forma que escribes la dirección URL de forma incorrecta, tu página puede tardar más en cargarse de lo habitual. 

Esto provocará un error 404, por ejemplo, o dará una experiencia desagradable a los visitantes. Debido a esto, es imperativo que tenga cuidado al configurar una redirección. 

Mejor, sería preferible hacerlo solo si es necesario. Aquí hay un video para guiarlo: 

5.1.5. Diferir el análisis de JavaScript

Cuando alguien visita su sitio web, su navegador primero muestra su sitio en HTML. Si durante la carga, el navegador encuentra elementos en JavaScript, dejará de cargar el HTML hasta que termine de analizar los datos en Java.

Este proceso que puede dar una mala experiencia a los visitantes afecta el tiempo de carga de tu página. Por lo tanto, aplazar JavaScript equivale a pedir a los navegadores de Internet que esperen a que se cargue el HTML antes de descargar JAVA. 

Cuando una herramienta como Gtmetrix le pide que posponga JavaScript, puede alinearse con esa recomendación usando las propiedades:

• ASYNC: Async descarga JavaScript mientras aún analiza el HTML, pero luego interrumpe el análisis de HTML para ejecutar JavaScript.
• O DEFER: el atributo Defer, a diferencia de Async, descarga JavaScript mientras continúa analizando el HTML y espera para ejecutarlo hasta que se completa el análisis de HTML. 

Para usar estas propiedades en un sitio de WordPress, debe descargar la extensión Async JavaScript. 

Es una extensión gratuita de WordPress. Una vez instalado, simplemente vaya a Configuración → JavaScript asíncrono para configurar la extensión. Eligiendo Asíncrono o Diferido.

¿Cómo hacerlo en concreto? Aquí hay un video: 

5.1.6. Evite juegos de caracteres en la etiqueta META Las etiquetas META 

son criterios muy esenciales en Google SEO. Permiten identificar mejor el contenido de la página web.

También está preparado para describir una página web y añadir las palabras clave para las que se optimizará dicha página. 

Esta etiqueta se coloca en la parte superior después de la etiqueta del título. Es importante que refleje el contenido de su sitio web. 

Si es necesario, los motores de búsqueda pueden no tener en cuenta su sitio, provocando así una mala visualización de la página. Por lo tanto, para optimizar las etiquetas meta, debe evitar: 

• Listar palabras clave en la etiqueta META 
• Usar letras mayúsculas, números o caracteres especiales 

Consulte mi guía de auditoría SEO para obtener más detalles sobre este elemento.

5.1.7. Sirve imágenes escaladas

Esta recomendación ocurre cuando no usas los tamaños reales de las imágenes para trabajar en tu sitio web y dejas que CSS las redimensione. 

Una imagen escalada asume que la imagen se ha escalado para adaptarse al uso previsto. 

Para hacer esto, puede usar, por ejemplo imageket.io, una herramienta en línea que le permite optimizar sus imágenes. Simplemente conecte su servidor a esta plataforma para transmitir las imágenes desde una red de entrega de contenido. Con capacidades de edición basadas en URL, esta plataforma podrá cambiar el tamaño y optimizar sus imágenes.

También puedes usar una herramienta como Photoshop ya que editar una imagen es muy fácil. 

Con Adobe Photoshop, abra una imagen:

• Abra una imagen con Photoshop: 

• En el menú, haga clic en Imagen:

• Haga clic en el tamaño de la imagen, aparecerá una nueva ventana de la siguiente manera: 

• Ahora modifique la dimensión de la imagen (ancho y alto) y guarde la nueva:

• cargue la nueva imagen en WordPress y reemplace la anterior para mostrar imágenes a escala.

Si desea servir imágenes a escala, puede recortar manualmente una imagen con WordPress. 

Para hacer esto, primero inicie sesión en el Panel de WordPress:

• a Medios > Biblioteca Biblioteca de medios: 

•  Haga clic en la imagen que desea recortar:

• Haga clic en editar imagen para abrir la interfaz de edición:

• Vaya a escalar la imagen cambiando el tamaño o recorte la imagen usando las opciones correspondientes en el Correcto.

5.1.8. Evite los redireccionamientos en la página de destino

Cuando ha movido un elemento de su sitio, por ejemplo, necesita redirigir la antigua URL a la nueva para permitir que los usuarios de Internet encuentren lo que buscan. 

Sin embargo, estos redireccionamientos pueden causar latencia y, por lo tanto, una mala experiencia de usuario. 

De hecho, las redirecciones aumentan la cantidad de solicitudes que se envían al servidor, así como la cantidad de respuestas que envía. Estos excedentes de solicitud-respuesta deben reducirse.

La reducción consistirá, por tanto, en reducir estos desvíos a lo estrictamente necesario.

Puedes solucionar este problema:

Eliminando los redireccionamientos innecesarios y para ello debes:

• Evitar referenciar URLs que redirigen a otras URLs.
• Evite el uso de múltiples redirecciones para acceder al mismo recurso. 
• Minimice la cantidad de URL que emiten redirecciones pero que en realidad no tienen contenido.

Otra solución sería utilizar la reescritura interna a nivel de servidor para configurar una redirección. Por lo tanto, cuando el cliente realiza una solicitud y esta solicitud regresa a una URL incorrecta, el servidor la reasigna inmediatamente a la correcta.

5.1.9. Evite CSS @import

@import es una regla que le permite importar una hoja de estilo a otra hoja de estilo. 

El uso de esta propiedad en su sitio web, particularmente con respecto a las hojas de estilo externas, hará que su página se cargue por más tiempo. 

Por ejemplo, si la hoja de estilo externa es:

• CSS 
• hoja de estilo externa Y esta hoja contiene el comando 
• @import URL (hoja de estilo para importar)

El navegador descarga, analiza y ejecuta el archivo style sheet.css primero antes de contar tiene que descargar el hoja de estilo a importar. Esta es probablemente la causa de un tiempo de carga más largo.

5.1.10. Activar Keep Alive

Esta es una función que mantiene el contacto entre dos dispositivos. Basada en el envío de un mensaje, esta funcionalidad permite el intercambio de mensajes entre dos dispositivos. El propósito de sus mensajes es verificar la existencia de una conexión y asegurar que esta conexión se mantenga.

Como parte de su sitio web, la función de mantener vivo debe estar habilitada entre el servidor y el cliente.

Para habilitar la función Keep Alice al usar un servidor apache: 

• simplemente agregue la línea: keep Alive On a su archivo de configuración httpd.conf.
• También puede preguntarle a su host 
• . Puede configurarlo desde su archivo htaccess agregando la línea de código 

<if Module mod_headers.c>

Header set Connections keep-alive

</ifModule>

5.1.11. Aproveche el almacenamiento en caché del navegador 

Puede mejorar los tiempos de carga de su sitio web solicitando a los navegadores de los usuarios que guarden ciertos archivos en su primera visita: Esto es almacenamiento en caché del navegador.

Esto contribuye a la reducción del tiempo de carga de su sitio web en la medida en que el tiempo de carga de las páginas se reduce durante un nuevo uso por parte del mismo navegador. 

De hecho, durante su primera visita, el sitio le dice a su navegador que cargue ciertos archivos estáticos de su sitio, los almacene y no los descargue si regresa.

Para configurar esta función, debe modificar los encabezados HTTP para indicar tiempos de espera para ciertos archivos.

En Apache: 

Vaya a su archivo htaccess, está en la raíz de su dominio, puede verlo usando un cliente FTP como Filezilla.

Si usa WordPress:

Puede activar este archivo accediendo directamente a su archivo htaccess. Los archivos htaccess son archivos ocultos que puede encontrar en la raíz de su sitio en la página www.

Usando un editor de texto, modifique este archivo agregando las siguientes líneas de código:

# Almacenamiento en caché de archivos en el navegador

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault “acceso más 1 mes”

ExpiresByType text/html “acceso más 0 segundos”

ExpiresByType text/ xml “acceso más 0 segundos”

ExpiresByType application/xml “acceso más 0 segundos”

ExpiresByType application/json “acceso más 0 segundos”

ExpiresByType application/pdf “acceso más 0 segundos”

ExpiresByType application/rss +xml “acceso más 1 hora”

ExpiresByType application/atom+xml “acceso más 1 hora”

ExpiresByType application/x-font-ttf “acceso más 1 mes”

ExpiresByType font/opentype “acceso más 1 mes”

ExpiresByType application/x-font -woff “acceso más 1 mes”

ExpiresByType application/x-font-woff2 “acceso más 1 mes”

ExpiresByType image/svg+xml “acceso más 1 mes”

ExpiresByType application/vnd.ms-fontobject “acceso más 1 mes”

ExpiresByType image /jpg “acceso más 1 mes”

ExpiresByType image/jpeg “acceso más 1 mes”

E xpiresByType image/gif “acceso más 1 mes”

ExpiresByType image/png “acceso más 1 mes”

ExpiresByType video/ogg “acceso más 1 mes”

ExpiresByType audio/ogg “acceso más 1 mes”

ExpiresByType video/mp4 “acceso más 1 mes”

ExpiresByType video/webm «acceso más 1 mes»

ExpiresByType texto/css «acceso más 6 meses»

ExpiresByType aplicación/javascript «acceso más 6 meses»

ExpiresByType aplicación/x-shockwave -flash «acceso más 1 semana»

ExpiresByType image/x-icon «acceso más 1 semana»

</IfModule>

# Encabezados

Encabezado no establecido ETag

FileETag Ninguno

<ifModule mod_headers.c>  

<filesMatch «\.(ico|jpe?g |png|gif|swf)$”>  

    Encabezado establecido Cache-Control “ public”  

</filesMatch>  

<filesMatch “\.(css)$”>  

    Conjunto de encabezado Cache-Control “public”  

</filesMatch>  

<filesMatch “\. (js)$”>  

    Conjunto de encabezado Cache-Control “privado”  

</filesMatch>  

<filesMatch “\.(x?html?|php)$”>  

    Conjunto de encabezado Cache-Control “privado, debe revalidar”

</filesMat ch >

</ifModule> 

Asegúrese de establecer las fechas de vencimiento de acuerdo con los tiempos de actualización de los diferentes archivos en su sitio web. Cuando haya terminado, guarde el archivo.

También puede hacer esto usando un complemento. El complemento WP Rocket o W3 Total cache, por ejemplo, puede permitirle aprovechar el almacenamiento en caché del navegador.

5.1.12. Reducir el tamaño de la solicitud HTTP

Un tamaño de solicitud HTTP alto da como resultado un gran flujo de solicitudes.

Por lo tanto, puede evitar esta sobrecarga reduciendo:

• Cookies : limite las cookies que deben enviarse reduciendo su tamaño en la medida de lo posible a menos de 1000 bytes. Google recomienda que este tamaño sea inferior a 400 bytes. 
• URL : evite hacer que las URL sean más pesadas agregando varios parámetros, esto puede aumentar su tamaño a bytes adicionales. Por lo tanto, es necesario que limite su tamaño a unos pocos cientos de bytes.

5.1.13. Preferir recursos asíncronos 

Los recursos asíncronos no bloquean la carga de la página ya que este recurso es diferido hasta que el navegador del usuario web termine de cargar el código HTML.

Puede solucionar este problema haciendo que JavaScript sea asíncrono. Para hacer esto, puede usar la propiedad Async de HTML en scripts externos agregando:

<script async sec=»my.js»>.

También puede usar un elemento dom de secuencia de comandos para promover la carga asíncrona de páginas en el nivel del navegador de sus usuarios. 

5.1.14. Coloque CSS en la parte principal del documento 

Mover elementos de estilo al documento HTML permite que se descarguen primero. Esto permite que los navegadores muestren gradualmente una página.

El incumplimiento de esta recomendación puede tener como consecuencia el bloqueo de la visualización de la página por parte del navegador e incluso el desplazamiento del contenido.

Para poner CSS en el encabezado del documento HTTP:

• debe usar elenlace en el <head>   de su documento HTML para las hojas de estilo externas.
• También debe especificar las hojas de estilo en el orden correcto. Para eso, necesitas usar <style> en la parte <head>.

5.1.15. Especifique un validador de caché 

Esta nota significa que no hay un encabezado de almacenamiento en caché HTTP incluido en su servidor. Para corregir este problema, puede utilizar los siguientes encabezados: 

Última modificación : este encabezado le permite ver si el archivo en el caché del navegador se ha modificado desde la última visita.herramientas de desarrollo de Chrome 

control Caché : está compuesto por directivas con las que tiene la posibilidad de definir la longitud del caché. 

Las directivas más utilizadas son: 

• Max-Age que permite definir la duración de caché de un elemento;
• Public que permite que un caché almacene públicamente una respuesta;
• Privado que permite que un elemento se almacene en caché solo con el navegador que accede al archivo.

Caduca : para configurar el encabezado para que caduque, debe agregar la siguiente línea de código a su archivo htaccess. 

## EXPIRES HEADER CACHING ##

  ExpiresActive On

 ExpiresByType image/jpg “acceso 1 año”

 ExpiresByType image/jpeg “acceso 1 año”

 ExpiresByType image/gif “acceso 1 año”

 ExpiresByType image/png “acceso 1 año”

 ExpiresByType text/css “ acceso 1 mes”

 Aplicación ExpiresByType/pdf “acceso 1 mes”

 Aplicación ExpiresByType/javascript “acceso 1 mes”

 Aplicación ExpiresByType/x-javascript “acceso 1 mes”

 Aplicación ExpiresByType/x-shockwave-flash “acceso 1 mes”

 Imagen ExpiresByType/x -icono «acceso 1 año»

 ExpiresDefault «acceso 7 días»

  ## EXPIRA CACHE DE CABECERA ##

5.1.16. Definir un conjunto de caracteres

El conjunto de caracteres se utiliza para representar caracteres mediante números. 

En el conjunto de caracteres ASCII, por ejemplo, los números del 0 al 127 se utilizan para representar todos los caracteres ingleses y controles especiales. 

Especificar un conjunto de caracteres es útil porque permite que comience el análisis de HTML y la ejecución de secuencias de comandos. La inexistencia de un conjunto de caracteres deja que el navegador lo haga por sí mismo, puede tardar más.

Para especificar un conjunto de caracteres, puede definirlo a nivel de su servidor enviando un encabezado de tipo de contenido usando la línea de comando:

Texto/html; Charest = UTF-8.

5.1.17. Incrustar JavaScript para sitios pequeños 

No se recomienda incrustar JavaScript, ya que puede aumentar el tamaño de carga de su sitio web. 

Sin embargo, si se trata de un sitio web pequeño, la integración de JavaScript puede mejorar su rendimiento. 

Para poder instalarlo, te sugiero que utilices Autoptimize :

esta es una herramienta gratuita que te da acceso a varias opciones para optimizar tu sitio. 

Para usarlo, simplemente vaya a las opciones reservadas para JavaScript y marque «Agregar archivos JS», que combinará todos sus archivos java en uno.

5.1.18. Minimice las solicitudes HTTP 

El tiempo de carga de su sitio web en el navegador de un usuario puede verse afectado si hay más imágenes o medios para cargar.

Esto se justifica por el hecho de que los protocolos HTML/HTTP no transfieren simultáneamente una gran cantidad de recursos. 

Para remediar este problema que sin duda afecta la velocidad de tu sitio y la experiencia del usuario, debes optar por una reducción en el número de solicitudes HTTP. 

Para ello, aquí hay tres soluciones: 

• Archivos combinados : este truco consiste en combinar todos los scripts en un solo script y todos los archivos CSS en una sola hoja de estilo CSS. 
• CSS Sprites : este método es el más utilizado cuando se trata de reducir el número de solicitudes HTTP. Consiste en poner varias imágenes en un solo archivo de imagen. Por lo tanto, para optimizar el sitio, puede, por ejemplo, combinar todas las imágenes de fondo en una sola imagen y usar las propiedades CSS background image y CSS background position para mostrar la imagen deseada.

5.1.19. Hacer solicitudes sin cookies

El contenido de su sitio se puede definir en contenido estático y contenido con cookies. Si para solicitudes estáticas se solicitan cookies, esto provoca más tráfico en la red y por lo tanto más tiempo de carga.

Así, cuando al final de tu análisis de rendimiento, Yslow te recomienda realizar solicitudes sin cookies, la solución consiste en: 

• Crear un subdominio y transferirle todo tu contenido estático, cuidando de no definir ninguna cookie;  
• Compra un nuevo dominio y mueve todo tu contenido sin agregar cookies. 

5.1.20. Reduzca las búsquedas de DNS

El DNS (Sistema de nombres de dominio) es un directorio. Entonces, una vez que se conecta a Internet e ingresa la dirección de un sitio, el DNS busca la dirección IP de ese sitio y le permite acceder a él.

Mientras busca la dirección IP, su navegador no puede descargar nada del sitio. El número de búsquedas de DNS cuando un usuario de Internet quiere acceder a su sitio web por primera vez es igual a los diferentes nombres de host en su página. 

Concretamente, estos son los nombres de host utilizados en la URL, las imágenes, los scripts, las hojas de estilo, etc. 

Dado que la búsqueda de todos estos elementos lleva más tiempo, sería mejor dividir los componentes de su página en dos o tres nombres de host para crear un intercambio. desactivado entre las búsquedas de DNS y el tiempo de respuesta.

5.1.21. Evite errores 404 no encontrados

El error 404 es un mensaje utilizado por el protocolo HTTP para decirle al navegador que para una solicitud determinada, no se encontró ningún recurso. 

Pero sabiendo que las solicitudes HTTP aumentan el tráfico de su sitio al desperdiciar recursos del servidor y brindar una mala experiencia al usuario, sería mejor evitarlas tanto como sea posible.

5.1.22. Reducir el número de elementos DOM

En primer lugar, el DOM es un elemento que define la estructura de una página HTML. Según Google Page insights es excesivo cuando su tamaño supera las 1500 etiquetas:

Un DOM más grande requerirá más memoria tanto a nivel de tu navegador como a nivel de las hojas de estilo. Para reducir el DOM, la solución sería reducir el tamaño de tu página HTML para simplificar los elementos y por lo tanto el tiempo de carga. 

Aquí hay un video para ir más allá: 

5.1.23. Configurar

etiquetas de entidad E-TAG Las etiquetas de entidad E-TAG son un protocolo HTTP que interviene en el reconocimiento y la validación de los elementos almacenados en la memoria caché.

De hecho, estas etiquetas permiten saber si un elemento ubicado en el caché corresponde al del servidor de origen. Los elementos validados pueden ser imágenes, código, scripts, etc. 

Por lo tanto, si entre dos visitas se ha modificado un elemento en su sitio, el servidor y el navegador del usuario final tendrán etiquetas electrónicas diferentes y, por lo tanto, se devolverá el archivo. De lo contrario, el archivo ya no se envía, lo que contribuye a que la página se cargue rápidamente en la pantalla del internauta.

5.1.24. Utilizar una red de distribución de contenidos CDN

Es un conjunto de ordenadores conectados en red y que se comunican para poner contenidos a disposición de los usuarios. En realidad, se trata de servidores dispersos geográficamente, lo que ofrece proximidad a los usuarios de Internet.

Esta proximidad favorece la velocidad de carga de tu página web. El CDN no solo se recomienda para cargar su contenido rápidamente, sino también para permitir un uso agradable de su sitio a nivel global. 

Akamai es un ejemplo de proveedor de CDN. 

5.1.25. Agregar encabezados caducados

El encabezado caducado le pregunta al navegador si debe enviar un archivo al servidor o recuperarlo del caché del navegador. 

El objetivo es evitar que el navegador descargue un archivo que no ha sido modificado y por lo tanto ahorrar tiempo de carga y cargar rápidamente la página web.

Para agregar encabezados vencidos: 

• puede consultar el uso de encabezados vencidos para datos estadísticos; 
• Puede usar la estrategia usando el encabezado Far Future.

Para componentes dinámicos, use el encabezado de control de caché en su lugar: 

Para configurar el encabezado de expiración, puede agregar las siguientes líneas de código a su archivo htaccess:

## EXPIRES HEADER CACHING ##

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “acceso 1 año”

ExpiresByType image/gif “acceso 1 año”

ExpiresByType image/png “acceso 1 año”

ExpiresByType text/css “acceso 1 mes”

ExpiresByType application/pdf “acceso 1 mes”

ExpiresByType application/javascript «acceso 1 mes»

Aplicación ExpiresByType/x-javascript «acceso 1 mes»

Aplicación ExpiresByType/x-shockwave-flash «acceso 1 mes»

Imagen ExpiresByType/x-icon «acceso 1 año»

ExpiresDefault «acceso 7 días»

## CACHE DE CABECERA CADUCADA # #

5.1.26. Evitar el filtro Alphaimageloader

Este es un filtro que soluciona problemas con archivos PNG en versiones de Internet Explorer inferiores a la 7. 

Pero a veces este filtro bloquea el renderizado del navegador durante la descarga de la imagen. 

Para evitar este problema, Yslow recomienda preferir el degradado PNG8. Sin embargo, si realmente desea usar este filtro, sería mejor si usara el truco de subrayado de «filtro».

5.1.27. Reducir

las expresiones CSS Las expresiones CSS son propiedades que le permiten agregar JavaScript a su hoja de estilo. 

ancho: expresión (500 + «px»);

ancho: expresión(document.body.clientWidth > 600 ? “600px” : “100px”);

Pueden crear problemas al cargar su página ya que las expresiones se evalúan con frecuencia. Por lo tanto, para superar este problema, una solución sería usar una sola expresión o un controlador.

5.1.28. Use Get para solicitudes ajax

Las solicitudes GET y POST son solicitudes HTTP que se utilizan tanto para recibir como para transmitir datos. 

Al realizar una solicitud de tipo XMLHTTPRequest, es mejor utilizar Obtener en lugar de publicar. 

Porque la publicación envía encabezados y datos en dos pasos, mientras que Get envía datos y encabezados juntos. 

Sin embargo, el uso del encabezado ya no es posible cuando la URL supera los 2 KB.

5.1.29. Permitir almacenamiento en caché de datos AJAX 

Ajax significa: JavaScript asíncrono y XML. Esta forma de solicitudes le permite enviar solicitudes asíncronas al servidor. 

Sin embargo, dado que su uso no garantiza que el usuario no tenga que esperar, sería mejor mejorar las respuestas para optimizar el tiempo de espera. 

Se puede solucionar este problema agregando un encabezado de control de caducidad o de caché.

5.1.30. Eliminar duplicados de JavaScript y CSS

Durante la codificación de su sitio web, puede suceder que inserte el mismo código JavaScript o CSS dos veces. Esta podría ser la causa de que su sitio no se cargue correctamente. 

Esto se debe a que los archivos JavaScript y CSS duplicados pueden crear solicitudes HTTP innecesarias en los navegadores de los usuarios. Los scripts se evalúan varias veces, lo que genera una ejecución redundante y una pérdida de tiempo.

Para resolver este problema, puede hacer arreglos integrando un módulo de administración de secuencias de comandos en su página HTML utilizando la etiqueta de secuencia de comandos.

<script type=»text/JavaScript»

También puede hacer esto en PHP creando la función insertscript.

<? ¿Inserciones de disturbios de PHP (“menu.js”)?>

Aquí hay un video que muestra cómo hacerlo: 

5.1.31. Reducir el tamaño de las cookies 

Las cookies son elementos enviados por un servidor web y almacenados en su computadora. Informan al servidor de sus hábitos de navegación.

Se pueden utilizar para:

• Registrar sus hábitos de navegación;
• Te conectas a un sitio web;
• Guarde sus preferencias para un sitio.

Su tamaño es importante para el rendimiento de su sitio, ya que las cookies establecidas pueden acumularse y aumentar el tamaño de su sitio.

Para reducir el tamaño de las cookies, puede realizar las siguientes acciones:

• Eliminar las cookies innecesarias;
• Establezca el tamaño de la cookie en el valor más bajo posible;
• Establecer cookies en los dominios apropiados;

5.1.32. Ponga Javascript en la parte inferior del documento HTML

Como ya sabe, JavaScript bloquea la carga normal de su sitio web. 

Cuando lo coloca en la parte superior de la página, los navegadores lo ejecutan antes de cargar el resto de la página. Por lo tanto, puede remediar este estado de cosas moviendo sus scripts al final de la página.

Puede hacer esto usando un complemento: «JavaScript to footer». Bastará con activarlo para que tus scripts se muevan hacia abajo.

5.1.33. Use JavaScript y CSS externamente  

utilizando archivos Java y CSS externamente hace que se almacenen en caché el navegador del cliente, esto reduce el tamaño de las solicitudes HTML y, por lo tanto, permite que su página se cargue más rápido.

Usar css en un archivo externo es más fácil y flexible, a diferencia de insertarlo directamente en una página. Para usar CSS externamente, comience creando un archivo que llevará el nombre de los estilos a los que agregamos la extensión CSS.

Una vez que se ha creado el archivo, se debe agregar a la página de su sitio usando <Nink>

usando la línea de código:

<ink> rel = «Stylesheet» href = «style.css» \>

para usar Java desde un archivo externo, debes comenzar creando tu archivo al cual le agregarás la extensión Java (.JS)

Luego a nivel de tu página HTML, agregas este script usando la etiqueta <script>

Usando la línea de código:

<Script src =»ruta/al/el/script.js»></script>

5.1.34. Haga que el favicon sea pequeño y habilite su almacenamiento en caché 

La palabra favicon nació de la contracción de las palabras inglesas favorite e icon. Designa el archivo de icono. En definitiva, es el icono que simboliza tu web.

Esta característica fue introducida por la versión 5 del navegador Internet Explorer antes de ser tenida en cuenta por otros navegadores. 

Entonces, como característica, el navegador del cliente lo solicita desde el servidor. Si está ausente, provoca un error 404, mientras que si su tamaño es grande, requiere mucho esfuerzo por parte del servidor, lo que puede ser la causa de la carga lenta de su sitio web.

Para evitar este problema, deberá asegurarse de que el tamaño no supere 1 KB. Puede almacenarlo en caché configurando el encabezado de expiración.

5.1.35. Evite cambiar el tamaño de las imágenes en HTML

El uso de HTML para definir el tamaño de las imágenes, en particular los atributos de altura y ancho, no es una buena idea ya que conducen a un aumento en el tamaño de estas imágenes. 

Como resultado, cuando son descargadas por el navegador del cliente, las imágenes se vuelven más grandes, lo que agrega tiempo a la carga de la página del navegador del visitante.

5.1.36. Evita

src o href vacíos src y href son atributos HTML, te permiten definir las condiciones de existencia de un elemento (video, imágenes, textos).

atributo src le permite indicar la fuente de un elemento, mientras que el href le permite indicar la ruta por la cual acceder a este elemento.

Cuando deja estos dos elementos vacíos, en su página, puede esperar el silencio del navegador de los usuarios. 

De hecho, cuando src y href no están definidos, los navegadores envían varias solicitudes al servidor. Esta es la causa del alto tráfico en los servidores, bloqueando así la carga de la página.

Aquí está la lista casi exhaustiva de recomendaciones que generalmente da Gtmetrix. Aquí hay algunos consejos adicionales para usar:

5.2. ¿Cómo optimizar su sitio de WordPress con complementos?

Usar código para mejorar su sitio puede resultar incómodo porque requiere mucho esfuerzo. Es en esta perspectiva que también le sugiero que optimice sus sitios:

5.2.1. Instala o no gtmetrix 

Después de analizar la velocidad de tu sitio de WordPress, te das cuenta de que el tiempo de carga es alto. 

Veamos cómo optimizar la velocidad de su sitio web utilizando el complemento Gtmetrix.

Antes de comenzar, necesitará saber su: 

• nombre de dominio;
• Credenciales para su sitio de WordPress.

Una vez que haya iniciado sesión en su tablero, vaya al menú de la izquierda, busque y haga clic en el complemento y seleccione Agregar nuevo complemento. 

Una vez hecho esto, busque en la nueva ventana que aparece frente a usted el complemento Gtmetrix. Tan pronto como lo encuentre, instálelo y actívelo. 

Ahora que su sitio de WordPress tiene el complemento de WordPress, puede comenzar el proceso de optimización. Para esto, necesitaría registrar una clave API. 

Para hacer esto, simplemente vaya al sitio de gtmetrix y regístrese ingresando su correo electrónico. Después del registro, copie y pegue su clave api e insértela en el campo indicado en el nivel de WordPress. 

Guardar cambios. Regrese a la configuración del complemento Gtmetrix y realice las pruebas. Si su API está instalada correctamente, verá su puntuación. De lo contrario, reanude el proceso de instalación de la API.

Además, si su API está instalada correctamente, verá los resultados de la prueba de su página. A partir de las recomendaciones, optimice su sitio para hacerlo mejor. 

El propósito de instalar el complemento Gtmetrix es mostrar los resultados del análisis de su sitio directamente en su tablero.

Sin embargo, antes de proceder con las diversas modificaciones, sería conveniente guardar la versión actual de su sitio web.

Para ello, solo necesitas instalar y activar el UpdraftPlus.

Este complemento le permite tener una copia de seguridad completa de la última versión de su sitio web, ya sea:

• La base de datos; 
• complementos;
• temas;
• De tus descargas.

Una vez hecho esto, puede restaurar su sitio si ocurre un error durante la optimización.

Como resultado de esto, puedes ver en tus analíticas qué prácticas te recomienda Gtmetrix para mejorar la velocidad de carga de tu sitio. 

Dependiendo de cada pauta de optimización, puede usar complementos para optimizar completamente su sitio.   

5.2.2. Complementos de WordPress para mejorar la velocidad de su sitio web

Aquí hay algunos complementos de WordPress que lo ayudarán a configurar su sitio para obtener resultados de carga rápidos. 

Complemento 1: CDN Enabler

El complemento gratuito CDN Enabler se utiliza para implementar KeyCDN.

Rápido y liviano, este complemento le permite:

• Vincular activos para cargar desde un CDN;
• Definir directorios;
• Establecer exclusiones (directorios o extensiones)
• Habilitar o deshabilitar CDN para HTTPS.

Complemento 2: CAOS

El complemento CAOS gratuito se utiliza para sincronizar Google Analytics localmente. Complementa a Analytics Optimization Suite y le permite alojar localmente analytics.js/gtag.js/ga.js y mantenerlo actualizado.

Además, cada vez que ejecuta un análisis de su sitio web en Google Pagespeed Insights, Pingdom o Gtmetrix, le indica que use el caché del navegador. El tiempo de caducidad de la memoria caché se ha establecido en 2 horas. 

Debido a esto, el complemento CAOS le dará una puntuación más alta en Pagespeed y Pingdom y hará que su sitio web se cargue más rápido porque el navegador del usuario no tiene que ir y venir para descargar el archivo del servidor. externo a Google.

Permite entre otras cosas:

• Modificar el orden de las colas;
• Establecer el período de caducidad de las cookies;
• Para forzar la desactivación de la configuración de visualización;
• Agregue el código de seguimiento al encabezado y al pie de página manualmente.

3: Perfmatters

El complemento de rendimiento utilizado para deshacerse de las solicitudes HTTP innecesarias y deshabilitar cosas como Emojis e ‘Incrustaciones’.

Complemento 4: González 

Gonzales permite deshabilitar condicionalmente CSS, JS e incluso complementos según la página que esté visitando.

Es una herramienta simple y liviana con la que puede deshacerse de un sitio web sobrecargado excluyendo los archivos CSS y JS innecesarios guardados.

Para usarlo hay que pagar una licencia, cuyo precio varía entre $29 y $199.

5: Imaginar 

El complemento Imgify le permite optimizar sus imágenes directamente en WordPress. Una vez habilitado, todas sus imágenes, incluidas las miniaturas, se pueden optimizar automáticamente cuando se cargan en WordPress. 

También puede usar Imagify para convertir imágenes web de forma gratuita.

No es gratis, sin embargo, le permite optimizar hasta 25 MB de imagen por mes. La opción paga te permite optimizar entre 1 gb y 50 Gb de imagen por mes.

Le permite elegir un archivo de imagen y optimizarlo;

• Admite archivos PDF;
• Puede regenerar fácilmente sus miniaturas;
• Optimice las imágenes del tema que ha activado en su sitio de WordPress;
• Puede admitir varias claves de API.

Una vez que haya terminado de realizar las diversas configuraciones, escanee su sitio nuevamente en gtmetrix.com o con el complemento para ver los cambios. 

Esta lista de complementos no es exhaustiva, todavía hay otros que le permitirán resolver varios otros problemas de optimización. Los iré completando a medida que los descubra.

Si bien Gtmetrix es una herramienta excepcional y poderosa para analizar el rendimiento de tu sitio web, te presento otras herramientas de análisis.

Capítulo 6: Otras herramientas de análisis de rendimiento de sitios web

En este capítulo, presento algunas herramientas de análisis de rendimiento de sitios web. También haré una comparación con la herramienta Gtmetrix.

6.1. Otras herramientas para analizar el rendimiento de su sitio web

6.1.1.  dareboost 

Dareboost es una herramienta de análisis de rendimiento que se puede utilizar para analizar su sitio web. Puede funcionar bien en múltiples navegadores tanto en PC como en dispositivos móviles. 

Analiza su sitio web y le da una puntuación de 100 puntos. También muestra las correcciones y optimizaciones que debe realizar en su sitio.

Dareboost tiene varias funciones y características. Sobre todo porque no solo le permite probar la velocidad de su sitio, sino también monitorear, comparar y configurar alertas para sus sitios web.

Cuando realiza un análisis con dareboost, tiene acceso a varias informaciones que incluyen: 

• Las mejores prácticas que debe adoptar;
• Cierta información sobre el estado de su sitio en relación con el cumplimiento de los estándares web; 
• Información sobre el tipo de servidor, CMS o marcos que utiliza en su sitio.
• Las prácticas que sigues.
• Una tabla resumen que te da la puntuación de tu página, el navegador desde el que realizas tu prueba, ubicación del servidor.

Aunque puedes encontrar una gran cantidad de datos de forma gratuita, la herramienta ofrece tres planes:

El plan de «rendimiento» por valor de 310 euros al mes, este plan te permite:

• Generar informes ilimitados 
• Monitorizar automáticamente 15 páginas web
• Configurar el seguimiento de análisis con una frecuencia de 30 minutos 
• Conserva tus datos durante 6 meses 
• Comparte tus cuentas con 10 personas 
• Accede a 13 lugares de prueba
• Realiza consultas y análisis mediante una API.

Un plan empresa: este plan tiene un valor de 49 euros al mes, te da acceso a:

• Informes de análisis ilimitados
• Seguimiento de 5 páginas web con una frecuencia diaria 
• Retención de tus datos durante 6 meses 
• Compartir tus datos con tres personas 
• Consulta y análisis utilizando una API
• Acceso a 13 ubicaciones de prueba 

Un plan personalizable que le permite configurar sus opciones. Sin embargo, este plan por defecto cuesta 19 euros al mes y te permite hacer:

• 50 análisis al mes. 
• Monitoreo automático con frecuencia diaria Almacenamiento 
• de sus datos por 1 mes 
• Compartir sus datos con una sola persona 
• Consulta por API y acceso desde 13 lugares de prueba.

 6.1.2.    Pingdom

Pingdom es un sitio que ofrece monitoreo de sitios web para advertir sobre su latencia. Ofrece acciones como:

• Monitoreo sintético: Para monitorear la experiencia de usuario de los visitantes de sus sitios web.
• Seguimiento de usuarios reales: Para mejorar el rendimiento de su sitio en base a la información recopilada sobre ellos.

Pingdom también puede crear alertas para informarte de los resultados de tu sitio web por correo electrónico. 

La suite de monitoreo Pingdom está disponible a partir de $42 por mes. Actualmente, el sitio ofrece una prueba gratuita con un precio de $ 10 por mes para cada opción de monitoreo.

Reconocido por su facilidad de uso, pingdom le permite probar la velocidad de su sitio desde siete ubicaciones:

• Japón  
• Alemania
• Inglaterra
• Brasil
• Washington 
• Australia
• San Francisco.

Cuando analice el rendimiento de su sitio con esta herramienta, obtendrá información sobre:

• ​​La puntuación;
• Tiempo de carga;
• El tamaño total de la página escaneada;
• El número de solicitudes;
• La ubicación de la prueba;
• El porcentaje de sitios en los que su puntuación es más alta. 

Además de las puntuaciones, el análisis de pingdom también le revela los códigos de estado HTTP. Este es un mensaje que se utiliza para indicar el éxito o el fracaso de una solicitud. Existen tres códigos pingdom:

• Código 200 para notificar que la solicitud fue exitosa;
• 301 Códigos para una solicitud cuyo recurso se ha movido
• 404 Códigos para una solicitud cuyos recursos no se han encontrado.

Después de los códigos de respuesta HTTP, ahora tiene el tamaño del contenido que puede ser:

• Por tipo de contenido;
• O por tipo de dominio.

Como puedes imaginar, cuanto mayor sea este tamaño, más significará que tu sitio web debe estar optimizado.

La pieza final del análisis de pingdom son los gráficos en cascada. Estos también son elementos en cascada que brindan información sobre todas las consultas disponibles en un sitio web.

6.1.3.    Tendencias alcistas 

Uptrends es una herramienta de análisis del rendimiento del sitio web que le permite optimizar su sitio web al monitorear: la 

• su sitio web;
• Aplicaciones web;
• rendimiento web;
• API;
• Usuarios reales;
• El servidor.

Ofrece 5 planes divididos en dos categorías. 

El primero tiene 3 planes cuyos servicios ya están predefinidos. 

Ellos son:

• Plan de inicio: cuesta $ 12.02 por mes y le permite monitorear 10 direcciones URL;
• El plan de bonificación tiene un valor de $34,52 con una oferta de 50 páginas web para ver;
• El plan profesional vale $168.27 y te permite monitorear 250 páginas web.
• Los dos últimos planos son definidos por usted mismo. Sin embargo, el plan de negocios comienza desde $28.79 por mes, mientras que el plan «empresarial» comienza desde $52.08 por mes.

El software Uptrends le permite analizar un sitio web en función de varios criterios. Luego proporciona un análisis en cascada de los elementos de la página.

6.1.4. Google PageSpeed ​​insight

Esta es una herramienta gratuita que ofrece Google para medir la velocidad de carga de tu sitio web. Una vez que ingresa su dirección URL, este software analiza su sitio y genera condiciones para aumentar esta velocidad. 

Los resultados obtenidos a través de PageSpeed ​​Insight se obtienen gracias a los datos proporcionados por:

• La primera pintura contenta: el momento de la aparición de la primera imagen o el primer texto;
• Índice de velocidad: qué tan rápido está disponible la página;
• La pintura con contenido más grande: cuando se muestra la imagen o el texto más grande;
• El retraso antes de la interactividad: el tiempo que le tomó a la página convertirse en completamente interactivo en
• el tiempo de bloqueo total: la suma de todos los retrasos entre el FCP y el retraso antes de la interactividad;
• Cambio de diseño acumulativo: el movimiento de elementos visibles.

La segunda parte se refiere a las sugerencias que reúnen todas las prácticas recomendadas para aumentar la velocidad de su sitio.

 6.1.5. página web de prueba 

Esta es una herramienta gratuita que le permite ejecutar una prueba de velocidad de carga de página desde múltiples ubicaciones en la tierra y a través de navegadores como Internet Explorer y Google Chrome. 

Una vez en el sitio tiene la posibilidad de hacer un análisis simple o avanzado. De todos modos, tiene la opción de determinar varias opciones, como los parámetros de navegación, el lugar de la prueba y muchas otras opciones.

Una prueba de análisis en página web le permite tener tres gráficos diferentes que representan: 

• Los parámetros de prueba y los resultados de los análisis potenciales; 

• El desglose de las principales características de su sitio;
• La descripción general de la estructura de sus páginas.

 6.1.6      Probar mi sitio

Esta es una plataforma para analizar el rendimiento de carga de un sitio web móvil. 

Fácil de usar, es una solución para comprender los problemas de visualización de un sitio en dispositivos móviles. 

Se incluyen los tiempos de carga de la página y varios consejos para optimizar la carga del sitio.

6.1.7. Prueba clave del sitio web de CDN 

Key CDN también es una herramienta de análisis de velocidad de sitios web. Ofrece una prueba gratuita de 14 días que le permite realizar sus pruebas de velocidad desde 10 ubicaciones diferentes, a saber:

• Frankfurt;
• Ámsterdam;
• Londres;
• Nueva York ;
• Dallas;
• sin francisco;
• Singapur;
• Sídney;
• Tokio;
• Bangalore.

La herramienta permite hacer además de pruebas de velocidad y rendimiento, una verificación de encabezado HTTP, una prueba HTTP/2 y una prueba brotli.

El análisis realizado arroja el siguiente resultado:

• Una puntuación;
• tiempo de carga de la página; 
• El tamaño de carga;
• El número de solicitudes.

A continuación, la herramienta muestra las mejores prácticas para la optimización de sitios web con calificaciones de rendimiento. 

También tienes diagramas que representan los diferentes tipos de solicitudes de contenido (por tipo, por dominio). Así como el tamaño de los contenidos por tamaño, por tipo y por dominio.

Tampoco se perderá la pantalla de consulta detallada en la herramienta de cascada.

6.2. Comparación de Gtmetrix con algunas herramientas de análisis

En esta parte hago un análisis entre Gtmetrix y algunas herramientas presentadas en 6.1. identificar la herramienta más adecuada para un análisis de la velocidad de los sitios web.

Las herramientas que tomo en cuenta en esta comparación son la herramienta pingdom, pagespeed insight, webpagetest y gtmetrix.

6.2.1. Perspectivas de Gtmetrix vs Pagespeed: en 

cuanto a los puntos en común, se debe tener en cuenta que: 

• las percepciones de Gtmetrix y Pagespeed permiten pruebas móviles;
  Por el precio, se paga Gtmetrix mientras que Pagespeed Insights es gratis;
• No puede establecer la ubicación de prueba en la herramienta Pagespeed mientras que es posible establecer una ubicación de prueba en Gtmetrix;
• Pagespeed no limita la conexión o el número de pruebas a diferencia de Gtmetrix.

6.2.2. Gtmetrix vs Pingdom: 

Ambas herramientas son conocidas por su facilidad de uso. Ambos permiten establecer una ubicación de prueba, ejecutar escaneos en dispositivos móviles y también ofrecen planes gratuitos. 

Mientras que el precio de suscripción más bajo es de $14,95 en gtmetrix, es de $42,12 en pingdom.

6.2.3. Gtmetrix y webpagetest

Webpage test es una herramienta completamente gratuita y de código abierto. Autoriza de la misma forma que Gtmetrix la definición de un lugar de prueba, la limitación de la conexión, las pruebas móviles.

Dicho esto, Gtmetrix es de pago y ofrece opciones mucho más avanzadas.

Ahí lo tienes, ya terminaste de optimizar la velocidad de tu sitio web con Gtmetrix. 

En resumen  

, Gtmetrix es una herramienta para analizar el rendimiento de velocidad de su sitio que cumplirá con sus expectativas. Ya te ofrece en su versión básica una pluralidad de características que te dan una visión general del estado de tu sitio. 

Con tal herramienta, puede, por ejemplo, monitorear y establecer una alerta en su página para que cuando el rendimiento de los puntajes disminuya, se le notifique automáticamente para corregir los errores. 

Lo cual sería muy bueno en la medida en que tendrás la posibilidad de mantener siempre rápido tu sitio. Y así ofrecer a tus clientes un sitio que siempre cargue rápido. 

En este artículo, también has tenido la oportunidad de repasar las diversas recomendaciones de Gtmetrix, así como los diversos consejos para implementarlas.

Espero que te hayan ayudado a optimizar tu sitio web y obtener mucho más tráfico. 

En caso de que tengas dificultades, siempre puedes contactar o contratar a un profesional SEO.

Te veo pronto !