Webサイトの表示速度は、どんなサイトでも改善すべき項目の一つ。Webページが表示されるのが遅ければ、サイトを見ることをやめてしまうユーザーもいます。ユーザービリティの低下、SEOへの悪影響。Webページの表示速度改善は制作者にとって無視できません。
Webサイトの表示速度が遅くなってしまう原因、改善するために使用するツールや基本の対処法メモです。
表示速度が重要な理由
Webページを見る側に立ってみれば、表示速度が速いサイトの方がいいですよね。私は「そのサイトのページが見たい」というときは待ちますが、なんとなくでアクセスしたページの表示が遅ければすぐ離脱します。
自分がこんな感じなので、表示速度を上げることは「そのページを見てもらうため」に重要なことだと思っています。
web上には情報があふれています。たまたまアクセスしたページがなかなか読み込まれなければ、他のサイトページへ移動することは少なくないはずです。
サイトのコンテンツが充実していたとしても、内容を読む前に離脱されてしまうとその良さがわかりません。
0.1秒の違いでも離脱率やコンバージョン率に影響が出るということなので、少しでも改善できるように取り組んでいきたいところです。
ユーザーにとって使いやすいサイト（ユーザービリティの向上）
多くのユーザーが自分の求めた情報を早く快適に見ることを重視しています。それを証明するのはこういったデータ。
- モバイルページでは表示速度が1秒から5秒に伸びると90％の直帰率増加
- 3秒以上かかれば53％の訪問者が離脱。
参照記事 :
New Industry Benchmarks for Mobile Page Speed – Think With Google
Top 12 marketing insights from 2017 – Think with Google
読み込みに1秒以上かかると、内容に集中できなくなるというデータもあります。これは素晴らしい内容のコンテンツだったとしても、しっかり読んでくれない可能性が高い、ということになります。
参照記事 : Measure performance with the RAIL model
離脱はもちろん、質の良いコンテンツでも読まれなければコンバージョンにつながる可能性も下がります。1秒未満にすることは難しいかもしれませんが、3秒程度を目安に改善に取り組んでいくのがいいと思います。
検索エンジンやAI検索からの評価
表示速度をあげることはSEO対策でも重要な項目です。
Googleは2018年にモバイル検索のランキング要素として「ページの読み込み速度」を追加することを発表しました。表示速度が検索順位を決める重要な項目であると判断したのです。
さらに2021年からは、表示速度を含むユーザー体験の指標「Core Web Vitals」が検索順位の評価に使われるようになりました。Googleも「Google のランキング システムでは Core Web Vitals が使用されます」と明言しています。
ただし、Googleが最も重視しているのは検索された内容にどれだけ合っているかで、表示速度が速いだけで順位が上がるわけではありません。
ランキング要素に速度が関係しているからといって早ければランクインするとは限りませんし、魅力的で検索クエリと関連が高いコンテンツであれば、読み込み速度が遅くても高い順位にランクインされることがあるということです。同じくらいの質の記事同士の場合に差がつく要素、と考えておくとよいでしょう。
AI検索への影響
最近はGoogleの「AIによる概要」やChatGPTなど、AIが回答の中でWebページを引用・紹介する場面が増えています。こうしたAI検索で自分のサイトを取り上げてもらうための対策は、GEO(生成エンジン最適化)やLLMO(大規模言語モデル最適化)などと呼ばれています。
GoogleのAIによる概要やAIモードについては、Googleは「特別な最適化は必要ない」としたうえで、ページエクスペリエンスを含むこれまでのSEOの基本がそのまま有効だと説明しています。表示速度の改善は、GoogleのAI検索に向けても無駄にならないと考えてよさそうです。
「表示が速いページほどAIに引用されやすい」といった調査も出ていますが、今のところAI検索の各サービスが公式に表示速度を評価基準として示しているわけではありません。
ChatGPTやClaude、PerplexityなどのAIがページを読み取るクローラーの多くは、JavaScriptを実行しないことがわかっています。JavaScriptで後から表示している内容は、AIからは見えていない可能性があります。表示速度そのものよりも、「大事な内容がHTMLに最初から書かれているか」を意識した方が良さそうです。
ページ速度チェックツールを使って現状を知る
表示速度が遅くなる原因はサイトによって異なります。まず現状どの程度の表示速度なのか、遅くなっている原因がどこにあるかをWebサイト速度チェックツールで確認することから始めましょう。
代表的なチェックツールをいくつかご紹介します。
「PageSpeed Insights」 は日本語にも対応しており、表示速度・パフォーマンス結果や改善点も表示されるので、まずはこちらを使用するのがおすすめです。
「Pingdom Website Speed Test」や「GTMetrics」は英語表記のみですが、より細かい部分まで知りたい時などにおすすめしたいツールです。
自分が使いやすく、知りたいことを出してくれるものを使用していきましょう。
PageSpeed Insights
PageSpeed Insights（ページスピードインサイト）はGoogleが提供しているチェックツールです。
アカウントは必要なく、速度を計測したいURLを入力して「分析」をクリックするだけなので気軽に利用できます。
モバイルとデスクトップそれぞれで診断結果と改善するべき点を教えてくれます。実際のユーザーのデータ(Core Web Vitals)とその場での計測結果の両方を確認できます。
結果の見方はこちら
Core Web Vitalsについて
Pingdom Website Speed Test
Pingdom Website Speed Test 読み込まれるコンテンツタイプの容量やドメインのサイズやリクエスト数なども確認できます。
URLとアクセス元の地域（世界の各地域から選択・JAPANもあります）を入力して「START TEST」をクリックすると診断されます。
GTMetrics
GTMetrics（ジーティーメトリクス）はA~Fのランクによって評価されます。情報量が多く、細かい部分まで分析結果を出してくれます。
こちらも使い方は簡単で、ページのURLを入力し「Test your site」をクリックすると結果が表示されます。
GTMetricsは海外のサーバーからチェックして診断されます。そのため最適な結果とは言えないかもしれませんが、診断してみて他のツールと比べて全く違う評価が出るというわけではなかったので、参考数値として問題ないと思います。
Web担当者Forum版 ページ速度分析ツール
今見ているページがどのくらいの表示スピードかを簡単にチェックできるブックマークレットです。
※ブックマークレット … 簡易的なプログラムをブックマークしてそこから機能を呼び出すもの。
ページを開いた状態でブックマークレットをクリックすると、そのページの表示速度がどの程度か確認できます。
表示される内容はさまざまなアクセスによる平均としてのデータではなく、自分のPCやブラウザ・通信環境でのデータです。あくまで目安の一つとして捉えておいた方が良さそうですが、簡易的にチェックするならおすすめできるツールです。
こちらからブックマークレットを取得できます。
サイトが重い原因は？ すぐに使えるページ速度分析ツールでチェックしよう！
Google Search Consoleでサイト全体の状況をチェック
PageSpeed Insightsは1ページずつ調べるツールですが、サイト全体でどのページに問題があるかを知りたいときは、Google Search Consoleの「ウェブに関する主な指標」レポートが便利です。Search Consoleにサイトを登録していれば確認できます。
左メニューの「エクスペリエンス」→「ウェブに関する主な指標」を開くと、モバイルとパソコンそれぞれについて、ページが「良好」「改善が必要」「不良」の3段階で集計されたグラフが表示されます。
アクセスが少ないサイトでは「データがありません」と表示されることがあります。
「レポートを開く」をクリックすると、LCPやINP、CLSのどの指標で問題が出ているかと、該当するページの一覧が確認できます。
構成が似たページは「URL グループ」としてまとめて判定されます。テンプレートやテーマ単位の問題を見つけるのに向いています。
対策後に「修正を検証」をクリックすると、28日間かけて改善されたかどうかを確認してくれます。
気になるページが見つかったら、PageSpeed Insightsで個別に調べて原因を探す、という流れで使うとスムーズです。
LCPやINP、CLSについて
ページ表示速度が遅いのはなぜ？考えられる原因と対策
表示速度が遅くなる原因はいくつもあります。ページ速度チェックツールはどこが表示速度を遅くさせているのか教えてくれますが、それが実際どういった意味でどこを修正すればいいかわからないと思うこともしばしばあります。またコードに問題がある場合、修正が難しいこともあるでしょう。
全てを変えることは難しいかもしませんが、できることをしっかり行うことが大切です。一つ一つは些細な違いでも全て合わせると大きな改善になっていきます。
ページを構成する要素の問題
画像やCSS・JSファイルなどページを表示するための構成要素によって表示速度が遅くなります。基本的にサイト管理者が改善するのはこの部分です。
サーバーの問題
使用するサーバーのスペックが良くなかったり共用サーバーを使用している場合などは、自分のサイトに不備がなくても表示速度が遅くなってしまうことがあります。
見る側の通信環境の問題
サイトの管理者が対応できることはありませんが、クライアントワークではこういったことが問題になることも少なからずあります。（何人かチェックしている中で、他の人は3秒以内に表示されるのに一人だけ表示に5秒以上かかるなど）
単に通信環境があまり良くなかったり、通信障害も起こり得ることです。一つの要因としておさえておきましょう。
基本対策リスト
表示速度の改善には以下の項目を確認して修正していきましょう。
- 画像最適化（軽量化・遅延読み込み）
- ソースコードの最適化
- JavaScriptの動作や読み込むタイミング
- WordPressプラグイン
- YouTubeの埋め込み
- 情報の整理
- キャッシュ
- PHPのバージョン
- サーバースペック
重たい画像を使っている → 画像の最適化
画像は表示速度に大きく影響を及ぼし、画像の最適化は表示速度を上げるために対策する定番です。
画像はWebページを見やすくしてくれる重要な要素です。なくすことは難しいと思いますが、過剰に設置したり、容量の大きすぎるものを使用するのは考えもの。必要最低限の画像ファイルの大きさにすることが重要なポイントです。
- その画像は本当にそのサイズでなければいけませんか？
- そのファイル形式でなければうまく表示されませんか？
- 画像は圧縮されていますか？
何も考えずに、画像サイズが大きいものを次々とWebサイトにアップしてしまうと、ページの読み込みが遅くなります。
画像を入れるときはサイズ確認は必須。○○GBや○○MBといった単位は大きいサイズです。サイズダウンや画像圧縮、画像形式を変更するなど、画像の容量削減をしていきましょう。
大きすぎる画像はリサイズする
5000px × 3000px といったような大きなサイズの画像を使用していませんか。
解像度が高いほどきれいに表示されますが、ここまで大きな画像でなくても十分なことがほとんどです。もし大きすぎるサイズの画像を使っている場合は、必要最低限の大きさにリサイズしましょう。
画像のリサイズは、PCに備わっている画像編集機能でも行えますし、オンラインツールでも簡単に行えます。
画像を圧縮して容量を削減
さらに画像容量を小さくするには圧縮する作業が必要です。
WordPressでは簡単に画像圧縮してくれるEWWW Image Optimizerというプラグインがあります。有効化するだけでアップロードした画像を自動的に圧縮してくれるので、使い方も簡単で便利です。
このプラグインは、メディアにアップロードした画像のみ圧縮します。それ以外の場所、例えばテーマの中にある画像などは圧縮対象外です。
WordPress上でなくとも圧縮ツールはアプリやウェブにもあります。お好みのツールを使って容量削減していきましょう。
- Tinypng : 無料オンライン圧縮ツール
- ImageOptim : Macユーザー専用の画像圧縮アプリ
- JPEGmini : 有料圧縮ツール
画像の読み込みを遅延させる
Webサイトは特に設定しなければ、画像を読み込んで、それが完了したらページを表示するようになっています。
そのため画像の読み込みに時間がかかれば、表示されるまでに時間がかかります。なので画像を後回しにして他の部分を表示させてしまおうという考えがあります。
これは「Lazy Load」というもの。WordPress5.5以降では自動でこの機能がつくようになりました。
ほとんどのブラウザの最新バージョンでは<img>タグにloading属性を付けることで遅延読み込みを設定できます。
<img src="example.jpg" loading="lazy">だたし、注意点もあります。最初から表示するべき画像にも「Lazy Load」が設定されていると、余計な処理が入り、逆効果になってしまいます。
WordPress 6.3以降は、最初の画像を自動で遅延対象から外すようになっています。
画像形式を変更する
画像の形式はどのような画像かによって適切なファイル形式があります。相性を確認して最適化することで画像が軽くなり表示速度アップにつながります。
画像を作るときは主にpngやjpgなどを使用しますが、次世代フォーマットの「WebP」することで表示速度を上げることができます。
WordPressならプラグインの中に簡単にWebP変換してくれるものがあります。（EWWW Image Optimizer もその一つです）その他、コンパイルサイトやタスクランナーを使用して変換することもできるので、自分の制作環境によって使いやすいものを使用してみて下さい。
WebPを使用しない場合でも画像によって最適な形式を選択していきましょう。
ソースに無駄な記述がある → コードを見直す（ソースの最適化）
ソースはページを構成するコードやファイルのこと。
コードに不要な記述がたくさんありませんか？
不要なファイルを読み込ませていませんか？
できる限り整理されたプログラムコードを書きましょう。Webサイトが複雑になるほど、不要なプログラムや無駄な記述があったりします。ページには表示されずとも読み込みはされるため、その分表示まで時間がかかります。
ファイルの圧縮
不要なものは削除し、CSSやJSなど圧縮できる場合は行いましょう。
複数のファイルを読み込ませている場合、できる限りまとめることでスピードアップすることがあります。
JavaScriptの読み込み方
読み込み時間がかかるものはCSSやJavaScriptです。ソースの最適化では、主にCSSやJavaScriptのソースをチェックします。特にJavaScriptファイルを見てみましょう。
ブラウザはHTMLを上から順に読み込み、途中で<script>タグがあると、JavaScriptの読み込みと実行が終わるまでページの表示を止めてしまいます。PageSpeed Insightsで「レンダリングをブロックしているリクエスト」と指摘されるのは、このような状態です。
以前は</body>タグの直前にJavaScriptを書くのが定番でしたが、今は<head>内に書いたままdefer属性をつける方法が一般的です。
<head>
<script src="main.js" defer></script>
</head>deferをつけると、JavaScriptの読み込みはHTMLの表示と並行して進み、実行はHTMLの読み込みが終わってから行われます。表示を止めずに、書いた順番どおりに実行されるのが特徴です。
似たものにasync属性もありますが、こちらは読み込みが終わった順にすぐ実行されるため、実行順が決まりません。アクセス解析のタグのように、ほかのスクリプトと関係なく動くものに向いています。
| 属性 | 表示を止めるか | 実行のタイミング |
|---|---|---|
| なし | 止める | 読み込み後すぐ |
| defer | 止めない | HTMLの読み込み完了後、書いた順 |
| async | 止めない | 読み込み後すぐ(順番は不定) |
WordPressの場合は、テーマやプラグインが読み込むスクリプトに自分で属性を追加するのは手間がかかります。WordPress 6.3からはwp_enqueue_script()の引数でdeferやasyncを指定できるようになったので、自作テーマで読み込むスクリプトはこちらで設定できます。
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', array(), '1.0', array( 'strategy' => 'defer' ) );JavaScriptによる動作が多い
Webサイトに動きを出してくれるJavaScriptはもはやサイトに必須のものとなっています。
見やすさや楽しさ、操作のしやすさなどメリットがたくさんあるものの、使いすぎると表示するまでの負荷もかかります。
あまりにも表示速度に影響が出るようなら、その動作を無くすか処理時間を短くできるようなコードに修正しましょう。
不要なプラグインは削除
WordPressで使用しているプラグインの中に無効化したものを削除せずそのままにしているものはないでしょうか。特にJavaScriptを読み込むプラグインについては使っていないものは無くすよう推奨されています。
使用していないプラグインをそのままにしておく、また必要のないプラグインを有効化した状態にしておくだけでも表示速度に影響を与えてしまうこともあるようです。
プラグインは少ない方が表示速度への影響の他、エラーの原因も減らせます。定期的に見直すようにし、サイトで不要になったら無効化、今後も使わないことが判断できるなら削除するようにしていきましょう。
WordPressのプラグインの他に、使用していないJavaScriptのライブラリファイルやCDNを読み込んでいないか見直してみてください。
YouTubeの埋め込みは速度に影響大
最近ではサイトにYouTubeを埋め込むことが増えてきました。
YouTubeの埋め込みに使用する iframe タグは表示速度を下げる要因の一つです。
表示速度を上げるためには、読み込みを遅延させる対応が必要です。
読み込む情報量が多い（表示する内容が多い） → コンテンツを整理する
ページにさまざまなコンテンツが含まれているとその分、読み込むスピードが遅くなり表示速度も下がります。
画像や動画、文章盛りだくさんと充実させたページほどそれらが原因となり遅くなっている可能性は十分にあります。
そういったページはデータ量が多いのです。コンテンツが大量になったページは整理整頓しましょう。
そのページに設置されているコンテンツは本当にそのページに必要ですか？
コンバージョンに貢献していますか？
上記に当てはまらないものは思い切って削ったり、ページを分けてみるのも一つの手です。表示速度を考えたときに、省けるものはないか一度見直してみてください。
キャッシュの活用
ブラウザには一時的にデータを保存しておく「キャッシュ」という機能があります。一度訪れたページに再びアクセスしたら、再訪問前に保存していた内容を表示させる仕組みです。
これによって読み込みを短縮できるため、ページ表示の速度が上がります。
プラグインでキャッシュ設定
WordPressにはキャッシュ用のプラグインがあり簡単に設定できます。
WordPressのキャッシュ設定プラグインでメジャーなものは、W3 Total Cache。プラグインをインストールして設定すればサイトのキャッシュ管理が容易になります。
他にも様々なプラグインが用意されているので、試しながらサイトにあったものを使用していきましょう。
CDNサービスを利用する
CDN（コンテンツ・デリバリー・ネットワーク）は複数のサーバーでキャッシュをし、ページにアクセスしたユーザーに一番近いサーバーがレスポンスする仕組み。
アクセス負荷を分散して軽くしてくれる、サーバーの負担を軽くすることで表示速度が速くなるというメリットがあります。
Cloudflare が代表的なサービスです。
PHPバージョンは新しいものに
PHPのバージョンもアップデートされます。サイトを長く運用していると気づかないうちにPHPがアップデートされていることもあります。
バージョンが上がるごとに処理速度も改善されています。またセキュリティの点からも古いバージョンは使い続けない方が良いです。
【参照】 PHPのバージョンを変えるとサイト速度が速くなる？ | さくらのホームページ教室
サイトで使用しているPHPバージョンが古い場合は変更を検討してみてください。
PHPのバージョンはレンタルサーバー側で簡単に変更することができるものがほとんどです。だたし使用しているテーマやプラグインによってはサイトに大きな影響を与えてしまうこともあります。変更するときは必ずローカル環境やテスト環境などで問題がないか確認するようにしましょう。
サーバーのスペックを見直す
使用しているサーバーのスペックがあまりよろしくない場合、表示速度に影響が出ます。サーバーを見直すことで、通信が高速化されるため表示速度も上がります。
共用サーバーの場合、複数のサイトで共有するため他のサイトで負荷がかかると自分のサイトにも影響が出てきます。
改善策を行ったが思うように表示速度が上がらない場合は、専用サーバーに変更したりスペックを上げることで改善されることが大いにあり得ます。
アクセス数が増えた時もスペックを見直すタイミングです。
たくさんのユーザーに見てもらえるようになることは喜ばしいことですが、アクセス数に対してサーバーのスペックが足りていないと、ページの読み込みが不安定になり、最悪の場合サーバーダウンして閲覧不能になります。
カテゴリー : WEB全般
