Je kunt WordPress posts sneller laden en weergeven met HTML link attributen prefetch en prerender. Dit werkt op de achtergrond, en daardoor alleen als jouw bezoeker ook doorklikt naar het volgende bericht.

Prefetch en prerender

Prefetch en prerender zijn HTML link attributen waarmee je content van een (externe) lokatie op de achtergrond kunt inladen (prefetch) en in de browser kunt laten berekenen (prerender). Dit geeft het voordeel dat de desbetreffende pagina er vrijwel direct staat als jouw bezoeker die link aanklikt omdat de pagina al geladen is op de achtergrond. Dit kan heel handig zijn als jij van te voren weet welke links jouw bezoekers zullen aanklikken.

De specificaties van deze HTML link attributen vind je op https://www.w3.org:

Prefetch en prerender gebruiken met WordPress functies

Je kunt de WordPress functies get_next_post() en get_previous_post() gebruiken om in een post te bepalen wat het vorige en volgende bericht is. Dat kun je dynamisch opnemen in de HTML head. Neem bijvoorbeeld op in header.php of index.php van jouw WordPress thema, voor de </head> tag:

<?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
  }
?>

Afhankelijk van jouw thema PHP-code kan het zijn dat je deze bovenstaande PHP-code iets moet aanpassen. Let wel dat dit dus alleen werkt als jouw bezoekers daadwerkelijk doorklikken naar de vorige of volgende blogpost.

Ook interessant voor jou:  Hoe kan ik mijn moederbord type & model achterhalen in Windows?

Prefetch en prerender met een functie hook add_action

In plaats van WordPress core of thema bestanden te wijzigen kun je in functions.php of jouw plugin een wp_head hook aanroepen. Plaats de volgende code in het functions.php– of plugin-bestand:

function saotn_post_prerender_prefetch() {
	/* follow me on Twitter: @HertogJanR */
	$next_post = get_next_post();
	$prev_post = get_previous_post();
	if ( !empty( $next_post ) ) {
		echo '<link rel="prefetch" href="'.get_permalink( $next_post->ID ).'" />
			<link rel="prerender" href="'.get_permalink( $next_post->ID ).'" />';
	}
	if ( !empty( $prev_post ) ) {
			echo '<link rel="prefetch" href="'.get_permalink( $prev_post->ID ).'" />
			<link rel="prerender" href="'.get_permalink( $prev_post->ID ).'" />';
	}
}
add_action('wp_head', 'saotn_post_prerender_prefetch', 10);

Het voordeel hiervan is dat je geen WordPress- of thema-bestanden hoeft te wijzigen.


“Want to say thanks?”

Heeft dit artikel je geholpen met het oplossen van een probleem? Vond je deze post interessant? Waarom doneer je dan geen kopje koffie? 🙂

Een kleine donatie van slechts €5 helpt mij enorm in de ontwikkeling en onderzoek van posts, en hosting van dit blog.

Koop een kop koffie

Bedankt voor je support.