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.

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 niet WordPress- of thema-bestanden hoeft te wijzigen.


MCSA Windows Server 2016

Bereid je met dit boek voor op je MCSA Windows Server 2016 examens 70-740, 70-741 en 70-743, nu via bol.com! Dit complete studieboek is het enige boek dat je nodig hebt voor jouw MCSA 2016 certificering. Met deze aankoop steun je ITFAQ.nl, waarvoor dank!

Je vindt misschien ook interessant: 70-744 Securing Windows Server 2016 | 70-740 Installation, Storage and Compute with Windows Server 2016 | 70-741 Networking with Windows Server 2016 with Practice Test | 70-743 Upgrading Your Skills to MCSA | Kaspersky Internet Security 2019 (3 gebruikers, 1 jaar) - via bol.com

Psst: steun ITFAQ.nl en doneer een kop koffie via paypal.me/jreilink.