members

members

重いページを改善!今すぐわかる読込速度高速化手法

Tweet

重いページとは

ページが重いという課題は、大きく分けて下記の2つに分けられます。

  • 読み込みの体感速度が遅い(=ファーストビューの読み込みが重い)
  • ページ全体が重い(=いわゆる”ギガ”の消費が激しい)

たとえば、重いコンテンツの筆頭である動画はページに入っているだけでは問題はありません。
ただし、その動画の読み込みに時間がかかるとユーザーの満足度を下げてしまいます。
今回はユーザー満足度を上げるために体感速度を向上させることを目的としてファーストビュー高速化を進めていきます。

読み込み時間が長い理由

読み込みが長い理由は画像が多い、動画など動きが多い、単純に長いなど、理由は多岐にわたります。
ページが重い理由がわからないときは、以下の2つの手法を試して原因を特定してください。

ひとつは何に時間がかかっているかわかるWEBPAGETESTを利用する方法があります。
使い方については、このページの「Webサイトの問題の特定」のセクションが詳しいのでご確認ください。

もうひとつは不要なファイルを探す方法です。Google Chrome 59以降に搭載されているCoverageという機能で見ることができます。
Coverageの使い方についてはこちらを参考にしてください。

読み込み速度改善手法

代表的な手法と、その手法がどの特徴を持ったページに最適なのか合わせて6つご紹介します。

遅延読み込みを導入する

長いページや画像が重いページに遅延読み込みは有効な手段です。
Lazyloadと呼ばれる遅延読み込みをページに導入することで、最初ページ表示に不要なファイルの読み込みを減らすことができます。

Lazyloadの導入はページの記述に設定が必要になります。詳しくはこちらをご確認ください。

画像・動画を圧縮する

画像のサイズと数はページの重さに比例します。ページで画像が1枚しか使われていなくても、全体のページ容量の半分以上を占めている場合が多々あります。
たとえば、画像をページで縮小して表示している場合は思っているよりも読み込み上大きい容量を使用していることがあります。
Squooshなどを用いて画像の圧縮をするとファーストビューだけでなく、ページ全体を軽くすることができます。

ファイルの読み込み順番を入れ替える

WEBPAGETESTで確認したときにファーストビューの表示までにページの後半のファイルまで読み込まれていた場合に最適な手法です。
ブラウザはHTMLファイルの最初に書いてある情報から読み取って表示していきます。
そのため、ページの後半に表示されるコンテンツのスクリプトファイルなどをページを読み終わる直前に移動するだけでも最初の表示が早くなることがあります。

ファイルを読み込むタイミングを変更する

headの中でスクリプトを管理する際は、HTMLの読み込みと非同期にするためにasync、もしくはdefer属性を付与することで解決します。
クリティカルレンダリングパスという手法を用いてHTMLファイル内にCSSやJavaScriptを直接書き込み、必要最低限のファイルを優先して読み込ませることで、高速化を図ることもできます。

余計なファイルを削除する

自分が携わる前から存在するページやテンプレートを利用して制作したページだと、今は使われていないデータがHTMLの中で呼び出されている場合があります。
先ほどご紹介したCoverageで使われていないファイルを特定して削除することで軽くできる場合があります。

AMPに対応させる

AMPとは、ページを検索エンジンにキャッシュしておくことで検索結果から表示する際にのみ高速で読み込ませる手法です。
制約が厳しく、検索以外からの流入時には効果がないなどのデメリットもありますが、ウェブニュースなど検索からの流入が多く、動きの少ないページにはおすすめの手法です。

まとめ

ページの体感速度を遅くしている要因は複合的な理由である場合があります。
ひとつ試してみて改善されない場合でも、他の方法を実践すると劇的に改善される場合もあるので、考えられる方法を試してみましょう。

関連情報

Webサイト運用・運営|サービス|株式会社メンバーズ

コラム執筆

加藤功介

加藤 功介(かとう こうすけ)

第4ビジネスユニットアカウントサービス第5ユニット所属。ウェブサイトの運用ディレクションを担当。サイトのスピード改善や成果向上のためのサイト解析が専門。ExcelやGoogleスプレッドシートが得意。