SIerからWeb系に転職したやつの日記

タイトルの通り大手SIerからWeb系に転職した、世間一般的には変な奴のブログです。技術的な成長記録を書いていこうと思います。筆者とともに成長するブログです。今は初心者のような内容しか書いてませんが、そのうち上級者のようなブログになってるはずです。

Webページの表示速度を調査してみる

f:id:regponpon:20180526162151j:plain

めちゃくちゃ久しぶりの更新です。 ちょっと仕事よりもプライベートがバタバタしててなかなか執筆できていませんでした。

前置きはさておき、業務でも使ったページ表示速度の調査についてまとめたいと思います。

ページを表示するためにかかる時間はどれくらいまでが許容されるか

どんなWebサービスなのかにもよりますが、まず一般的によく言われるのが3秒以上かかると多くユーザがそのページから離れてしまうということです。

参考:https://blog.kissmetrics.com/loading-time/?wide=1

この参考ページには、「47%のユーザが2秒以内にページが表示されることを期待している」「40%のユーザがページ表示速度に3秒以上かかるとページから離脱する」と書かれています。

そんな訳ないと思うかもしれませんが、最初のTOPページだけがこの速度だった場合はそんなに離れないかもしれませんが、多くのページコンテンツを持っている場合は、ページ繊維が多いわけで、その度に3秒以上かかっていたら流石にイライラしますよね?

さらにこういった不満を抱いたユーザの79%がサービスを使ってくれなくなる傾向があるようです。そういう悪い評判もすぐに広まります。要は当たり前品質ですね。

前職の会社でも、この問題はかなり悩まされていました。

今のページ速度が早いからといっても、長くサービスを続けていくとソースが複雑化したり、使っている技術がレガシー化したり、機器の老朽化などによって遅くなることだってありえます。 なので、定期的に定量的な観測をしていくことで、ページの表示速度をリリース条件に組み込んだりして、ユーザにとっての当たり前品質を担保してやる活動も重要となってきます。

ちなみに、Googleによると、ページの表示速度はSEOに大きく影響してくるようです。

ページ表示にかかる時間の内訳

まず、ページを表示する速度の調査としてもっとも簡単にできるのが、実際のユーザと同じように、ブラウザからリンクをクリックしてからページが表示されるまでの時間をストップウォッチで計測する方法があります。

ちょっとした時にこういった方法で測定したり、リリース条件の指標にするくらいならこの測定で問題ないかなと思います。 しかし、表示速度が遅い時にこの方法で計測しても、どこで遅くなっているのかわかりませんね。 そこで大事なのが、Webページを表示するのにかかる時間の内訳を大まかに知っておくことです。

まぁこんなサイトにたどり着くような物好きで私よりも知見がある方々ならばいうまでもないかもしれませんね。。。

例として、ブラウザ上からリンクをクリックしてからページが表示されるまでのことを考えるとすると、 ユーザ目線では内訳としては大きく下記の2つがあります。

リクエストを出してからレスポンスを受け取るまでにかかった時間

これはまだイメージがしやすいと思います. ユーザのブラウザからWebサイトのWebサーバにリクエストデータが到達し、処理を行い、ユーザのブラウザで表示するためのデータを受け取り終わるまでの時間です。

イメージとしてはログイン画面をイメージするとわかりやすいと思います。 まず、ユーザはページ上でIDとパスワードを入力します。 そのあと、ログインボタンをクリックします。これが今回はリンクに当たりますね。 すると、ユーザのIDの情報とパスワードの情報がWebサーバに送られます。これがリクエストです。 WebサーバはユーザIDとパスワードが正しいのかデータベースに確認します。 もし正しければ、ログイン情報とログインした後に表示されるページの情報をユーザに送り返します。これがレスポンスですね。

こうやってリクエストとレスポンスが行われてページを遷移するための情報を受け取ります。

これにかかる時間の主なものとしては、 - ネットワークにかかる時間 - Webサーバの処理時間 - データベースの処理時間

が主なものです。 ネットワークについては、Webサーバ側のネットワークは問題ないのであれば、大体はユーザのネットワークの問題だったりしますね。電波が悪いとか。 そのほかは開発者が頑張るところですね。多くのユーザでリクエスト・レスポンスが問題だった時はほとんどの場合、Webサーバの処理に無駄があるか、データベースが最適化されていないかどちらかです。

DOMにかかった時間

DOMとは何か。簡単にいうとページを表示するための情報を受け取ってから、ブラウザが人間が見やすい状態に描画するまでの時間です。

ページを表示するための情報というのはほとんどの場合、HTMLのことです。HTMデータのままだと人間には見にくいですよね。これを綺麗に描画してくれるのがブラウザで、それにかかる時間がDOMにかかる時間というわけです。

計測してみよう

では実際に計測してみます。 計測方法は多種多様で、調査用のWebサービスも多数あり、レポートを作成してくれたりします。

ただ、今回はさっくりと測って実際何にどれくらいかかっているのかを確認したいだけなので、違う方法をとります。

計測で私が最近便利だなと思っているのが、Chrome拡張機能であるPageLoadTimeです。

chrome.google.com

これの何が便利かというと、Chromeにインストールすると自動でページの表示速度とその大まかな内訳を計測してくれるところです。

それのどこがそんなに嬉しいかというと、例えば、ページ表示速度が遅くなったという現象をユーザから報告を受けて調査することになったとします。

まず最初に何から始めますか?色々パターンはあると思いますが、まずは再現確認からしますよね?

ところが何度か再現確認をすると必ずしも遅くなるわけではなく、一定確率で現象が発生したとします。これは実際によくあることですよね。

このときどれくらい遅いのか計測するとしたら、いつ起きるかわからないので再現するまで毎回毎回計測し直さなくてはならないですよね?また、先に述べたページの表示速度を計測してくれるサイトはレポートを作ったりするのでとても時間がかかります。

しかし、PageLoadTimeなら勝手に数値を取ってくれているので、一発目の再現確認でついでに数値まで取れてしまっています。

なんなら、ユーザからの報告で調査した時でなくても、自分で「あれ?今表示遅くなかったか?」と気付いた時ですら計測結果を確認することができます。

これは調査時間を短縮できるのでかなり大きいメリットになりますし、常に気になった時に確認もできます。

では、実際にどのように表示されているのか見てみましょう。

今回ははてなのホームページで確認して見ます。

その前にChromeで以下のサイトにアクセスして、PageLoadTimeをインストールします。

Page load time - Chrome ウェブストア

そしてはてなのホームページにアクセスします。

ページの表示が完了するとアドレスバーの右側にストップウォッチのアイコンがあり、数字が表示されていると思います。

f:id:regponpon:20180526160026p:plain

この数字こそがリンクをクリックしてから実際にブラウザに表示されるまでにかかった時間です。

そして、このアイコンをクリックすると以下のような表が表示されると思います。

f:id:regponpon:20180526160219p:plain

今回は一発目のアクセスだったので色々なDOMの処理がかかり、ページの表示にかなりの時間がかかってますね。

では2回目はどうなるでしょうか。

f:id:regponpon:20180526160459p:plain

・・・。

なんやかんや2回目も結構遅いですね。

冒頭で紹介した参考ページによると「40%のユーザがページ表示速度に3秒以上かかるとページから離脱する」らしいので、はてなのホームページはDOMの処理を改善したほうがいいでしょうね。

ではDOMのどこがボトルネックになっているのか・・・というのは、レポートを出してくれるサイトで調べるといいですね。

GoogleのPageSpeed InsightsやGTmetrixなどが有名だと思います。

PageSpeed Insights

GTmetrix | Website Speed and Performance Optimization

試しにやって見たところ、Googleでは表示速度に問題はないけど最適化が全然できていない、GTmetrixでは表示速度も最適化も全然ダメ(最低ランク)という結果でした。

ざっと見た感じ、画像や広告のファイルが大きすぎるから圧縮したら?っていうのと、スクロールせずに表示されている部分に関して優先的にレンダリングさせるように配慮しようとか、ブラウザキャッシュを使ったらもっと早くなるんじゃないかとかそういったところでした。

こんな感じで調査を進めていくとかなり捗ります。

ちなみにDOMじゃない場合はサーバーサイドの問題なので、Webサーバーのログなどをしっかり見てボトルネックを調査する必要がありますね。

フレームワークを使っている場合は、独自の調査用モジュールがあったりします。(Fuel PHPはありました。configいじるだけで調査できます。詳しくはwebで。)

とまぁざっくりとページの表示速度の調査についてまとめました。

業務で使うというよりはエンジニアとして常に気を配っているといいかもしれません。他のWebサービスの表示速度なんかも気にしながら見てみるといいかもしれませんね。