La página principal de este blog tarda en cargar entre 5 y 6 segundos con la caché vacía y entre 3 y 4 segundos una vez cacheada, dependiendo de lo ocupado que esté el servidor. Un tiempo bastante alto, que vamos a intentar mejorar.
Para ayudarnos vamos a utilizar YSlow, un plugin para FireBug (si, un plugin para un plugin). Este plugin comprueba si se cumplen las reglas que diseñaron en el grupo de Exceptional Performance de Yahoo!
Si le indicamos que analice la portada del blog, nos da una puntuación (usando el sistema anglosajón) de F (34), un suspenso como un camión.
La primera regla en la que suspendemos (con una F) es en la de realizar pocas peticiones HTTP, ya que para cargar la página hacen falta 10 ficheros JS, 6 CSS y 28 imágenes. De los 10 JS, 6 pertenecen al tema de wordpress que uso y los otros 4 a plugins. Intentar unificar los ficheros de distintos plugins sería una locura, pero los que pertenecen al tema vamos a reunirlos en 1 para reducir casi a la mitad el número total.
Después vamos a usar la técnica de Sprites CSS (vía el generador automático) para unificar todas las imágenes que usan tanto el tema K2/Vader como el plugin de Compártelo, para pasar de 28 imágenes descargadas a 6. Como beneficio añadido tenemos que podemos optimizar los PNGs y pasar de 20,7Kb en imágenes a 6,9Kb. lo cual nunca viene mal.
Ya que no resultaba muy complicada también eliminamos la llamada a un css cuya única función era cargar la el css principal en php.
Tras todos estos pasos, hemos reducido las peticiones a 6 JS, 5 CSS y 6 imágenes. Ahora obtenemos una C en este apartado e incrementamos la puntuación total en 14 puntos. Para obtener un sobresaliente en esta apartado tendríamos que reescribir partes fundamentales de Wordpress, del Tema y los plugins.
Por ejemplo, se me ocurre que el motor de Wordpress podría tener un par de funciones con las que los plugins y temas puedan indicarle que ficheros JavaScript y CSS quieren usar respectivamente, y este los uniera en uno solo para enviárselo al navegador. De esta forma tendríamos siempre una sola petición JS y otra CSS independientemente de cuantos plugins tuviéramos instalados. Estos envíos podrían estar comprimidos y su compresión sería mayor que la de cada uno de los elementos por separado.
Actualización: A sugerencia de mi amigo Juan, voy a ir poniendo los tiempos que se ganan con cada modificación para poder ver como afectan al tiempo total cada uno de ellos. Pero también tengo que decir que los tiempos en si mismos son bastante difíciles de medir, ya que el blog está en un servidor en el que también hay un juego online, y la carga que este impone al servidor hace variar mucho los tiempos. Por eso voy a intentar medir el tiempo desde el mismo sitio y a las mismas horas para intentar que los parámetros de la medición sean lo más parecidos posibles.
Los resultados son un poco raros, ya que el tiempo de carga con la caché vacía ha aumentado en casi 1 segundo (probablemente debido a que ahora en la portada se cargan imágenes más grandes debido a los Sprites CSS); pero una vez los datos están en caché el tiempo medio ha bajado en casi medio segundo. Habrá que esperar a tener más resultados para comparar.
Me parece genial optimizar la carga pero no estaría mal añadir contenido que descargar
y aún mas importante: cambiar el color de la fuente de gris invisible a blanco. Porque te leo desde akregator que desde una web no lo haría :-m
un saludo
Con lo de contenido para descargar me refiero a bloguear mas y metabloguear menos
¡Oído cocina! Lo haré un poco más blanco.
Puede parecer que metablogueo, pero lo que pretendo es contaros lo que voy haciendo mientras aprendo a hacerlo yo mismo. Y de momento, el material que tengo para experimentar es mi propio blog.
Gracias por robarme un minuto de mi vida en leer como ahorrarme medio segundo. Y menos mal que no pienso dar todos esos pasos, porque entonces sería taaaaaaaaaaaaaaan útil… Saluditos desde la silla de al lado :*
Bueno, si Google, Yahoo! y Microsoft invierten mucho dinero en estudiar estos métodos de optimización por algo será. A mi, personalmente me gusta que las páginas carguen rápido. En un blog quizás no tenga mucho sentido, pero para otras páginas que se utilizan muy a menudo si es importante.
Los tiempos despues de las modificaciones no vendrian mal
Tienes razón, tenía pensado hacerlo esta mañana, pero se me ha pasado. Aunque dudo de que con esta modificación sólo los tiempos varíen mucho. Mi idea es compararlo cuando termine, para ver la diferencia real. Aunque poner los intermedios puede ser interesante para ver que cambios merecen de verdad la pena.