Tecnología y Coaching para Emprendedores

Mejores Prácticas para Crear Sitios Web de Alto Rendimiento

rendimiento-web-y-tiempo-de-carga

Un buen sitio web no sólo tiene que tener un diseño atractivo que se visualice correctamente en todos los navegadores, sino que también debe ser rápido. Herramientas gratuitas como GTMetrix nos permiten evaluar el rendimiento de nuestro sitio web, así como darnos claves para mejorar aquellos puntos en los que fallamos.

En este artículo veremos en profundidad todos los factores que influyen en el rendimiento, así como lo que podemos hacer para optimizar nuestro sitio web para que así cargue más rápido. Es un artículo práctico, orientado a dar soluciones que nos permitan mejorar el tiempo de carga de los proyectos web de los que somos responsables, creando sitios web más rápidos.

Razones para Optimizar el Tiempo de Carga

Si utilizamos herrramientas para optimizar el tiempo de carga, como por ejemplo GTMetrix, veremos que muchos sitios web hispanos no tienen en cuenta el tiempo de carga, lo que se traduce en sitios web lentos y poco eficientes.

Aplicando algunos de los consejos que aquí detallamos, podréis conseguir que vuestros sitios web sean más rápidos. Sin ir más lejos, podéis ver aquí el rendimiento de esta web después de aplicar estas técnicas: velocidad de carga 97% y coeficiente del 91% en YSlow a fecha 1 de abril de 2012.

optimizacion tiempo carga

Veamos algunas de las razones por las que es importante optimizar el tiempo de carga y, con ello, el rendimiento web:

  • Mejorar la experiencia de usuario. Todos nos hemos ido de un sitio web porque tardaba mucho en cargarse. Queremos causar una impresión positiva en quien visita nuestro sitio web, no la perdamos porque la web sea lenta y no cargue rápido.
  • Minimizar problemas de latencia. Con Pingdom Tools podemos comprobar gratuitamente cuanto tarda nuestro sitio web en cargarse dependiendo de la ubicación física. Veremos que si el site está en Europa, tardará más en cargarse en América y al revés. Si optimizamos la velocidad de carga, veremos una mejora sustancial en nuestros resultados en sitios lejanos a la ubicación de nuestro servidor web.
  • Aumentar nuestra satisfacción personal.Cuando compruebas que tu sitio web carga mucho más rápido que los de la competencia, sientes una satisfacción única. Incluso por uno mismo, el trabajar buscando la excelencia nos convierte en mejores profesionales, y nos ayuda a ofrecer un mejor servicio a nuestros clientes.
  • Incrementar nuestros ingresos. Steve Souders, gurú de la optimización web, nos explica en un vídeo de la Stanford University como la velocidad de carga influye en los ingresos del sitio web. Si, por ejemplo, buscamos clientes para nuestros proyectos freelance, y hemos creado una web con un diseño magnífico, pero que no carga rápido, entonces perderemos potenciales clientes y, por ende, ingresos.

Las 10 Reglas de Oro del Rendimiento Web

A continuación vamos a ver cuáles son las 10 mejores prácticas para crear sitios web de alto rendimiento. No sólo veremos el qué, sino también el por qué y el cómo, pues aún recuerdo la primera vez que leí que tenía que usar “Expire Headers” y me quedé a cuadros, porque no tenía ni idea de que me estaban hablando. Si tienes cualquier duda de lo que explicamos a continuación deja un comentario y lo miramos.

1. Reduce el número de peticiones HTTP

HTTP es un protocolo cliente/servidor formado por peticiones y respuestas. Resumiéndolo mucho, el navegador envía una petición HTTP de una URL específica, y el servidor web que alberga los contenidos de esta URL envía una respuesta HTTP con los contenidos solicitados. ¿Qué sucede cuando hay muchas peticiones HTTP? Que el usuario tiene que esperar y por tanto, tiene una mala experiencia de usuario.

Un ejemplo muy claro es el like box de Facebook, el código no sólo no valida, sino que introduce más de 30 peticiones HTTP. Aquí entra la primera cuestión, y es cómo mejorar el rendimiento sin perder funcionalidades en el diseño. En mi opinión, los desarrolladores de Facebook deberían crear un código limpio y optimizado, pero mientras no lo hacen nos tendremos que aguantar con lo que hay si queremos mostrar los fans de Facebook y conseguir más “me gusta”.

Puedes comprobar el número de peticiones HTTP con herramientas de cálculo del tiempo de carga, como por ejemplo Pingdom Tools y GTMetrix.

optimizacion tiempo carga

Cómo reducir el número de peticiones HTTP

Como vemos en la imagen anterior, en herramientas como Pingdom Tools, no sólo nos especifican el número de peticiones HTTP, sino que también las podemos ver en un gráfico. GTMetrix te lo pone todavía más fácil, se trata de encontrar la herramienta que a cada uno le sirva, yo utilizo GTMetrix y Pingdom Tools.

Vamos a ver cómo podemos reducir el número de peticiones HTTP:

  • Combinar las hojas de estilo CSS en una sola. La razón es que cada hoja de estilo crea una petición HTTP, con lo que si sólo hay una, reducimos la velocidad de carga. Aquí también entra el tema del CSS no usado, pues es código que cargamos y que no necesitamos. Como normal general, combina las hojas de estilo en una sola, y si hay páginas que tienen mucho CSS propio y que no se visualizan a menudo, crea una hoja de estilos para esa página y haz que se cargue sólo cuando se llame a la página en cuestión.
  • Combinar los scripts en un sólo archivo. Por la misma razón que lo anterior y peor todavía: cuando se descarga un script, no se puede descargar nada más en paralelo. Si por ejemplo, ponemos un script en el header y este tarda 3 segundos en descargarse, el usuario verá una página en blanco hasta entonces. Por eso, tal y como veremos después, siempre que sea posible los scripts deben ir en el footer.
  • Utilizar sprites. Los sprites reducen el número de peticiones HTTP, ya que combinan muchas imágenes en una sola. Se configuran con CSS y se acostumbra a utilizar para menús de navegación. Por ejemplo, el menú de esta web está hecho con un sprite.Ejemplo de sprite:
    rendimiento web

2. Añade un Expires Header

Lo que hace un expires header es fijar el tiempo que ha de pasar hasta que el cliente necesite de nuevo descargar un contenido de nuestra web, es decir el expires header le indica al navegador que utilice el contenido de su caché hasta la fecha marcada.

La principal preocupación que existe en el uso de expires headers era que si se actualiza el contenido, por ejemplo, la hoja de estilos, los usuarios que visiten nuestra web no verán los resultados actualizados, pues el navegador cargará la hoja de estilos que tiene en la caché. Aquí os presento las dos soluciones que conozco:

  • Cambiar el enlace a los archivos modificados. Esta es una solución propuesta por Mark Nottingham.
  • Utilizar W3 Total Caché en WordPress. Esta solución sólo se aplica en sitios web diseñados en WordPress, y con un simple clic vacía la caché.
Configuración de un Expires Header

La configuración de los expires headers depende del código web. Por ejemplo, en WordPress, puedes utilizar un plugin como W3 Total Cache. Si utilizas Apache, aquí tienes un tutorial para crear expires headers en Apache. En este otro artículo verás como crearlo en ASP.NET.

expires header

3. Comprime los componentes con Gzip

Al loro con esta regla: no comprimas las imágenes ni los archivos pdf, porque estos de por sí ya vienen comprimidos, por lo que su nueva compresión no sólo puede incrementar el tamaño del archivo, y con ello el tiempo de carga, sino que también consume inútilmente recursos de la CPU del servidor, algo a tener en cuenta sobre todo si estás en un hosting compartido y tienes bastantes visitas al día.

Lo que sí que hay que comprimir son los archivos de texto, como HTML, y las hojas de estilo CSS y scripts como JavaScript, pues esto sí que reduce considerablemente el tiempo de carga.

El motivo por el que preferentemente se ha de utilizar Gzip, es que actualmente es el método de compresión más popular y eficiente, a la vez que gratuito. Asimismo, todos los navegadores modernos lo conocen y utilizan, por lo que su uso está muy extendido.

Cómo comprimir los archivos

De nuevo, depende del servidor y de la versión que utilices. En Apache 2.x has de utilizar mod_deflate. Si utilizas WordPress, en el plugin W3Total Cache lo puedes configurar en “Browser Options”.

4. Pon las hojas de estilo en el header

Hoy en día es difícil encontrar sitios web que tengan las hojas de estilo después del body, pero aún así lo cito por ser éste un punto importante. El motivo es que los navegadores esperan a haber descargado las hojas de estilo para mostrar la página web, con lo que mientras tanto se muestra una página en blanco.

Cómo poner las hojas de estilo en el header

Hoy en día no es recomendable utilizar inline CSS, excepto en casos muy concretos, Lo recomendable es poner todo el CSS en un archivo, y llamarlo desde el header. Hemos visto antes que, sólo en el caso de páginas web concretas que utilicen mucho CSS ellas solas y se visualicen poco, vale la pena crear dos CSS separados y llamar al segundo sólo desde la página web en cuestión. Para el resto de casos, utilizamos un sólo CSS.

Hay dos maneras de poner las hojas de estilo en el header., yo soy partidaria de la primera, pero hay quién prefiere la segunda. El primer método utiliza la etiqueta link de HTML:

<link rel="stylesheet" href="style.css">

El segundo método utiliza el bloque style junto con @import:

<style>
   @import url("style.css");
</style>

Es mejores prácticas utilizar el primer método con link que no el segundo con @import. El motivo es que Internet Explorer utiliza @import como si el CSS estuviera al final de la página, con lo que hay que evitarlo siempre que sea posible.

5. Pon los scripts después del body

Ya hemos mencionado antes el problema de poner un script en el header: no se carga nada más hasta que finaliza la descarga del script. Un ejemplo muy bueno es el de Steve Souders. Si añades al principio un script que tarde 10 segundos en cargar, no se descargará nada hasta pasados los 10 segundos. Puedes ver este ejemplo en la práctica en la página web de Steve Souders.

rendimiento web

Para evitar que sucedan cosas como las del ejemplo, es mejor poner los scripts después del body. Si bien el ejemplo es exagerado, pues raramente un script tardará 10 segundos en descargarse, es ilustrativo de como perjudica al rendimiento web el poner un script en el header o el body del documento.

6. Haz externo el JavaScript y el CSS

Evita en la medida de lo posible incluir el CSS y el JavaScript en el archivo HTML. Las páginas web con los scripts y el CSS externos cargan más rápido que los que utilizan el estilo inline. El motivo principal es que los archivos CSS y JavaScript pueden ser guardados por la caché del navegador, con lo que la segunda vez que se visita la web, no hace falta volver a descargarlos. Asimismo, reducimos el tamaño del archivo HTML y evitamos el código redundante, esto es, repetido en varias páginas web.

7. Minimiza el CSS y el JavaScript

Si miras el código fuente de este artículo, verás que está todo minimizado. La diferencia en el tiempo de carga es notable, pues elimina todos los comentarios, espacios en blanco y saltos de línea.

Herramientas para minimizar el CSS y JavaScript

Para minimizar el JavaScript puedes utilizar YUI Compressor o JSMin.

Para minimizar el CSS está CSS Drive Gallery, una herramienta gratuita muy potente,

El plugin W3 Total Caché también te da las opciones para comprimir el CSS y el JavaScript en la pestaña “Minify”.

8. Evita los redireccionamientos

Los redireccionamientos son una manera fácil de solucionar muchos problemas, pero que implican un coste en cuanto al tiempo de carga. El motivo es que cuando el navegador encuentra un redireccionamiento, esto es lo primero que hace, y sólo después empieza la descarga de contenidos. Esto empeora la experiencia de usuario, con lo que tienen que ser evitados en la medida de lo posible.

Hay que secon el uso de plugins y código de terceros, pues estos muchas veces utilizan redireccionamientos. En el caso de esta web, utilizamos la plataforma Disqus para los comentarios, la cual introduce dos redireccionamientos, tal y como se puede ver en el test de GTMetrix. Aquí de nuevo, vuelve a entrar el tema de rendimiento versus funcionalidad. El motivo por el que mantenemos Disqus es porque, tras varios tests, vimos que sólo reduce la velocidad de la página principal en un 1%, por lo que el tiempo de carga de eSandra casi no se ve afectado, mientras que las funcionalidades de Disqus aportan un valor añadido muy superior.

9. Elimina los scripts duplicados

Dos son los factores que incrementan el número de scripts duplicados en una página web: el número de personas trabajando en un mismo proyecto y el número de scripts que contiene el proyecto.

¿Por qué hemos de evitar el uso de scripts duplicados? Porque se descargarán dos veces, y no sólo duplicarán el número de llamadas HTTP, sino que, tal y como hemos visto, bloquearán la descarga paralela de otros componentes dos veces, en lugar de una.

El motivo por el que no se puede descargar nada más cuando se está descargando un archivo JavaScript es porque este incluye elementos como document.write que afectan al DOM y, por tanto, a la presentación de la página web.

El consejo es que revises el código web para evitar el uso de scripts duplicados o implementes una función que lo haga por ti.

10. Configura los ETags

Los ETags o entity tags son un mecanismo que utilizan los servidores web y los navegadores para validar componentes ya cacheados. El problema con los ETags es que acostumbran a usar una serie de atributos que son únicos a un servidor web. En el momento que utilizas cloud hosting o los contenidos de tu web están distribuidos en varios servidores, empiezan los problemas.

Utiliza ETags sólo en el caso de estar seguro que los contenidos de tu web están en un único servidor, como por ejemplo en el caso de haber contratado un servidor dedicado. Existe lo que se llaman Content Delivery Networks, por lo que si utilizas una, tampoco es recomendable el uso de ETags. El punto fuerte de los CDN es que permiten replicar el contenido en servidores distribuidos por todo el mundo, de modo que reducen la latencia y evitan las caídas web por el fallo de un servidor, pero por ese mismo motivo no has de utilizar ETags si utilizas un CDN.

En el caso de utilizar WordPress, W3 Total Cache también te da la opción de configurar los ETags. Si estás en un servidor compartido, te recomiendo que no los actives, ya que no tienes control sobre el servidor web en el que se alojan tus archivos.

Otros factores cara el rendimiento web

Los factores que hemos visto hasta aquí son los más importantes, pero no los únicos. A continuación vamos a ver otros puntos que mejoran el rendimiento de sitios web:

  • Optimizar el tamaño de las imágenes. Podemos reducir el tamaño de las imágenes sin perder calidad con herramientas como Yahoo Smush.it
  • Usar Content Delivery Networks (CDN). Esto sólo lo usaría en sitios web de grandes corporaciones o empresas, porque las opciones gratuitas tienen sus riesgos de privacidad, tal y como se puede ver en esta opinión de CloudFare.
  • Hacer que Ajax se pueda guardar en caché. De este modo evitaremos que el usuario tenga que esperar a que lleguen las respuestas de JavaScript y XML.
  • Reducir el número de búsquedas de DNS . Los nameservers mapean el nombre del dominio con una IP. Asegúrate que esté todo bien configurado con herramientas como Pingdom Tools.
  • Utilizar GET para peticiones AJAX. El método POST envía dos paquetes, uno con el header y otro con los datos. Para optimizar el rendimiento web, mejor utiliza peticiones GET con AJAX.
  • Reducir el número de elementos del DOM. Esto es por dos razones, primero porque cuando más elementos del DOM haya, más tardará la página web en descargarse, y segundo porque si queremos utilizar un event handler, éste tendrá que buscar mucho más en el DOM para encontrar el elemento en cuestión, perjudicando la experiencia de usuario.
  • Reducir el tamaño de los cookies. Así la página web cargará más rápido. Elimina también aquellos que no utilices.

Hay otros puntos a tener en cuenta, como reducir el uso de iframes, evitar expresiones CSS, procurar que los componentes no superen los 25k, etc. Puedes encontrar más información en los libros que te recomendamos a continuación. También vale la pena el artículo Best Practices for Speeding Up Your Web Site, en el que se resumen los contenidos de estos dos libros.

Bibliografía

Si quieres saber más sobre todos los factores que ayudan a crear sitios web de alto rendimiento, te recomiendo estos libros de Steve Souders

1. High Performance Web Sites, escrito en 2007 con contenidos hasta la fecha válidos y muy útiles. Creo que no existe la traducción al castellano, yo al menos lo he leído en inglés.

2. Cómo Diseñar Sitios Web Más Rápidos, escrito en 2009, continuación del anterior y de contenidos mucho más técnicos y especializados.

Conclusión

Hemos visto los factores que influyen en el rendimiento de nuestros sitios web, así como técnicas para diseñar sitios web más rápidos. También hemos visto que hay veces en que hemos de poner en una balanza la optimización del tiempo de carga con las funcionalidades del sitio web, evaluando en cada caso la mejor opción. Para acabar, decir que las herramientas para medir el tiempo de carga no siempre dan el mismo resultado, tanto porque no siempre miden desde la misma ubicación, con lo que se añaden factores de latencia, como porque añadimos plugins o funcionalidades nuevas.

¿Qué te ha parecido el artículo? Deja un comentario.


Comentarios

  • Alberto Norabuena

    Excelente … Sigan posteando mas articulos !!!

    • Sandra

       Muchas gracias, Alberto!

  • Edwin J

    He encontrado este sitio por medio de linkedin me ha parecido muy útil seré un visitante asiduo. 
    Sandra Muchas gracias

    • Sandra

       Muchas gracias, Edwin, me alegro que te haya gustado.

  • Edduar_155

    Un factor muy importante a tomar en cuenta, y veo que muchos desarrolladores no lo hacen, es la seguridad del sitio. Cuando se hace uso del GET para el envío de parámetros deben realizarse las validaciones necesarias para que nuestros sitios web no sean vulnerados.

    • Sandra

       Sí, tienes toda la razón, esto me da una idea de un post sobre temas de seguridad en la creación de sitios web. Gracias por tu aportación!

  • manuel

    genial, me gusto… felcidades muy buenos consejos a los principiantes y desarrolladores viejos con malos habitos, sobre todo hispanos que no conocen bien el idioma ingles y han tenido que aprender mas con lapractica del dia a dia que con buenos textos

    saludos

    • Sandra

      de nada, Manuel, este es precisamente el objetivo de este blog, ofrecer recursos de valor a personas que no hablan inglés o que simplemente prefieren los recursos en castellano. Me alegro te haya sido útil!

  • danny

    Quien me ofreces algunos libros  en pdf. que sean de arquitectura

  • Enyelber20

    Muy buen articulo

  • Telúrico

    Muy muy buen articulo, solo una pega. Apartir del punto: “5. Pon los scripts después del body”, la fuente del articulo es una “monospace” y el texto a lo ancho se corta y no se ve.

    Por ejemplo, en la “Conclusión”, solo se muestra el texto siguiente: “Hemos visto los factores que influyen en el rendimiento de nuestros sitios web, así” y ahí se corta…

  • Mith

    Excelente artículo. Estoy trasteando precisamente estos días con la optimización de una página que he creado hace poco, http://www.deusexmachina.es, y optimizando usando GTMetrix he llegado por fin a notas aceptables :D

    Mi lacra ahora mismo es la lenta respuesta del servidor nada más conectar la página, estoy volviéndome loco a ver qué puede ser, y creo estar concluyendo que puede ser por el servidor, que creo que está en Italia, lo cual influye.

    Excelente artículo ;)

    • Sandra

      Hola Mith, muchas gracias! He mirado tu web en GTMetrix y creo que parte del problema son las imágenes del slider. Si por ejemplo con Photoshop las guardas para web a resolución baja, la diferencia es mínima y reduces el tamaño de cada una a la mitad. Italia a nivel de latencia no está muy lejos, el problema es cuando es Estados Unidos. Otro punto es mejorar el CSS, si clicas en cada apartado de GTMetrix te dice dónde exactamente está el problema.

      Un abrazo Mith!

  • Alfonso Marquez

    Gracias por tu magnífico artículo. Muy útil. Quería saber tu opinión sobre porqué utilizando Boilerplate, la carga de cualquier página que hago, (incluso en local) tarda tanto en cargar con Internet Explorer. Gracias y os seguiré visitando.

  • Pole Dance

    Fantástico artículo, de gran ayuda amigo.

  • Toni Donoso

    Muy buen aporte Sandra!

    En cada post aprendes algo. A seguir así!

    Gracias

    • eSandra

      Gracias Toni :-)

      un abrazo!
      Sandra

  • Miguel A. Manrique Ordax

    Estupendo y completo post lleno de buenas prácticas y sentido común. Cada vez es mas importante para el ranking seo trabajar el perfomance de la web, y “muchos pocos hacen un mucho” :-) Saludos Sandra!

    • eSandra

      Así es, Miguel, un abrazo!

  • llimpeo

    Excelente tu articulo, realmente muy bueno. saludos.

    agradesco tu aporte que le das a mi persona.

    Gracias.

    • eSandra

      Muchas gracias, me alegro te sirva :-)

  • Preguntón Cojonero Cabrón

    Interesante !
    Siendo novato-profano-torpe en temas de rendimiento, mi duda es que con el paso del los años habrá otras herramientas gratuitas para mejorar el rendimiento de aplicaciones web ASP.NET 4.0 (legacy webforms – updatepanel, etc) ? o una checklist avanzada sobre temas de optimización, rendimiento, SEO en aplicaciones ASP.NET?

    Gracias.

    • eSandra

      No puedo predecir el futuro :-)

  • Sergio

    ¡Muchas gracias por tu aporte Sandra!

    Un saludo,

    • eSandra

      De nada, Sergio!