Heb jij een blog waarbij bezoekers veelvuldig doorklikken naar vorige en volgende blogposts? Die berichten kun je sneller laden door ze via prefetch en prerender alvast in de achtergrond op te vragen. Dit versnelt het tonen van vorige en volgende berichten aanzienlijk. In dit artikel leggen we je uit hoe je dit doet.

Prefetch en prerender, wat is dat?

Prefetch en prerender zijn HTML5 link attributen, zogenoemde resource hints. Je kunt hiermee de browser van een bezoeker de opdracht geven om bepaalde bronnen alvast op te vragen als de pagina die op dat moment wordt bekeken al geladen is. In de idle time van de browser, als die niets doet dus. Dit betekent dat wanneer een bezoeker jouw blogpost leest zijn browser op de achtergrond een andere pagina laadt én de weergave ervan berekent. Hiermee wordt de post sneller weergegeven zodra de betreffende link daarvoor wordt aangeklikt. Oftewel: prefetch en prerender, van tevoren opvragen en renderen.

Heb je goed nagedacht over de structuur van jouw WordPress-website en gebruik je analytische gegevens van bijvoorbeeld Google Analytics om te achterhalen hoe bezoekers door jouw site klikken? Gebruik dan deze  techniek om volgende berichten sneller te laten weergeven. Dat vinden jouw bezoekers fijn.

Prefetch en prerender WordPress posts

Heb je de HTML-bron van een WordPress-pagina wel eens bekeken, dan zie je vaak het volgende staan:

<link rel='dns-prefetch' href='//jetpack.wordpress.com'>
<link rel='dns-prefetch' href='//s0.wp.com'>
<link rel='dns-prefetch' href='//s1.wp.com'>
<link rel='dns-prefetch' href='//s2.wp.com'>
<link rel='dns-prefetch' href='//public-api.wordpress.com'>
<link rel='dns-prefetch' href='//0.gravatar.com'>
<link rel='dns-prefetch' href='//1.gravatar.com'>
<link rel='dns-prefetch' href='//2.gravatar.com'>

Hiermee versnelt WordPress het opvragen van de hier genoemde externe bronnen. Ditzelfde kun je doen voor jouw blogposts met behulp van WordPress-functies get_next_post() en get_previous_post().

Wil je op elke blogpost de vorige en volgende blogpost op de achtergrond laden, neem dan hiervoor in het header.php-bestand van jouw WordPress-thema de volgende code op:

<?php
  $next_post = get_next_post();
  if (!empty( $next_post )) {
?>
  <link rel="prefetch" href="<?php echo get_permalink( $next_post->ID ); ?>">
  <link rel="prerender" href="<?php echo get_permalink( $next_post->ID ); ?>">
<?php
  }
  $prev_post = get_previous_post();
  if (!empty( $prev_post )) {
?>
  <link rel="prefetch" href="<?php echo get_permalink( $prev_post->ID ); ?>">
  <link rel="prerender" href="<?php echo get_permalink( $prev_post->ID ); ?>">
<?php
  }
?>

Plaats deze code vóór de </head> HTML-tag, de uiteindelijke code is mede afhankelijk van jouw header.php-bestand!

Wat vond je van dit antwoord?

Bedankt voor je feedback!

Er is een fout opgetreden. Probeer het later opnieuw.