Prerenderización: cómo hacer que tu blog cargue más rápido en Chrome

PageSpeed Insights  Google Developers

La velocidad de carga de un sitio web es un factor importante en el posicionamiento en Google. Existen herramientas que nos permiten analizarla y detectar posibles errores, plugins que ralentizan la carga, imágenes muy pesadas, etc. Google proporciona Page Speed Insights, una herramienta online con la que podemos analizar la carga de nuestro blog y lo que ocurre en el momento en que una página es cargada en el navegador, ofreciéndonos sugerencias y tips que nos pueden ayudar a mejorar el rendimiento.

Desde nuestro panel de Google Webmasters también podemos acceder a la opción Site Performance en la pestaña Labs, y ver la evolución en el tiempo de carga de nuestro sitio y el tiempo empleado por las urls que más tiempo tardan en cargar. Y desde Google Analytics otro tanto de lo mismo, con información detallada de tiempo de carga para cada url de nuestro sitio.

Para el usuario normal es posible que muchas de las sugerencias y recomendaciones que hace Page Speed Insights le suenen a chino, o que no tenga ni idea de como implementar esas soluciones. Por suerte existen magníficos tutoriales y posts que nos explican como hacerlo. Les recomiendo que empiecen por Optimizando el tiempo de carga de tu blog, publicado por Blogpocket.

Pero Google también pone a nuestra disposición una opción que podemos implementar fácilmente, con el fin de que nuestro blog cargue instantáneamente en su navegador Chrome. Aunque todavía es una función experimental, no está de más implementarla. Se trata de la prerenderización.

Implementando la prerenderización en el blog

La prerenderización consiste en que, cuando un usuario accede a tu blog, el navegador carga en segundo plano una url que podemos especificar mediante un tag html, de modo que cuando el usuario hace clic en un enlace para visitar esa url, la página aparece instantáneamente puesto que ya ha sido precargada por Chrome.

Para implementar la prerenderización en nuestro blog debemos editar el archivo header.php del theme que estemos usando. Después de la etiqueta head colocaremos el siguiente código:

<link rel="prerender" href="http://example.org/index.html">

Evidentemente tenemos que sustituir el valor de href por la url que deseemos que Chrome tenga en cuenta para la prerenderización. Para ello podemos utilizar las template tags que nos proporciona WordPress.

Por ejemplo, si queremos que Chrome prerenderize la home del blog el código sería:

<link rel="prerender" href="<?php bloginfo('url'); ?>">

Para indicar que queremos prerenderizar el siguiente post, la cosa se complica un poco, ya que debemos insertar también una línea de código php para obtener la url del post:

<?php $next = get_permalink(get_adjacent_post(false,'',false)); ?>
<link rel="prerender" href="<?php echo $next; ?>">

Sitio Oficial | Web Developer’s Guide to Prerendering in Chrome | Page Speed Insights