HOME || Internet || Analizar y optimizar la velocidad de carga con PageSpeed
Creado el: 27 marzo, 2019 - Actualizado el: 2 abril, 2019 - Autor: lornal
AMP Versión AMP: Analizar y optimizar la velocidad de carga con PageSpeed (Versión AMP)

Analizar y optimizar la velocidad de carga con PageSpeed

Analizar y optimizar la velocidad de carga con PageSpeed

Aprende a utilizar la herramienta para Webmasters de Google PageSpeed Insights para analizar la velocidad de carga de las páginas en tu sitio y optimiza las mismas mediante los consejos del gran buscador.

Indice de contenido

La velocidad y optimización de carga en las páginas Web

Hace ya un tiempo que los principales motores de búsqueda como Google y Yahoo tienen sus propias herramientas para chequear la velocidad general de carga de toda una página ofreciendo consejos para optimizarla al máximo. Y es que el gran buscador ya ha dicho que le gusta que tu página sea veloz y livianita y si quieres que no se enoje y te de la posibilidad de estar entre los primeros resultados deberás hacerle caso, vamos que nadie te está diciendo que te arrodilles pero al menos inclínate.

Lo primero que debes hacer es analizar la velocidad actual de alguna de tus páginas en tu sitio. Ten en cuenta que no todas las páginas son iguales. Trata de chequear la HOME que es el punto de partida de todo tu sitio y alguna página de artículo donde tampoco tengas un contenido extra que requiera un tiempo de carga mayor a lo normal.

Que quiero decir con esto, que si tienes 100 páginas que más o menos tienen el mismo contenido y en solo 2 o 3 tienes contenido extra como Videos, animación Flash u otro elemento que requiera gran cantidad de descarga de datos no te vayas a chequear esas páginas ya que quizás ni siquiera valga la pena optimizarlas. Una persona que ingresa a tu sitio para ver una página concreta donde hay un video o un elemento multimedia sabe que el tiempo de carga depende exclusivamente del contenido que se quiere ver y no de otros factores. Lo que se intenta hacer aquí es optimizar el estructurado general de las páginas, el orden de carga de los elementos, la forma de descarga y unas cosas más que ya iremos viendo.

Si todo tu sitio es de contenido multimedia con gran cantidad de descarga de datos igualmente deberás optimizarla, siempre va a ser posible hacerlo por la gran cantidad de factores que repercuten en el tiempo de descarga y carga hasta que el contenido se muestra en el navegador listo para ser consumido.

Video Tutorial analizar velocidad carga página

Por qué es necesario que verifiques la velocidad de carga actual? Para tener un valor de referencia. Mediante ese valor trataremos siempre de optimizar! Si sacas 3 trata de subir a 7, si sacas 7 trata de subir a 10, como en la escuela 🙂

Vamos a ello! A chequear velocidad de carga de tu sitio.

Para esto utilizaremos una herramienta on-line de Google llamada PageSpeed Insights

PageSpeed Insights

Para ingresar visita PageSpeed Insights

La página principal ya ofrece de forma organizada el contenido y ayuda a webmasters sobre análisis y optimización de sitio web con las herramientas PageSpeed.

Ingresa a la herramienta de análisis siguiendo el enlace EJECUTAR INSIGHTS. Verás un recuadro para escribir la URL de la página que quieres chequear. No es necesario que estés registrado aunque te recomiendo que te habrás una cuenta de Google para ir utilizando todas las herramientas que ofrece a los Webmasters, en algunas herramientas específicas como Google Search Console o Google analytic deberás verificar la propiedad de tu sitio.

Escribe la URL tal cual la hayas programado, si tienes una redirección 301 para redirigir todas las peticiones desde http a https evita que la consulta de análisis de PageSpeed tenga que redirigir ya que esto tiene una cierta demora del lado del servidor por lo que los resultados del análisis jugarán en tu contra.

Una vez escrita dale a ANALIZAR para que PageSpeed Insights se ponga a trabajar.

No te quedes con el primer resultado. Existe la posibilidad que justo cuando se ejecuta el análisis tu servidor esté algo perezoso y los tiempos de carga aumenten significativamente no reflejando la realidad general de la velocidad de tu sitio. Espera unos segundos y vuelve a ejecutar el análisis, realiza la operación al menos 3 veces y de todos esos valores saca un promedio.

Análisis de PageSpeed

Esta es una captura de pantalla sobre una consulta hecha sobre la URL http://www.google.com

Análisis de velocidad a la página de Google
Análisis de velocidad a la página de Google

Como vemos el servidor ha redirigido a otra URL y la consulta se ha hecho sobre esta última. Como era de esperarse la puntuación de velocidad de carga en la página principal de Google ha sido casi perfecta.

Escala de PageSpeed

La escala utilizada por PageSpeed es:

  • 90 – 100 – La página se carga rápidamente.
  • 50 –   89 – La página tiene una carga media normal.
  • 0 – 49 – La página es muy lenta.
Puntuación alta

Si sacas un resultado entre 90 y 100 quizás no debas estar optimizando la velocidad de tu sitio. El mismo ya está puntuado en un valor muy bueno por lo que sentarse a pensar los factores mínimos a cambiar para subir un poco más no valdrá la pena a no ser que estemos hablando de un sitio muy grande y que tenga mucha cantidad de visitas.

En este caso siempre debes tratar de optimizar el peso total de la página a cargar. Esto te ahorrará mucho ancho de banda y transferencia mensual. PageSpeed analiza varios aspectos y nos da un informe detallado de todo el análisis, evalúa si puedes subir la puntuación optimizando las imágenes o moviendo algún recurso que específicamente esté tardando más de lo normal en cargar. Muchas veces determinadas páginas pueden cargar contenido externo y quizás sea ese recurso el que te esté demorando.

Puntuación Media

La puntuación media no es mala, no desesperes si obtienes un valor comprendido entre 50 y 89. Este resultado quiere decir que estás dentro de la media lo cual es aceptable. La mayoría de los sitios personales que tienen una cantidad normal de visitas mensuales están alojados en servidores compartidos y por lo tanto las demoras en la respuesta siempre van a ser superiores en relación a servidores dedicados como los que puede tener Google o sitios donde se invierte mucho dinero. Deberás analizar específicamente los resultados de PageSpeed para saber que recursos cambiar y optimizar. Vamos a ver una página que arroje un resultado de este tipo en la velocidad de carga de la página.

Consulta de análisis a DONTECNO

Análisis ade velocidad a la página de dontecno

Nuestra puntuación está en el rango medio y nos sentimos orgullosos de eso ya que empezamos con una puntuación baja de tan solo 20 y mediante algunos retoques la hemos subido a más de 70 en cargas a móviles y 97 en carga de ordenador. Sabemos que todavía podemos optimizar más por lo que estamos tranquilos, pero eso será para otra fase cuando lo requiera por algún cambio de servidor o estructura general del sitio.

Lo que estamos haciendo y te aconsejo que empieces tú mismo a hacer es a optimizar las imágenes. PageSpeed en su informe es un punto de consejo que encontrarás seguro si es que no las tienes optimizadas.

Y ya que estás comenzando a trabajar sobre optimización de imágenes aprovecha a convertirlas a WEBP, el nuevo formato de imágenes que en un futuro reemplazará a JPG en la WEB. Para aprender como hacerlo visita Convertir jpg / png a WEBP

No solo con optimización de imágenes se logra subir la puntuación de carga en PageSpeed, deberás trabajar sobre:

  • Minificación del contenido
  • Gestión de caché
  • Optimización de código HTML, CSS y JS
  • Forma en que los elementos se van cargando y mostrando en la página.

Si tienes un sitio con WordPress para trabajar sobre la gestión de caché quizás te convenga utilizar un plugin como W3 Total Cache, puedes ahorrar mucho tiempo de carga al posponer carga de imágenes hasta que sean visibles con Lazy Load y la optimización de código HTML, CSS y JS la puedes hacer con Autoptimize . La minificación te recomiendo que la hagas a nivel servidor para que todo el contenido se descargue comprimido.

Puntuación Baja

Para la puntuación baja no hay mucho más que decir. Deberás hacer todo lo anterior y más. Si no logras subir puntuación mediante la gestión de contenido, caché, imágenes, etc quizás debas evaluar un cambio de servidor. El cambio de servidor es algo tedioso, riesgoso y costoso así que antes de hacerlo presta mucha atención a los factores reales que puedan estar influyendo en el tiempo de carga de tus páginas.

La mayoría de las páginas que obtienen un puntaje tan bajo es por que cargan demasiados recursos al principio del documento. Si no deseas utilizar plugins para acomodar los recursos al final o tienes un sitio que no es gestionado por un CMS deberás moverlos tú mismo, por lo general colocar el código en el footer de la página basta para que la carga de contenido sea mucho más rápida. Ten en cuenta de que la hoja de estilo principal, la que estructura el sitio es aconsejable que esté al comienzo para que apenas empiece a cargar el documento tome su forma, sino corres el riesgo de que tu sitio se vea algo raro al comienzo de la carga por lo que no es muy agradable a la vista. Los JavaScript al final de todo!

Has 1 cambio a la vez y chequea mediante un nuevo análisis para ver los resultados, de esta manera sabrás si el cambio tuvo incidencia en la velocidad de carga de la página.

Datos de experimento

Los resultados de velocidad que arroja PageSpeed sobre una página son emulados. Que quiere decir esto, que hay una PC que emula a través de software un dispositivo móvil que carga la página. Es por eso que se llama “experimento” ya que no es la realidad y solo refleja una parte de ella.

Entonces, debemos tomar los resultados y valores “con pinzas”. No, son bastante acertados. Además, por más que no lo sean al 100%, ya que un dispositivo emulado que procesa miles de solicitudes por segundo nunca podrá reflejar lo que pasa en uno real, nos da una idea y un valor de referencia en el cual podamos trabajar.

Vamos a ver algunos datos de experimento arrojados sobre una página que tomamos al azar.

Datos de experimento
Datos de experimento

Este informe nos da una idea del tiempo que tarda nuestra página en mostrarse con todo el contenido.

El primer renderizado con contenido nos indica el primer contenido que se muestra por lo tanto mientras menor sea mejor. Mientras se van cargando todos los recursos de nuestra página el navegador mostrará una parte de ella dando la posibilidad al lector de dar un vistazo del contenido lo cual es bueno para mantenerlo en nuestro sitio un determinado tiempo. No sirve de nada que un visitante entre y salga en 1 segundo. Debemos cuidarnos de eso ya que Google a través de su analítica de seguimiento mide mucho este valor y es una influencia muy alta a la hora de posicionar la URL entre los mejores resultados. Es por eso que siempre debemos cargar al final de la página todos los recursos que no sean críticos (hojas de estilos, scripts, fuentes)

El dato más significativo quizás sea el índice de velocidad con la que se carga la página. Obviamente una página con alto contenido de multimedia tardará mucho más en cargar que una que contenga solo texto. Debemos anotar los valores y sacar promedios para obtener un análisis general de todo el sitio. Un sitio con un índice de velocidad entre 1 y 2 segundos se considera rápido. Empieza a preocuparte cuando el valor sea superior a 7.

Dependiendo del tipo de recursos que cargue la página (videos, scripts, etc) aumentará el tiempo hasta que está interactiva. Deberías preocuparte si el valor es muy elevado aunque siempre te repito este valor depende exclusivamente del tipo de contenido que se está mostrando.

La latencia es importante mantenerla por debajo de 50 ms ya que refleja la interactividad que se produce entre la página y el visitante. La latencia indica el tiempo total que el usuario tiene que esperar hasta poder usar en su máximo potencial el contenido que le estamos ofreciendo. Si el usuario debe esperar mucho para poder acceder al contenido en su totalidad de seguro se irá antes de que podamos saludarlo.

Oportunidades

El informe de oportunidades de PageSpeed nos ayuda a entender los problemas directos que influyen en la velocidad de carga de la página y nos aconseja sobre las soluciones a tomar para mejorarlo.

Vamos a ver un típico informe de Oportunidades sobre una página al azar.

Oportunidades para mejorar la velocidad de carga de la página
Oportunidades para mejorar la velocidad de carga de la página

En este caso tenemos 2 Oportunidades para mejorar la velocidad de carga.

  • Elimina los recursos que bloquean el renderizado: este punto lo verás casi siempre en cualquier página consultada así que no te asustes. Todas las páginas tienen recursos internos y externos que cargar. Llamamos recursos a las hojas de estilo y script principalmente. La idea no es eliminarlos pero sí optimizarlos o acomodarlos en una sección de la página para que se carguen al final del contenido principal. Hay recursos que va a ser imposible que eliminemos o estructuremos, deberás identificar cada uno de ellos para evaluar si son críticos. Por ejemplo la hoja de estilo principal de la página se considera un recurso crítico por lo que deberás dejarla donde está. Pero un JS que modifica los colores del texto podría posponerse para el final.
  • Pospón la carga de archivos CSS: este punto es muy parecido al anterior. PageSpeed nos indica que hay una cantidad de CSS considerables que se cargan al comienzo y nos avisa que podremos ganar un par de segundos si posponemos la carga para el final.

Si optimizamos estos 2 puntos a lo sumo estaremos ganando unos 2 segundos de los 3 que nos calcula el informe ya que nunca podremos optimizarla al 100%, recuerda que hay recursos que siempre van a tener que cargar al comienzo.

Te parecerá poco pero optimizar 2 segundos la velocidad de carga de una página web es la diferencia entre estar dentro de la escala rápida o media. Considera prestar mucha atención al consejo de oportunidades que da el informe de PageSpeed.

Hay muchas otros consejos de oportunidades que aparecerán si PageSpeed ha detectado más problemas en tu página.

Diagnóstico

El diagnóstico nos marca claramente cuales son los problemas reales de la tardanza en la carga de la página. Como dijimos anteriormente los puntos informados dependerán exclusivamente de la página consultada. Vamos a ver un par de puntos que es posible que tengas que corregir en la tuya ya que son errores comunes a cometer.

Diagnóstico de los problemas en la velocidad de carga
Diagnóstico de los problemas en la velocidad de carga
  • Carga de la fuente: cuando diseñamos nuestro sitio es muy probable que queramos utilizar una fuente especial y que la tengamos que cargar ya que si no está en el dispositivo que carga la página la estructura podría verse comprometida. La inserción de la fuente debe hacerse siempre al final de la página
  • Minimiza el trabajo del hilo principal: Este punto es muy difícil de corregir ya que esta relacionado directamente en la programación de los JS que se cargan en la página. Si tenemos script de terceros podremos optar por eliminarlos o reemplazarlos por otros más livianos y mejor depurados. Muchas veces esto no es posible ya que eliminar un JS puede implicar cambiar la estructura de todo el sitio.
  • Minimiza la profundidad de las solicitudes críticas: este punto es muy interesante pero termina siendo más de lo mismo. Se nos informará de todos los recursos que se cargan y que en teoría son críticos y se nos aconseja eliminarlos o posponerlos en la carga.

Como pudimos ver la gran mayoría de los causales que originan un retardo en la carga de una pagina son debidos a recursos de Fuentes web, CSS y JS que se leen al comienzo de la misma. Así que como regla general siempre pospón la carga de recursos no críticos y verás que ganarás varios segundos y con suerte pasarás de un nivel bajo a medio o medio a rápido.

Te fue útil el artículo? Califícalo

Votos: - Promedio: