No hagas esperar a tus lectores. Optimiza tu blog (parte 2)

Hace ya algún tiempo que publiqué la primera parte de esta serie sobre optimización de blogs. Álvaro ha hecho un excelente artículo dentro de su tutorial de Blogger, para ver cómo se puede optimizar este tipo de blogs. Mi intención es profundizar el los motivos por los que es necesario optimizar el blog, y los beneficios que nos reporta.

En el anterior artículo hablamos de los principales bloques que construyen nuestro blog, el HTML, CSS, JavaScript, PHP, etc… Todos ellos son susceptibles de ser optimizados, y al hacerlo, no solo nos lo agradecerán nuestros lectores, sino que además podremos reducir drásticamente el consumo de ancho de banda de nuestro blog. Esto nos permitirá poder ahorrarnos unos euros en la factura del hosting.

En general, algunos de los trucos que se presentan aquí podrían no ser aplicables a todos los blogs, principalmente porque, en algunos casos, el servicio de hosting no tiene activada, o no es posible activar, ciertas características en sus servidores.

El HTML

Gran parte del contenido de nuestros artículos estará en HTML. Lo más importante en este caso es activar la compresión de HTML. ¿Qué es esto? Nuestro servidor web, es capaz de enviar el contenido de forma comprimida por la red, en formato GZIP, como un ZIP para los ficheros. Es decir, antes de enviar por la red el documento, lo comprime, y nosotros recibimos un archivo GZIP, que nuestro navegador descomprime y convierte en HTML legible. Este formato está soportado por todos los navegadores modernos, así que lo podremos usar siempre sin problemas.
Por supuesto, esto acelera la descarga y ahorra ancho de banda de nuestro servidor de hosting. Con pocas visitas, puede ser irrelevante, pero en un blog con miles de visitas, tiene mucha importancia.

Contenido

Todo el contenido de nuestro blog es susceptible de aplicar una serie de buenas prácticas que mejoran mucho la carga de las páginas:

1. Hacer menos peticiones HTTP
2. Reducir las búsquedas de DNS
3. Repartir la carga entre varios dominios
4. Evitar las redirecciones y los 404’s

Servidor Web

Una buena parte de las optimizaciones que podemos hacer en nuestro blog, se harán a nivel de nuestro servidor web. Las más importantes son:

1. Usar una CDN (Content Delivery Network). Esta opción no está al alcance de cualquiera y en muchos casos exigirá un pago por su uso, que no todos los bloggers se pueden permitir. La ventaja al usar una CDN es que el contenido está repartido entre servidores geográficamente dispersos por todo el mundo, con lo cual el tiempo de descarga de los elementos mejora notablemente. Una CDN gratuita es CoralCDN.
2. Añadir cabeceras de caché. Todo el contenido de un blog no es igual. Habrá elementos que no cambien nunca o casi nunca (cabecera, iconos, fondos, etc..) , mientras otros lo harán cada muy poco tiempo o a diario (comentarios, posts, búsquedas…). Podemos mejorar mucho los tiempos, añadiendo una etiqueta en la cabecera de los archivos que se descarguen, indicando el periodo de validez del mismo. Por ejemplo, el JPG de nuestro logo podría durar muchos meses o años, y podemos decir a nuestro servidor que “Never expire”, es decir, que nunca caduque. Esto hace que cuando un usuario que ya haya visitado nuestro sitio, vuelva, no tenga que descargarse la imágen porque ya la tendrá en su caché del navegador (siempre que no lo haya borrado claro). Para el caso de otros contenidos, deberíamos estimar el tiempo razonable de expiración. Por ejemplo, los posts más antiguos, no deberían variar mucho, por lo que se podría alargar su tiempo de cachedado. Los comentarios y/o búsquedas, no. Más adelante en la sección de PHP veremos más sobre esto. Otra forma de gestionar las cachés es a través de las etiquetas ETags, pero es un tema algo más avanzado.
3. Evitar poner imágenes con src=””, o con JavaScript img.src = “”. En ambos casos, la mayoría de los navegadores harán una petición al servidor para buscar algo que no existe o que ni siquiera se va a mostrar. Esto puede provocar gran cantidad de peticiones innecesarias. Aquí tenéis una explicación más en profundidad sobre el tema (en inglés).

Archivos CSS

1. Compresión. En cuento a los archivos de estilo tambien se puede y debe aplicar la compresión. Además, podemos minimizarlos (del inglés minify). Es decir, simplificar el contenido del fichero, eliminando espacios en blanco, tabulaciones, comentarios, etc… Esto es muy fácil de hacer. Puedes optar por minimizar los archivos manualmente y luego subirlos, o bien usar PHP, para que los minimice. Hay muchas herramientas para automatizar esto Minify de Google, Yahoo UI Compressor, y si hacéis una búsqueda en Google encontraréis muchas más.
2. Poner los estilos al principio. Las hojas de estilo, es decir, los archivos CSS, se deben colocar siempre al principio de la página HTML. Esto se debe a que los navegadores van leyendo la página de arriba a abajo, y si encuentran el estilo al principio, pueden ir renderizando la página conforme a lo que pone el CSS. Así el usuario recibe un aviso visual, de que la página se está cargando correctamente.

JavaScript

Para JavaScript, las mismas reglas de minimizar y GZIP se pueden y deben aplicar, pero además tienen unas características propias:

1. Poner los scripts al final. Muy importante. El HTML 1.1 limita la descarga en paralelo de más de dos archivos a la vez. Al poner todos los js al principio se bloquea la descarga en paralelo de otros elementos de la página. Cuando se descarga un js, el resto de archivos HTML, CSS, imágenes, se quedan a la espera de que el JS termine.
2. No incluir nunca archivos JavaScript (y CSS) dentro de las páginas. Al poner javascript dentro del HTML, mezclado, se impide la posibilidad de cachear estos archivos. Es decir, cada vez que carga la página, se vuelven a cargar los scripts y los css. Si se llevan a archivos externos (.js y .css) el navegador los puede cachear y evitar que se descarguen siempre. No solo reduce el tiempo de cargar, sino que nos ahorra ancho de banda de nuestro proveedor.

Imágenes

En este caso, a diferencia de los archivos CSS y JS, hay que tener en cuenta otras consideraciones. Las imágenes ya estarán comprimidas y la optimización tiene que seguir otros caminos.

1. Formato de la imágen. Es muy importante saber elegir el formato adecuado para cada imágen. Cada compresión (GIF, JPEG, PNG) tiene un tipo de imágen para el que es más óptimo. Por ejemplo, GIF se debería usar en rótulos, o con imágenes con poca variación de colores. JPEG, para fotografías o imágenes con mucha variación de color, siempre que no se necesite transparencia. Por último, PNG de 8 ó 24 bits, para imágenes tipo fotografía que necesiten transparencia. Entrar en detalles se llevaría un post entero, pero las normas generales serían estas.
2. Ajustar las imágenes a la paleta de colores que realmente usan. ¿Tu imágen GIF tiene 4 coleres de 256? Se puede optimizar. Hay muchas herramientas para hacer esto según el tipo de imágen. En imagemagick se pueden encontrar herramientas para optimizar tus GIFs, PNGs y JPEGs.
3. No escalar las imágenes con HTML. Si se necesita una imágen de 100×100, la imágen original debería tener 100×100 y no 500×500. Si luego queremos mostrar una imágen ampliada hay otras formas, como poner el enlace a la imágen original de mayor tamaño. Así se evitan descargar muchos kbs que no se necesitan.
4. Usar Sprites CSS. Es mejor cargar un único archivo de imágen con todos los iconos incluídos en el, que muchos iconos de forma separada. Luego a través de CSS, podemos ir seleccionado por programación aquellos iconos que se deben mostrar en cada caso.

PHP/MySQL

En este caso las opciones de optimización han de ser aplicadas en el servidor a través de módulos de PHP/MySQL. Hay que tener en cuenta que PHP interactuará con una base de datos de la que extrae la información, ya sean posts, comentarios, etiquetas, búsquedas, etc… Por tanto, todo aquello que evite las peticiones a la base de datos harán que nuestros posts se muestren más rápidamente. El principio general es como el de la energía “la consulta más rápida a una base de datos es aquella que no se hace”. La puesta en práctica de las siguientes recomendaciones dependerá del tipo de hosting que tengáis:

1. PHP Flush. Las páginas en PHP tardan un poco en ser procesadas, y hasta que no lo hacen no se envían desde el servidor a nuestro navegador. En PHP hay una orden <?php flush(); ?> que obliga al servidor de PHP a enviarnos todo lo que esté por encima de esta orden. Lo ideal es ponder el flush, justo después de la etiqueta HEAD para que de esta forma nuestro navegador pueda empezar a representar los estilos y que el usuario vaya viendo algo.
2. Desactivar las revisiones de las entradas. Esto puede ser útil en blogs con muchos editoes. Con un solo editor, y un par de revisiones bastan. Recordad. Cada revisión se guarda en la base datos y hay que consultarla. Un plugin para hacerlo cómodamente es Revision Control. También se pueden eliminar por completo las revisiones poniendo define('WP_POST_REVISIONS', false); en el archivo wp-config.php.

3. Activar el cacheado del opcode en PHP. Hay muchas peticiones de PHP que siempre son las mismas, de formas que podemos optimar el opcode (pseudo-código que usa PHP) para tenerlo ya preparado. Se puede hacer con eAccelerator v0.9.5.

En general, debemos revisar con mucho cuidado todos estos aspectos del blog para ver cuáles están afectando al rendimiento. Cuanto menos mejor. Menos plugins, menos entradas en la cabecera, menos textos, imágenes más pequeñas… Si no se necesita, no se debería ver ni descargar. Recargar una página en exceso, además de afectar al estilo, nos puede penalizar mucho el rendimiento, y el bolsillo si tenemos contratado un ancho de banda fijo.