El ‘Prefetching‘ y la ‘Precarga‘ son parte de las nuevas características de de Google Chrome v13+. Lo que hace el navegador es precargar webs adicionales mientras el usuario visita una página. Y resulta que en WordPress, muchas veces es posible saber donde hará clic el usuario a continuación.
Por ejemplo, cuando un visitante está leyendo la página de archivo (de categorías o tags), es bastante probable que el usuario haga clic en el enlace paginación para ir a la siguiente página de archivo. En estos casos, el ‘prefetching’ y la ‘precaria’ pueden empezar a cargar la siguiente página incluso antes de que el usuario haga algún clic, para que cuando haga el clic la página que quiere ver ya esté lista para leer, en cuestión de milisegundos. El concepto de prefetching está incluido en las especificaciones de HTML5, así que otros navegadores incluirán pronto esta nueva característica.
Si quieres saber más al respecto tienes mucha información en code.google.com y www.chromium.org.
En lo que a mi respecta espero que sea una funcionalidad por defecto en la mayoría de los temas, pues mejora la experiencia de usuario.
Pero vamos al lío …
Si quieres incluir la característica de prefetch/precarga en tu web puedes hacerlo añadiendo una etiqueta de enlace en la cabecera:
<link rel="prerender" href="http://example.org/nextpage.html">
Y si usas WordPress, podrías automatizar la etiqueta de enlace para las páginas de archivo en el fichero header.php, simplemente habría que añadir este código
<?php if (is_archive()) { ?>
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>¡Pero no es lo recomendable!
Un modo mucho mejor y más seguro de añadir la etiqueta de enlace a tu WordPress, para que pueda hacer prefetch de la siguiente página de archivo pasaría por un par de validaciones adicionales:
- un código que compruebe si la página contiene paginación (vamos, que hay más de una página)
- un código que compruebe si el usuario está – o mejor no está – en la última página de la paginación
Si no incorporas estas validaciones podrías crear enlaces a páginas que no existan, lo que resultaría en errores 404 innecesarios.
¿La solución?, pues añadir el siguiente código al fichero header.php de tu tema:
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>Este código usa las funciones de WordPress is_archive(), $paged y max_num_pages.
Si, además, quieres hacer algo parecido para el navegador Mozilla Firefox, habría que añadir una línea adicional al fichero header.php, y quedaría así:
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>" />
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>Otra posible opción (combinada) sería este otro código:
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?>
<link rel="prerender prefetch next" href="<?php echo get_next_posts_page_link(); ?>" />
<?php } ?>Si sumamos esto a la nueva funcionalidad de precarga en segundo plano de WordPress que tendremos en WordPress 3.3, nuestra web irá como un tiro.
Fuente: Markem Systeme
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Gracias , muy interesante ya mismo lo voy a implementar y os cuento.
Con las etiquetas rel='index' rel='start' rel='prev' rel='next' que wordpress imprime automaticamente en el header no estaría haciendo lo mismo que el prerender y el prefetch?Siempre pense que era ese el funcionamiento, por eso las deje en el header.