Share on FacebookTweet about this on TwitterShare on Google+

La optimización del tiempo de carga de un sitio web es muy importante por diversas razones:

  • Buscadores como Google tienen en cuanta la velocidad de carga de las webs para sus ranking de búsqueda.
  • En hosting o cloud services del tipo “paga por lo que usas” como Amazon puede suponer un considerable ahorro económico
  • Los usuarios se sentirán más felices y tu también: cuanto más rápida es la carga de la página más tiempo permanecerán en tu sitio web.
  • Si tu web es lenta, no solo pierdes visitas, sino potenciales clientes.

Veamos algunos factores importantes para la optimización del sitio web y como implementarlos de forma correcta:

Latencia

  • Elige un servidor adecuado (buen tiempo de respuesta, cercano) comprobando la respuesta a comandos como ping o httping o el número de saltos (traceroute). Si tus clientes están en una zona goegráfica más o menos definida, será importante escoger un servidor web cercano.
  • El tiempo de latencia influye considerablemente en el load time de la página
  • Si tu mercado es España, busca un hosting en Europa, no necesariamente España, pero evita “saltar el charco”.
  • Usa ingeniería inversa. Averigua el proveedor de hosting de la competencia.
  • El buscador bing mediante el comando ip: xx.xx.xx.xx da información sobre virtual hosting. También puedes usar servicios de pago.

Minimizar los HTTP Request

Se cumple la Regla del 80/20:
Según estudios realizados por Yahoo! el tiempo de carga de una página media depende en un 80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuarios dedican la mayor parte del tiempo a descargar imágenes, archivos JavaScript, hojas de estilos CSS y otros recursos externos.
Por este motivo, las mejoras en la parte del cliente generan muchos más beneficios que las mejoras en la parte del servidor.

Imágenes

Aunque sean tareas algo pesadas, haz de la optimización de imágenes un hábito.

  • Uso de sprites (y también image maps para imágenes contiguas).
  • Elección del tamaño adecuado de las imágenes: el html no debe escalar la imagen.
  • PageSpeed te ofrece directamente las imágenes optimizadas y también información sobre el tamaño para escalarla (ojo, habrá que correr PageSpeed con UserAgents diferentes si la web es responsiva).
  • Podemos usar programas como Shrink O’Matic o ImageMagick para generar distintas versiones de nuestras imágenes.
  • Uso de atributos: texto alternativo (alt), título de la imagen (title) y width y height.
  • Elige el formato correcto de las imágenes: JPG para imágenes grandes y llenas de colores. GIF y PNG para el resto.
  • Nombres de ficheros de imágenes descriptivos (SEO) y en la medida de lo posible con links (al usuario le gustan y a Google también).
  • Uso de imágenes embebidas (eliminamos peticiones http pero deben ser imágenes pequeñas). Tiene sus pros y contras. Puedes usar varias Herramientas de codificación.
    Ejemplo en página html:

    Ejemplo en hoja de estilos:

Uso de CDN

Hemos visto que es importante la proximidad del servidor web al usuario (tiempo de latencia). Utilizar un Content Delivery Network (CDN) puede resultar de gran ayuda.
Un CDN propio es una solución cara. Necesitamos clientes globales para que tenga sentido.
Un CDN es sencillo de implementar, pero si nuestra aplicación tiene escrituras a BBDD, el diseño de la arquitectura distribuida puede ser muy complejo.
Muchos hosting nos ofrecen CDN’s para imágenes, y Google o Microsoft también nos ofrecen sus CDN’s para librerías generales de JavaScript:

Cabeceras HTTP y cache

Los clientes web almacenan en una caché las páginas que van visitando, sus imagenes, css, etc.
Los servidores web indican el tiempo que tiene que estar almacenado en la cache mediante alguna de las siguientes cabeceras:

  • Last Modified
  • ETag
  • Expires
  • Max-Age

Más información sobre cada uno de los métodos.
Configurar apache mediante expires

Uso de gzip

Desde HTTP/1.1 los navegadores pueden indicar en las cabeceras http los formatos de compresión que soportan:

El servidor web lee dicho header y en función de su configuración, mandará comprimida la página web, indicándolo también en los http headers:

Normalmente el servidor web utiliza una política de comprimir ficheros en un función de su extensión.
Comprimiremos html. También podemos comprimir css, js, xml o json. Las imágenes y pdf’s no se comprimen.
La compresión de los ficheros suele ser de un 70%.
Algunas indicaciones para implementarlo:

Colocación de hojas de estilos en la parte superior

Las páginas web se deben renderizar de forma progresiva: sirven al usuario para darle un indicador de progreso de carga.
Muchos navegadores no renderizan las páginas hasta que no leen todos los css:

  • Así se evitan las penalizaciones en tiempo de ejecutar varios render
  • El usuario mientras tanto ve una página en blanco.

Los @import se comportan como los link al final de la página en IE, por lo que debemos usar mejor link.
Se deben evitar expresiones CSS (se utilizaban bastante en IE hasta la versión 8):

Resumiendo… los css siempre en el head y antes de cualquier javascript y evitando el uso de import.

Colocación de scripts en la parte inferior

Es importante llevarlos a la parte inferior, debido a que:

  • La especificación HTTP/1.1 sugiere que los navegadores no deben descargar más de 2 ficheros de un mismo host de forma simultánea.
  • Si las descargas son scripts, se hacen de una en una.

Ojo, no siempre se pueden llevar a la parte inferior, por ejemplo el script de modernizr.

Utilizar JavaScript y CSS externos

  • Si los CSS o JavaScript se utilizan en varias páginas mejor externos
  • El html ocupará menos y los otros ficheros estarán cacheados entre páginas de la web y no consumirán un http request
  • Es negativo para visitantes de una sola página.
  • El mantenimiento es más sencillo, así como la reusabilidad del código.

Reducir peticiones DNS

  • Si utilizamos varios hosts, permitimos descargas simultáneas
  • Si utilizamos varios hosts podemos provocar penalizaciones por búsqueda en dns
  • Los sistemas operativos y los navegadores realizan caches de dns

Uso de versiones minified de JavaScript y CSS

Existen herramientas para generar los minified:
YUI Compressor (Yahoo User Interface)

Otras opciones: Microsoft Ajax Minifier y Closure Compiler

Software para verificar la carga de una página

Leave a Reply

Your email address will not be published. Required fields are marked *