¿Por qué es importante reducir el tiempo de carga de nuestras páginas web ?
La respuesta es bastante simple – los usuarios de Internet son impacientes y se los editores de contenidos web tienen muy poco tiempo para llamar su atención (hay estudios que indican que se cuenta con 8 segundos de media antes de que el visitante abandone nuestra página si considera que no tiene el contenido que está buscando). Si su sitio web no se carga con suficiente rapidez, el resultado es obvio – los usuarios harán clic en el botón de cierre y pasar a la página siguiente.
Por otra parte, ralentizar el tiempo de respuesta del sitio podría dañar la clasificación en los motor de búsqueda. Este es el vídeo publicado el 28 de abril de 2009 por Matt Cutts describiendo el impacto de los tiempos de carga de la web en los rankings de Google.
Hay mucho que se puede hacer cuando se trata de la optimización del tiempo de carga de una aplicación web, por ejemplo:
- Comprobación de los cuellos de botella de hardware
- actualizaciones de servidor web
- optimización del motor de base de datos
- balanceo de carga entre servidores web, etc
El problema para actuar sobre estos factores es que, la mayor parte de las veces nos encontramos realizando únicamente el papel de desarrolladores web y no podemos actuar sobre los recursos de sistema que permiten optimizar los puntos anteriores.
¿Qué podemos hacer desde la parte del desarrollador para reducir el tiempo de carga de una aplicación web?
Os enumeramos 10 consejos útiles:
1. Reducir las peticiones HTTP: reducción de líneas de código innecesarias, combinación de secuencias de comandos, etc.
2. Almacenamiento en la caché del navegador del usuario: ver un tutorial sobre como manejar la cache de la página web
3. Optimización del código JavaScript: sobre el JavaScript se pueden tomar varias medidas como pueden ser minimizar su uso, eliminar espacios en blanco en el código y comprimir los ficheros que lo almacenan (en este enlace podéis encontrar utilidades para la compresión de los ficheros de JavaScript)
4. Optimización de las hojas de estilo CSS: Las mismas consideraciones respecto al código JavaSCript se pueden aplicar a los ficheros de hojas de estilo. En nuestra página sobre “Herramientas para CSS” podéis encontrar información y herramientas para realizarlo.
5. Utilizar las librerías Google Ajax: Mediante el uso de bibliotecas de Google AJAX, se puede reducir el tiempo de descarga del sitio si el script se almacena en caché en el navegador de los usuarios, además de que se “ayuda” al robot de Google
6. La optimización de las imagenes y elementos gráficos: Algunos consejos al respecto de esto son: no utilizar HTML para reducir el tamaño, no utilizar imágenes de más de 50K, utilizar si es posible el formato PNG. En este post podéis encontrar otros consejos útiles al respecto de las imagenes en páginas web
7. Utilizar distintos dominios para la descarga de los elementos de la página: alguinos navegadores limitan la descarga de elementos por dominio en el que se alojan. Si está navegando por sitio web grande, dividir los archivos de datos entre dominios diferentes podría ser una buena idea. Muchos desarrolladores web almacenan sus datos estáticos en Amazon S3 y algunos bloggers utilizar Flickr para mantener sus imágenes.
8. Minimizar los errores de las página web: evitar enlaces rotos, evitar errores 404, evitar redirecciones 302, etc.
9. Usar presentaciones progresivas: la prestación progresiva significa simplemente el acto de mostrar cada objeto que se descarga. A veces, la prestación progresiva es una “respuesta necesaria a sus usuarios”, indicándoles con la misma que la página “funciona”, aunque es lenta…
10. Colocar etiquetas de secuencia de comandos en la parte inferior: si es factible, se pueden incluir las etiquetas de comandos al final de la página. De esta forma se permite a los navegadores web descargar los elementos más pequeños (como el CSS y el contenido de texto) en primer lugar y esto hace que los usuarios sienten que su sitio se carga rápidamente.
Algunos recursos útiles para la optimización del tiempo de carga de una página o un sitio web
Yahoo! YSlow
YSlow (http://developer.yahoo.com/yslow/) es un complemento para Firefox add-on que permite el análisis de páginas web y realiza sugerencias sobre como aumentar sus prestaciones
Javascript Compressor
Javascript Compressor (http://javascriptcompressor.com/) es una herramienta online gratuita para la compresión y optimización de código JAvaScript.
CSS Drive – CSS Compressor
CSS Drive (http://www.cssdrive.com/index.php/main/csscompressor/) es una herramienta gratuita online para la compresión y optimización de código CSS.
Google Ajax Libraries API
Google AJAX Libraries API (http://code.google.com/apis/ajaxlibs/)
Amazon S3 FireFox Organizer
S3Fox Organizer (http://www.s3fox.net/) permite organizar, gestionas y almacenar contenido en Amazon S3. Es facil de instalar y utilizar, pudiendo integrarlo en el navegador.
Fuente: Practical web design guides to reduce site load time.
Contenidos relacionados
The Como reducir el tiempo de carga de una página web: Guía práctica by Blog AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
Tags: desarrollo web, diseño web, herramientas, HTML, javascript, navegadores, optimizacion, seo
