WordPress 4.6のresource hintsは外部サービスを増やす前に読み込む先を絞る

表示を速くしたいからといって、外部ドメインを見つけるたびにresource hintsを追加してはいけません。WordPress 4.6のresource hintsは、ブラウザーへ「この接続や取得を先に考えてよい」と伝える補助です。先回りする対象が多すぎれば、読者が使わない通信まで早く始めることになります。まず、どのページで何を読み込むのかを絞ります。

外部のフォント、地図、動画、アクセス解析、広告タグは、便利でも自分のサーバーだけでは完結しません。それぞれ別の接続先を持ちます。表示速度の問題を「WordPressが遅い」とまとめる前に、ページがどこへ接続しているかを見ます。

WordPress 4.6では、外部ホストから読み込むスクリプトとスタイルをwp_enqueue_script()、wp_enqueue_style()で登録していれば、wp_resource_hints()がその情報を使えます。さらにwp_resource_hintsフィルターで、dns-prefetch、preconnect、prefetch、prerenderの対象を追加できます。使えることと、追加すべきことは別です。

resource hintは読み込む内容を減らさない

resource hintを付けても、地図、外部フォント、計測タグそのものが軽くなるわけではありません。削除したり、ページごとに読み込みを分けたりする処理ではなく、必要な外部接続をブラウザーが早めに準備できるようにする仕組みです。

ここを取り違えると、表示が重いページへ設定を足し続けることになります。たとえば全ページのheadへ地図用のスクリプトを置いている場合、地図のある問い合わせページだけを速くするための問題を、全ページの接続を早めることで解こうとしてしまいます。先に確認すべきなのはhintの種類ではなく、地図をどのページでいつ読み込むかです。

外部フォントも同じです。見出しだけに使うフォントのために、すべてのページで複数の外部接続が始まるなら、文字の見た目と初期表示の負担を比べる必要があります。使うか使わないか、どの画面で使うかを決めずに接続だけを最適化しても、サイトの役割は整理されません。

外部接続をページごとに書き出す

まず、代表的な三ページを選びます。トップページ、問い合わせページ、記事ページのように、役割が異なるページがよいでしょう。各ページを開き、テーマとプラグインが読み込む外部のスクリプト、スタイル、iframeを一覧にします。ドメイン名だけを集めず、読み込む理由まで書きます。

「必要なページ」と「初期表示で必要か」は、似ていますが同じではありません。問い合わせページに地図が必要でも、ページを開いた瞬間から取得しなければならないとは限りません。読者が所在地を確認するために地図まで進んだときに読み込めば足りる場合があります。一方で、ページの主な内容が外部サービスに依存しているなら、後回しにすると役に立たなくなります。

WordPressが把握している接続先を先に見る

4.6では、外部ホストのスクリプトとスタイルを登録している場合に、WordPressがresource hintsを出せます。headへURLを直接書いたコードや、登録されていない出力からは、WordPressは接続先を判断できません。filterを追加する前に、ページのソースで既に何が出ているかを確認します。

ここで重複が見つかることがあります。テーマが同じ外部ドメインを登録し、プラグインも手書きのタグで呼び出していれば、hintを増やす前に読み込み方を直す方が先です。逆に、ページに必要な外部スクリプトが正しく登録されているなら、WordPressの既定の出力だけで足りることもあります。

作業の順番は、次のようにします。

1. 外部接続を、ページと用途に対応させて一覧にする。
2. 各接続について、初期表示に必要か、操作後でよいかを決める。
3. テーマとプラグインで、外部のスクリプトやスタイルをどう登録しているか確認する。
4. 実際のページのソースを見て、既に出ているresource hintsと重複を確かめる。
5. それでも必要な接続だけをwp_resource_hintsで追加し、変更前後を同じページ、同じ端末で比べる。

追加した接続はスマートフォンで確かめる

WordPressの開発者向け資料も、resource hintsを増やしすぎると、とくにモバイルの性能へ悪影響が出るおそれがあると注意しています。パソコンで一度開けたことだけでは判断できません。実際に使う端末で、ページを開いたときに本文、画像、フォーム、地図がどう表示されるかを確かめます。

外部接続の追加後に速くなったように感じても、それだけでは原因は分かりません。キャッシュ、回線、表示した順番でも印象は変わります。比較するページと条件を固定し、外部サービスを増やした結果なのか、不要な読み込みを減らした結果なのかを分けて記録します。

実装の変更と外部サービスを使う判断は別にする

制作側は、スクリプトの登録方法やresource hintsを修正できます。しかし、外部フォントを使い続けるか、地図を全ページへ置くか、計測タグをどこまで出すかは、サイトを運用する側が決めることです。表示を少し速くするためのコードと、外部サービスを使う目的を同じ人任せにしない方が、変更の理由を残せます。

最初の一手は、ページを一つ選び、外部接続、使う理由、初期表示で必要か、止めた場合の影響を四列に書くことです。理由を書けない接続は、hintを足す前に、そのサービス自体が必要かを見直します。