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秒程度を目安に改善に取り組んでいくのがいいと思います。
SEO対策
表示速度をあげることはSEO対策でも重要な項目です。
Googleは2018年にモバイル検索のランキング要素として「ページの読み込み速度」を追加することを発表しました。表示速度が検索順位を決める重要な項目であると判断したのです。
参照記事 : Google ウェブマスター向け公式ブログ [JA] : ページの読み込み速度をモバイル検索のランキング要素に使用します
ランキング要素に速度が関係しているからといって早ければランクインするとは限りませんし、魅力的で検索クエリと関連が高いコンテンツであれば、読み込み速度が遅くても高い順位にランクインされることはあるでしょう。ただし同じくらいの質の記事であれば表示速度が早い方が上に表示されるようになっているようです。
「3秒以上で53％の訪問者が離脱」とあったので、3秒未満を目標にするといいと思います。
ページ速度チェックツールを使って現状を知る
表示速度が遅くなる原因はサイトによって異なります。まず現状どの程度の表示速度なのか、遅くなっている原因がどこにあるかをWebサイト速度チェックツールで確認することから始めましょう。
代表的なチェックツールをいくつかご紹介します。
「PageSpeed Insights」 は日本語にも対応しており、表示速度・パフォーマンス結果や改善点も表示されるので、まずはこちらを使用するのがおすすめです。
「Pingdom Website Speed Test」や「GTMetrics」は英語表記のみですが、より細かい部分まで知りたい時などにおすすめしたいツールです。
自分が使いやすく、知りたいことを出してくれるものを使用していきましょう。
PageSpeed Insights
PageSpeed Insights（ページスピードインサイト）はGoogleが提供しているチェックツールです。
アカウントは必要なく、速度を計測したいURLを入力して「分析」をクリックするだけなので気軽に利用できます。
モバイルとデスクトップそれぞれで診断結果と改善するべき点を教えてくれます。「パフォーマンス・ユーザー補助・おすすめの方法・SEO」の4つの項目を100点満点で評価されます。
アクセス数が一定数あれば「ウェブに関する主な指標の評価」というものも表示されます。（アクセス数が少ないページの場合は「データがありません」と表示されます）
【使い方参照】PageSpeed Insights について | Google Developers
Pingdom Website Speed Test
Pingdom Website Speed Test 読み込まれるコンテンツタイプの容量やドメインのサイズやリクエスト数なども確認できます。
URLとアクセス元の地域（世界の各地域から選択・JAPANもあります）を入力して「START TEST」をクリックすると診断されます。
GTMetrics
GTMetrics（ジーティーメトリクス）はA~Fのランクによって評価されます。情報量が多く、細かい部分まで分析結果を出してくれます。
こちらも使い方は簡単で、ページのURLを入力し「Test your site」をクリックすると結果が表示されます。
GTMetricsは海外のサーバーからチェックして診断されます。そのため最適な結果とは言えないかもしれませんが、診断してみて他のツールと比べて全く違う評価が出るというわけではなかったので、参考数値として問題ないと思います。
Web担当者Forum版 ページ速度分析ツール
今見ているページがどのくらいの表示スピードかを簡単にチェックできるブックマークレットです。
※ブックマークレット … 簡易的なプログラムをブックマークしてそこから機能を呼び出すもの。
ページを開いた状態でブックマークレットをクリックすると、そのページの表示速度がどの程度か確認できます。
表示される内容はさまざまなアクセスによる平均としてのデータではなく、自分のPCやブラウザ・通信環境でのデータです。あくまで目安の一つとして捉えておいた方が良さそうですが、簡易的にチェックするならおすすめできるツールです。
こちらからブックマークレットを取得できます。
サイトが重い原因は？ すぐに使えるページ速度分析ツールでチェックしよう！
GA4でページごとの速度をチェック
Google Analytics のユニバーサルアナリティクスではページ速度を確認することが簡単にできていました。（【行動 > サイト速度】からチェックできます）しかし、ユニバーサルアナリティクスは2023年7月で新しいデータの処理は停止、そして2024年7月にはアクセスもできなくなるようです。【参照 : ユニバーサル アナリティクスは Google アナリティクス 4 に置き換わりました】
今後はGA4を使用することになるのですが、GA4ではサイト速度を表示する機能が付いていません。GA4でも確認できるようにしておきたいという人はこちらの記事が参考になると思います。
[GA4] Google Analytics 4 でサイト速度を計測する方法
ページ表示速度が遅いのはなぜ？考えられる原因と対策
表示速度が遅くなる原因はいくつもあります。ページ速度チェックツールはどこが表示速度を遅くさせているのか教えてくれますが、それが実際どういった意味でどこを修正すればいいかわからないと思うこともしばしばあります。またコードに問題がある場合、修正が難しいこともあるでしょう。
全てを変えることは難しいかもしませんが、できることをしっかり行うことが大切です。一つ一つは些細な違いでも全て合わせると大きな改善になっていきます。
ページを構成する要素の問題
画像や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">画像形式を変更する
画像の形式はどのような画像かによって適切なファイル形式があります。相性を確認して最適化することで画像が軽くなり表示速度アップにつながります。
画像を作るときは主にpngやjpgなどを使用しますが、次世代フォーマットの「WebP」することで表示速度を上げることができます。
WordPressならプラグインの中に簡単にWebP変換してくれるものがあります。（EWWW Image Optimizer もその一つです）その他、コンパイルサイトやタスクランナーを使用して変換することもできるので、自分の制作環境によって使いやすいものを使用してみて下さい。
WebPを使用しない場合でも画像によって最適な形式を選択していきましょう。
ソースに無駄な記述がある → コードを見直す（ソースの最適化）
ソースはページを構成するコードやファイルのこと。
コードに不要な記述がたくさんありませんか？
不要なファイルを読み込ませていませんか？
できる限り整理されたプログラムコードを書きましょう。Webサイトが複雑になるほど、不要なプログラムや無駄な記述があったりします。ページには表示されずとも読み込みはされるため、その分表示まで時間がかかります。
ファイルの圧縮
不要なものは削除し、CSSやJSなど圧縮できる場合は行いましょう。
複数のファイルを読み込ませている場合、できる限りまとめることでスピードアップすることがあります。
JavaScriptの読み込み場所
読み込み時間がかかるものはCSSやJavaScriptです。ソースの最適化では、主にCSSやJavaScriptのソースをチェックします。特にJavaScriptファイルを見てみましょう。
ブラウザはページにアクセスしたら、まずJavaScriptを読み込もうとします。その読み込みが終わるまで表示はストップ。
この読み込み時間が長ければ表示速度も遅くなります。
こういったことから、JavaScriptは最後に読み込ませるようにします。
JavaScriptの記述は<head>タグ内ではなく、</body>タグ直前に書きます。
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全般
