tiempo carga web
09/04/2020

La importancia del tiempo de carga de una web

Programación y Diseño Web

El tiempo de carga de una página web no es solo 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.

Si nuestra web no tiene unos tiempos de carga adecuados por muy atractivo que sea el diseño de esta, no se generará tráfico hacia ella y tendremos un pésimo posicionamiento. Vale la pena invertir tiempo en seguir varios consejos que garanticen unos tiempos de carga adecuados.

 

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 con el fin de garantizar un tiempo de carga adecuado.

 

  • 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 y multimedia

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 solo 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

Para otros ficheros multimedia como videos lo mejor es que sean pequeños de forma que no sacrifiquemos la resolución y la tasa de bits. Si podemos evitarlos, mejor.

 

  • 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 el cache del navegador del usuario y no se deban descargar cada vez que acceda.

Otra opción interesante es usar un CDN.

Un CDN es un servicio en la nube que ofrece alojamiento distribuido de contenidos de forma que la entrega al usuario final de dichos contenidos se realice desde el servidor más cercano al mismo.

De esta forma, copias de nuestra web o parte de la misma que no varía como fotos, vídeos, documentos, … Se alojan en estos servidores distribuidos por el planeta y cuando hay una solicitud de estos contenidos, se verifica si han cambiado y se sirven desde el servidor más cercano, en vez del hosting donde está inicialmente alojados

 

  • 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 solo 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. Todos somos conscientes que estar esperando a que una página cargue nos incita a abandonarla misma y eso debe evitarse a toda costa.

¿Ya has revisado tu web para conseguir unos tiempos de carga rápidos?

Comparte en:

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.