Optimización Web III de IV

Esta es la tercera entrada de la serie Optimización Web.

Si no leíste las anteriores, te recomiendo hacerlo antes que esta, al final de este post están los enlaces al resto de entradas de la serie.

¿Tarda demasiado en cargarse tu web?

Puede ser debido al peso de los elementos que la componen. Si utilizas WordPress con Plugins y elementos externos como las estadísticas de Analytics, el botón del contador de technorati, … cada una de esas funcionalidades está añadiendo peso extra a tu web lo que puede provocar una descarga lenta. Dice una leyenda urbana que los usuarios en Internet no tenemos paciencia, si en unos 10 segundos no ha aparecido nada en la página a la que intentamos llegar … o nos vamos o la cerramos. Por no hablar del exceso de ancho de banda que puedes esta consumiendo en tu hosting (depende de tu límite mensual puede llegar a ser un problema cuando tengas muchas visitas).

Por otra parte, no todos los usuarios tenemos la misma velocidad de conexión, ni utilizamos el mismo navegador para ver webs (esto importa por que tratan diferente a los objetos que se descargan para mostrar una página).

Como el 75 % de los usuarios navegan con Explorer (pese a que a muchos no nos guste), aconsejo hacer todas las pruebas en él.

Para empezar visita WebSiteOptimization y averigua lo que pesa tu web y como se distribuye ese peso entre Scripts, Imágenes, Html y CSS.

Hay varios factores que no podremos controlar sobre el tiempo de descarga de la web como: la velocidad de nuestros servidores (siempre podemos cambiar de hosting), saturación de internet, peso del software (no cambiaremos wordpress pero podemos aligerarlo), las conexiones de los lectores (son las suyas) … Así que centrémonos en reducir el peso de lo que sí controlamos para minimizar posibles impactos del resto de factores.

¿Eliminar o mover alguna cosa?

Suena duro pero … ¿seguro que necesitas 27 scripts para ver las estadísticas de tu blog? ¿o que el authority de Technorati aparezca en el sidebar? ¿tantos botoncitos, imágenes, widgets externos?

¿Te ha aparecido en el listado del informe algún archivo pesado relacionado con algún plugin que casi no utilizas pero tienes activo? Quizá ha llegado el momento de pensar en eliminar alguna cosita ¿no? o recolocarla.

Pero piensa en tus lectores antes de cortar por lo sano… algunas indicaciones sobre cómo enfocar esta tarea:

• si casi no lo usas: quítalo. En mi caso, por ejemplo, las estadísticas de feedburner, el plugin NextGen Gallery, el seguimiento de Quancast, … y algunas imágenes.
• si es útil, pero no es necesario que esté en todas las páginas vistas: muévelo a una página estática o a una entrada. En mi caso, por ejemplo, pasé a la pagina «Sobre Mi» el Technorati y botones de rankings, ISBN, CC. De esta forma pasaron a perjudicar el peso de la estructura del blog (que se descarga en todas las páginas vistas, a estar en una sección en concreto.
• si es necesario que esté en todas las páginas (header, footer, sidebar): … sigue en los siguientes puntos.

Optimiza tus imágenes

¿Tienes muchas imágenes? ¿Pesan mucho? Para los que no somos «diseñadores» y no nos llevamos muy bien con Photoshop y similares, tenemos la suerte de que existen herramientas online que nos ayudan en la tarea de adelgazar el peso de las imágenes.

Esto se consigue reduciendo un poco la calidad de las mismas pero en muchas ocasiones casi no se nota y podemos bajar el peso cerca de un 30%.

Una buena herramienta online es la que ofrece Dynamic Drive Online Image Optimizer donde podemos elegir el formato de salida y ver si realmente han perdido calidad antes de descargar y sustituir la original por la optimizada.

Optimiza archivos JS y CSS

Este último punto es para los más «osados» y hay que poner mucho cuidado aunque es muy sencillo. Se trata de los archivos que dotan de funcionalidad y forma a nuestros blogs y su estructura. Algunos pesan mucho y otros no tanto, así que de aplicar esta medida, comienza por los más pesados.

Antes de empezar con esta optimización: haz un backup de todos los archivos de tu blog (en serio, es fácil errar).

La medida, aunque peligrosa, es sencilla: elimina todos las líneas en blanco y espacios de «anidamiento». Me explicaré mejor con un ejemplo:

Esta medida la puedes aplicar sin problemas a todos los ficheros .js y .css que te aparezcan en el listado de Websiteoptimization.

El resultado es sorprendente, ya verás!

stas son las 3 medidas que yo tomé para bajar de peso a Phylosoft, aunque sigue pesando demasiado para mi gusto. En la próxima entrada de la serie, hablaré sobre reducir (y si se puede, erradicar) errores de código HTML, CSS y RSS o al menos de como encontrarlos ya que el código de cada uno puede ser muy diferente.

Indice:

1. Introducción: Optimización Web I de IV
2. Pings, Robots y Sitemaps: Optimización Web II de IV
3. Reducir Peso: Optimización Web III de IV
4. Corrige tu código: Optimización Web IV de IV