Si tu blog corre sobre WordPress puede que quieras realizar algunos cambios en la estructura y el contenido devuelto (o puede que incluso estés desarrollando tu propio tema) y te encuentres con una limitación: algunas funciones no están accesibles fuera de «el Bucle» («the Loop»).

El Bucle es el código que muestra las entradas de cada página, y es en lo que se basa la parte pública de WordPress. Este CMS de blogs está tan centrado en las entradas devueltas que muchas funciones, si se encuentran fuera del Bucle, no devuelven lo que cabría esperar o simplemente no devuelven nada. Este hecho estaba muy agravado en WordPress 1.X, donde la inmensa mayoría de las funciones no estaban permitidas fuera del Bucle. Pero aún en las nuevas versiones de este software encontramos algunas funciones que no se comportan adecuadamente. Es el caso de, por ejemplo, las funciones relacionadas con el autor de la entrada; por lo tanto, hacer algo en principio tan común como incluir la información del autor en la barra lateral (al estilo Blogger) no es posible, al menos de forma directa.

El tener accesibles todas las funciones y toda la información de las entradas es interesante para poder controlar mejor el contenido de los bloques «estáticos» de cada página: encabezado (header), barra lateral (sidebar) y pie de página (footer). Especialmente relevante es el caso del encabezado, ya que cualquiera que se preocupe por el rendimiento de su blog en los buscadores no estará contento con la forma en que WordPress genera el título y las etiquetas meta de las páginas. Sí, has leído bien, «etiquetas meta». Si aún crees que estas etiquetas siguen defenestradas, echa un vistazo a cómo se comporta Google últimamente.

La solución

Para hacer todas las funciones accesibles desde cualquier parte de las páginas devueltas por Wordpress recurriremos al sencillo método de incluir todo el contenido dentro del Bucle. Si hay funciones que no tienen el comportamiento esperado fuera del Bucle, evitar que haya ningún código fuera de ese bloque es la solución obvia. Por supuesto el código del Bucle se repite por cada entrada devuelta y no queremos repetir por ejemplo el encabezado, sino hacer que se devuelva sólo al principio de la página (y que el pie de página, y normalmente la barra lateral, aparezca sólo al final). Para lograr esto haremos uso de las variables $wp_query->current_post y $wp_query->post_count que almacenan respectivamente el número de entrada actual (empezando por 0) y el número total de entradas devueltas.

Si el código de, por ejemplo, el index.php de un tema corriente suele tener esta estructura:

<?php
get_header();
if ( have_posts() ){
   while ( have_posts() ){
      the_post();
      ...
   };
}else{
   ...
};
get_sidebar();
get_footer();
?>

Para llevar a cabo el método descrito, necesitaremos alterar ese código de la siguiente manera:

<?php
if ( have_posts() && ! is_404() ){
   while ( have_posts() ){
      the_post();
      if ( $wp_query->current_post == 0 ) get_header();
      ...
      if ( $wp_query->current_post == $wp_query->post_count - 1 ){
         get_sidebar();
         get_footer();
      };
   };
}else{
   get_header();
   ...
   get_sidebar();
   get_footer();
};

Necesitarás modificar de esta forma los archivos que devuelvan entradas en el tema que estés usando. Éstos normalmente son: index.php, archive.php, attachment.php, page.php, search.php y single.php, aunque cada tema es diferente, así que busca la función have_posts() en su código para encontrar dónde será necesario aplicar los cambios.

En la entrada anterior («Generar tráfico a través de los feeds de un blog») pasé por alto conscientemente el tema del robo de contenido porque pensaba dedicarle una entrada completa a este tema. Algunos bloggers deciden incluir en sus feeds extractos en vez de entradas completas para protegerse de los spam blogs o splogs, que se dedican a duplicar el contenido de los sitios web para rentabilizarlo mediante publicidad. A este proceso se lo conoce como scraping, y al software y a los responsables de estos sitios se les suele adjudicar el sobrenombre de scrapers.

Por supuesto hay formas de duplicar el contenido de un blog o de cualquier sitio web sin necesidad de los feeds, pero es cierto que la inmensa mayoría de scrapers se sirven de ellos para llevar a cabo esta práctica, simplemente por comodidad. Sin embargo un blogger debe estar cometiendo algún error grave para llegar a ser afectado por los spamblogs. Si uno de estos sitios es capaz de robarte visitas con tu propio contenido, lo más probable es que tengas un problema que va más allá del robo de contenido. Este problema puede estar conformado por factores como una mala optimización para buscadores, una mala estructura de enlaces internos, falta de popularidad (enlaces recibidos de otros sitios) o incluso un problema de indexación (los buscadores no rastrean o tardan mucho en rastrear las páginas de tu web). Sea como fuere, si este es tu caso necesitas hacer un análisis profundo para encontrar la causa de esta situación.

Modificar el contenido de los feeds

En todo caso el robo de contenido no justifica la (pésima) decisión de publicar extractos en las opciones de sindicación, ya que con ello perderás la oportunidad de generar tráfico y popularidad para tu web como ya comenté en la mencionada entrada. De hecho hasta puedes beneficiarte de los scrapers, y en el proceso mejorar el rendimiento de tus feeds, modificando el contenido devuelto por éstos.

Hace un tiempo John Chow escribió un artículo al respecto. Su solución no podía ser más nefasta; pretendía combatir el scraping incluyendo el siguiente texto al final de las entradas en sus feeds (no públicamente en el blog):

Attention: Unless you are reading this from a RSS reader, you are reading a scraped feed. This site has violated copyright laws by stealing the content of John Chow dot Com. Please let us know where you read this so we can take legal action against the scraper. (Atención: A menos que estés leyendo esto a través de un lector RSS, estás leyendo un feed robado. Este sitio ha violado las leyes de copyright al robar contenido de John Chow punto Com. Por favor, haznos saber dónde leiste esto para que podamos tomar acciones legales contra el scraper.)

Un texto de este estilo tiene el mismo efecto que un anuncio anti-pirateria que se proyecta en el cine antes de una película: resulta tremendamente molesto y estúpido para los usuarios corrientes y por supuesto no tiene el más mínimo efecto sobre los que tienen la intención de delinquir. De hecho, tras un periodo de pruebas inicial, John Chow dejó de mostrar esas líneas a través de los feeds, seguramente por las quejas de los lectores. La solución no se encuentra por ahí y Mariano de ProWeblogs apuntó hacia el buen camino en su blog.

Elementos a incluir en las entradas de los feeds

Sin embargo podemos dar un paso más en esa dirección y beneficiarnos del contenido de los feeds más allá de los anuncios, atribuciones y mensajes de copyright propuestos en ProWeblogs, incluyendo en el RSS (o RDF, o Atom...) de tu blog todos o algunos de los siguientes elementos al final de cada entrada:

1. Enlace a la entrada original

Preferiblemente con el título de la entrada como texto del enlace. Este es un elemento básico para evitar que los scrapers además de robarte el contenido consigan robarte visitas a través de los buscadores. Si tus entradas no son lo suficientemente populares (si no reciben los suficientes enlaces), un spamblog puede llegar a posicionarse con simples duplicados mejor que tu propio sitio web para determinadas expresiones de búsqueda. A diferencia de los agregadores de feeds, los scrapers no enlazan a la url de la entrada (evidentemente no les conviene), pero incluyendo ese enlace en el propio contenido prácticamente te asegurarás que los buscadores consideren tus entradas como las originales, posicionándolas mejor que cualquier copia que de ellas se pueda realizar.

Como valor añadido, el hacer disponible la url de una entrada al final de ésta facilitará la tarea de copiarla para aquellos lectores que decidan enviarla a algún marcador social, agregador de noticias, etc. o que deseen enlazarte desde su propio blog.

2. Enlace a tu blog

Preferiblemente con el título de tu blog como texto del enlace. Este elemento sirve a modo de atribución, para que el lector sepa de donde proviene la entrada independientemente de la web o aplicación a través de la cual la esté leyendo. Esto es útil incluso para los medios que reproducen tus textos legítimamente, ya que en ocasiones los lectores que están suscritos a multitud de feeds acceden al contenido de tal forma que no reparan en los autores de los distintas entradas (a mí por ejemplo me sucede esto con frecuencia en el Google Reader).

Además, incluyendo este enlace, los scrapers que roben tu contenido no estarán haciendo otra cosa más que incrementar la popularidad de tu sitio web.

3. Enlace a los comentarios

O al formulario para enviar un comentario, si es que la url es diferente. En muchas ocasiones los lectores muestrán interés por una entrada en particular, y desearían expresar su agradecimiento, su opinión o incluso su crítica, pero simplemente no están acostumbrados a comentar en los blogs. Esto es algo muy común en aquellos que están suscritos a una gran cantidad de feeds. Incluir un enlace a los comentarios de cada entrada es una buena forma de recordarles esta opción y de inducirles por tanto a participar en tu web.

4. Enlaces a marcadores sociales

Si bien muchos blogs incluyen enlaces para agregar las entradas a este tipo de servicios (Del.icio.us, Menéame, etc.), teniendo en cuenta que la mayor parte de los usuarios de los marcadores sociales y agregadores de noticias leen blogs a través de los feeds, es una buena idea incluir este tipo de enlaces también en el contenido de éstos. De esta forma facilitarás su labor, ya que las barras de navegador, bookmarklets, etc. que suelen usar para este propósito no funcionan en lectores de feeds como Bloglines o Google Reader.

5. Enlaces a entradas relacionadas

Si un lector está interesado en una entrada de tu blog es probable que también lo esté en otras similares. Incluir enlaces a entradas relacionadas es una buena forma de inducir a los usuarios a visitar más contenido de tu sitio web. Además, cualquier copia directa que se realice del contenido del feed contribuirá al posicionamiento de esas entradas.

6. Enlaces a categorías y etiquetas

Siguiendo con el punto anterior, las categorías y etiquetas también sirven para ofrecer a los lectores más posibilidades de acceder a otras páginas de tu sitio web (y fortalecerlas de paso por medio de los enlaces).

Modificar las entradas en los feeds de WordPress

Por supuesto toda esta idea gira alrededor de modificar el contenido de las entradas cuando son mostradas a través de los feeds, no directamente en el blog. Esto no puede hacerse directamente en ninguna de las plataformas de blogs más usadas, pero si tu sitio web funciona sobre WordPress puedes conseguir este resultado añadiendo algo de código al script. Por ejemplo:

<?php
function my_content_rss( $text ){
   IF ( is_feed() & !is_404() ){
      global $post;
      $text .= "<p><strong>Enlace permanente</strong>: <a href=\"" . get_permalink() . "\">" . wp_specialchars($post->post_title,true) . "</a>";
      IF ( $post->comment_status == "open" ) $text .= " (<a href=\"" . get_permalink() . "#comments\"><strong>Escribir un comentario</strong></a>)";
      $text .= ".<br />\n";
      $text .= "<strong>Leer más</strong>: <a href=\"" . get_bloginfo("home") . "/\">" . get_bloginfo("name") . "</a>.</p>\n";
   };
   RETURN $text;
};
add_filter( "the_content", "my_content_rss" );
add_filter( "the_content_rss", "my_content_rss" );
?>

Estas líneas añaden al contenido de tus feeds un enlace a la página de cada entrada, otro a la página de inicio del blog y otro a los comentarios, si están habilitados. Debes añadir ste código al archivo functions.php del tema que estés usando (crea dicho archivo si no existe) o, si lo prefieres, guardarlo como plugin e instalarlo desde el panel de WordPress. Ten en cuenta que puedes usar cualquier función de WordPress en és, por lo que añadir cualquier texto es básicamente como incluirlo directamente en el tema, tan sólo hay que tener cuidado de no escribir el contenido (echo) sino de añadirlo a la variable que se devuelve ($text .= ...).

En el tema 1 Blog Theme se pueden incluir todos los elementos que hemos visto directamente desde el panel de control, eligiendo simplemente los bloques a mostrar, así que no es necesario realizar ninguna modificación.

Y si no quieres escribir el código por ti mismo ni usar este tema siempre puedes instalar uno de los plugins que se han desarrollado para ampliar el contenido de los feeds. Feed Footer WordPress Plugin es del que originalmente hablaba John Chow en su artículo, pero hay otros como el tremendamente simple RSS Signature. De cualquier forma esta opción es bastante limitada y sólo podrás añadir código estático (o como mucho algunas pocas variables dinámicas) al final de las entradas.

A la hora de configurar un blog una de las dudas que inevitablemente termina surgiendo es la de si incluir en los feeds (opciones de sindicación: RSS, RDF, Atom, etc.) bien las entradas completas o por el contrario simplemente un extracto. Mientras que la mayoría opta por la primera alternativa, seguramente porque es la que viene predefefinida en las plataformas más populares, aún podemos encontrar bloggers que limitan el alcance potencial de su blog publicando meros extractos. Estos editores de contenido caen en el error de considerar los feeds como una mera extensión del sitio web, cuando en realidad se trata de un medio diferente con un tipo de usuario también diferente y bien definido.

Los usuarios que acceden a la información de un sitio web a través de sus feeds, si bien representan una minoría, tienen una especial importancia dadas sus características inherentes. No son visitantes casuales que navegan arbitrariamente por las páginas del blog. Ni siquiera son visitantes recurrentes que disponen del tiempo suficiente para acceder a él a través de la página de inicio. Se trata de usuarios avanzados que probablemente están suscritos a decenas o incluso cientos de feeds, que saben exactamente la información que les interesa y dónde conseguirla.

Y como usuarios avanzados de Internet participan en la red social (marcadores como Del.icio.us, agregadores de noticias como Menéame...), y probablemente hasta posean su propio blog. Son los usuarios capaces de hacer tu web popular, de incluirla en su blogroll, de citar tus entradas como fuente, de enviar tus páginas a alguno de los servicios antes mencionados... en definitiva, de generar tráfico para tu web. Es decir, el tipo de usuario al que más querrías cuidar. Y sin embargo aún hay bloggers que maltratan a estos lectores mostrándoles unos inútiles extractos.

Cualquiera que lea feeds a través de agregadores como Google Reader o Bloglines sabe que los extractos multiplican las probabilidades de pasar por alto una entrada. Sólo un título muy atractivo o en asunto que interese especialmente al lector podrá inducirle a acceder a la entrada completa. Pero esto ocurrirá en muy pocas ocasiones; en la mayoría de casos los lectores no prestan ninguna atención a los extractos, y los desestiman casi de forma automática.

Habitualmente los bloggers caen en esta mala práctica para forzar al lector a visitar su sitio web, aderezado con la conveniente publicidad, creyendo que esto aumentará en último término sus ingresos. Sin embargo los usuarios avanzados rara vez hacen clic o muestran el más mínimo interes por los anuncios; tienen la suficiente experiencia como para ignorar la publicidad y centrarse en el contenido (ad blindness). Y en todo caso el aumento residual de ingresos que se pueda conseguir con este tipo de lectores dificilmente compensará la oportunidad perdida de generar un tráfico mucho mayor (un tráfico que sí conllevaría un aumento significativo de los ingresos por publicidad).

Por lo tanto esta medida es no sólo ineficiente sino contraproducente, ya que lo único que origina es la pérdida de visitantes potenciales y el gasto de un ancho de banda innecesario para servir las entradas completas (a los pocos, muy pocos, lectores suscritos que terminen accediendo a ellas).

Una caché es un duplicado estático y temporal de una página web que se sirve al cliente en los accesos sucesivos a esa página. Habilitar el cacheado en tu sitio web (ya sea desde el navegador o desde el servidor) te permitirá reducir el tiempo de respuesta, aumentar la velocidad de carga y además liberar de estrés a tu servidor, lo que a su vez mejorará el rendimiento general de todas las páginas alojadas en él.

• Habilitar la caché del navegador
• Usar un sistema de caché interno

Habilitar la caché del navegador

Si tu sitio web está construido en base a archivos estáticos (.html o .htm), éstos son automáticamente cacheados por los navegadores. Esto es fácil de ver cuando navegando por las distintas páginas de tu sitio pulses los botones de «Atrás» o «Adelante». La carga debería ser automática, significando que el propio navegador ha ofrecido una versión de la página que había guardado previamente y que por tanto no ha vuelto a realizar la petición al servidor.

Sin embargo si las páginas de tu sitio son generadas dinámicamente con cada petición (mediante lenguajes de servidor como PHP, ASP, etc.), lo más habitual es que no sean cacheables por el navegador. Esto es debido a la diferencia en los encabezados HTTP que se envían desde el servidor en uno y otro caso. En PHP podemos hacer que las páginas de un sitio web sean cacheables con un par de simples líneas:

<?php
@header( "Cache-control: max-age=".(2*60*60).", must-revalidate" );
@header( "Expires: ".gmdate("D, d M Y H:i:s", time()+2*60*60)." GMT" );
?>

Debes incluir esas líneas en tu código PHP antes de que se haya devuelto cualquier contenido, de lo contrario los encabezados no serán envíados y no lograremos el efecto deseado. El código anterior indica al navegador que debe guardar la página en caché durante 2 horas (2 por 60 por 60 segundos). Si se accede a la página después de esas 2 horas, se realizará de nuevo la petición al servidor. Por supuesto puedes cambiar el tiempo a cualquiera que creas más conveniente.

Usar un sistema de caché interno

Si bien la caché del navegador resulta de utilidad para los usuarios, un sistema interno que devuelva automáticamente páginas cacheadas desde el mismo servidor tendrá una incidencia mucho mayor en el rendimiento del sitio web y en la carga del propio servidor.

Los sistemas de caché son gestores que guardan las páginas generadas dinámicamente en archivos estáticos dentro del propio servidor. Cuando se realiza una petición por una determinada url, el gestor comprueba si existe una versión cacheada (y más o menos reciente) de esa url, devolviéndola directamente en su caso. De esta forma se evita el tener que ejecutar el código, reduciendo el tiempo de respuesta y aligerando la carga del servidor de forma considerable. Estos sistemas de cacheado son absolutamente imprescindibles para que una aplicación dinámica soporte un gran número de accesos simultáneos.

Si tu sitio web está basado en PHP tienes varias soluciones listas para usar como el PHP-Cache-Kit, que te permitirán integrar fácilmente un sistema de caché en tu sitio web.

Si además usas WordPress como gestor de contenido, tengo para ti una mala y una buena noticia. La mala es que estás usando un software con un rendimiento muy mejorable y que consume una gran cantidad de recursos (lo que popularmente se conoce como un «mamut»). La buena noticia es que hay sistemas de caché especialmente adaptados a WordPress y que están disponibles en forma de plugin para que su uso esté al alcance de cualquiera.

La solución más utilizada es el WP-Cache, desarrollado por Ricardo Galli. Quienes lo usan no tienen queja, pero su instalación es algo compleja y hay muchos que nunca han conseguido hacerlo funcionar. En los blogs de la red 1Blogr (incluyendo este mismo) usamos 1 Blog Cacher un plugin que he creado específicamente para este proyecto. Es un plugin sencillo, pero precisamente en su sencillez radica su mayor virtud.

Esta entrada forma parte de la serie «Aumentar la velocidad de una página web en 7 pasos».

Aligerar el peso en KB de las imágenes contenidas en tu página web no sólo va a incrementar la velocidad de carga de éstas, sino que te hará ahorrar ancho de banda. Esto último es especialmente importante ya que en la mayoría de sitios web las imágenes representan la mayor parte del ancho de banda consumido.

• Elegir el formato y compresión de imagen adecuados
• Elegir el tamaño de imagen adecuado

Elegir el formato y compresión de imagen adecuados

Si en muchas ocasiones las imágenes de un sitio web tienen un tamaño desproporcionado o incluso muestran un aspecto pobre (pixelación, falta de color...), es debido al desconocimiento de los diferentes formatos de imagen y la conveniencia de usar uno en concreto dependiendo del caso.

• El formato JPEG («Joint Photographic Experts Group»), con extensiones .jpeg o .jpg, posee un algoritmo de compresión que lo hace ideal para la representación de fotografías o similares (por ejemplo imágenes 3D realistas). Al exportar una imagen a este formato es posible establecer el grado de compresión. A mayor compresión, menor peso de la imagen, aunque también mayor perdida de calidad (pixelación). Encontrar el equilibrio justo entre peso y calidad es la clave para el correcto uso de este formato. La pérdida por compresión hace que este formato sea muy poco adecuado para la representación de texto, líneas o formas simples.
• Los formatos PNG («Portable Network Graphics») y GIF («Graphics Interchange Format») basan sin embargo su fortaleza en la identificación de patrones y formas, por lo que son ideales para iconos, logotipos, texto gráfico, etc. Estos formatos no permiten establecer un grado de compresión, sin embargo permiten variar el peso del archivo mediante la reducción de colores. Al usarse normalmente en imágenes con poca gama de color (fondos, sombras, textos...) y en elementos muy repetidos a lo largo de todo el sitio web (logotipo, menús, partes del diseño...) esta característica es especialmente útil y no debe ser desestimada. La limitación en el número de colores (256) del formato GIF y un rendimiento por lo general menor ha hecho que pierda terreno respecto al PNG, más flexible.

Elegir el tamaño de imagen adecuado

El factor más decisivo en el peso de una imagen es por supuesto su tamaño. Elegir las dimensiones más adecuadas para cada imagen que quieras mostrar en tu web es por tanto de vital importancia para evitar un exceso de peso innecesario.

Un error muy común al respecto es redimensionar una imagen no con un editor gráfico sino modificando los atributos width y height (ancho y alto) de la etiqueta HTML <img> que muestra dicha imagen. Con esta práctica sólo conseguirás dos cosas. La primera, que la imagen tenga un peso mayor al necesario (la imagen no reduce su tamaño real, sino sólo el aparente). La segunda, que se vea mal en tu página, ya que un navegador web no es Photoshop y no está capacitado para mostrar convenientemente una imagen redimensionada.

Si por alguna razón deseas mostrar una imagen de gran tamaño (y por lo tanto muy pesada), no la incluyas directamente en la página. Con esto evitarás además que sus dimensiones rompan el diseño de tu web. En su lugar, incluye un enlace a esa imagen, para que sólo la descarguen aquellos usuarios que realmente estén interesados en ella. Como solución óptima puedes enlazar a la imagen de gran tamaño a través de una versión en miniatura (thumbnail) de la misma, que servirá a modo de «vista preliminar».

El sistema de blogs WordPress tiene una característica interesante que es a menudo infrautilizada. Cuando una imagen es subida al servidor a través del gestor de archivos, WordPress crea automáticamente una imagen en miniatura de dicha imagen. Lo que sucede es que el tamaño por defecto que usa para esos thumbnails es demasiado pequeño para resultar de utilidad. Sin embargo es posible cambiar ese tamaño por uno más adecuado con un sencillo código. Por ejemplo, las siguientes líneas establecen un ancho fijo de 250 pixels para los thumbnails generados:

<?php
function my_thumbnail_size( $size, $attachment, $file ) {
   $width = 250;
   if ( !$file || !function_exists( "getimagesize" ) ) return $width;
   $image_size = @getimagesize( $file );
   if ( !is_array( $image_size ) ) return $width;
   if ( !$image_size[0] ) return $width;
   if ( $image_size[0] >= $image_size[1] ) return $width;
   else return round( ($image_size[1] / $image_size[0]) * $width );
};
add_filter("wp_thumbnail_max_side_length", "my_thumbnail_size", 10, 3);
?>

Añade el código anterior al archivo functions.php del tema que estés usando (crea dicho archivo si no existe) o alternativamente guárdalo como plugin e instálalo desde el panel de WordPress. No hace falta decir que puedes cambiar el 250 por cualquier medida que prefieras. Ahora cuando subas archivos gráficos a tu blog y los envíes al editor, sólo tienes que elegir la opción Mostrar: Miniatura para que todas tus entradas incluyan imágenes de un tamaño adecuado (y además con una buena compresión en el caso de los jpg).

Si estás usando el tema de este blog (1 Blog Theme), éste ya incluye la mencionada característica, y además el ancho es configurable desde la página de configuración, por lo que no es necesario que realices esta modificación.

Establecer un ancho fijo para las imágenes de tu sitio web tiene el valor añadido de proyectar una imagen más profesional y cuidada.

Esta entrada forma parte de la serie «Aumentar la velocidad de una página web en 7 pasos».