Guía para optimización Web

La optimización de un sitio Web es una tarea muy importante; tratar de gastar los menos recursos posibles siempre es una prioridad para así evitar desperdiciar ciclos de procesador o memoria RAM, lo que reflejará un tiempo de carga mucho menor en el sitio. Existen varias técnicas para lograr esta tarea, que dicho sea de paso, puede tomar mucho tiempo en perfeccionarse. Por un lado, las acciones que se hagan de lado del servidor son fundamentales, pero también se pueden complementar con algunos recursos que ayudan al navegador a acceder a los recursos en menor tiempo.

pingdom_thc.jpg

Optimización del lado de servidor (server-side)

Existen algunos factores que hay que tomar muy en cuenta durante la optimización en el servidor. Son tan importantes que la correcta administración y toma de decisiones, determinar en mayor parte, el éxito al optimizar.

Elegir un servicio de host decente

Elegir bien la casa de los sitios Web es algo vital. Si bien es cierto que la empresa no tiene que ver con la optimización, siempre es preferible hospedar los archivos con empresas que cuenten con una infraestructura adecuada. Se busca disminuir las caídas al máximo. Por ejemplo, Hostarting es una buena opción para comparar y elegir compañías de albergue Web.

Archivos externos en lugares externos

Archivos externos como CSS, JavaScript, imágenes, archivos multimedia y cualquier otro archivo que no requiera procesamiento del servidor deben ser almacenados en contenedores separados; se observan resultados muy buenos si se separan estos archivos, ya que se gana estabilidad; este es un artículo muy bueno sobre las descargas en paralelo que realizan los navegadores cuando hacen peticiones mediante HTTP.

Compresión GZip

Al comprimir el contenido, se disminuye el tamaño de los paquetes que se envían en cada petición HTTP, por lo que los tiempos de respuesta se pueden reducir favorablemente; usar la compresión GZip es algo recomendable, aunque hay que prestar mucho cuidado, ya que en ocasiones puede consumir muchos recursos, lo cual es particularmente malo si el sitio se encuentra hospedad en una cuenta de alojamiento compartido.

Minimizar redirecciones

Cada vez que se genera una redirección, no importa si se hace por JavaScript, PHP o etiquetas Meta, también se genera una petición RTT, además de que al usuario le toma más tiempo llegar a la página o al recurso de destino, por lo que es recomendable evitar las redirecciones al máximo y usarlas solo en casos necesarios.

Reducir el retardo en los DNS

Cada vez que se intenta acceder a una dirección web (un dominio), le toma al servidor entre 20 y 120 milisegundos resolver el nombre de dominio a la IP asociada. En ese periodo el navegador no puede hacer nada mas que esperar a que se complete la resolución. Este tiempo de espera se puede mantener al mínimo agregando entre 2 y 4 DNS diferentes, por ejemplo, ns1.dominio.com, ns2.dominio.com y así sucesivamente.

Optimización de archivos externos (CSS, JavaScript, Imágenes)

Incluir varios archivos JavaScript en una sola llamada

Usualmente se realiza una llamada cada vez que se necesita incluir un archivo js; típicamente un conjunto de llamadas a diferentes usuarios sería así:
[html]
http://www.dominio.com/js/archivo1.js
http://www.dominio.com/js/archivo2.js
http://www.dominio.com/js/archivo3.js
[/html]
Sin embargo estas lineas se pueden reducir a algo mucho más minimalista (similar a lo que se conoce como Shorthand) dejando todo en una sola línea:
[html]
http://www.dominio.com/js/archivo1.js, archivo2.js, archivo3.js
[/html]
Para lograr esto, es necesario agregar unas entradas al archivo .htaccess. Hay un buen tutorial sobre eso en este enlace.

Comprimir archivos JS y CSS

Se pueden combinar varios archivos JavaScript y CSS en uno solo, además, se pueden remover los espacios en blanco y comentarios para dejar el archivo lo más ligero posible. Por supuesto que se pierde facilidad de lectura e interpretación del código (en el papel de un ser humano, no del servidor), pero se ganan recursos valiosos. Se pueden usar scripts como Minify, o aplicaciones online como Clean CSS o CSS Optimizer.

Configuración de sistema de caché

Un sistema para cachear contenidos es algo que se ve en muchos scripts de hoy en día; es importante porque evita generar peticiones HTTP cuando el mismo usuario requiere acceder a un recurso, ya que se guardan como archivos estáticos, lo que incrementa la velocidad de carga y disminuye los tiempos de espera en buena medida. Aquí hay más información sobre caché.

Hosting externo para recursos estáticos

Como ya se mencionó en puntos anteriores, es importante almacenar los archivos estáticos como JS, CSS e imágenes, en servidores externos para aumentar la estabilidad; esto baja increíblemente la carga del servidor. Algunos ejemplos de esta técnica llamada off-load son:

  • Imágenes: Usar Flickr, Smugmug u otro servicio de alojamiento de imágenes.
  • JavaScript: Google Ajax Library, Google App Engine
  • Formularios web: WuFoo, FormSpring
  • Feeds RSS: Feedburner
  • Encuestas y votaciones: SurveyMonkey, PollDaddy

Hablando de acuerdo a mi experiencia, puedo asegurar que al menos, el hospedar imágenes en sitios externos, la carga del servidor disminuye. Uso PhotoBucket como almacenamiento externo, y para mi es una solución eficaz para guardar las imágenes de un blog. Otro servicios On the cloud como Amazon S3 también son viables, aunque no en todos los casos, ya que pueden generar costos excesivos. Las redes de distribución de contenido o CDN, son una alternativa fuerte y confiable para almacenar archivos estáticos.

Optimización de archivos CSS

Las hojas de estilo pueden llegar a ser archivos tan grandes, que pueden consumir una cantidad considerable de recursos. Afortunadamente existen técnicas que permiten reducir su tamaño; por ejemplo, mantener el código limpio cuidando la declaración de selectores, usando sprites, o reduciendo las declaraciones a la mínima expresión.

Esta es una guía breve pero con los puntos básicos para tomarse en cuenta; por supuesto existen temas más específicos como optimización y cacheo de bases de datos, o streaming multimedia. Este artículo es una traducción libre del original publicado en Hongkiat.