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

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

何もない状態

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);

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