投稿日：2021年8月29日 | 最終更新日：2023年6月13日

ページの表示速度の向上にはGoogleから提案される改善案により沿った対策を講じる必要があります。項目ごとにその対策について紹介します。

なぜページスピードを改善する必要があるのか？

ユーザーエクスペリエンス（ＵＸ）を損なうものである

Googleがページスピードの測定ツールを提供している理由としては、速度が著しく低いサイトを閲覧させることは、ＷＥＢにおけるユーザーエクスペリエンスを大きく損なうと考えています。

たしかに、個人レベルから見ればページがなかなか表示されずにイライラする時間は非常に無駄なもの。そして、無駄に大きなサイズのデータをスマートフォンで閲覧する場合などは、それだけでデータ通信量がかさんでしまい、決められた上限のデータ量を消費してしまいます。

それだけではなくGoogleとしては全世界のWEBにおいて無駄なデータが多ければ、その分だけ回線に負荷がかかったり、通信品質などにも影響を及ぼす可能性というのも考えているはずです。１つのサイト、一つの閲覧における無駄なデータというのはそこまで大きなものでは無いかも知れませんが、WEBの世界全体を見渡してみれば正に「塵も積もれば山」となるといったところでしょうか。

ＳＥＯの評価軸の一つがページスピードである

過去に「スピードアップデート」と呼ばれるアルゴリズムのアップデートを実施していることからもわかるように、Googleの検索アルゴリズムにはサイトの表示速度というものが確実に要素の一つとして採用されています。

著しくサイトの表示速度が遅い場合には、ほぼ同じような内容が掲載されているサイトであれば、表示速度が速い方が評価されるとうことになるでしょう。競合他社のサイトが対応していないのであれば、ちょっとした努力さえすれば実施できるページスピードの高速化対応という点は、やっておいて損は無いはずです。

将来的に導入の可能性？不名誉バッジを避ける

Googleは自らが提供しているWEBブラウザ「Chrome」のアップデートで、将来的にページスピードが遅いサイトが使用しているユーザーにわかりやすい仕様というものを導入する計画を持っていると言われており、実際にデモ画面なども公開しています。

もし実際にこの機能が導入された場合、今ならなかなか表示されずイライラを感じながら表示を待ってくれいてるユーザーでも、「あ、このサイト表示遅いのか」とある程度のタイミングで見切りをつけて離脱してしまうといった現象が起こることも否定はできません。

実際にこの機能が搭載され、ページスピードの遅さが白日の下に晒されてしまう前に、対応を検討しましょう。

Page Speed Insightを使って、現在位置を知ろう

Googleが提供している「Page Speed Insights」を使えば、URLを入力するだけで表示速度の分析結果を簡単に得ることが可能です。

モバイル端末から閲覧した場合と、ＰＣから閲覧した場合それぞれに対して100点満点中の点数評価が表示されます。

改善すべき項目や、診断の結果については基準に対して対応できていない場合には「赤」、ある程度対応できているものは「黄色」、基準をクリアしているものは「緑」と色でわかりやすく表示されているため、どこに問題点があるのかというのは一目瞭然です。

特に「改善」に関する項目を見れば、具体的にどの部分にまだ伸びしろがあるのか？ということをGoogle側から提示してくれているので、改善に対応できる部分はひとつずつ潰してくことで、評価を押し上げることが可能です。

ここからは「改善」の項目でよく指摘され、比較的簡単に対応ができる項目について対応方法も含めてご紹介します。

画像ファイルの圧縮、次世代画像フォーマットの採用に対応する

よりビジュアルに訴えるサイトデザインを採用したいと考え、画像を多数使用しているサイトも多くあります。Appleの端末に採用されているRetinaディスプレイのように高解像度の端末で画像の見た目が、きれいに表示されないといったことから非常に高解像の画像や、倍サイズ、４倍サイズの画像をサイトに使用しているサイトもあります。しかし、解像度が高い場合はそれだけデータ量がかさみ、表示速度の低下を招きやすいのです。

Googleはサイトに表示させる画像サイズと、読み込んでいる画像のサイズに差があることは良くないと考え、評価としてはプラスの判断を下すことはありません。実際にサイトに表示させる画像サイズより極端に大きな画像を使うことは極力避けていきましょう。

「jpg」「png」「gif」といった現在よく使用されている画像の形式だけはなく、「WebP」「JPEG2000」「JPEG-XR」など「次世代フォーマット」と呼ばれているキレイに表示でき、かつデータサイズも小さく抑えられる画像形式も登場しています。しかし、フォーマットによっては表示に対応してるブラウザやバージョンが限定されている場合もあるため、次世代フォーマットを採用するかは慎重に判断しましょう。

もし、画像サイズをどうしても小さくしたくないという場合には、データの圧縮だけはしておくことがお勧めです。簡単に圧縮できるWEBサービスもありますので紹介します。

オンラインイメージ圧縮ツール「Optimizilla」

（https://imagecompressor.com/ja/）

WEBブラウザから簡単に画像圧縮ができる無料のサービスです。画像の圧縮度合いなども直感的に調整ができるため、より違和感のない画像圧縮が可能となります。

Googleが提供している画像圧縮ツール「Squoosh」

（https://squoosh.app/）

こちらもブラウザにドラッグ＆ドロップするだけで簡単に圧縮ができるツールです。リサイズや、色数の変更、画像形式の変更にも対応しているため、非常に優秀な画像圧縮ツールと言えます。

JavascriptやCSSについて見直しをおこなう

記述が長くなっていたり、現在は使っていない古い記述などが残っていたりする場合読み込むデータが多くなったりします。本当に必要なデータのみを残すようにしましょう。また、ＣＳＳの最適化を図るためのツールに、現在使っているＣＳＳを通してみると、CSSの記述にあった改行がすべて無くなるといった現象も起こります。全くＣＳＳに触れる予定が無いのであればそういった対応もありかも知れませんが、後々更新する際に非常に見づらくなる可能性が高いため、ＣＳＳの改行をまるまる無くしてしまうことはあまりおすすめは出来ない対応法です。

ファーストビューのＣＳＳは直接記述？

ページスピードの計測基準の中には、ファーストビューのデータが完全に表示されるまでにかかる時間というのも指標となっています。最初にサイト全体のCSSを読み込むとそれだけ読み込むデータが増えることから、サイトの上部（ＰＣ向けデザインでも、スマートフォン向けのデザインでも）ファーストビューとなる部分に関してはＣＳＳから読み込むのではなく、直接ＨＴＭＬなどのファイルに記述しておくことが表示速度の短縮にもつながりますので、新たにサイトを作る場合やリニューアルをかけるタイミングでの対応を検討してもいいでしょう。

ファイル読み込み位置の工夫

CSSやJavascriptの中にはファーストビューでは全く使用しないものも存在します。そういったデータはページの最下部（フッター）で読み込むことでページスピードの低下を避けることも可能となります。遅延して読み込んで問題無いデータが無いか？という部分についてはサイトの管理を担当している方と検討してみるのも良いでしょう。

ブラウザキャッシュの活用

あまり更新頻度の高く無い画像データなど場合、一度サイトを訪問した方が再度アクセスしてきた際にWEBブラウザに過去読み込んだキャッシュのデータを使うように指示をすることも可能です。これを指定しておけば、いちいちデータを読み込むことなくページを表示するまでの時間短縮に寄与します。「.htaccess」に記載すれば指定ができますのでキャッシュを利用することも検討しましょう。

ページスピード対策まとめ

表示速度がそこまで重要だと捉えている人は、実際あまり多くないというのが現実です。また、少しでもキレイに、見やすくという部分を意識する人は多いでしょうがページスピードまでを前提としたデザインをするWEBデザイナーもなかなかいないとは思います。

しかし、明らかに検索アルゴリズムと関連性が高い要素の一つであるとともに、Googleが自らツールを提供し、改善すべきポイントについて細かく教えてくれるような要素はページスピード以外にはないのです。せっかく大きなヒントを与えてくれているのであれば、その恩恵を少しでも受けることができるよう、可能な範囲で表示速度改善に取り組むというのは無駄な努力にはならないはずです。

サイトを訪問するユーザーに、少しでも快適に利用してもらうというユーザーエクスペリエンスの向上のためにも、取り組んでみてはいかがでしょうか。