Optimizar la velocidad de carga de WordPress (para tener contento a Google)

icono de wordpress Desde hace ya algunos años, uno de los factores que Google valora a la hora de establecer el ranking de una web es la velocidad de carga de sus páginas. Este es el anuncio oficial que hicieron en el 2010 justificándo esta decisión y esta la página de información y recursos que proporcionan en la actualidad donde tenemos una herramienta que mide los tiempos de descarga de nuestra página y hace recomendaciones para mejorarlos

Existen multitud de buenos recursos en la web sobre este tema. A mi me gustaría destacar dos: las páginas de Exceptional Performance de Yahoo! (un clásico) y esta otra guía más reciente y mucho más centrada en satisfacer las exigencias de Google.

Yo, sinceramente, nunca me he preocupado mucho de estas cosas. Entendedme: me gusta que mis webs se carguen tan rápido como sea posible, pero no hasta el extremo de querer rebajar 100 milisegundos arañando tiempos de aquí y de allá. No obstante, hace unas semanas y más por “deporte” que por otra cosa me propuse jugar un poco con estas recomendaciones y pasé de una valoración de setenta y pocos puntos al 98/100 que veis bajo estas líneas. Os cuento como lo hice y os doy algunas recomendaciones por si os apetece jugar a lo mismo 😉

Resultados obtenidos con Google Page Speed Insights

Lo primero que tienes que hacer es conocer bien como carga tu wordpress, ver como se distribuyen los tiempos y cuales son los principales cuellos de botella. En los enlaces anteriores ya hay referencias a algunas herramientas útiles para esto. Si queréis más, podéis probar con las siguientes:

Estas herramientas nos servirán, además, para verificar que lo estamos haciendo bien y que los cambios que hacemos no son contraproducentes.

El primer punto a vigilar es el tema y los plugins que usas en tu wordpress. Un tema limpio, sin errores y que no esté sobrecargado de estilos, imágenes y javascript mejora notablemente la velocidad de carga. Haz la prueba, si no, cambiando del tuyo a alguno de los más simples que WordPress trae por defecto. Idem con los plugins. Hay algunos que son verdaderos parásitos. Desactívalos todos, comprueba los tiempos que obtienes y, luego, ve activándolos uno a uno probando de nuevo para ver cuales son los más problemáticos. Valora si puedes vivir sin estos o busca sustituirlos por otros equivalentes pero más eficientes.

Piensa, además, que el contenido que incluyas también cuenta. Todos los objetos que incrustes (Youtube, Vimeo, etc.) van a ser valorados en la carga de tu página. En estos momentos, por ejemplo, la valoración que hace Google de mi portada baja del 98 que veis arriba a un 92 por culpa del objeto de Scribd que he incrustado un par de posts más abajo. Las imágenes también cuentan bastante. Usar miniaturas (thumbnails) que requieran de un click para verlas en alta calidad es una buena práctica. Si, como a mi, no te agrada, puedes usar alguna herramienta para optimizarlas antes de subirlas a tu servidor web. Mis favoritas son optipng y jpegoptim. Si, si, para Linux y en línea de comando. Si buscas otra cosa no se que haces por estas páginas 😉 Usa la opción --strip-all con jpegoptim.

Vamos ahora a cargar nuestro blog con una de las herramientas que hemos visto antes y a observar lo que ocurre. Por ejemplo usando Web Page Test:

Resultados obtenidos con Web Page Test

Como puedes ver, uno de los grandes devoradores de tiempo en las páginas de wordpress (y en general con todas las que usan PHP) es el llamado Time to First Byte o TTFB. Se trata del tiempo que transcurre entre que el servidor web recibe la petición de un cliente y el navegador de este recibe el primer byte y, básicamente, se consume sobre todo en procesar el código PHP. La mejor forma de reducirlo al máximo es usar alguna de las muchas cachés para wordpress que convierten tus páginas PHP a contenido estático. Yo uso W3TC habilitando sólo las opciones de caché de páginas y de objetos (para el resto de optimizaciones uso otros plugins) y sólo con esto podrás comprobar que los resultados mejoran sorprendentemente.

Resultados obtenidos con Web Page Test

Utilizar una caché para las consultas a la base de datos también ayuda un poco. W3TC incluye también esta característica, pero yo prefiero usar otro: DB Cache Reloaded Fix.

Incluye cabeceras de expiración para informar a los navegadores de por cuanto tiempo pueden cachear los contenidos estáticos de tu página (imágenes, css, etc.). Para ello lo primero que tienes que hacer es asegurarte que tu apache tiene activado el modulo mod_expires. Luego, en el fichero de definición del Virtual Host o, en su defecto, en el fichero .htaccess tienes que escribir las directivas correspondientes que pueden ser generales o específicas por tipo de archivo. En el anterior enlace a las páginas de apache tienes instrucciones de como hacerlo. Te copio aquí las mías:

ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpg "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType image/ico "access plus 6 months"
ExpiresByType application/javascript "now plus 1 month"
ExpiresByType application/x-javascript "now plus 1 month"
ExpiresByType text/javascript "now plus 1 month"
ExpiresByType text/css "now plus 1 month"
ExpiresDefault "access plus 1 month"

Optimiza y minimiza el tamaño de los archivos HTML, CSS y Javascript. De nuevo, si lo prefieres puedes activar estas características en el plugin de W3TC pero yo uso otro para esto: Autoptimize. El “truco” consiste en eliminar de estos ficheros cualquier espacio, salto de línea o comentario superfluo y combinarlos en un único archivo, de tal forma que reducimos el número de “requests” al servidor y el tamaño de las mismas.

Estos son los factores más generales a tener en cuenta, pero existen muchos otros particulares de cada caso que tendrás que estudiar usando las herramientas que te recomiendo por aquí y observando cuales son los cuellos de botella de tu instalación particular. Suerte con ello 😉

Cambio de tema (y IV)

icono lapiceroSeis largos años hace que estas páginas no cambiaban de aspecto (desde que adopté el uso de mySimplified, mi primer tema para wordpress) salvo algún retoque menor. Y ya se notaba ¿verdad? Ahora que están de moda los diseños limpios y minimalistas el aspecto de mi blog empezaba ya a cantar como una página de Geocities… ¡Y a la moda no hay que huirle!

Para el rediseño he partido de basicWP, el tema que diseñé hace un par de añitos con objeto de que sirviera como base para aprender a diseñar temas de wordpress o para construir temas más complejos a partir de él. El resultado, aún a medias pero ya totalmente funcional es este que tenéis en pantalla. Lo siento, me han podido las prisas 🙂
mySimplified2 wordpress theme
Quién crea que le puede resultar útil aún en este estado puede descargárselo desde aquí. El que tenga un poco de paciencia (o pase por aquí dentro de unos meses) puede visitar la página que he creado como referencia para mantener futuras versiones más completas en este enlace.

basicWP: un tema básico para WordPress

icono de wordpressPantallazo de basicWP Para los que estén interesados en la construcción de themes para wordpress, Loretahur publicó hace muy pocos días un post muy instructivo que daba las pautas iniciales para ponerse a ello. Después de leerlo recordé que, hace ya años cuando empecé a trabajar con wordpress, me hice un tema muy, muy sencillo con la idea de que fuese limpio y me sirviese como base para la construcción de otros temas más complejos y se me ocurrió que podría ser un buen complemento para quien quisiera ver un ejemplo práctico y completo. Y aquí está basicWP.

Se trata, como digo, de un tema muy, muy simple que omite deliberadamente muchas de las comprobaciones básicas que se hacen usualmente (entradas protegidas con contraseña, etc) pero es muy limpio y claro y se entiende a la perfección con poco esfuerzo. Además lo he remozado para que soporte la mayoría de las novedades introducidas por las últimas versiones de wordpress: gravatares, soporte para widgets en la barra lateral, comentarios anidados y paginados, etc.

Load Average en WordPress con el plugin TPC! Memory Usage

TPC Memory muestra el Load AverageKDE El plugin para wordpress TPC! Memory Usage añade en sus últimas versiones información acerca del load average de la máquina, una medida a tener en cuenta para saber si nuestra empresa de hosting sobrecarga en exceso sus servidores compartidos.

Por cierto, hablando de plugins para wordpress, desde hace unos días AsideShop, el mejor plugin para hacer este tipo de minipost, vuelve a estar operativo para versiones superiores a la 2.8 de este CMS. Vuelven los miniposts a Un lugar en el mundo…

Chuletillas (y XX) – Más memoria para WordPress

chuleta Nuestro wordpress consume cada vez más memoría. Las pesadas funcionalidades añadidas a las nuevas versiones de este CMS y las decenas de plugins que le solemos agregar son los principales responsables. Nuestros servicios de hosting compartido, avaros hasta el extremo con la memoria de sus/nuestros servidores, lo secundan, así que cada vez es más frecuente encontrarnos con errores como el siguiente a la hora de activar determinados plugins o, por ejemplo, al tratar de hacer una actualización de versión de forma automática desde el panel de administración:

Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate (...) bytes) in (...).php on line (...)

Por regla general las empresas de hosting suelen limitar el valor de los scripts PHP ejecutados en los servidores compartidos a 32 Mbytes mediante la directiva memory_limit = 32M en el fichero php.ini. 32 Megas es también el valor que wordpress define por defecto como límite máximo de consumo. Si necesitas algo más de memoria y, como suele ocurrir, no tienes acceso a modificar tu fichero php.ini puedes probar con lo siguiente:

En primer lugar, inlcuye la siguiente línea en tu fichero .htaccess, lo cual permitirá que Apache sobreescriba el límite impuesto en el php.ini:

php_value memory_limit 64M

En segundo lugar, añade esta otra línea en el fichero wp-config.php para modificar el límite por defecto de wordpress:

define('WP_MEMORY_LIMIT', '64M');

Y con esto debería de bastar. Pero si quieres hacer un ajuste fino de la memoria que consume cada uno de tus plugins puedes recurrir a este otro que te dará, en cada momento, la memoria consumida por tu wordpress además de los límites que tiene tu instancia y otras interesantes informaciones.

Avatares en los comentarios

wordpress El lector asiduo (si, si, aunque no lo creáis insisto en que sé que tengo uno y está bien cuidado y vigilado para que no se me escape) habrá visto ya que desde hace unas semanas se muestran unas “caritas” junto a los comentarios. Para los dos o tres ocasionales les insto a que se fijen ahora. Por ejemplo aquí o, para los perezosos, en este recorte:

Pantallazo de avatares en los comentarios

Esas “caritas” se suelen llamar avatares y están perfectamente integradas en wordpress (desde su versión 2.5, creo recordar) a través del servicio que proporciona Gravatar. Si quieres que aparezca una imagen similar cuando dejes un comentario (aquí o en cualquier otro blog que use este servicio) basta con que te abras una cuenta asociando a ella la dirección de correo electrónico que sueles usar al comentar y subas la foto o imagen con la que quieres identificarte. ¡Anímaos! Os aseguro que se trata de un servicio nada intrusivo y que jamás envían publicidad ni nada similar.

Si tienes un blog con wordpress y la plantilla que usas no da soporte para ello, puedes usar un plugin o, directamente, usar la función que proporciona wordpress de forma nativa:

<?php echo get_avatar($comment,45); ?>

La llamada anterior mostraría un avatar de 45×45 píxeles que es lo que yo estoy usando. Para más información y opciones, échale un vistazo a la página correspondiente del Codex de wordpress.

Lo que no se aún es si incluirlo “de serie” en la próxima versión de mySimplified (el tema de wordpress que uso) como suelo hacer cuando introduzco mejoras. Incluir los gravatares hace que la validación W3C de las entradas se vaya a la porra… Ya me lo pensaré.

Miniposts

wordpress Llevaba ya un tiempo buscando un plugin para hacer miniposts (como este) y, aunque AsideShop aparece en la página correspondiente del codex de WordPress, ha tenido que ser a través de la bitácora de mi buen amigo Chiqui que me he percatado de su existencia. AsideShop va mucho más allá de lo que buscaba y realmente lo que permite es crear plantillas personalizadas para tus posts y asignarlas en función de la categoría que elijas para ellos. Espero no dejarme llevar por ninguna fiebre colorista y convertir esto en la pista central de un circo…

Insertar publicidad entre comentarios o entradas de WordPress

icono para temas pecunarios Si quieres insertar bloques de anuncios entre las entradas o comentarios de tu blog no tienes más remedio que “mojarte” un poco y enredar con el código PHP con el que está escrito el tema que estés usando. Existen plugins que facilitan un poco la tarea, como MoreMoney u otros más centrados en Adsense, pero no son tan flexibles como una intervención manual y la cosa tampoco es tan difícil si andamos con un poco de cuidado. Os explico.

El código del tema que muestra los comentarios suele estar en un php aparte llamado comments.php. Para insertar un objeto (publicidad o lo que sea) entre los comentarios de tu blog sólo debes de buscar el siguiente bucle (destacado en negrita):

<?php foreach ($comments as $comment) : ?>
/*... */
/* Código de nuestro tema que visualiza los comentarios */
/*... */
<?php endforeach; ?>

Si, por ejemplo, quisíeramos insertar un bloque de publicidad cada 10 comentarios haríamos las siguientes modificaciones (en negrita):

<?php $commentnum = 1; ?>
<?php foreach ($comments as $comment) : ?>
/*... */
/* Código de nuestro tema que visualiza los comentarios */
/*... */
<?php if ($commentnum == 10) { echo '<p align="center">Publicidad<br />
/*... */
/* Código que muestra nuestra publicidad */
/*... */
</p><br />'; $commentnum=0; } ?><?php $commentnum++; ?>

<?php endforeach; ?>

Si lo que queremos es hacer la inserción en un determinado punto de nuestra página principal (o en las páginas de búsquedas, archivos, etc.) buscaremos el siguiente bucle en el archivo adecuado (home.php, search.php o archive.php):

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
/*... */
/* Código que visualiza las entradas del blog */
/*... */
<?php endwhile; else: ?>
/*... */
/* Código para cuando no hay entradas a visualizar */
/*... */
<?php endif; ?>

Y haremos las siguientes modificaciones:

<?php $postnum = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
/*... */
/* Código que visualiza las entradas del blog */
/*... */
<?php if ($postnum == 2) { echo '<p align="center">Publicidad<br />
/*... */
/* Código que muestra nuestra publicidad */
/*... */
</p><br />'; } ?><?php $postnum++; ?>

<?php endwhile; else: ?>
/*... */
/* Código para cuando no hay entradas a visualizar */
/*... */
<?php endif; ?>

Esto nos mostraría un bloque de publicidad entre la segunda y la tercera entrada de nuestro blog.

WordPress 2.6 Gears

wordpress Una de las novedades de wordpress 2.6 que ha pasado más desapercibida es la integración con Google Gears, un proyecto open source dirigido por Google que pretende mejorar el uso del navegador como plataforma de ejecución de aplicaciones y que está disponible para Microsoft Explorer y Mozilla Firefox sobre Linux, Mac OSX y Windows (para versiones concretas ver los requisitos aquí).

Matt Mullenweg hace el anuncio en el blog oficial de wordpress e indica como habilitar su uso. Sólo hay que pulsar el indicador de Turbo que aparece en la parte superior derecha del tablero de administración de tu wordpress (a partir de la versión 2.6) y elegir la solapa de Install Now en la ventana resultante. Esto nos lleva a la página de Google que nos permitirá, o bien instalar el plugin directamente desde la web, o bajarnos un ejecutable para hacerlo localmente (dependiendo de la plataforma desde la que hagamos el proceso). Una vez instalado Gears se nos pedirá reiniciar el navegador y deberemos, de nuevo, volver a entrar en nuestro wordpress y pulsar el indicador de Turbo. Ahora la solapa de Install Now ha sido sustituida por Enable Gears. Pulsamos en ella y, tras aceptar la autorización, se nos descargaran a nuestro equipo los ficheros que a partir de ahora ya no tendrás que volver a ejecutar desde Internet sino localmente.

google gears Una vez que has instalado Gears en tu navegador, tendrás disponible la posibilidad de deshabilitar el uso del mismo en cualquier sitio previamente autorizado. En Firefox la ventana desde la que se hace esto está, como suele ser habitual con las opciones de configuración de todos los complementos, en el menú de Herramientas.

Y, ya que tienes el plugin de Gears instalado, no olvides que Google Reader, Google Documents y otras aplicaciones también pueden beneficiárse de su uso. En Google Readers y Google Documents se habilita pulsando el botón de Offline que aparece en la parte superior izquierda de cada uno de ellos.