Optimizando el blog (1): consideraciones previas

Artículo publicado en Magia para todos los públicos

Las últimas semanas he estado optimizando el blog, dado que la velocidad de carga era bastante (muy) lenta. El trabajo no ha terminado, pero sí que puedo decir que la mejora ya es evidente. Os voy a contar qué pasos he dado, por si a alguno os es útil, algunos de los problemas que me he encontrado y cómo los he resuelto.

Consideraciones previas

Mi blog funciona sobre WordPress y está alojado en un servidor compartido en su tarifa más económica, por lo que ese es el primer cuello de botella (y uno, por el momento, que no puedo cambiar). Por supuesto que un servidor dedicado sería mucho mejor, pero bueno, es lo que hay.

Por otro lado, aclarar que mi conocimiento de lenguajes de programación y similares (php, javascript, etc.) es nulo. Sé lo que son, por poner un ejemplo, las css pero ni idea de cómo funcionan a nivel de código.

Así que la primera norma de mi optimización del blog es: el código no se toca (si acaso, poco y nunca en archivos de la instalación de WordPress).

Por supuesto que habrá formas mucho mejores de hacer lo mismo que he hecho yo. Pero dado que los resultados han sido buenos, igual puede ser un buen punto de partida para alguien que sepa tan poco como yo de estos temas.

Servicios web que he utilizado

Para analizar

GtMetrix

Esta herramienta online analiza nuestra web mediante los servicios PageSpeed (de Google) e YSlow (de Yahoo) y nos da un listado más que exhaustivo de las áreas pendientes de optimizar.

Aviso: Como en muchas cosas de la vida, hay factores de dicha optimización que no podemos controlar y otros que parecen incompatibles entre sí. Hay que valorar y llegar al compromiso más eficiente.

Antes de empezar la optimización, la página principal tenía una puntuación de C (bastante malilla por tanto) en ambas categorías (PageSpeed e YSlow).

Pingdom

Analiza la velocidad de carga de nuestra web y nos muestra posibles errores.

Antes de empezar, la velocidad de carga de la pagina principal estaba en 6-7 segundos (ya lo sé: una barbaridad).

Para guardar y servir archivos estáticos

Google Drive

Este servicio de archivo en la nube (y más cosas) está disponible para todos los que tengan una cuenta de GMail (algo que os recomiendo). Anticipo que voy a usar Google Drive para almacenar las imágenes de las entradas que voy a ir escribiendo y, poco a poco, de las entradas antiguas.

Dropbox

Este fue el primer sistema de almavenamiento en la nube que utilicé y me parece super práctico. Lo tengo instalado en el PC (que usa Ubuntu), en el Netbook, en el smartphone…

Voy a utilizarlo como CDN para servir los archivos de javascript y las imágenes pendientes de optimizar y pasar a Google Drive.

Por cierto, si queréis empezar a usar Dropbox podéis daros de alta aquí.

Nota: el enlace es una invitación mía al servicio que, si la aceptáis, nos dará a vosotros y a mí espacio extra (500 MB). También podéis daros de alta directamente en la web de Dropbox (sin espacio extra) o pedirle a un amigo que lo use que os mande una invitación).

Para optimizar archivos

Image Optimizer

Hasta la fecha, nunca había optimizado las imágenes. Este servicio online hace un trabajo excelente.

Programas utilizados

Gimp

La alternativa libre a Photoshop. La voy a utilizar para ajustar el tamaño de las imágenes.

Filezilla

Programa de acceso FTP, para descargar, modificar o subir archivos a nuestro servidor.

Plugins WordPress para optimización

• WP Super Cache
• WP Minify
• DB Cache Reloaded Fix

Metodología

Para optimizar la web, los pasos fueron los siguientes:

1. Analizaba la página con GtMetrix.
2. Revisaba los posibles cuellos de botella en el listado y elegía uno.
3. Búsqueda en Google de posibles soluciones.
4. Probaba esas soluciones, comprobando que la solución no impidiera el buen funcionamiento del blog y que las estadísticas en Pingdom y GtMetrix mejoraban (a veces empeoraban).

Por supuesto, empezando por las optimizaciones que me parecían más fáciles.

Paso 1: Las imágenes

Mi blog tenía dos problemas principales respecto a las imágenes: no estaban optimizadas y en algunos casos se escalaban vía WordPress (es decir, que eran más grandes de lo necesario). Además, por lo que decían los informes, podía ganar eficiencia si se cargaban desde un servidor externo.

Así pues, procedí a optimizar las imágenes de la pagina principal.

Las descargué a mi ordenador y, con Gimp, las convertí al tamaño correcto.

Las edité mediante Image Optimizer para reducir su peso (se consiguen reducciones realmente impresionantes).

Las subí a una carpeta de Google Drive creada al efecto y compartida con todo el mundo.

Cambié en el editor de página la imagen original (archivada en mi servidor) por la archivada en Google Drive.

Los resultados no se hicieron esperar. La velocidad había mejorado, y el peso de la página se había reducido. Aún estaba lejos del ideal, pero iba por buen camino.

Nota: Intenté probar el plugin smush.it. No conseguí hacerlo funcionar sin error.

¿Queréis que pase a contaros otros pasos que fui dando? ¿Queréis más detalles de la optimización de las imágenes? ¿Tenéis alternativas mejores?

Espero vuestros comentarios. Y ya sabéis que podéis encontrarme en twitter, facebook y google+. Un abrazo.

Si te ha parecido interesante, te animo a suscribirte al feed del blog y compartirlo en tus redes sociales.

Y recordad que ahora podéis recibir las actualizaciones del blog por correo (se mandan una vez a la semana).

Suscribirse al blog

* indica dato obligatorioCorreo electrónico *
Nombre *