ブログにおいて、ページの表示速度は非常に重要です。
理由として、以下のものが挙げられます。
ページの表示速度が遅い時のデメリット
・ユーザーの直帰率が高まる
・Googleからの評価が下がる
・収益化が難しくなる
このため、せっかく来てくれた読者の方を逃す結果となるため、デメリットしかありません。
この問題をある程度解決してくれるのが、Autoptimizeというプラグインです。
レンタルサーバーやブログの作りも関係している場合がありますが、Autoptimizeを導入・設定しておくことでページの表示速度が改善される場合があります。
設定もそこまで難しくないため、設定イメージの画像を交えながら解説していきます。
Autoptimizeってどんなプラグイン？
WordPressのサイトパフォーマンスを改善して、表示速度を高速化できるプラグインです。
具体的に、以下の最適化手法が適用されることでページ速度が速くなります。
コードの最適化
ブログ自体は、CSS、JavaScript、HTMLといったプログラミング言語から作られています。
記事を作る時は気にしませんが、記事を公開してソースコードを見てみると、プログラミング言語がずらーっと並んでいます。
その中には、不要な空白や改行、記事には表示されないコメント行が存在しています。
Autoptimizeを使うと、それらの不要な情報を削除して記事のサイズを小さくしてくれます。
また、CSS、JavaScriptといった記事に動きを与える要素…例えば文字の装飾とかですね。
これらが複数できる場合があるので、それらを1つにまとめてくれます。
そうすると、記事が軽量化されて表示速度が上がるという仕組みです。
超簡単に言うと、教科書から空白と改行を全部消したら教科書は軽くなるのと同じイメージです。
それがWeb上でも行われている、という感じですね。
キャッシュの保存
キャッシュという言葉自体聞いたことがあるかもしれません。
キャッシュを簡単に説明すると、記憶のようなものです。
例えば、家族・友達・職場の人など、身近な人の顔は思い浮かびやすいと思います。
滅多に会わなくなった同級生や知り合いの顔って中々思い出せなくないですか？
ここで言うキャッシュとは、中々会わない同級生や知り合いの顔をキャッシュに保存することですぐに思い出せるようにする仕組みです。
Webページにおいても同様で、Autoptimizeを使うと最適化されたファイルがキャッシュに保存されます。
自分の記事が再度表示されるときに、キャッシュの情報を使用することで表示速度を上げることができます。
Autoptimizeの設定方法
では、実際にAutoptimizeを設定していきましょう。
少し専門用語が出てくるため、解説しながら進めていくので安心して読み進めていってください！
①プラグインを検索する
「プラグイン」の検索窓に「Autoptimize」を打ち込みます。
②プラグインをインストールする
「今すぐインストール」をクリック
インストールが完了したら、「有効化」をクリックします。
「プラグインを有効化しました」と出ればOKです。
③JS、CSS & HTMLの設定
「設定」⇒「Autoptimize」をクリックすると、設定画面が出てきます。
最初に、「JS、CSS & HTML」の部分から設定してきましょう。
※JSはJavaScriptの略称
JavaScriptオプション
チェックを入れるのは赤枠の2つです。
「JavaScript コードの最適化」は、記事内に存在するJavaScriptを最適化してページ速度を向上させます。
主に不要な空白、改行、コメント、を削除してくれます。
「連結しないで遅延」は、現在の通信規格である「HTTP/2」が一般的であり、ファイルを連結しない方が読み込み速度が速くなります。
要は、1つの大きいファイルを送信するよりも、小分けにしたファイルを送っていった方が通信速度が速くなるためですね。
こちらにチェックを入れると、「インラインJSも遅延」が表示されますが、こちらのチェックは不要。
インラインJSとは、JavaScriptのコードをHTMKファイルに記述したものです。
プログラミングで記事を書いてるなら必要になるケースがありますが、WordPressを使用している場合であればあまり気にしなくてもいいかと思います。
CSSオプション
チェックを入れるのは赤枠の1つだけです。
「CSS コードの最適化」は、JavaScriptの設定と同様、記事のCSSを最適化してページ速度を向上させます。
「CSSファイルの連結」は、ファイル分割で読み込んだ方が速いため、チェック不要です。
HTMLオプション
チェックを入れるのは赤枠の1つだけです。
「HTMLコメントを維持」とありますが、逆にファイル容量増えてしまいます…。
ここまでの作業が完了したら、「変更の保存とキャッシュの削除」をクリックして、設定した内容を保存しましょう。
④画像の設定
次は「画像」のタブをクリックします。
チェックを入れるのは、「画像の遅延読み込み (Lazy-load) を利用」の1つだけ。
画像の遅延読み込みとは、ページを開いた時に画像を全て読み込んでから表示するのではなく、ページのスクロールに合わせて画像を表示する手法です。
なので、画像を全て読み込んでから表示するよりもページの表示速度は速くなります。
一番上の「画像最適化と CDN」は魅力的そうな文章が書かれていますが、ShortPixelという有料アプリを使用する必要があるため、チェック不要です。
画像最適化は、手動や別のプラグインでも代用可能のため、わざわざここで設定する必要はありません。
設定が完了したら、「変更を保存」をクリックしましょう。
⑤追加の設定
ここが最後の設定です。
画像の通り設定してみましょう。
Googleフォントの設定は、「結合とヘッダーでのリンク (フォント読み込みは速いがレンダリングブロックが発生), display:swap を含む。」にチェックを入れます。
前提として、Googleフォントを使っている場合ですね。
ここにチェックを入れておくと、Googleフォントを使っている記事の読み込みが速くなります。
ただし、Googleフォントを使用していない場合は「Googleフォントの削除」にチェックを入れておいて問題ありません。
絵文字の削除はチェック推奨です。
記事で絵文字を使用している場合は別ですが、使うケースはかなり少ないかと思います。
不要なものは削除しておいた方がページ速度は速くなります。
最後に「変更の保存」をクリックしておきましょう。
ページ速度の確認方法
ページ速度の確認方法は大きく分けて2つあります。
ページ速度の確認方法
・Googleサーチコンソール
・ページスピードインサイト
基本的な流れは、Googleサーチコンソールの「ページエクスペリエンス」を確認して問題のあるURLをページスピードインサイトで確認という感じです。
筆者自身、複数のブログを運営していますがメインサイトのページエクスペリエンスはこんな感じです。
記事数が6000程あり、悲惨な結果になっています。
良好なURLと判断されなかった理由を見ると、問題点が分かります。
クリックすると問題のあるURLが分かるので、ページスピードインサイトで検索をかけると問題点が見えてきます。
記事の構成によっては、Autoptimizeを使用しても対応しきれない部分がありますが、ある程度は軽減されます。
正直、Autoptimizeを使用する前はもっと酷い状態だったので大分マシにはなってます。
ページ速度が遅いと、ユーザーの直帰率が上がってしまう危険性があるため、収益化においても非常に重要です。
また、不要なプラグインがある場合もページ速度が落ちる可能性があるので注意しましょう。
