[読み込み速度対策]WordPressの自作テーマ
※このページにはプロモーションが含まれています。
この投稿の全体は以下の構成で別のページに分かれています。
- WordPressで使う自作のテーマを作った記録[上巻] (別ページ)
- WordPressで使う自作のテーマを作った記録[下巻] (別ページ)
- 広告を表示させるには
- Google Search ConsoleとGoogle Analytics
- セキュリティ対策
せっかく時間を使って書いた文章を読んでもらいたい。読みやすい文章を書くよう努力したり、面白い工夫などを考えたりしてみるものの、自分の能力以上の事を文章で表現するのは難しいです。
そこで、ページの読み込み速度をできるだけ速くして、検索の順位を上げることで少しでも多くの人の目に止まったら良いなとの思いで、Google社のPageSpeed Insightとの勝負をします。
- スターターテーマから不要部分をカット
- プラグインをできるだけ使わない
- ウィジェットの不使用
- Cloudflareの活用
- CSSのインライン化
- 画像はWebP
- headへの出力を制御
- JavaScriptの遅延読み込み
スターターテーマから不要部分をカット
Underscoresを使う場合ならメニューを階層化した場合にプルダウン表示ができるように、JavaScriptが書かれています。使う場合はそのままでよいのですが、使わない場合は削除しましょう。JavaScriptはサイトの読み込み速度を遅くする大きな要因となります。
その他にも不要な記述があればすべて削除です。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りプラグインをできるだけ使わない
プラグインのすべてが遅くさせるわけではないのですが、たくさん使うとページの読み込み速度は確実に遅くなります。プラグインを減らしたい為に自作のテーマを作ったようなもので、直接にPHPで書くことで速度低下を抑えます。
現在使用しているプラグインはクラウドへバックアップするものとCloudflareを効率良く使うものの2つです。初めはプラグインを使って必要な機能を実装し、徐々に直接の記述に置き換えていくのも良いでしょう。
ウィジェットの不使用
サイドバーなどに簡単に機能を追加できるウィジェット機能ですが、設定用のCSSを読み込むことで少し遅くなります。頻繁にサイドバーの構成を変えないのなら使わないようにします。
Cloudflareの活用
無料でも使えるのに超高速サーバーが利用できるCloudflare。
毎月5$を支払えばWordPress用の設定を自動で行ってくれますが、「Super Page Cache for Cloudflare」という無料のプラグインを使えば、通常は無料ではできないページキャッシュをClaudflareに持たせることができます。
レンタルサーバーが作るページキャッシュをCloudflareが配信できるようになるので、Cloudflareのキャッシュ率が85％にまで跳ね上がります。
他にも検索エンジンのbotに連絡をとってくれたり、Google Analyticsを高速で使えたりと便利な機能がたくさんあるCloudflareですが、気をつける点が1つあります。
無料プランだとサポートが全くありません。ログイン情報がわからなくなっても無料会員には何もしてくれないどころか、問い合わせの返事もありません。
2段階認証を設定しないと使えない機能もあるので、2段階認証のコードが分からなくなったりすると困ったことになります。ログイン不可になった時に使えるコードは前もって発行されるので、管理をしっかりすれば、無料プランでも十分に役立ちます。
CSSのインライン化
サイトのファーストビュー（最初に描写される部分）だけ<head></head>に直接書きます。残りは圧縮して通常の形で読み込みます。
ページの読み込みを速くしたいのは記事投稿のページ（singleページ）だけなので、singleページのCSSファイルの容量を小さくする為に、singleページとそれ以外のCSSファイルを分けます。
固定ページやトップページだけ使われるCSSコードをsingleページ用のCSSファイルから省くことができます。
画像はWebP
現在の最も軽くて便利な画像形式はWebPです。Jpeg ・Png・Gifを使い分けていた頃がありましたが、今はWebPだけで済むようになっています。
WebPより軽量で、圧縮に対する画質の劣化が少ないAvifという画像形式があるのですが、Microsoft Edgeが表示できないようにしているので、WordPressの対応はまだされていません。
表示できないようにしているというのはAvifはGoogle社が開発した形式で、Edgeの元になっているChromiumでは当然のように対応しているのですが、Edgeはわざわざ非対応に変更しています。
WordPressはほぼすべてのブラウザが対応しないとAvifが使えるようにはならないらしいので、しばらく待たないといけないようです。
headへの出力を制御
WordPressの標準機能で<head></head>にいろいろなコードが出力されます。DNSプリフェッチやWindowsのアプリケーションで直接編集できる機能などなど。
必要のない出力が多いのでそれを止めます。
まれにこの機能を使ったプラグインがあり、出力を止めることでプラグインが動かなくなるので注意してください。
JavaScriptの遅延読み込み
ページの読み込み速度に悪影響を与えるJavaScriptですが、使わなければならないこともあります。
その時は読み込みを遅延させてましょう。読み込み速度の測定が終わってからJavaScriptを読み込ませることで測定からJavaScriptを外してしまいます。
遅延の方法には人間がアクションをしたら読み込む（スクロールなど）方法と時間で遅らせる方法が考えられます。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。