Como agilizar el tiempo de carga de una web

Como agilizar el tiempo de carga de una web

Carlos Yañez

15-02-2017

El tiempo de carga de una página web no es sólo un aspecto que valoren únicamente los usuarios finales, sino que los buscadores también tienen en cuenta a la hora de su posicionamiento.

Google, el buscador por excelencia, no tolera páginas cuyo tiempo de carga sea elevado y las penaliza en sus búsquedas, por este motivo, si queremos un buen posicionamiento, deberemos optimizar el tiempo de carga de nuestra web.

En el post de hoy vamos a ver consejos o reglas que especialmente recomienda Google para optimizar los tiempos de carga de nuestra web.

 

Primero de todo conozcamos la velocidad de carga de nuestra web

Antes de realizar cualquier acción, lo importante es disponer de datos objetivos de nuestra web, y para ello podemos usar herramientas que nos darán información del tiempo de carga y de la velocidad de nuestra web.

La herramienta por excelencia que se suele usar para realizar estas mediciones es Pingdom Tools.

Pingdom es capaz de analizar el peso que cada elemento de tu página web puede tener. Una vez analizado genera un informe donde podrás ver de manera sencilla cuáles de los elementos de tu página web hacen que vaya más lenta.

Como lo que nos interesa es un posicionamiento óptimo en Google, yo os recomiendo usar también la herramienta PageSpeeds Insights de Google.

Con PageSpeeds mediremos el rendimiento de nuestra página en una escala de 0 a 100, siendo 85 el mínimo requerido para considerar un rendimiento óptimo.

Así mismo, nos dará una serie de consejos con escala de colores rojo, amarillo o verde de acciones a realizar.

 

Optimizando nuestra web

Ahora que ya tenemos información del rendimiento de nuestra web, podemos aplicar las recomendaciones que nos propone PageSpeeds.

A continuación, os explico las reglas de mejoras más comunes que Google suele indicar.

 

Uso de compresión Gzip

Los archivos HTML y los CSS pueden llegar a ser voluminosos y en consecuencia consumir demasiado ancho de banda.

La solución propuesta por Google es usar Gzip para comprimir entre un 50% y un 70% el tamaño de estos ficheros que ya descomprimirá el navegador.

Bastará con añadir un código al fichero .htaccess. Ten en cuenta que en función del servidor web que uses, el cambio debe hacerse de una forma o de otra.

 

Tamaño de las imágenes

Las imágenes suelen ser la principal fuente de lentitud en una web y hay diferentes acciones que podeos realizar sobre ellas con el fin de minimizar su tamaño y optimizar la carga de las mismas:

  • Comprimir las imágenes: Debemos usar sólo la parte de las imágenes que nos interesa, eliminando lo no necesario para ajustar su tamaño. Otra opción es comprimirlas, pero manteniendo a la suficiente calidad de imagen en formatos JPG o PNG. Lo que no debemos usar so n formatos BMP o TIFF

  • Especificar el tamaño de la imagen en el código: Es importante que especifiquemos en el código HTML el tamaño de la imagen (width y height) para optimizar la descarga de las mismas.

  • Usar la escala real: Si muestras una imagen diferente que su dimensión real, se descargará la imagen más grande para luego ajustarla a las dimensiones que indiques en el HTML, lo que enlentece la carga

  • Uso de CSS Sprites: CSS Sprites te va a permitir juntar en una sola imagen todas las imágenes pequeñas que tenga una página, lo que acelera la descarga de las imágenes

 

Habilitar la Caché del navegador

Además de tener en el servidor cacheados los recursos que más se van a publicar, una forma de optimizar la descarga de páginas web es habilitar la caché del navegador del usuario.

Para esto, basta con modificar el fichero .htaccess donde especificaremos los tiempos de expiración de los recursos en cache.

Mediante esto, podemos conseguir que imágenes u otros contenidos que no varían a menudo de nuestra web, estén en la cache del navegador del usuario y no se deban descargar cada vez que acceda.

 

Uso de redirecciones

El uso de redirecciones debe minimizarse al máximo ya que genera nuevas peticiones HTTP que enlentecerá el tiempo de carga. En concreto te aconsejo:

  • No hacer referencias a URL’s que sepamos que redirigen a otras URL’s

  • Intentar no usar más de una sola redirección para llegar a un recurso

  • Minimizar el número de dominios que redirigen a un mismo dominio, lo cual se suele hacer para reservar distintos dominios

 

Optimización del CSS

El CSS u hoja de estilos es lo que define el formato que damos a nuestra página web.

Estos ficheros pueden ser muy grandes y Google recomienda una serie de acciones para minimizar su tamaño, como es:

  • No superar más de una hoja de estilos CSS externa

  • Las instrucciones CSS deben ser cortas en las etiquetas de estilo para el contenido superior

  • No realizar llamadas (@import) de CSS

  • No añadir líneas CSS en el código HTML en elementos como DIV´s o H1´s

 

Minimizar el código

Para minimizar el tamaño de la página, una opción es eliminar todo aquel código no necesario como pueden ser comentarios, secciones CDATA, espacios, sangrías y saltos de línea.

Esto aligerará la carga de la página y por lo tanto aumentará la velocidad de nuestra web.

 

Revisar el servidor web

No sólo el código es importante a la hora de optimizar la carga de una web. Una parte importante es el servidor web, el cual y según Google, no debería dar tiempos de respuesta superiores a 200milisegundos.

Normalmente tendremos nuestra web en hosting por lo que deberemos reclamar a nuestro proveedor una mejora de rendimiento del servidor o buscar un hosting mejor.

 

Como ves, y siguiendo recomendaciones de Google, podremos optimizar los tiempos de carga de nuestra web y a la vez conseguir un mejor posicionamiento en buscadores. ¿Ya has revisado tu web para conseguir unos tiempos de carga rápidos?

 

Profile picture for user Carlos Yañez
Carlos Yañez

Ingeniero Superior de Telecomunicaciones por la UPC. Director de Informática en un Laboratorio de Análisis con implantación nacional. Profesor de los cursos de Electrónica y Técnico en Sistemas Microinformaticos y Redes.