Webサイトの表示速度（サイトスピード）改善指南書

※2020年8月25日：最新の情報を元に更新

2018年7月にWebサイトの表示速度に関する検索アルゴリズムのアップデート「スピードアップデート」が実施されて、Webサイトの表示速度はSEOにおける大切な項目の1つとして挙げられていることを知る人は多いかと思います。

検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。研究（英語）では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。 読み込み速度はこれまでもランキングシグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

この ”Speed Update” （と私たちは呼んでいます）は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。 検索意図は依然として非常に強いシグナルですので、魅力的で検索クエリと関連性の高いコンテンツは、ページの読み込み速度が遅くても高い順位に掲載される場合もあります。

引用元：ページの読み込み速度をモバイル検索のランキング要素に使用します

特にモバイルの表示速度に関するアナウンスであり、PCでは以前より検索順位を決定する指標の一つとされていたことが分かります。PC・モバイル問わず、表示速度が遅いWebサイトは検索順位・コンバージョン率を下げる要因の1つでもありますので、表示速度は速ければ速い方が良いでしょう。

本記事は「Webサイトの表示速度改善指南書」と称して、

①Webサイト表示速度の計測方法
②Webサイト表示速度に関するGoogleの最新アナウンス
③Webサイト表示速度を改善する方法
④Webサイト表示速度改善によって見込める成果

を分かりやすく解説しています。すぐにでも実行できる内容も掲載していますので、現状で自社サイトの表示速度が遅いと感じている方や改めて見つめ直したい方など、参考にしていただけますと幸いです。

Webサイト表示速度の計測方法

何事も同様ですが、まずは現状のWebサイト表示速度を把握しておきましょう。
比較対象があると、改善した際に効果があるのかないのかを数値で判断することが出来る上に、効果が薄い場合には他の方法を実行する必要があります。一般的にWebサイト表示速度を計測する方法は以下のツールを活用します。

• Google PageSpeed Insights
• Googleアナリティクス
• Test My Site

全てGoogleが提供する無料ツールで、簡単にWebサイト表示速度を計測することが出来ます。それでは1つずつ見ていきましょう。

Google PageSpeed Insights

Google PageSpeed Insightsは、計測したいページのURLを入力するだけで速度スコア（0〜100）と表示速度改善の為のアドバイスをしてくれるGoogleの無料ツールです。PC・モバイル共に計測出来る上に、URLを入力するだけですので誰でも簡単にWebサイト表示速度を計測することが出来ます。

上記の「ウェブページのURLを入力」へ計測したいページのURLを入力して「分析」をクリックするだけで計測することが可能です。

Googleアナリティクス

Googleアナリティクスは、サイト分析ツールとしてGoogleが提供している無料ツールです。Webサイトの分析で利用している人も多いと思いますが、GoogleアナリティクスでもWebサイトの表示速度を計測することが出来ます。

Googleアナリティクスの場合は上記のように、

• 平均読み込み時間（秒）
• 平均リダイレクト時間（秒）
• ドメインの平均ルックアップ時間（秒）
• サーバーの平均接続時間（秒）
• サーバーの平均応答時間（秒）
• ページの平均ダウンロード時間（秒）

の指標も表示されて、様々な視点で細かくWebサイト表示速度を計測することが可能です。

Test My Site

Test My Siteは、モバイルページに特化したWebサイト表示速度を計測できるGoogleの無料ツールです。Google PageSpeed Insights 同様、計測したいWebサイトのドメインを入力すると、計測結果と優先度の高い修正点を示してくれます。

上記の「速度をテストをするドメインを入力」へ対象ドメインを入力後「→」をクリックするだけで簡単に計測することが出来ます。また、レポート作成機能も付随しているので、チームや外部パートナーへ共有する際も便利です。

Webサイト表示速度に関する新たな指標「Core Web Vitals（コア ウェブ バイタル）」

Google社は2020年5月に「Core Web Vitals（コア ウェブ バイタル）」なる検索順位に関する新しい指標を発表しています。Google社が公式に発表している具体的な指標は、以下の3つとされており、これらを総称してCore Web Vitals（コア ウェブ バイタル）と呼んでいます。

情報参照元：web.dev

Core Web Vitals（コア ウェブ バイタル）は、Webサイト表示速度とページレイアウトに関する取り組みで、Webサイトを制作する上で今後の水準となるでしょう。

Core Web Vitals（コア ウェブ バイタル）がアルゴリズムに組み込まれるのは2021年以降とされていますが、Google社が提供している「サーチコンソール」内で2020年8月時点でも上記のように確認することが可能です。常に自社の運営するサイトに関心を持ち、改善取り組みを実施することで良い数値を継続することが出来ます。

Webサイト表示速度を改善する方法

これからご紹介する内容は、Webサイト表示速度を改善する数ある方法の中から弊社が主に行なっている方法を抜粋して掲載しています。自社で実行出来そうな方法から順次取り組んでみてください。

画像サイズ軽減

画像サイズは最もWebサイト表示速度に影響を与えると言っても過言ではありません。可能な限り画像サイズを軽減しなければなりませんが、注意点として「画質を極力保つ」ことを念頭において取り組む必要があります。TinyPNGやJPEGminiという無料ツールを活用すれば画質を一定に保ったまま、画像サイズを軽減することが出来ます。

PNG：TinyPNG
JPEG：JPEGmini

次世代フォーマットでの画像配信

「JPEG 2000」「JPEG XR」「WebP」などの画像フォーマットは、PNGやJPEGと比較すると高い圧縮性能を持っているので、読み込み時間やデータ使用量を抑えることが出来ます。前項でもお伝えしましたが、画像サイズはWebサイト表示速度に大きく影響するので最初に取り組むべきタスクでしょう。

参考：次世代フォーマットで画像を提供

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

キャッシュとは、WEBサイトを表示した際に画像やCSSなどのファイルを一時的にブラウザ（ChromeやSafariなど）へ保存することで、再度同じページを開いた際にサーバーへアクセスする工程を省略することが出来る仕組みです。データ通信の手間が省略されるので、結果として表示速度が速くなります。

ブラウザキャッシュは「.htaccess」と呼ばれるファイルに専用ソースコードを記述することで活用することが出来ます。コーディングの知識が必要となりますので、社内で対応出来る人がいなければサイトの保守管理を委託している制作会社や外部パートナーへの委託を推奨します。

CSS・JavaScriptの圧縮

CSS・JavaScriptを縮小することで、ファイル内にある余分な余白・改行を削除することが出来てデータサイズを小さくすることが出来ます。CSS・JavaScriptを圧縮する際は、下記のサイトにて無料で出来ます。

CSS：CSS Minifier
JavaScript：JS Minifier

この方法のデメリットは、余白や改行を削除するので記述しているソースコードが読みづらくなり、Webサイトの更新などに伴うCSSの編集がしづらくなってしまいます。小規模や個人運営のWebサイトであれば良いですが、大規模なWebサイトや管理者が複数名いる場合は更新トラブルの原因となりかねませんので注意が必要です。

AMP化

AMPとは、GoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、モバイルページを高速表示させる為の仕組みを指します。AMPページは大きく分けると、下記で構成されています。

• AMP HTML
• AMP JS
• AMP Cache

AMPの細かい仕様は以下の記事で紹介しています。

参考：How AMP works

AMPを導入するとモバイルページの表示速度が大幅に向上しますが、同時に使用出来るソースコードが限定され、デザインやコンテンツの表現に制約があるというデメリットもあります。構築手法も複雑なので、もし外部パートナーへ依頼する際は通常よりもコストがかかるでしょう。

上記デメリットもありますがAMP対応サイトは増加傾向にあります。以前は大規模なメディアサイトで導入しているケースが殆どでしたが、最近はECサイトやポータルサイトなどでもAMP対応サイトが多く見られるようになりました。今後の技術の進歩と共に、徐々にデメリットとされる点が改善されていくことも予想されています。

クリティカル レンダリング パスの最適化

クリティカル レンダリング パスとは、ブラウザがWebページのデータを読み込んで画面に表示する処理工程のことで、最適化するとWebサイト表示速度が向上します。

最適化の方法としてCSSをインラインで記述（HTML内でCSSを記述する方法）することが挙げられ、ページが初めてレンダリング（描画）されるまでの時間を大幅に改善することが可能です。

参考：クリティカル レンダリング パス

デメリットは、外部ファイル1つにまとめられていたコードが分断されることになるのでソースコード管理の複雑化やFOUCというページの表示崩れが起こる場合があるので、気を付けて実装する必要があります。

Cloudinary導入

Cloudinary（クラウディナリー）とは、ユーザーが閲覧しているブラウザ・デバイス情報を察知して、画像・動画の配信最適化やファイル形式最適化を自動で行える海外のクラウドツールです。一度Webサイト内へ組み込めば、その後の画像・動画運用負荷を大幅に軽減することが出来ます。

画像引用元：Cloudinary

運用するにあたっての初期設定こそ必要ですが、WordPressプラグインの活用や、その後の恩恵を考慮するとメリットが多く、特にオウンドメディアやポータルサイトなど画像・動画を多く扱うWebサイトでは強く導入を推奨します。

注意点は、いくら画像・動画の配信最適化やファイル形式最適化を自動で行えるとしても、元画像（動画）のファイルサイズが重ければ効果が半減するので、ファイルサイズを軽減した上でCloudinary配信を行うようにしてください。

大規模なWebサイトの場合は有料プランでの導入が現実的ですが、比較的規模が大きくないWebサイトであればフリープランでも十分可能です。

Webサイト表示速度改善によって見込める成果

アクセス数向上

先述の通り、Webサイト表示速度は検索順位を定める指標の一つであり、Core Web Vitals（コア ウェブ バイタル）のアナウンスを鑑みると今後は益々、その重要度が増すことが考えられます。

検索順位の向上はWebサイトのアクセス数に直結する要素ですので、決して見逃せない事項と言えます。

UX向上

どんなに良いコンテンツを掲載しているWebサイトだとしても、Webサイトの表示速度が遅ければ、読まれる前にユーザーはストレスを感じて離脱してしまいます。積極的に情報発信しているWebサイトであればあるほど、表示速度が理由で離脱率が高くなるのは非常に勿体ないです。

スピードアップデートやCore Web Vitals（コア ウェブ バイタル）は、UX（ユーザーエクスペリエンス＝ユーザー体験）を念頭においた取り組みです。高水準のUXを提供することは、提供側の使命と言っても過言ではありません。

CV数・CVR向上

Webサイトの表示速度が遅いとユーザーの離脱率が高くなるとお伝えしましたが、それは同時にCVR（コンバージョン率）の低下へと繋がります。多くの企業がWebサイトでのコンバージョン（問い合わせ・資料請求・申し込みなど）をその後のマーケティング活動・営業活動へ活かしており、より多くのコンバージョンを獲得することは売上へ繋げるための大切な過程です。

Googleが2018年2月に発表した記事によると、発表前月に213ヵ国・計1,100万のモバイル広告のランディングページを検証したところ、離脱率の低下やコンバージョン率の向上においてサイトの表示速度は大きく影響している旨を発表しています。

参考：モバイルページの速度に関する新しい業界ベンチマークをどのように積み上げるかをご覧ください

上記検証結果にも掲載している通り、Webサイトの表示速度改善に取り組むことは、企業の売上にも大きな影響を与え、デジタルマーケティングを進める上で避けては通れない取り組みと言えるでしょう。

まとめ

本記事では、Webサイト表示速度に関する事項を網羅的にお伝えしましたが、劇的に改善することが出来る魔法のような方法は存在しません。小さなことをコツコツ積み上げて、徐々に表示速度を上げていくしかないのです。

その中でも弊社が自社サイトやクライアントワークで実際に取り組んだ体験に基づき、効果的と感じた方法をご紹介しています。先述の通り方法自体は、ご紹介したもの以外にも数多く存在するので、取り組むWebサイトの規模や要件によっても最適な方法は異なるでしょう。

社内完結で進めていくことが難しければ、Web制作会社などの外部パートナーと協力しながら、自社にとっての最適解を模索してみてください。一つ一つの取り組みが、ユーザーのためになる取り組みですので、決して無駄にはならないと、私は考えています。

Webサイト表示速度に関するご相談をお待ちしております

ルネイムは、お客様のデジタルマーケティング支援を行なっています。その中で、本記事でもご紹介したWebサイト表示速度に関するご相談も数多くいただいており、改善支援を承っております。今までの経験に基づき、最適な改善メニューをご提案していますので、お気軽に下記のお問い合わせフォームよりその旨を記載の上でご相談ください。初期検証は無料で行なっております。