1

Optimización web del lado cliente, la asignatura pendiente

Hoy en día Internet avanza a gran velocidad y forma parte de nuestras vidas. Más velocidad, mayores tamaños, más ancho de banda, más capacidad, multimedia generalizada, etc. Esto parece no tener fin.

Todo este derroche de medios, supone que el visitante web dispone de una conexión de gran velocidad y un equipo potente, lo que hace que los desarrolladores web no inviertan esfuerzos en la optimización de sus páginas.

La generalización de conexiones móviles (más lentas) y nuevos dispositivos menos potentes que los PC pero con otras ventajas (smartphones, tablets, Netbooks, TV conectadas a internet) hace que debamos prestar mas atención a este aspecto. De hecho, Google ya lo tiene en cuenta a la hora de posicionar una página en los resultados de las búsquedas.

Hace varios meses Google desarrollo un producto que se integra con el servidor web Apache (el servidor web mas extendido actualmente), cuya función es optimizar las páginas web de forma automática. La idea era buena, pero la realidad es que ha tenido una baja aceptación por parte de empresas proveedoras de Hosting. Personalmente en su día hice pruebas, resultándome el proceso de instalación tedioso y problemático. Una vez funcionando a pleno rendimiento hacia que el código dejara de ser válido según el W3C.

Actualmente, ha desarrollado un producto (Page Speed Service), aún en fase beta que pretende ir un paso más allá. La idea es similar a la anterior, pero consiste en interponer su infraestructura entre nuestra web y el visitante, y hacer esa misma optimización ellos mismos. Google no ha dado detalles del precio del servicio.

Todas estas ideas son buenas, pero si prestamos atención y dedicamos los recursos apropiados para realizar esta optimización en origen, podemos conseguir mejores resultados y a un coste mucho menor.

Tanto Google como Yahoo dan una serie de recomendaciones sobre qué aspectos se deben tener en cuenta para optimizar webs. De hecho ponen a nuestra disposición unos Test para que podamos comprobar fácilmente el nivel de optimización de un determinado web:

Googe Page Speed (http://code.google.com/intl/es-ES/speed/page-speed/ )
Yahoo! YSlow (a fecha de hoy no dispone de una versión online, sino que es una extensión para el/los navegador/es Firefox/Chrome.)
También podemos acceder a un servicio online ofrecido por GTMetrix, que consiste en un test dual (http://www.gtmetrix.com )

Las recomendaciones que nos sugieren estos test aunque no iguales son muy similares y podríamos resumirlas en estos grupos:

• Reducir el tamaño de los elementos que componen el web.
Esto se aplica de forma generalizada en las imágenes, pero no se tiene en cuenta en el resto de elementos que componen la página web (el propio código HTML, programación y librerías JavaScript, y ficheros de definiciones CSS).

• Facilitar las transferencias de información entre servidor y navegador cliente.
Combinando en lo posible los elementos, reduciremos el número de peticiones que hace el navegador al servidor web (con lo que reduciremos tiempos de latencia). Y si comprimimos la información, esta llegará mucho más rápido.

• Facilitar el trabajo de dibujado de la página al navegador.
Si nuestro código es correcto (válido según el W3C) evitaremos que el navegador se ponga en modo “a prueba de errores” (modo quirks), mucho más lento.
Reordenando el código, podemos conseguir que el navegador consiga lo antes posible los elementos necesarios para dibujar la página (Ej. El CSS al principio y el código JavaScript , ejecutado por el navegador, al final).
Si especificamos las dimensiones de las imágenes el navegador en el proceso de dibujado dejara los espacios necesarios incuso antes de descargar las imágenes.

Todo esto que parece muy obvio, en la realidad no sucede. Desde mi web personal he realizado pruebas con páginas conocidas y con poca carga gráfica (www.centos.org y www.php-hispano.org ) consiguiéndose reducciones de tamaño del 60% y 40% respectivamente.

De aplicarse estas optimizaciones se consiguen unos grandes ahorros de ancho de banda y una reducción considerable de los tiempos de carga, lo que redunda por un lado en ahorro de costes y por otro una mejor experiencia de usuario.

Los resultados son extrapolables a una gran cantidad de webs que he estudiado y diagnosticado.

Más información en: http://gtorres.itcron.com/como-saber-si-un-web-es-correcto.php

Guillermo Torres
Ingeniero Informático
Castellón – España

Adolfo Manaure

Entusiasta seguidor de la tecnología y las innovaciones que cambian el mundo. Director Editorial y COO en The HAP Group.