本ブログを始めるにあたって、WordPressのテーマには無料のCocoonテーマを使わせて頂いております。
前回は、Cocoonインストール後に最初に設定すべき最も基本的な「Cocoon設定」内の項目をまとめました。
今回は、Cocoonテーマで可能な高速化設定をなぜ導入する必要があるのか、一つずつ意味を確認しながら設定を入れていこうと思います。
～ 目次 ～
はじめに
Cocoonでは、サイトの評価を高める為のSEO的な対策として、表示速度を高速化するための設定を幾つか任意で設定可能です。
この記事では一つ一つの意味を確認していこうと思いますが、手っ取り早く設定を済ませたい場合は、基本的に以下のすべての設定のチェックを有効にすればよいと思います。
・ブラウザキャッシュの有効化
・HTML縮小化
・CSS縮小化
・JavaScriptを縮小化する
・Lazy Loadを有効にする
・Googleフォントの非同期読み込みを有効にする
・アイコンフォントの非同期読み込みを有効にする
Cocoonの高速化設定画面へは、WordPressのダッシュボードの左メニューから、「Cocoon設定」→「高速化」とクリックすれば移動できます。
ブラウザキャッシュ
高速化設定に移動すると、一番上に「ブラウザキャッシュ」という設定があります。
こちらにチェックを入れておきましょう。
これを有効化すると、一度読みこんだ画像などのファイルを一時的にPCに保存することで、二回目以降のページ読み込み時にキャッシュファイルを使用して表示速度を速くすることが可能です。
縮小化設定
HTMLとCSSファイルの縮小化
ブラウザキャッシュの下には「縮小化」という設定項目があります。
「HTML縮小化」と「CSS縮小化」はチェックを付けてしまいましょう。
これを有効にすると、HTMLファイルやCSSファイルの余計な改行やスペースなどを削ることが出来ます。
人間が記述する際には、読みやすくするために適切な改行などを入れますが、Google ChromeやFirefox、IEといったWEBサイト閲覧時に使うブラウザにとっては不要なものです。
改行などを削ることによって、ファイルサイズが小さくなるため、転送速度が速くなります。
JavaScriptファイルの縮小化
CSSファイルの縮小化設定の下には、「JavaScriptを縮小化する」という設定があります。
こちらも、HTMLやCSSと同じく、JavaScriptファイル（jQuery含む）の余計な改行などを削る設定です。
基本的にはこちらもチェックしてよいかと思いますが、JavaScriptファイルの記載の仕方によっては、縮小化すると動かなくなったり、エラーログが吐かれてしまうケースがあります。
以前、記事を書きましたが、わたしも「Contact Form7」という問い合わせフォームを簡単に作成できるプラグインを入れたところ、Chromeのデベロッパーツール上に
「Uncaught SyntaxError: Unexpected identifier」
というエラーメッセージが出力されてしまいました。
新しいプラグインを入れた際などは、念のためデベロッパーツールのエラー確認と、動作の検証はしておきましょう。
必要に応じて、このチェックを外すことも選択肢かもしれません。
Lazy Loadの有効化
遅延読み込み
次に「Lazy Load」の設定となります。
「Lazy Loadとは」、「遅延ロードとは」、という部分については、↓こちらのサイトに詳しく説明されていたので、興味があれば参考にしてください。
簡単に言ってしまえば、WEBページを表示する際、すべての画像を一括で読み込むのではなく、必要な画像のみを読み込むことで、表示速度を高速化する技術だと理解すればよいと思います。
WordPressでは、バージョン5.5から、このLazyLoad機能が標準搭載されたようですが、一部カバーしていない画像領域が存在します。
Cocoonテーマでは、このチェックを入れることで、WordPressのカバー外領域の画像についても、Lazy Load対応してくれるようです。
Googleフォント、WEBフォントの非同期読み込み
GoogleフォントやWEBフォントといった、ネットワーク上のフォントデータを使ってWEBサイトのテキストやアイコンを表示をする場合、フォントデータの取得に時間が掛かります。
このデータを非同期で取得して、WEBページの表示速度を高速化する設定が「Googleフォントの非同期読み込み」と「WEBフォントの非同期読み込み」になります。
こちらもチェックを付けて有効化しておきましょう。
まとめ（設定はひとつずつ有効化する）
以上がCocoonテーマの高速化設定の説明になります。
一つ、念のための注意点があります。
WordPressを使い始めたばかりで、まだ多くのプラグインやカスタマイズを入れていない状態であれば、一気にすべての設定を有効化しても問題ないかと思います。
ただ、プラグインやカスタマイズの程度によっては、不具合が起きるケースはありえます。
これはCocoonが悪いというのではなく、プラグインとの相性の問題などだったりします。
わたしの場合も、JavaScriptファイルの縮小化を有効化したところ、JavaScriptのエラーメッセージが出力されてしまいました。
最初は、何故このエラーが出たのか分からず原因追及に少し時間が掛かりました。
なので、この設定を入れる場合は、念のためチェックは一つずつ入れるようにして、都度都度ブログの動作確認をしていくようにすれば、原因がどの設定にあるか追跡しやすいと思います。
コメント