Optimización Web en Phylosoft

Estos últimos 10 días me he estado dedicando mucho a optimizar la web Phylosoft. Descubrí que llegar a Phylosoft requería la descarga de 460 Kb y 91 llamadas html a los diferentes objetos que componían la página principal. Una verdadera barbaridad.

Esto provocaba que las páginas tardaran mucho más de lo aconsejable en cargarse y me fijé como objetivo reducir el peso a la mitad. Que sigue estando por encima de lo que sería bueno, pero no deja de ser mucho menos que hace 10 días. Pues bien, he cumplido el objetivo y ahora la página solo pesa 212 Kb y hace 61 llamadas.

Esta optimización ha supuesto muchos cambios, de varios tipos: técnicos, funcionales y de imagen. He eliminado algunas cosas, he mejorado algunas y cambiado de sitio otras. Pero creo que el resultado es bueno, creo que la página se carga más rápido y está menos sobrecargada.

¿Qué herramientas he utilizado para decidir qué optimizar? Pues ha sido una (el link lleva al análisis para Phylosoft en ventana nueva): Web Site Optimization

Este site hace un análisis técnico de la URL que le introduzcas en varios sentidos:

• peso total y tiempos medios de descarga utilizando diferentes velocidades de conexión
• objetos y llamadas que se realizan, por tipo (imagenes, html, css, scripts …)
• desglose de lo que cada uno de estos objetos pesa (esta es la parte que más me ha ayudado a decidir por dónde empezar, qué suprimir y mejorar …)

Ahora ¿qué he cambiado, quitado, movido?

PLUGINS:

1. Desinstalé algunos que no utilizaba pero tenía instalados y cargaban su CSS su Script y algunas imágenes. Por ejemplo, el NextGen Gallery
2. Decidí cargarme el PostRatings. Casi ningún lector del blog lo utilizaba y su peso era considerable. Además mejora la claridad y el espacio blanco de las páginas

IMAGENES:

1. Reduje el peso de muchas de las imágenes que se cargaban siempre (header, sidebar y footer). Incluso el header antes era una sola imagen de lado a lado y ahora son 2 imágenes pequeñas y texto, que pesa mucho menos)
2. Quité las imágenes de algunos Directorios que en los últimos meses no me han traído ni una visita (no es que pesaran mucho, pero todo ayuda)
3. Quité los botones de acceso a las secciones destacadas dejando solo el menú superior para llegar a ellas (¿error?)
4. Del Copyleft cambié el minibanner y dejé el otro botón en Sobre Mi! lo mismo para IBSN

SCRIPTS, JS y CSS:

1. Eliminé los módulos de estadísticas y seguimiento de Quancast y Feedburner, me quedo con Analytics y Alexa de momento
2. Moví el Authority de Technorati a la página Sobre Mi!. El hecho de tenerlo en el footer hacía que se cargara en cada página y pesa muchísimo
3. Idem los Rankings de Alianzo y Wikio
4. Eliminar de los CSS y JS (en concreto el prototype.js) espacios y líneas en blanco y clases que no se utilizaban

Un truco fácil y sorprendente: solo con eliminar los espacios en blanco y líneas vacias del prototype.js, éste reduce su peso casi un 20%.
Más cosas que seguiré haciendo y otras que estoy tentado de quitar en cualquier momento por que pesan demasiado para el poco uso que les doy:

1. Intentar optimizar más las imágenes
2. Eliminar espacios y líneas del resto de archivos CSS y JS
3. ¿Quitar las estadísticas de MyBlogLog?

Por otra parte descubrí que en el código había errores, y un espíritu perfeccionista y técnico como el mío no los podía soportar, así que me armé de paciencia (insisto en que se muy poco de programación, o igual ahora ya se algo) y encaré el problema hasta que eliminé todos los errores de programación (incluido alguno que trae Wordpress de serie). Así que Phylosoft se ha ganado dos sellos:

Los errores en la programación los he encontrado gracias a Emezeta y su herramienta Emezeta Rank. Una herramienta que analiza muchas de las características de una página web, puntos fuertes y débiles, dónde falla y otras ideas para mejorar en cualquiera de sus aspectos. En cada punto, contiene abuntante información sobre los pasos a seguir para aumentar el éxito en dicho criterio. A través de Emezeta Rank llegué a los análisis HTML y CSS profundos (los links llevan a los análisis para Phylosoft en ventanas nuevas):

Validador de HTML

Validador de CSS

que es donde me informé de los errores concretos de mi blog y vi como solucionarlos hasta no tener ninguno. Cuando lo logras es cuando te dan el sello correspondiente.

Y de momento eso es todo. Ha sido una currada, que además no termina, por que en estos temas el trabajo y aprendizaje es contínuo, pero creo que ha valido la pena.

Próxima quemadura de pestañas: Accesibilidad Web (aquí aún tendré mucho que aprender).

¿Conoces más cosas que se puedan optimizar (por un novato)? ¿Qué más cambiarías? ¿Tienes alguna técnica de optimización fácil? ¿y para mejorar la accesibbilidad? ¿Notas si esta web se carga más rápido? Venga, venga… comenta!!!

Etiquetas: CSS, HTML, Optimización, Phylosoft, Web

¿Te ha gustado?, ¿quieres que te lleguen nuestras nuevas entradas? Suscríbete a Phylosoft por RSS o email

Trackback URI