WEBEER – Web制作の覚えがき –

【WordPress】PageSpeed Insights で100点を目指す

WordPress
WordPress 更新日:2020.10.25 公開日:2020.09.12

どこで重くなるのかいまだによくわからないのでサイトを作りながらスピードを測定してみました。

何もない状態

wp_head()とwp_footerだけ読み込んで何もしていない状態。もちろん100点。

CSSの遅延読み込み

いくつかのプラグインを有効にしたら、「レンダリングを妨げるリソースの除外」ってやつが出ているので対応します。

/** 変更前 **/
<link rel="stylesheet" href="my.css" media="all">

/** 変更後 **/
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

ページが読み込み終わったらcssの対象をallに変更するみたいなことをやっています。

function replace_link_stylesheet_tag( $tag ) {

  $tag = str_replace( "media='all'", "media='print' onload='this.media=" . '"' . "all" . '"' . "'", $tag );
  $tag = str_replace( '/>', '>', $tag );

  return $tag;
}
add_filter( 'style_loader_tag', 'replace_link_stylesheet_tag', 12 );

アクションフックを使ってごっそり書き換えました。

…これでできるはずだったんですが、うまく行かない。mediaがprintになっているせいで、一生onloadが発動しないんじゃないだろうか。

他の人がやっていた別の方法で対処。

<link rel="preload" as='style' href="style.css" media="all" onload="this.rel='stylesheet'">

新たな問題が発生したようです。

フォントの読み込み

アイコンフォントが注意されているので、指示通りpreloadで読み込もうと思います。

function lds_preload_fonts() {
  echo '<link rel="preload" as="font" type="font/eot" href="' . get_template_directory_uri() . '/assets/fonts/icomoon.eot" crossorigin="">';
  echo '<link rel="preload" as="font" type="font/svg" href="' . get_template_directory_uri() . '/assets/fonts/icomoon.svg" crossorigin="">';
  echo '<link rel="preload" as="font" type="font/ttf" href="' . get_template_directory_uri() . '/assets/fonts/icomoon.ttf" crossorigin="">';
  echo '<link rel="preload" as="font" type="font/woff" href="' . get_template_directory_uri() . '/assets/fonts/icomoon.woff" crossorigin="">';
}
add_action( 'wp_head', 'lds_preload_fonts' );

点数に変化はないものの、warningは消えたのでよしとします。

この時点で減点の理由はCumulative Layout Shift、つまり表示した時にガタガタ動いてること。スタイルを当てたら改善するかもしれないのでスタイルを書いてみます。

画像のサイズを縦横指定する

画面のサイズ内に収まるように、画像の縦横を指定しました。

まずまずですね。もう一息。

リクエストを減らす

なかなか100点にならないので、リクエストを減らしてみます。不要なものは一通り減らしてるはずなんですがまだ何か残ってそうですね。

よくみたら目次のプラグインのCSSが読み込まれていたのでチェックを外しておきます。

フロントエンドから管理画面用のスタイルを削除します。

function lds_dequeue_style(){
  //ヘッダーのスクリプトを取り除く
  if( !is_admin() ) {
    wp_deregister_style( 'dashicons' );
  }
}
add_action( 'wp_enqueue_scripts', 'lds_dequeue_style', 11);

必須じゃないフォントは選択式にしてリクエストを減らそうと思います…

本文のフォント、ロゴのフォント、ソースコードのフォントとhighlight.jsのスタイルは必要に応じてカスタマイザーで読み込むことにしたので、スタイルのリクエストを2個まで減らすことができました。

まだ100になりません。

スタイルをつけてみる

スタイルをつけたら95点になってしまいました。

そこでファーストビューの部分のCSS(Critical CSS)をheadの中に書いてみます。ファイルのパスに注意しましょう。私はこれでハマりました。

98点になりました。いい感じです。

ここでスマホのスタイルを途中までしか書いていなかったことに気付いたので残りのスタイルを完成させました。

99点になりました。

クリティカル リクエスト チェーンをなんとかする

つまり読み込みを妨害するファイルがあるということみたいです。

指摘されているのはフォントとjsファイル。jsファイルって下の方に書いておけばいいのかと思っていたけれどそうでもないのですね。

jsファイルの遅延読み込み

jsファイルの遅延読み込みを実現するにはasyncdeferがあります。asyncは順番が指定できないので依存関係にあるファイルがある場合は注意が必要です。一方deferは前のファイルが読み込み終わってから次のファイルを読み込みます。

現時点では読み込み順に関係のあることをしないのでasyncを使います。

フォントファイルの遅延読み込み

フォントは遅延読み込みしてるはずなのに…と思ったんですが、これは読み込む順番の問題でした。スタイルシート内でフォントが呼ばれるのだから、スタイルシートを読み込む前にフォントをプリロードしておく必要があるのですね。

点数は下がりましたがWarningはなくなりました。

アイコンフォントをやめてSVGスプライトにする

ここまでやったけれど点数が変わらないので、アイコンフォントをやめてSVGスプライトを使うことにしました。

icomoonを使ってサクッと作成しました。

やったー!100点になりました!

WP高速化のためにやったことまとめ

レンダリングブロック対策

  • CSSの遅延読み込み
  • Javascriptの遅延読み込み
  • フォントのプリロード

リクエスト数を減らす

  • アイコンフォントをSVGスプライトに置き換え
  • 必須ではないフォントやJSはカスタマイザーで選択式にする
  • 管理画面でしか使わないフォントやファイルは表画面では読み込まない
  • 必須ではないプラグインを無効にする
  • 必須ではないプラグインのCSSを読み込まない

CLS対策

  • 画像タグに縦横を指定する
  • クリティカルCSSをインライン化
  • 読み込みに時間がかかるところはあらかじめ高さを確保

※画像の遅延読み込みはWPの基本機能を利用。

それぞれの詳しいやり方などはまた別途。