Cómo mejorar la velocidad de carga de una web con PageSpeed

A nadie le gusta llegar a una página web y tener que esperar mientras ésta carga todos sus contenidos. A veces, puede resultar realmente desesperante. Mejorar la velocidad de carga de una web es un requisito indispensable para que los usuarios no ‘huyan’ al visitarnos y de este modo, evitar que nuestra tasa de rebote aumente innecesariamente.

El tiempo de carga se ha convertido en un factor fundamental en el éxito de un sitio web, tanto desde el punto de vista de la usabilidad como del SEO. De hecho Google, siendo consciente de esto, decidió incorporar el tiempo de carga de las páginas web a su algoritmo de búsqueda como uno de sus más importantes factores de posicionamiento.

Obviamente, no debemos confundir velocidad de carga con tiempo de carga de una web, ya que son términos inversamente proporcionales: si la velocidad aumenta el tiempo de carga disminuye, y si la velocidad de carga disminuye, entonces el tiempo aumenta. Por tanto, debemos buscar siempre velocidades de carga altas y tiempos de carga bajos.

Pero, ¿qué podemos hacer para que nuestra página cargue más rápido?

Herramientas para evaluar nuestro sitio web

Existen una serie de herramientas que nos ayudan a determinar cómo de veloces son nuestras webs, aportándonos información sobre qué elementos merecen ser optimizados. A continuación tenéis una pequeña muestra de ellas:

Todas funcionan de la misma manera: introducimos una URL y la aplicación realiza un análisis de los elementos que componen la web, ofreciendo a continuación una serie de resultados que debemos interpretar. Algunas de ellas incluso nos dan algunas recomendaciones para mejorar estos tiempos, destacando los elementos más problemáticos.

Continuando con nuestra serie de artículos sobre herramientas SEO, nos centraremos en PageSpeed, una herramienta ofrecida por Google en su kit para desarrolladores que, bajo mi punto de vista, ofrece buenas indicaciones sobre lo que hay que hacer para aumentar la velocidad de carga de nuestras webs.

PageSpeed: ¿web o extensión?

Para utilizar PageSpeed podemos elegir entre dos opciones: ir a la web de PageSpeed Insights, introducir una URL y efectuar nuestro análisis, o instalar la extensión para Chrome y disfrutar de sus funcionalidades en las herramientas para desarrolladores del navegador, para lo cual tan sólo tendremos que hacer clic en el botón ‘Analizar’. El funcionamiento es básicamente el mismo, así como sus resultados y las interfaces.

Obteniendo resultados y recomendaciones

Para mostrar la información que podemos extraer de PageSpeed utilizaremos como URL de ejemplo la del diario El Confidencial y escogeremos la opción web de PageSpeed Insights (simplemente por facilidad a la hora de capturar pantallas). Una vez enviada la solicitud para que la aplicación analice la URL dada, se nos muestra una pantalla dividida en tres partes fundamentales.

PageSpeed: Cómo mejorar la velocidad de carga de una web

En la parte superior central de la pantalla PageSpeed nos ofrece la puntuación que le da a la página web en base a su velocidad de carga, en este caso 67 sobre un total de 100. Como norma general, todo lo que esté por encima de 60 se considera un buen resultado, aunque lo ideal sería estar por encima de 80.

Además, al lado podemos medir la aceleración de nuestra web, para lo cual se nos muestra un vídeo que ofrece una comparativa de los tiempos de carga entre nuestra web actual y su versión optimizada.

Sugerencias

En la parte lateral de la pantalla se nos muestran las recomendaciones que deberíamos seguir para que la velocidad de carga de la web aumente, detallándose en el centro de la pantalla la prioridad a la hora de acometer estas mejoras, siendo (A) una prioridad Alta, (M) Media y (B) Baja.

En el ejemplo utilizado, deberíamos prestar especial atención a:

  • Combinar las imágenes en objetos móviles CSS
  • Especificar caché de navegador

Si hacemos clic en cada una de las recomendaciones podremos ver la lista de elementos que están perjudicando la velocidad de carga de nuestra web, así como la acción a llevar a cabo para solucionarlos.

Sugerencias

Descubriendo cómo es leída nuestra web

PageSpeed, al igual que el resto de herramientas comentadas anteriormente, ofrece también una gráfica con la ruta de carga de nuestra web, de modo que podemos visualizar el orden y el tiempo de carga cada uno de sus elementos, pudiendo así identificar qué elementos son los que ralentizan la velocidad de carga de la web.

Para poder acceder a esta gráfica tan sólo tenemos que acudir al enlace ‘Explorador de ruta crítica’ situado en la barra lateral.

Ruta

Consejos para optimizar la velocidad de carga de una web

Hay una serie acciones que siempre podemos realizar (y debemos marcarnos como obligatorias) para reducir así el tiempo de carga de nuestra web. Veamos cuáles son:

  • No establecer estilos en el documento HTML, sino en archivos CSS aparte. De este modo evitamos que el navegador  invierta tiempo leyendo código ‘innecesario’.
  • Minificar HTML, CSS y Javascript. Existen multitud de herramientas para hacer ésto, aunque lo ideal es realizarlo directamente en nuestro servidor habilitando la compresión gzip o deflate.
  • Optimizar imágenes. Esto incluye especificar las dimensiones de las mismas o en su caso utilizar imágenes en su escala final, compresión de imágenes, combinación de imágenes en objetos móviles CSS (consisten en un único archivo con múltiples imágenes; mediante CSS se hace la llamada de cada una de ellas en base a su posición en dicho objeto, pero sólo se utiliza un archivo, usualmente llamado sprite),  etc. Una herramienta muy útil para reducir el tamaño de nuestras imágenes es Smush.it™ de Yahoo! (servicio eliminado) RIOT.
  • Evitar redireccionamientos. Cuantas más redirecciones tenga que efectuar el navegador hasta llegar a la versión final de un documento más tardará la página en cargarse. Esto suele ocurrir bastante a menudo cuando se utilizan ciertos recursos como es el caso de los botones sociales. Los usuarios suelen utilizar los widgets ofrecidos por las redes sociales para tal fin, pero éstas cambian las URLs utilizadas en ellos, utilizando redireccionamientos desde la antigua a la nueva. Cuando esto ocurra deberíamos actualizar el código de dichos widgets o, una opción que me gusta más, crearlos nosotros mismos.
  • Especificar caché de navegador. Es decir, dar información sobre la caducidad de recursos que se almacenan en la caché del navegador. Generalmente, PageSpeed suele recomendar periodos en torno a una o dos semanas para recursos estáticos.

mod-pagespeed: Optimizando en Apache

Si tenemos nuestra web alojada en un servidor Apache, PageSpeed pone a nuestra disposición un módulo propio destinado a facilitarnos todas las tareas de optimización de nuestra web, mod_pagespeed, que implementa toda una serie de buenas prácticas encaminadas a reducir el uso de ancho de banda y al aprovechamiento óptimo de los recurso que componen una web.

Conclusión

¿Qué harías si hicieras clic en un enlace y la página tardara en cargarse por completo diez segundos? Seguramente le darías al botón retroceder de tu navegador cuando tan sólo hubiesen transcurrido cinco.

Con la cantidad de páginas webs que existen en la actualidad se hace ‘innecesario’ tener que esperar por una que tarde en cargar más tiempo de la cuenta. Si tienes varias opciones, ¿por qué vas a elegir la lenta?

La optimización del rendimiento de una web (WPO) es un concepto muy importante para la calidad de una web y, de hecho, un factor determinante en el éxito de ésta. Afortunadamente, herramientas como PageSpeed nos facilitan enormemente las tareas de identificación de puntos débiles y su consecuente resolución.

En un panorama donde los requisitos para que una página esté bien posicionada en los resultados de búsqueda son cada vez mayores, desatender una cuestión tan importante como la velocidad de carga de una web es un lujo que no podemos permitirnos.

Y tú, ¿qué haces para optimizar el rendimiento de tu web? Compártelo con nosotros en los comentarios.

 

Actualización 03/03/2015

Como habréis podido comprobar, aunque la esencia del artículo no ha cambiado desde su publicación, las capturas de pantalla sí que se han quedado algo desfasadas. Con la intención de ampliar la información del post, os comparto un artículo que ahonda también en la misma temática y es además más recientes:

Velocidad web: teoría, práctica y Escopeta Ferias, de José Miguel Moreno

11 comentarios en «Cómo mejorar la velocidad de carga de una web con PageSpeed»

  1. Dios mío estoy muy por debajo con una velocidad de 25% es que estoy usando un wordpress Avada y es mi primera ves dios mío.

    Responder

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies. Haz clic en el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies