Cómo mejorar la velocidad de carga de tus páginas

Cómo mejorar la velocidad de carga de tus páginas

En este post os muestro varios consejos para mejorar la velocidad de carga de una página y tres de las herramientas más completas para analizarla.

¿Qué es la velocidad de carga?

La velocidad de carga de una página es el tiempo que tarda la página en cargarse en su totalidad, incluyendo todos los recursos que la página necesita (HTML, CSS, javascript, imágenes… ), más el tiempo de respuesta del servidor (tiempo que el servidor tarda en responder a las peticiones de datos del cliente).

La velocidad de carga es fundamental para mejorar la experiencia del usuario, y en consecuencia también para el posicionamiento en buscadores (Google ya lo anunció así hace meses).

La velocidad de carga de una página depende de muchos factores, que podemos agrupar en:

  • Factores externos: como la velocidad de conexión a internet de cada usuario, o una ralentización momentánea del servidor, o de la red. Son factores ante los que no podemos hacer nada.
  • Factores internos: propios de la página y de nuestro servidor, que normalmente podemos corregir, o al menos mejorar.

Factores internos más importantes

Velocidad del servidor

La velocidad del servidor va a estar directamente relacionada con su calidad en general (conectividad, hardware, sistema operativo…), y con su nivel de tráfico o saturación. Los planes de hosting compartidos pueden albergar cientos de sitios web por servidor, y en su conjunto puede haber un consumo de recursos muy elevado que puede estar afectando a nuestro sitio.

Quizás el peor problema con el que nos podemos encontrar es que nuestro servidor sea usualmente lento, y lo peor de todo, que lo encontremos caído con relativa frecuencia, ya que cambiar de hospedaje web no es decisión de un día para otro.

Por esto lo mejor que puedes hacer es contratar un buen hosting desde el principio. Pero ojo: por buen hosting quiero decir que lo que te prometan lo cumplan (garantías respecto a conectividad y disponibilidad), no que contrates un plan de espacio o de transferencia que de momento no necesitas.

Tamaño de los archivos, páginas y scripts

Influirá no solo el tamaño de cada archivo sino el tiempo de ejecución de los scripts, es decir las aplicaciones que se deben ejecutar del lado del servidor, por ej. PHP y peticiones a la base de datos. Por supuesto siempre que tu sitio web no se base únicamente en páginas HTML estáticas.

Las aplicaciones que uses deberían estar optimizadas en cuanto a código y tamaño. En el caso de WordPress, deberíamos examinar minuciosamente el tiempo de carga de nuestro tema, y quizás más importante, de cada plugin que estemos usando, y sustituirlo o eliminar los que realmente no necesitemos.

Formas de reducir el tamaño de los scripts es minificándolos y comprimiéndolos. Minificar consiste en eliminar de los scripts todos aquellos caracteres que al intérprete no le sirven para nada, como son los comentarios, saltos de línea y tabulaciones. Si lo haces mantén una copia del archivo original porque queda prácticamente ilegible a nuestra vista.

Tamaño de las imágenes

La regla de oro es que todas las imágenes deben estar optimizadas en dimensiones, resolución y formato.

Respecto a la resolución: para mostrar correctamente cualquier imagen en pantalla basta con una resolución de 72 ó de 96 ppp.

Respecto a sus dimensiones, ancho y alto: la regla es que sus dimensiones originales sean las mismas que las dimensiones a las que la imagen va a ser mostrada. Por ej: no uses una imagen de 3.000 píxeles de ancho para mostrarla a 300px de ancho (parece una tontería, pero no es raro verlo).

Y respecto al formato:

  • Usar JPG para imágenes fotográficas, en las que necesitamos disponer de toda la gama de colores RGB.
  • Usar GIF para imágenes pequeñas, con areas de color sólidas y hasta 256 colores, o si necesitamos transparencia o una pequeña animación (botones y logos).
  • Usar PNG normalmente nos dará archivos más grandes que GIF o JPG. Usarlo cuando nos dé mejores resultados o no tengamos otra alternativa. Por ej. cuando necesitamos hacer uso de toda la gama de colores y a la vez de una transparencia.
  • Sobre el nuevo formato SVG (Standard Vector Graphics), este es muy adecuado para imágenes vectoriales, de colores sólidos y cuando no llevan mapas de bits incrustados. Los gráficos vectoriales, como SVG, son 100% escalables, lo que significa que pueden adaptarse a cualquier ancho, por grande que sea, sin perder resolución.
  • No usar nunca imágenes en formato BMP o TIFF, aunque sean reconocidas por los navegadores.

Uso de caché del lado del servidor

Si usamos una aplicación estándar como WordPress, disponemos de plugins que automáticamente se encargarán de esta tarea. Entre los más usados están W3 Total Cache o WP Super Cache.

Un sistema de caché consiste básicamente en crear copias estáticas de las páginas y guardarlas para servirlas en determinados casos. Una copia estática es una copia en código HTML simple, de manera que esta no será interpretada por PHP ni serán necesarias las decenas de consultas que WordPress hace a la base de datos cada vez que muestra una página.

Al usar caché lógicamente perderemos espacio en disco, el necesario para almacenar las páginas estáticas; pero ganaremos en velocidad, ahorrándole procesos y memoria al servidor. El uso de un sistema de caché se vuelve imprescindible cuando tenemos un volumen de tráfico elevado.

Uso de CDNs para las librerías que empleemos

Para el uso de recursos públicos estándares, frameworks o librerías como Bootstrap CSS, JQuery o FontAwesome, cada vez es más frecuente y recomendable el uso de enlaces a su CDN (Content Delivery Server). Nos evita mantener la copia del recurso en nuestro servidor, pero sobretodo mejorará la velocidad de carga del recurso en cuestión.

Consiste básicamente en sustituir el enlace a la copia de la librería que mantenemos en nuestro sitio, por el respectivo enlace a su CDN. Un ejemplo para la librería JQuery:

<!-- Si para incluir nuestra copia de la librería JQuery hacemos esto: -->
<script src="js/jquery-3.1.1.min.js"></script>
 
<!-- Usar su enlace CDN consiste en sustituirlo por esto: -->
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous">
</script>
 
<!-- Resultado: mejora la velocidad y no necesitamos mantener copia -->

Escribiré un artículo más detallado y con más ejemplos sobre CDNs. Además, me estoy planteando seriamente el uso de CDNs en nuestro tema de WordPress, Reve Framework, o quizás optar por una solución más flexible: establecerlo como opción del tema.


Herramientas para analizar la velocidad de carga

Google PageSpeed Insights

Analiza la velocidad de carga tanto en dispositivo móvil como en ordenador, muestra una puntuación de 0 a 100 y sugiere las medidas para mejorarla. Imprescindible:

Google PageSpeed
Ir a Google PageSpeed

Pingdom Website Speed Test

Muestra un completísimo informe de la página y del servidor, también con medidas para mejorarla (en inglés):

Pingdom
Ir a Pingdom

GTMetrics

Mide tanto la velocidad de descarga como de ejecución de javascript y CSS, y puntúa los distintos elementos de A (muy eficiente) a F (muy ineficiente). GTMetrics también está solo en inglés:

GTMetrix
Ir a GTMetrix

Resumen

Como resumen final, uno de los retos para un desarrollador web, en un futuro ya muy cercano, va a consistir en optimizar la velocidad de carga de una web al máximo posible, en todos los dispositivos y especialmente en móviles. Cada día es más importante para el SEO on-page, y esto es consecuencia de que los usuarios también somos cada día más impacientes.

Comparte si te ha resultado útil esta información.

Cómo mejorar la velocidad de carga de tus páginas
4.6 de 12 votos.

No hay comentarios a Cómo mejorar la velocidad de carga de tus páginas

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *