La optimización de las páginas web es un tema que viene desde hace muchos años dando vueltas y no es nada novedoso, la obsesión por hacer que el sitio cargue cada vez más rápido va a traer un retorno tarde o temprano llamado “visitas” y “posicionamiento” en los buscadores.
La lentitud de la carga de la página web está básicamente relacionada con el peso o tamaño del html, imágenes, javascript y los diferentes objetos que se carguen, la idea principal es optimizarlo lo más que se pueda y disminuir la cantidad de peticiones que se hacen desde el navegador hacia el servidor, así como también el peso general de todo el contenido.
Existen muchas herramientas que ayudan a medir los tiempos y dan diferentes recomendaciones para poder mejorarlos eficientemente, un ejemplo es el Page Speed creado por Google que tiene una serie de extensiones para FireFox y Chrome, también posee una versión online.
Algunas cosas que deben tomarse en cuenta para optimizar las páginas son:
1. Implementar CSS Sprites, que consiste en generar una única imagen a partir de varias imágenes que se visualizan en una página y luego por medio de estilos mover parte de la imagen que se desea mostrar. Con esta técnica se reduce la cantidad de peticiones que se realiza hacia el servidor ya que únicamente se necesita una sola imagen.
2. Especificar las dimensiones de cada imagen, por medio de los atributos width y height de la etiqueta IMG.
3. Disminuir el tamaño de las imágenes lo más que se puede, tratando de no perder mucha calidad. Existen aplicaciones que optimizan las imágenes para que sean visualizadas via web.
3. Habilitar compresión gzip sobre el contenido estático, imágenes, archivo de estilos css, js, etc. El ahorro del tamaño de cada archivo es muy grande, se comprime alrededor de un 70%, dependiendo las configuraciones que se establezcan dentro del web server.
4. Utilizar paralización en la carga de imágenes, si todas las imágenes se encuentran en un único dominio, el browser va a ir encolando cada petición hasta cargar todas, en cambio sí se utilizan varios dominios el browser las solicita de forma paralela desde cada dominio img1.sitio.com, img2.sitio.com, etc. Se puede utilizar servicios externos para alojar las imágenes, por ejemplo Akamai.
5. Reducir el tamaño del archivo de estilos css y los archivos JavaScript, eliminar el código que no sea utilizado. Eliminar espacios, tabulaciones, comentarios, tamaño de variables, enters, etc., para que el archivo pese lo menos posible. Existen aplicaciones que ayudan a comprimir el contenido.
6. Habilitar el cache dentro de los dominios que sirven contenido estático (imágenes, css, javascript, etc).
7. Brindar el contenido estático desde dominios con cookies deshabilitadas, para reducir el tamaño de cada solicitud al servidor.
8. Verificar el html, primero que nada debe cumplir con las validaciones de la W3C, todo el código debe ser estandard. No abusar del uso de etiquetas que puedan ser reemplazadas por otras o por un manejo dentro de los estilos, evitar utilizar tabulaciones, contenido en mayúscula, tratar de poner todo en una sola línea. Todo lo que pueda sumar para reducir el tamaño general del html.
9. No abusar de la utilización de librerías de jQuery, no incluir archivos js que no son utilizados o únicamente se utilizan pocas funcionalidad, a veces es mejor desarrollar nuestras propias funciones y no incluir un GRAN archivo que contiene demasiadas cosas que no son utilizadas.
10. Poner la inclusión de los archivos javascript al final?, esto es algo que realmente me genera ruido, aunque es una sugerencia que ya anda dando vueltas hace bastante, la idea es evitar el bloqueo de las solicitudes, al colocarlo al final se puede descomprimir un poco la carga. También se esta hablando mucho de “Deferred Javascript”, la carga diferida permite descargar scripts después que la página se ha cargado, lo que reduce las solicitudes de vuelta en la red con el servidor, para esto les dejo un link para que se entretengan un poco.
Un dato importante es que el tiempo promedio de carga en la web es de aproximadamente 2.5 segundos, siempre intentemos estar por debajo de ese número.
Excelente nota, Ademas de que una pagina mas rápida, genera que perdamos menos usuarios, a los ojos de google una pagina mas rápida es mas relevante que una mas lenta. Por eso Optimizar la velocidad es fundamental.
oO?, al contrario, no?
Gracias Covi, si fué un error al redactar. Efectivamente se debe habilitar el cache en el contenido estático, ya que si no cambia habitualmente nos beneficia que sea cacheado por el browser. Hay que recordar colocar una fecha de expiración, por las dudas.