この度、CHACO-WEBブログの表示スピード最適化を行いました。

なぜスピード改善をしたのか？
ホームページの表示スピードを高速化することによる大きなメリットが２つあります。

1つ目は、離脱率の改善です。

ユーザーはホームページを快適に（サクサクと）閲覧したいと思っています。ぱっと素早く表示されるページ、サクサク動くホームページはストレスを感じさせません。
＊表示までに3秒以上かかると、53%のユーザーが離脱してしまうという統計結果があります。

2つ目は、SEO対策への影響です。

Googleは非常に遅いページ読み込み速度のページに対して検索順位を下げています。
サイトのスピード改善に取り組んでおけば、急な検索結果低下などの心配をしなくて済みます。

当ブログは以下の画像の通り、Google PageSpeed InsightにてPC版ではスピードに問題はありませんでしたが、モバイル版では70点前後のスピードしか出ていないので、モバイル版のスピードを90点台にすることを目標にしました。

この記事では、スピード改善で取り組んだ内容についてご紹介していきます。

高速改善方法1：プログラムの見直し

ページの表示速度の低下にはいくつかの要因がありますが、まずはWordPressやPHPのバージョンの見直しをします。

プログラムは基本的にはバージョンが新しい方が処理が改善されスピードも早くなっているので、できるだけ最新版を利用した方が、スピード面では良い結果が得られやすいからです。

以前の環境
【PHP】5.6.40　【WordPress】 4.9.3

これを下記のようにアップデートをしました。
【PHP】7.3.19　【WordPress】 5.4.2

速度とは関係はありませんが、新しいバージョンにしたことで、ブログ記事の編集画面が変わってしまったため、操作面・使いやすさを考慮し「Classic Editor」というプラグインもインストールしました。

WordPressやPHPのバージョンアップはボタン1つで出来ると考えている方もいますが、場合によっては、利用しているプラグインなどにも悪影響が出ることがありますので、バックアップをきちんととり、慎重に進めることが重要です。

高速改善方法2：画像ファイルの見直し

画像ファイルというのもページスピードに大きく影響します。

例えば、
・画像ファイル自体が最適化されているか？
・読み込んだデバイスに応じた画像を提供できているか？
・ブラウザキャッシュが適切に利用されているか？
などです。

今回は「EWWW Image Optimizer」というプラグインを活用しました。

このプラグインは、アップロードした画像および生成されたサムネイル画像の最適化と、新しい画像形式であるWebP形式に変換できるプラグインです。
＊このプラグインは以前のWordPressバージョンでは動作しないものでしたが、今回は全てバージョンアップしたので使用が可能になりました。

ブログでアップロードした画像を一括で自動変換してくれるプラグインですので、サイト軽量化にはうってつけと言えるでしょう。

高速改善方法3：キャッシュの見直し

前項でも触れました「ブラウザキャッシュ」について次に見直します。

ブラウザキャッシュについて、Googleはこのように定義しています。

ネットワークを介したリソースの取得は速度が遅く、コストもかかります。
ダウンロードにはクライアントとサーバーの間で複数回のラウンド トリップが必要となることがあり、処理が遅延しページ コンテンツの表示が妨げられます。
また、訪問者のデータ費用も増大します。クライアントが以前に取得したレスポンスを再利用してよいかどうかやその有効期限を判断できるよう、すべてのサーバーレスポンスにキャッシュポリシーを指定することをおすすめします。

引用元：Google PageSpeed Insights「ブラウザのキャッシュを活用する」

この「ブラウザキャッシュ」を上手に利用することで、サイトのスピードを早めることが出来ます。

以前使用していたキャッシュ用プラグイン「W3 Total Cache」を、有料の「WP Fastest Cache Pro」に入れ替えました。

このプラグインは設定項目が少なく簡易で、日本語化もされているので素人でも扱いやすい上に、痒いところに手が届く内容になっているのでおすすめです。

特にLazy Load（画像の読み込み遅延）機能を自動でつけてくれることが可能で、速度アップのために至れり尽くせりになっています。

＊画像の最適化はこのプラグインでも出来ますが、画像のファイル数によっては追加費用がかかるので、前述の「EWWW Image Optimizer」を利用しています。画像ファイル数の多いブログなどは要注意です。

高速改善方法4：ブログテーマの見直し

最後にブログテーマ（外観）のソースコードの見直しをしました。

HTML/CSSは常に進化しています。1年前に書いたコードが今では「ひと昔前」と扱われることもあるのです。

改善できる箇所を探すと幾つかあったので以下に紹介します。

テーマに直接書かれている画像をWebPに変換

具体的にはトップページのヘッダー画像になりますが、当初のブログテーマに直接書かれているものがあり、これはWordPressで管理していないため、プラグインの対応版以外になっていました。そこで、手動でWebPに変換しアップしました。

背景画像をimgタグに置き換え

テーマではレスポンシブ対応をするという目的のため、インデックスなどで使用されている各記事のサムネイル画像がすべてフルサイズの背景画像になっていました。

背景画像に設定することでレイアウト的には自由になるというメリットがあり、これは一昔前によく使われていたコーディング手法でした。

しかし、これでは閲覧するデバイスごとへの適切な大きさの画像を表示することができず、モバイルにも必要以上に大きな画像を表示してしまっていたのが速度低下の大きな要因になっていました。
そこで、背景画像になっている部分を全てimgタグとして書き出すように変更しました。現在では以前よりもCSSも使える内容が増えたので、レスポンシブ対応になるように独自にCSSを変更しました。
これでimgタグのsrcset属性を使用してデバイスごとへ最適な画像を表示することが可能になり、スピードも改善されました。

高速改善結果

以上の改善をすることで「最大コンテンツの描画」時間が5.0秒から2.4秒と半分以下になったことで、90点代を出すことが可能になりました。

まとめ

いかがでしたでしょうか？

2021年からGoogle検索結果の要因に、「Core Web Vitals（コアウェブバイタル）」というものが加わると先日アナウンスされました。

Core Web Vitalsには、
・読み込み時間（LCP）→ページの表示速度
・インタラクティブ性（FID）→ユーザーの応答性
・コンテンツの視覚的安定性（CLS）→視覚の安定性
という3つの指標があります。

サイトスピード改善化もこの一環でありますが、このCore Web Vitalsが2021年から正式に採用されれば、今後SEO対策としてサイトスピード改善化は重要な対策になってくることでしょう。

Googleはユーザーに良い環境を整えているホームページの順位を優先するため、満足度が高ければ検索順位アップにもつながります。

コロナ禍でオンラインの需要が伸びている今、より多くのユーザーを迎えるために、ホームページのスピードを見直してみませんか？

「愛される」ホームページは未来を創る。 初めてホームページを作るなら「わからないことだらけ」が当たり前です。
リニューアルなら「前より良くしたい」と考えて当然です。
ぜひお気軽にご相談ください。
CHACO-WEBは「愛される」ホームページ作りを心掛けています。
人が集まるホームページで、あなたの事業に貢献するお手伝いをします。