members

members

ページの表示高速化のカギ!パフォーマンステスト方法解説

Tweet

GTmetrix
出典:GTmetrix(https://gtmetrix.com/

 

以前、コラムにてWebページの高速化の重要性とその手法の一つをご紹介しました。

少ない手間でそのWebページに適した手法で表示高速化ができるResource Hintsがすごい

 

世の中では5Gや公共Wifiの整備など、データ通信というものは人間の生活にとても身近なものとなっています。

Webページの表示高速化において重要なのは、そのページのデータ総量ではなく、ページがユーザに見える状態、ブラウザにページが描画(レンダリング)されるまでなので、いかに必要最低限の情報を取捨選択し、優先的にそれらリソースをユーザに届けられるか、ということを考えなければいけません。

以前紹介したResource Hintsは上記観点において、ユーザが次にクリックするであろうリンクを予測して、そのページの情報を先読みさせることができる手法になります。

表示高速化の方法は他にも様々あり、決まった規格に沿ったページ作りを行うAMPや、ファーストビュー(Webページで最初に表示されるエリア)を表示するための情報を最優先でダウンロードさせるような仕組みなどが挙げられます。

方法が様々あるということは、自由度が高いのと引き換えに、目的にコミットする施策をしっかり選定する必要があるということでもあります。

表示高速化は、目的と対象のページの課題を明確化したうえで、どの施策が一番刺さるのか、何がコストパフォーマンスが良いのか、などをしっかり検討したうえで実施することが重要です。

そのためには、表示高速化の方法を知ることも重要ですが、それ以上に対象のページの現状を知ることがもっとも重要です。

本記事では、サイトの表示における問題や課題を調査するためのサービスを通して、どのように調査するのか、調査することで何がわかるのかをご説明します。

 

▼目次

 

Webページの表示パフォーマンスを調べることができるサービス

例えば、とあるページの表示を高速化したいという目標があったとします。

対応方法は様々ありますが、何から手を付けるか考える必要があります。

画像データの軽量化、JavaScriptなどの非同期読み込み、Resource Hintsの導入、AMPの導入……他にもたくさん方法はあります。

しかし、画像データの軽量化は画像は瞬時に表示されるようになるかもしれませんが、それ以外のコンテンツにはあまり影響がありません。また、カルーセルのようなもので画像を複数表示している場合、その処理も併せて検討しなければ意味がありません。

JavaScriptの非同期読み込みは、まずどれだけのJavaScriptファイルを読み込んでいて、それぞれどれだけ時間がかかっているのか、その中から非同期にした際にどれだけのギャップを埋めるのか、検討事項がたくさんあります。

Resource Hintsは対応内容と対象が明確なため、導入コストは軽いですが、ピンポイントなため複数ページをにまたがるような場合は不向きです。

AMPの導入は一番効果がありそうですが、一体どれだけの時間とコストがかかるか、その検討からになります。

このように、正しく実施し正しく効果を出したい場合、何からしていいのか、という状態に陥ってしまいます。

だからこそ、まずは対象のページの今を知ることが重要です。

そのページが抱えている問題がわかれば、おのずと対応は絞られていきますので、その中で様々な条件などと比較したり考慮をすることで、最適な対処法というものが見えてきます。

Webページの表示パフォーマンスはインターネット上で調べることができます。

サービスにも種類がありますが、本記事では「Gtmetrix」というサービスを使用し、そのサービスについてご説明します。

 

Gtmetrixとは

Gtmetrixは簡単にいうとWebページの表示速度テストツールになります。

URLを貼ることでその画面の表示パフォーマンスに関する様々な情報をテストしてくれます。

利用は基本無料で、有料のプレミアムプランもありますが、基本的には無料利用で問題ないです。

https://gtmetrix.com/

 

使用方法

トップページにURLを入力するフォームがあるので、ここにテストしたい画面URLをいれることですぐテストすることができます。

 

GTmetrix

 

無料で作成可能なアカウントを作成し、ログインすることで利用可能なオプションが増えるので、アカウントを作成することをお勧めします。

オプションは様々ありますが、まずはホストするサーバを指定する「Test Server Location」とどのブラウザを想定するかの「Using」を指定すればよいです。

サーバに関しては読み込み時間にかかわってくるため、サーバの物理的な位置情報がわかっていればそこに近い都市を指定するとよいでしょう。

Usingは様々ブラウザを試すことも可能ですが、まずはChromeを指定すればよいです。

 

結果の見方

上記方法でテストを実行すると、しばらくの待機時間の後、結果ページが表示されます。

このページでは様々なスコアが表示され、合わせてそのページが抱える課題が優先度や影響度順に並んで表示されます。

この後、スコアに関する説明と指摘される課題やその推奨対応などを説明しますが、重要なのはページの速度を改善することであったり、定めた目標を達成することですので、すべてを解決しなければいけないわけではないですし、課題の中から対応すべきものを選ぶ、そのための情報を知る、という目的を忘れないようにしましょう。

 

今回は参考にメンバーズのVision2030ページをテストしてみます。

 

結果画面

 

Gtmetrix PerformanceはLight houseというGoogleの提供するSEOチェックツールに基づいたスコアになります。

Gtmetrix Structureは上記とはまた別のパフォーマンスチェック方法によって産出されたスコアになります。

ここではDグレードと表示されており、提示された問題点を対応することでより良くなることが示されています。

Largest Contentful Paint

ページを表示するための主要リソースファイルが読み込まれるまでにかかる時間を示しています。

 

Total Blocking Time

ユーザがページを操作できるようになるまでに、レンダリングブロック(CSSやJavaScriptファイルの読み込みによりレンダリングがブロックされること)されていた時間です。

上記の通り、CSSやJavaScriptファイルはブラウザのレンダリングをブロックして読み込みが実施されます。意図的に対応しない限り、レンダリングブロックは発生してしまうので、初回読み込み量を削減したり、CSSファイルやJavaScriptファイルを工夫するなどでこちらの時間は削減することができます。

 

Cumulative Layout Shift

ページの読み込み中にレイアウトにかかわるリソースファイルを読み込むことなどで、どれだけ画面のコンテンツや要素が移動したり、変化するかの指標になります。

 

続いて「Summary」タブの詳細について掘り下げていきます。

 

パフォーマンスサマリ

 

Speed Visualization

ここでは、ページの表示開始から表示完了までのタイムラインを確認することができます。

TTFBはTime To First Byteの略で、ページを表示しようとして最初のデータを受け取る時間のことです。こちらも改善できればもちろん良いのですが、Webページに依存しないこともあるため、本記事では深く触れないこととします。

FCPはFirst Contentful Paintの略で、最初のコンテンツがレンダリングされたタイミングを示します。最初のコンテンツが何かはページによっても、また読み込んだタイミングによっても異なるので、必ずしも同じコンテンツとは限りません。そのため、とにかく最優先でメインビジュアルを表示したい、という場合は、このFCPでそのコンテンツが表示されるように対応することが求められます。

Time To Interactive(TTI)はユーザの操作受付が開始するタイミングを指します。画面の表示時間とは少し異なり、表示が安定して行われ、ユーザの入力や操作を問題なく処理できるようになるタイミングになります。

ユーザの直感的な印象につながる表示速度も重要ですが、表示され実際に操作可能になるTTIも非常に重要な指標です。

Onload Timeはページの読み込み処理が完了した時間になります。ただし、ページによっては、非同期でページ読み込みが完了した後に何らかのスクリプトファイルを読み込む場合があり、それを検出するために、もう一つ指標があります。

その指標であるFully Loaded Timeは読み込むファイルがなくなり、アイドル状態になってから少し経った時間を示しています。

 

これら要素を確認し、どのタイミングを早めるのかを検討しましょう。

基本的にはTTIを早めるための対応をすることが推奨されます。

 

Top Issues

ページの改善を行うのに、一番役に立つのがこの項目になります。

表示速度に影響を及ぼしている問題について、影響度合いに応じて優先度をつけて一覧にしてくれるので、改善のヒントになります。

今回はメンバーズのVision2030ページをテストした際に、改善すべき問題として検出されたものについていくつか説明します。

 

問題点1

 

Eliminate render-blocking resources

先ほどレンダリングブロックについて説明しましたが、まさにこの項目がそれにあたります。JavaScriptやCSSファイルはブラウザのHTMLレンダリングをブロックします。

つまり、ブラウザはページの表示を停止してCSSやJavaScriptの読み込みを行うということです。このCSSやJavaScriptファイルが多ければ多いほど、ブラウザでページが表示される速度が遅くなることになります。

この解決方法はいくつかあります。JavaScriptでいえば表示までの一連の流れと非同期にファイル読み込みさせる方法があります。JavaScriptの読み込みはダウンロードと実行に分かれており、ダウンロードとレンダリングを並行してレンダリングブロックの時間を抑えたり、実行を遅らせて先にレンダリングしきってしまう、などの対応があります。

CSSに関しては、まずページの表示に必ず必要になる記述をHTMLファイル内に記述してCSSファイルにしない、という方法があります。CSSファイルへの記述内容を極力削減し、特定のデバイスや操作に伴う記述のみにすることで、CSSファイルを軽くし、レンダリングブロックの時間を最低限にすることができます。

ただし、これらの方法は表示高速化にはつながりますが、今度は別の問題を引き起こす可能性があります。

例えばJavaScriptの非同期読み込みに関しては、規定通りJavaScriptが先に読み込まれることで正常に動作する前提である場合、先にHTMLが読み込まれてしまったことによってエラーや意図しない動きを見せることがあります。

CSSはHTMLにインラインで記述することが望ましいと言いましたが、一般的にHTMLファイルにインラインでCSSを記述することは最小限に抑えるべきであり、やりすぎるとファイルが煩雑になります。

表示速度と引き換えにフロントエンド側の負荷が増えたり、運用コストが増加する可能性があるので、改善するにしても、切り分けや取捨選択が必要です。

 

問題点2

 

Combine images using CSS sprites

CSSスプライトと呼ばれる方法で画像をまとめることで、表示速度を改善できるというものです。CSSスプライトというのは、簡単に言うとアイコンや汎用画像が並べられた1枚の画像データを用意し、その画像データ1枚で各種アイコンなどを表示する技術です。

アイコンが複数種類あり、その数画像データがある場合、単純に複数の画像データをダウンロードする必要があります。CSSスプライトによってそれをまとめることで、画像データのダウンロードファイル数を減らすことができます。

 

Serve static assets with an efficient cache policy

ブラウザにはキャッシュという機能があります。
これは簡単に言うと一度取得したリソースファイルをあらかじめ保持しておいて、再度表示する際に活用するというものです。
キャッシュはその保持する期間を設定することができ、それに関する問題となっています。

キャッシュ期間はリソースの種類によって使い分けることで最適化することができます。
例えばCSSファイルやJSファイルはサイトの運用更新などで頻繁に更新されるため、長期間キャッシュを保持してしまうと、新しいリソースファイルを読み込まないようになってしまいますので、これらは短期間に設定すべきです。

逆に、ロゴ画像であったりベースのリソースファイルなど、基本的に変更、更新されることが少ないものは長期間のキャッシュ保持期間を設定すべきです。

それらを見直すことで表示速度の改善が見込めます。

 

まとめ

今回はGtmetrixを用いて、Webページの表示パフォーマンスをテストし、その結果について確認しました。

本記事ではSummaryタブについてご説明しましたが、PerformanceやStructureタブにも改善のための情報がありますので、そちらなども併せて確認をし、多角的に調査を実施することで、改善するための適切な方法を検討することが重要です。

 

また、今回は詳しい説明を省略しましたが、評価の参考となっているスコアやTTIのような指標についても、どのようなロジックで算出されているのかを知ると、より改善のイメージがしやすくなります。

表示が早いページをテストしてみて、早い理由を調査してみるのもよいかもしれません。

ぜひ、本記事をご活用していただければと思います。

 

 

関連記事

Webサイト運用・運営

少ない手間でそのWebページに適した手法で表示高速化ができるResource Hintsがすごい

 

■コラム執筆者

EMCカンパニー BU5-12
寅谷斗夢

業界経験4年目。
中~大規模プロジェクトのディレクターやプロジェクトマネージャーを担当。