WordPressでWEBサイトを作ったときのページ表示速度対策

ページの表示速度はユーザーの離脱を防ぐためにも重要です。
今回は、最近やっているWordpressでWEBサイトを制作した際の表示速度対策を紹介します。

1.imgタグにwidthとheightを記述する

理由①：WP側で自動でloading=”lazy”を追記してくれる
理由②：レイアウトシフトの発生を防げる

詳しくはこちらの記事で書いたのでご参考ください
【2022年2月版】Wordpressの自動画像遅延読み込み機能について

2.classic-theme.min.cssの読み込みを停止

WordPressバージョン6.1からデフォルトで読み込まれるようになったcssですが、特に不要なので読み込みを停止させています。

方法：function.phpに下記を記述します。

function dequeue_plugins_style() {
    wp_dequeue_style('wp-block-library');
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);

3.wp-block-library-cssの読み込みを停止

WordPress5.0から追加されたブロックエディター「Gutenberg」用のcssです。
現在はまだ基本的にクラシックエディターを使用していて不要なので読み込みを停止させています。

方法：function.phpに下記を記述します

function customize_main_query ( $query ) {
  if ( ! is_admin() || ! $query->is_main_query() ) {
    if ( $query->is_archive() ) {
      $query->set( 'has_password', false );
    }
  }
}
add_action( 'pre_get_posts', 'customize_main_query' );

4.Wordpress以外でもやっている基本の対策

・画像をwebp、svgにできるものはする
WindowsがIEのサポートを終了したことにより、ほとんどの環境でwebpを表示できるようになったので、基本的に画像はファイルサイズが軽いwebpにします。

・Google Fontsの読み込みコードはrel=”preconnect”の入っているものを使う
うっかり昔つくったHTMLの使いまわしをすると、Google Fontsのコードにpreconnectが含まれていないことがあるので気をつけること。

・Adobe Fontsにfont-display: swap;を設定
Swapにすると、Webフォントがダウンロードされるまで、CSSで設定したフォールバックフォントを表示します。
参考：https://helpx.adobe.com/jp/fonts/using/font-display-settings.html

以上、最近やっているページ表示速度対策のまとめでした。