Top

ワードプレスに prerender を設定して事前レンダリングで高速化

HTML5 より導入された prerender(プリレンダー)、事前レンダリングをワードプレスに導入して、ページ遷移の高速化を実現する方法を書きたいと思います。

prerender

事前レンダリング

WEB ページを事前に読み込んでおくことにより、そのページのリンクをクリックした際、移動を高速化するための技術です。

「事前に読み込んでおく」ことで、ページ移動をする際、ほぼ一瞬でページの移動、表示をしてくれるので体感でもかなりの違いを感じる技術となってます。ページ表示を早くする技術というよりは、ページ移動を早くする技術となります。

事前レンダリングをするタイミングは、現在いるページの読み込みが完全に終了した後に裏でコソッとローディング・レンダリングとなります。ですので、そのページの読み込み自体に問題を与えることはありません。

これだけ聞いていると良い事しかないように感じますが、いくつか注意するポイントがあります。

スポンサーリンク

対応ブラウザと諸注意

今現在、対応しているブラウザは

InternetExplorer11
GoogleChrome(PC、アンドロイド版)

と2種類のみです。Firefox、Opera、Safari は対応しておりません。iPhone版 Chrome も対応していないようです。

また、事前レンダリングページですが指定できるのは1ページのみです。2ページ、3ページと複数ページを指定することは出来ません。ですので、どのページをプリレンダリングするべきか考えて指定する必要があります。

当ブログも現在 prerender を導入しており、IE11 もしくは chrome でトップページのリンクを踏むと高速で移動します。

rel=”prerender”

今回は、以下のようにプリレンダリングするページを指定したいと思います。

「トップページ」や「アーカイブページ」「検索ページ」等の記事一覧が出るページ
⇒ そのページの一番上に表示されている記事の URL

「記事ページ」
⇒ トップページの URL

トップページを訪れた際、一番クリックされる可能性の高いページは一番上に表示されているページではないかと考えました。記事ページの場合難しいのですが、トップページを指定する形とします。

別のページを指定したい場合や分岐を増やしたい場合は各々変更してください。header.php の head 内に次の PHP コードを加えます。

header.php

<head>

・・・

<!-- head内に以下を記述 -->

<?php if(is_single): ?>
<link rel="prerender" href="<?php echo home_url(); ?>">
<?php else: ?>
<link rel="prerender" href="<?php echo get_permalink(); ?>">
<?php endif; ?>

<!-- 記述ここまで -->

・・・

</head>

基本この記述で上記のページを事前レンダリングするようになるはずです。

参考ページ

参考:事前レンダリングでウェブページの表示時間を高速化(海外SEO情報ブログ)
参考:プリレンダリングとプリフェッチのサポート(Microsoft Developer Network)