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
逆に0.1秒でも早くすることができれば、コンバージョンが上がる可能性があるということです。
SEO対策
表示速度をあげることはSEO対策でも重要な項目です。
Googleは2018年にモバイル検索のランキング要素として「ページの読み込み速度」を追加することを発表しました。
表示速度が検索順位を決める重要な項目であると判断したのです。
参照記事 : Google ウェブマスター向け公式ブログ [JA] : ページの読み込み速度をモバイル検索のランキング要素に使用します
魅力的で検索クエリと関連が高いコンテンツであれば、読み込み速度が遅くても高い順位にランクインされることもあるようですが、それでも「表示速度」を重視していることに変わりはありません。
ページスピードチェックツールを使って現状を知る
まず現状どの程度の表示速度なのかをWebページスピードチェックツールで確認することから始めます。
スピードチェックツールには以下のようなものがあるので、使いやすく自分でわかりやすいものを試してみてください。
PageSpeed Insights
PageSpeed Insights（ページスピードインサイト）はページの読み込み速度をチェックするためにGoogleが提供しているツールです。
Pagespeed Insightsはサイトを100点満点で評価し、改善するべき点を教えてくれます。
【使い方参照】PageSpeed Insights について | Google Developers
Test My Site
こちらもGoogleが提供しているツールで、モバイルページの概要を知りたい時に便利なツールです。
ページ表示速度が遅いのはなぜ？考えられる原因と対策
表示速度が遅くなる原因はいくつもあります。全てを変えることは難しいかもしませんが、できることから取り組んでみて下さい。
基本対策リスト
表示速度の改善には以下の項目をチェック。
- 画像最適化
- ソースコードの最適化
- JavaScriptの動作
- YouTubeの埋め込み
- 情報の整理
- キャッシュ
- サーバースペック
画像の最適化
画像は表示速度に大きく影響を及ぼします。画像の最適化は表示速度を上げるために対策する定番です。
画像はWebページを見やすくしてくれる重要な要素です。全くなくすことは難しいと思いますが、過剰に設置したり、容量の大きすぎるものを使用するのは考えものです。
必要最低限の画像ファイルの大きさにすることが重要なポイントです。
その画像は本当にそのサイズでなければいけませんか？
そのファイル形式でなければうまく表示されませんか？
画像は圧縮されていますか？
何も考えずに、画像サイズが大きいものを次々とWebサイトにアップしてしまうと、ページの読み込みが遅くなります。
画像を入れるときはサイズを確認しましょう。○○GBや○○MBといった単位は大きいサイズです。
サイズダウンや画像圧縮、画像形式を変更するなど、画像の容量削減をしていきましょう。
画像をリサイズする
5000px × 3000px といったような大きなサイズの画像を使用していませんか。
ここまで大きな画像でなくても、きれいに表示できることがほとんどです。もし大きいサイズの画像を使っている場合は、必要最低限の大きさにリサイズしましょう。
画像のリサイズは、PCに備わっている画像編集機能でも行えますし、オンラインツールでも簡単に行えます。
参考 : 画像サイズ変更ツール｜JPEG・PNG画像を一括で縮小！
参考 : 画像や写真のサイズを変更（拡大・縮小・リサイズ）する : オンラインイメージエディタ | 無料で画像を加工できるサイト PEKO STEP
画像を圧縮
さらに画像サイズを小さくするには圧縮する作業が必要です。
WordPressでは簡単に画像圧縮してくれるプラグインがあります。
EWWW Image Optimizer – WordPress プラグイン
EWWW Image Optimizerは、アップロードした画像を自動的に圧縮してくれるのでとても便利です。
このプラグインは、メディアにアップロードした画像のみ圧縮します。それ以外の場所、例えばテーマの中にある画像などは圧縮対象外です。
WordPress上で圧縮できないものは別で圧縮します。
無料オンライン圧縮ツール
Tinypng
Macユーザー専用の画像圧縮アプリ
ImageOptim
有料圧縮ツール
JPEGmini
画像の読み込みを遅延させる
Webサイトは特に設定しなければ、画像を読み込んで、それが完了したらページを表示するようになっています。
画像の読み込みに時間がかかれば表示されるまでに時間がかかります。
なので先にページを表示させてしまおうという考えがあります。
これは「Lazy Load」というもの。WordPress5.5以降では自動でこの機能がつくようになりました。
ブラウザによっては<img>タグにloading属性を付けることで遅延読み込みを設定できます。（Chrome, Edge）
<img src="example.jpg" loading="lazy">その他、JavaScriptのプラグインで簡単にlazy設定できるものがあるので、そちらもおすすめです。
プラグインを読み込んで、画像要素に「lazyload」というクラスを追加するだけで設定ができます。
【参照】「LAZYSIZES.JS」画像をふわっと遅延表示させる | ライフハック『MONO365 -Color your days-』
画像形式を変更する
画像の形式はどのような画像かによって適切なファイル形式があります。相性を確認して最適化することで画像が軽くなり表示速度アップにつながります。
画像を作るときは主にpngやjpgなどを使用しますが、次世代フォーマットの「WebP」することで表示速度を上げることができます。
WordPressなら画像最適化プラグインを使用することで簡単にWebP変換してくれます。
EWWW Image Optimizer – WordPress プラグイン
その他、コンパイルサイトやGulpといったタスクランナーを使用して変換することもできるので、自分の制作環境によって使いやすいものを使用してみて下さい。
ソースに無駄な記述がある → コードを見直す（ソースの最適化）
ソースはページを構成するコードのこと。
Webサイトが複雑になるほど、不要なプログラムや無駄な記述があったりします。ページには表示されずとも読み込みはされるため、その分表示まで時間がかかります。
できる限り整理されたプログラムコードを書きましょう。
コードに不要な記述がたくさんありませんか？
複数のファイルを読み込ませていませんか？
ファイルの圧縮
不要なものは削除し、CSSやJSなど圧縮できる場合は行いましょう。
複数のファイルを読み込ませている場合、できる限りまとめることでスピードアップすることがあります。
JavaScriptの読み込み場所
読み込み時間がかかるものはCSSやJavaScriptです。ソースの最適化では、主にCSSやJavaScriptのソースをチェックします。特にJavaScriptファイルを見てみましょう。
ブラウザはページにアクセスしたら、まずJavaScriptを読み込もうとします。その読み込みが終わるまで表示はストップ。
この読み込み時間が長ければ表示速度も遅くなります。
こういったことから、JavaScriptは最後に読み込ませるようにします。
JavaScriptの記述は<head>タグ内ではなく、</body>タグ直前に書きます。
JavaScriptによる動作が多い
Webサイトに動きを出してくれるJavaScriptはもはやサイトに必須のものとなっています。
見やすさや楽しさ、操作のしやすさなどメリットがたくさんあるものの、使いすぎると表示するまでの負荷もかかります。
あまりにも表示速度に影響が出るようなら、その動作を無くすか処理時間を短くできるようなコードに修正する必要があります。
YouTubeの埋め込みは速度に影響大
最近ではサイトにYouTubeを埋め込むことが増えてきました。
YouTubeの埋め込みに使用するiframeは表示速度を下げる要因の一つです。
表示速度を上げるためには、読み込みを遅延させる対応が必要です。
読み込む情報量が多い（表示する内容が多い） → コンテンツを整理する
ページにさまざまなコンテンツが含まれているとその分、読み込むスピードが遅くなり表示速度も下がります。
画像や動画、文章盛りだくさんと充実させたページほどそれらが原因となり遅くなっている可能性は十分にあります。
そういったページはデータ量が多いのです。表示速度を考えるなら、省けるものはないか一度見直してみましょう。
コンテンツが大量になったページは整理整頓しましょう。
そのページに設置されているコンテンツは本当にそのページに必要ですか？
コンバージョンに貢献していますか？
上記に当てはまらないものは思い切って削ったり、ページを分けてみるのも一つの手です。
キャッシュの活用
ブラウザには一時的にデータを保存しておく「キャッシュ」という機能があります。一度訪れたページに再びアクセスしたら、その保存していた内容を表示させる仕組みです。
これによって読み込みを短縮できるため、ページ表示の速度が上がります。
プラグインでキャッシュ設定
WordPressのキャッシュ設定プラグインはW3 Total Cache。
W3 Total Cache
プラグインをインストールして設定しましょう。
CDNサービスを利用する
CDN（コンテンツ・デリバリー・ネットワーク）は複数のサーバーでキャッシュをし、ページにアクセスしたユーザーに一番違いサーバーがレスポンスする仕組み。
アクセス負荷を分散して軽くしてくれる。サーバーの負担を軽くすることで表示速度が速くなるというもの
Cloudflareが代表的なサービスです。
Cloudflare
アクセスが集中している → サーバーのスペックを上げる
たくさんのユーザーに見てもらえるようになることは喜ばしいことですが、そんな時にはサーバーのスペックをチェックしておきたいところです。
アクセス数に対してサーバーのスペックが足りていないと、ページの読み込みが不安定になり、最悪の場合サーバーダウンして閲覧不能になります。
サーバーのスペックを上げることで通信が高速化され、表示速度も上がります。
アクセスが多くてページの読み込みがうまくできていないようであれば、とても有効な手段です。
カテゴリー : WEB全般
