サイトの高速化を行う必要性・メリットとは？
Webサイトが表示されるまでの「サイトスピード」の早さはGoogleの検索順位だけでなく、ユーザーが便利に使えるかどうかにも影響するものです。
サイト表示が遅い場合、ユーザーはすぐにサイトを去ってしまう可能性が高くなります。
サイトを去ることはページの離脱率や直帰率の上昇につながり、サイトの評価を落としてしまうこともありえます。
そのため、サイトの「高速化」はSEOとユーザーの利便性において重要になります。
特にサイトを高速化することによるメリットは多くあります。
通販サイトなど画像を多用するものであれば、商品画像が早く表示されることで購入数の増加が見込めるなど、利便性が向上することによる効果も期待できます。
まず、具体的にサイトの高速化に関する必要性から、どのような点でメリットがあるのかを解説していきます。
SEOで高評価を得るため
2021年5月、Googleはサイトの検索順位を決める要素のひとつとして、「Core Web Vitals（コアウェブバイタル）」を導入することを発表しました。
そのうち、サイトの速度に関係する指標に「LCP（読み込み速度）」というものがあり、これはサイトの読み込みを始めてから、ビューボード（画面の表示領域）に主要なコンテンツが表示されるまでにかかった時間を評価するものです。
2.5秒以下なら「良好」として問題ありませんが、4秒以下なら「改善が必要」となり、4秒よりもさらに時間がかかるようでは「低速」として最低評価となってしまいます。
このようにGoogleでも速度の指標を公表していることから、SEOで高評価を得るためにはサイトの高速化が必要だと考えられます。
ユーザーの使いやすさ向上のため
サイトの表示速度（サイトスピード）が遅いことによる影響として、Googleでも「モバイルサイトの読み込みに3秒以上経過する場合、大多数のユーザーが離脱する」というデータを公表しています。
参考:https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/
ユーザーが広告の申込ボタンや商品購入ボタンをクリックして、取引が成立する割合の「コンバージョン率」という指標があります。
こちらに関しても、サイトスピードを改善することによって、コンバージョン率の上昇にもつながったという事例も存在します。
参考：
https://www.thinkwithgoogle.com/intl/ja-jp/marketing-strategies/app-and-mobile/baitoru/
もしくは
https://netshop.impress.co.jp/node/8151
これらから分かるように、サイトスピードが遅い場合、ユーザーは表示されるまで待たずにサイトから出て行ってしまい、もしサイトに滞在してくれたとしてもページが切り替わる際に時間がかかると、申込や購入に至らない可能性が高いということになります。
そして、ユーザーの利便性が悪いサイトは、SEOでも評価が低くなってしまうため、結果的に順位が下がることにつながります。
特にアフィリエイトブログや通販サイトを運営しているのであれば、検索順位だけではなく収益の増減にも関わってくるので、ただサイトスピードを上げるだけではなく、ユーザーが使いやすい・見やすいように改善していく必要があります。
サイトスピードの確認方法
まず、現状のサイト表示速度を確認する必要がありますが、Googleが提供する「PageSpeedInsight」を用いて計測してみましょう。
これはサイトにアクセスして、「検索窓」に計測したいURLを入力し、「分析」のボタンを押すだけで、簡単にそのサイトの速度に関するパフォーマンスを評価してくれるサービスです。
評価は前述の「Core Web Vitals」を基準に、数値と色で表示されます。
緑色なら「良好」、黄色は「改善が必要」、そして赤色は「問題あり」という評価付けになっています。
また、ページをスクロールしていくと、画像やテキストというような直接的に見えるものだけでなく、JavaScriptやCSSなどサイト内部の構造まで、より細分化された内容を確認することもできます。
無暗に高速化に関する改善方法を試すのではなく、PagespeedInsightの結果を踏まえて、評価が最も悪い項目から改善に取り組んでいくのが効率的な進め方になるでしょう。
なお、現在ではスマホ版サイトを主な評価対象とする「モバイルファーストインデックス」というGoogleアルゴリズムの実装が進んでいます。
そのため、PagespeedInsightsにおけるスコアについては、モバイル版での評価内容を中心にチェックするようにしましょう。
モバイルファーストインデックスについては下記のページで詳しく解説していますので、こちらも参考にしてみてください。
参考：知っておきたいSEO「モバイルファーストインデックス」とは？
サイトスピードを上げる方法
では、実際にサイトスピードを上げる方法としては、どのようなものがあるのでしょうか。
Pagespeed Insightsでの評価でも次の項目が改善対象として主に出ているため、サイトスピードに関する評価に大きく関わっていると考えられます。
- 画像フォーマットを変える
- 画像のサイズを適切なものにする
- サイトの読み込みに必要なものだけにする
- サーバーをより高速なものにする
- ブラウザキャッシュを活用する
利便性を考えれば、このほかにも改善すべきものが出てくるかもしれません。
しかし、検索時の評価向上と最低限でも使いやすいサイトにするために、この5点から取り組むことをおすすめします。
では、それぞれの方法について、詳しく解説していきます。
画像をWebP形式に変換する
画像ファイルとして一般には、可逆圧縮形式の「png」や非可逆圧縮形式の「jpg（またはjpeg）」といった形式が主に利用されていますが、Googleが開発した次世代の画像フォーマットである「WebP（ウェッピー）」を利用すれば、サイトが表示される際にも少ないデータ通信量で表示することができるようになります。
WebPでは可逆圧縮と非可逆圧縮の両方が選択可能で、サイトの通信量軽減や表示速度の短縮を目的として開発されています。
同じ圧縮形式でそれぞれ比べても、PNGの28％・jpgの25~34％ものデータを小さくできているとされているので、もし画像を多用しているブログや商品画像の多い通販サイトなどを運営しているのであれば、WebP形式に切り替えた方が良いでしょう。
WebPの導入方法としては、WordPressであれば、日本語表示に対応している「EWWW image Optimizer」を利用するのが簡単でしょう。
すでにアップロードした画像を一括でWebP形式に最適化できたり、アップロード時に自動で変換できたりするので、使いやすいプラグインになっています。
EWWW image Optimizerの使い方については、こちらの記事で解説していますので、まだ使用したことのない人は併せて読んでみてください。
参考：EWWW Image Optimizerとは？WebP適用可能な画像軽量化におすすめのプラグイン紹介と使い方
画像ファイルはデータサイズが大きく、通信量もかかるものですので、サイト表示速度の改善に最もつながるかもしれません。
ただし、WebPは「Google Chrome」や「Firefox」など、対応するブラウザが限られています。
iPhoneなどに初期搭載されているブラウザアプリ「Safari」は、最新のバージョンでは対応していますが、古いバージョンのSafariでは非対応となっています。
ユーザーが非対応のブラウザでサイトにアクセスした場合には表示速度が変わっていないという点には注意しておきましょう。
画像を遅延読み込みにする
WebP形式は一部のブラウザが非対応となっていることをお伝えしましたが、画像の読み込みを遅延させることで非対応ブラウザのユーザーに向けても、表示速度を改善させることが可能です。
遅延読み込みとは、サイトにアクセスして最初に表示される範囲以外のデータはあえて読み込みせず、ユーザーがスクロールして画面に表示する必要ができたタイミングで、その範囲内にあるデータを読み込ませる仕組みです。
遅延読み込みを導入していないサイトの場合、アクセスした段階でページ内のコンテンツすべてのデータを読み込むことになるので、通信に時間がかかり、また通信量も多くなってしまいます。
しかし、遅延読み込みを導入したサイトであれば、最初のアクセスで表示される分のデータのみがやり取りされるので、少ないデータ量で高速表示が可能になるほか、サーバーやユーザーが使用している端末の通信量削減にもつながります。
遅延読み込みの実装についてですが、WordPressであれば「Autoptimize」のプラグインがおすすめです。
こちらはサイト最適化の機能を持ったプラグインのひとつで、下記画像にある設定の中から「画像の遅延読み込み (Lazy-load) を利用」の項目にチェックを入れるだけで完了です。
そのほかにもCSSやJavascriptなどの内部コードの最適化も設定することができるので、サイトの高速化に役立つ便利なプラグインとなっています。
また、画像のhtmlタグで次のように記述することでも導入できます。
<img src="画像のURL" loading=“lazy">かつては画像の遅延読み込みはGoogleのクローラーが認識できないことがあるとされていましたが、現在ではhtmlタグでloading属性を追加する「ネイティブLazy-load」も導入する際の推奨方法となっています。
ただし、一部のブラウザや古いバージョンでは、そもそも遅延読み込みに対応していない場合もありますので、その点には留意しておきましょう。
適切な画像サイズにする
表示される画像はサイトの設計やデバイス（パソコン・タブレット・スマホなど）の画面サイズによって最大値が決まるため、それ以上に大きなサイズである必要はありません。
そして、サイズが大きな画像はデータも大きくなり、読み込みにも時間がかかるため、表示速度の低下につながります。
どれくらいのサイズが適切なものかは使用しているWordPressのテーマやサイトの構造によって変わりますが、もし横幅4000pxなどの巨大な画像をそのままアップロードして使用している場合などは、ある程度の大きさまでサイズの変更（リサイズ）を行った方がいいでしょう。
WebP変換の見出しで紹介した「EWWW image Optimizer」では、各種サムネイルに合ったサイズなどの画像を自動で生成する機能もあるので、形式の変換と併せて活用可能です。
ただ、大きなサイズの画像をアップロードするとサーバーのディスク容量を圧迫することにもなるので、一旦はオンラインで画像サイズを変更できる「Fotojet」や「Canva」などのサービスを用いてリサイズしてから、アップロードするといった手順を取った方が良いかもしれません。
不要なファイルを読み込まないようにする
ユーザーがアクセスした際、ブラウザは次のような流れでサイトを読み込んで表示しています。
- HTMLのコードを上から順に読み込む
- 途中でCSSやJavascriptなどのファイルを実行する指定のコードがあれば、そのファイル実行を優先する
- 必要なファイルをダウンロードして実行する
- 実行後、またHTMLの読み込みに戻る
そのため、サイトを表示するために複数のCSSやJavascript、PHPファイルを実行する必要がある場合、都度ダウンロードして実行する動きが優先されてHTMLの読み込みが中断されるので、表示までに時間がかかってしまいます。
対処法としては、分割しているファイルを統合したり、機能として使用していないファイルを削除したりすることになります。
例えば、WordPressで使用しているテーマで使われていた初期のCSSでは不足しているからと、自身で追加分のCSSファイルを作成して読み込ませている場合はひとつのファイルにまとめてしまうようにしましょう。
「不要なファイルはどれか」ということについては、PagespeedInsightsで計測した際に、下記画像のように対象を抽出してくれます。
ただ、実際に削除してみると一部のページで表示が崩れてしまったり、機能が使えなくなったりする可能性もありますので、ファイルを削除する際には必ずバックアップを取ってください。
高速環境のサーバーを使う
これまでの手順を一通り行ったにもかかわらず、改善の効果があまりないという結果になってしまった場合、サーバーにも原因があるかもしれません。
先ほど簡単に述べましたが、サイトにアクセスがあった時は、ブラウザからさまざまなファイルを呼び出すリクエストがあります。
このとき、HTMLなどの各種ファイルはサーバーから取り出されているため、サーバーからの反応（サーバーレスポンス）が遅ければ、それだけブラウザ側の処理も遅くなります。
どのようなサーバーが高速環境なのかについては、ディスクが「SSD（ソリッド・ステート・ドライブ）」という読み込みが早いものや、Webサーバーが「Litespeed」などが使用されているものであれば十分でしょう。
昨今では格安サーバーでもSSD搭載や高速Webサーバーを使用しているサービスが多いですが、無料サーバーや一部のサービスではそうではないこともあるので、もしサーバー環境に不安があるのであれば、乗り換えを検討しても良いかもしれません。
スマホでも見やすいサイト作りがベスト
サイトの高速化は検索順位の改善にも必要な要因のひとつです。
特に現在ではPCよりもスマホでサイトを閲覧する人も増えてきているので、PCではスムーズに表示されたサイトが、スマホの場合は時間がかかるということもあるでしょう。
そのため、画像サイズの縮小や軽量化、通信量の削減がユーザーの利便性に大きく関わってきます。
ただ、高速化するためにさまざまなプラグインを入れると、かえって表示に時間がかかったりする危険性もあります。
高速化に関する対応を適当に進めるのではなく、ひとつずつ丁寧に行い、実際に使ってみて快適と感じるサイト速度を目指すようにしましょう。
最近のコメント
コメントなし