サイトの表示速度を改善するのに最も効果的なのは、画像の最適化です。
ただし、画像はできるだけ美しく見せたいもの。すでに容量の削減やWebPへの変換など、できる限りの工夫は済ませた。では、次に取り組むべき改善策は何でしょうか？
不要なCSSやJavaScriptを読み込まないようにすることです。
今回はその対策を手軽に行えるプラグイン「Asset CleanUp」をご紹介します。
体感的な速度が劇的に変わるわけではありませんが、PageSpeed Insightsのスコアを数ポイント〜十数ポイント改善できる可能性があります。
目次
Asset CleanUpの機能概要
Asset CleanUpは、不要なファイルの読み込みを、ボタン操作だけでかんたんに停止できます。
主要機能は、次の通り。
- 不要なCSS・JavaScriptの読み込み制限（ページ単位）
- CSS、JavaScriptの圧縮
- head内の不要なタグ・メタ情報の削除
他にも色々とオプションが用意されていますが、シンプルにCSS・JavaScriptを読み込みを制御する機能だけを使うのがおすすめです。お使いのテーマによっては、デザイン崩れが発生したり、スコアが下がる可能性もあるためです。
プラグインのインストール
管理画面から「Asset CleanUp」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
設定方法
プラグインを有効化したら、以下のメッセージが表示されます。
これは、以下のような意味合いです。
「許可する（Allow）」、「拒否する（No）」のどちらを選んでもプラグインの動作には影響しないです。
では早速、不要なCSS・JavaScriptの読み込みを制限してみましょう。
各投稿や固定ページ単位で制限できますので、操作フローは次の通りです。
- 記事やページの編集画面を開く
- 不要なCSS・JavaScriptを探す
- 読み込みを無効化する
1. 記事やページの編集画面を開く
今回は、WordPressのトップページに設定している「空の固定ページ」を開いてみましょう。
TCDテーマをお使いの場合、テーマ有効化時に、空の固定ページを作成しているはずです。
WordPressの初期設定の1つとして「ホームページの表示」があります。 管理画面の「設定」 > 「表示設定」の箇所です。 トップページと投稿一覧ページを固定するための設定で、ワードプレステーマのインストール直後に必要な作業です。テーマによっては設定が不要なものもあるので、テーマの仕...
トップページで不要なファイルの読み込みを制限することで、ファーストビューのスコアをアップできます。
編集画面を開くと、エディタの下部に「Asset CleanUp」の設定箇所が追加されています。
2. 不要なCSS・JavaScriptを探す
下にスクロールすると、そのページで読み込まれるすべてのCSSとJSが一覧で表示されます。
ファイル名やプラグイン名などから、不要なものを見つけましょう。設定を変更するのは、プラグイン関連とサードパーティ関連のみでOKです。
3. 読み込みを無効化する
対象のファイルを見つけたら、「Unload on this page」にチェックを入れます。
上記は、プラグイン「Akismet」のCSS・JavaScriptの読み込みを停止している例です。
トップページにフォームなどが無い限り、読み込む必要がないので停止します。最後にサイトが崩れていないか確認しておくと安心です。
Akismetの読み込み停止でスコア改善
筆者がデモサイトで行なったテストでは、トップページでAkismetの読み込みを停止するのみで、PageSpeed Insightsのスコアが5ポイント上昇しました。
導入前のスコア
導入後のスコア
今回は停止したのはAkismetのみでしたが、サイトによっては、他にも不要なファイルが読み込まれている可能性があります。
- Contact Form 7
- エディタ拡張系プラグイン
- Jetpack
などは、フォームや投稿画面・特定の機能でしか使わないのに、すべてのページでCSSやJavaScriptが読み込まれているケースも少なくありません。これらをトップページや特定のページで読み込まないようにするだけでも、PageSpeed Insightsのスコアがさらに改善される可能性があります。
ぜひご自身のサイトもチェックしてみてください。
まとめ
画像の最適化が済んでいても、まだスコア改善の余地がある。そんなときには「Asset CleanUp」が役立つかもしれません。
不要なCSSやJavaScriptの読み込みを、ページ単位でかんたんに制御できるため、特定ページだけで使うプラグインの記述などを無駄に読み込まずに済みます。
まずはトップページだけでも試して、PageSpeed Insightsの変化を確認してみるのもおすすめです。
表示速度改善に役立つおすすめ記事
WordPressサイトの表示速度が遅いと、すぐにページを離脱したり、別のページを参照したくなりますよね。 いくらコンテンツが良くても、見られる前に閉じられます。 逆にページ表示速度が速いと、ユーザーの最大の目的である情報収集がスムーズになります。いいコンテンツであれば離脱率も下がり、間...
Webサイトの表示速度を上げるには、画像ファイルを圧縮するのが効果的です。 WordPressならプラグインを使うことで、手軽に画像を圧縮できます。しかし、プラグインや画像の種類によって圧縮率が変わるため、最適化するにはちょっとしたコツの習得が必要です。 本記事では、WordPressの...
「Lighthouse」というGoogleChromeの拡張機能を使うと、Webサイトのパフォーマンスをチェックすることができます。これは結構便利なので、サイト運営者はみんな入れておいた方がいいエクステンションですね。 Lighthouseのインストール Chromeウェ...
コメント