スマホサイトを高速化する際に「機種の違い」を考慮すべき理由とは
計算に着目する
2020年10月16日
著者: 竹洞 陽一郎
Webサイトは元々速い
Motherfucking Websiteというサイトがあります。
構成は、HTMLが1つと、Google AnalyticsのJavaScriptが1つだけです。
このサイトは以下の通りに主張しています。
I'm not actually saying your shitty site should look like this.
What I'm saying is that all the problems we have with websites are ones we create ourselves.
Websites aren't broken by default, they are functional, high-performing, and accessible.
You break them. You son-of-a-bitch.あんたのクソサイトがこうあるべきだと言っているわけでじゃない。
俺が言いたいのは、俺達が抱えているウェブサイトの問題は、全て俺達が自分で作ったって事さ。
Webサイトはデフォルトで壊れているわけではなく、機能的で、パフォーマンスが高く、アクセスしやすいんだ。
それを壊したのはお前だ。このクソ野郎。
Webページは、HTML、CSS、画像で作られていれば、非常に高速です。
俳優の阿部寛さんのWebサイトの高速性が、よくインターネット上で話題になります。
このサイトは、HTMLと画像2枚だけで構成されています。
表示速度は、Render Start0.195秒、Document Complete0.151秒と非常に高速です。
このように、WebページをHTMLやCSS、画像だけで作ってしまえば、誰でも高速なWebサイトをつくることが可能です。
Webページが遅くなる原因は「計算」
それでは、世の中の多くのWebページが遅い理由は何でしょうか？
それは、計算処理で時間が費やされるからです。
Webページは、以下の順で遅くなっていきます。
- 動的にHTMLを作る(アクセスがある都度、HTMLが生成されて配信される)
- WebページにJavaScriptを入れており、JavaScriptの計算処理がある
- Webページにアクセス解析、広告、A/Bテスト、MA(Marketing Automation)など、各種サービスのJavaScriptを入れており、WebブラウザにおけるJavaScriptの計算処理、データを送ったり取り寄せたりするサーバ側の計算処理がある
コンピュータは計算機です。
ですから、計算量が大きくなるほどに時間が掛かります。
Webブラウザの処理も「計算」ですから、表示速度が遅いという事は、計算に時間が取られているのです。
コンピュータの性能向上とは、計算処理能力の向上です。
2020年6月にHPLベンチマークによるコンピュータの性能ランキングであるTOP500で1位になった理化学研究所計算科学センターの「富嶽」に代表されるように、計算処理能力が高速化の鍵を握ります。
PCやスマートフォンのCPUも計算能力がどんどん向上しています。
しかし、計算能力は、買ったPCやスマートフォンのCPUの性能で決まってしまうので、増強する事ができません。
ですから、計算の速度を向上させるには、
- 計算量を減らす
- 計算を最適化させる
- 計算リソースを有効活用する
以上3つが鍵を握ります。
画像の容量が遅延要因なのではないか？
「Google PageSpeed Insightsでは、画像の容量を指摘されるから、画像の容量が遅延の要因なのではないか?」
そう思われる読者の方は多いでしょう。
しかし、Google PageSpeed Insightsの診断の設定を知っておいた方が良いです。
Google PageSpeed Insights/Lighthouseのネットワークエミュレーション設定
Google PageSpeed Insightsは、Lighthouseを使ったスコアリングで診断を行っています。
現在のLighthouseのネットワークのエミュレートは以下のようになっています。
- レイテンシ
- 150ms
- スループット
- 下り1.6Mbps/上り750Kbps
- パケットロス
- 無し
これは、4G接続の下位25%と、3G接続の上位25%の接続スピードに該当するとGoogleは主張しています。
この設定は正しいのでしょうか?
Opensignal
2010年イギリスのロンドンでスタートしたOpensignalという会社があります。
「モバイルネットワーク体験の定量化」を専門とする独立したモバイル分析会社です。
キャリア(携帯通信事業者)は、カバレッジマップを作成する際に様々な方法を使用していますが、Opensignalは、キャリアのカバレッジの真の状態を測定するために、ユーザーからのクラウドソーシングされた信号データを使用することで、このプロセスを標準化しています。
OpensignalのアプリをiPhoneやAndroidにインストールしたユーザのデバイスで計測するクラウドソーシングの手法を使っています。
一般的には、ドライブテストという、携帯の信号強度を測定する機器を積んだ車で公道を走って、道路に沿ってカバレッジを測定・モデル化します。
しかし、ドライブテストの場合、時間帯によって変化するモバイル通信の状況を把握することができません。
「その瞬間」の通信状況は把握できるのですが、それが24時間、一週間、一ヶ月という時間の推移で、どのように変化するのかを追うことができないです。
つまり、測定の標本は常に1つしかないのです。
Opensignalの方法は、言ってみれば、数万台のドライブテストが、24時間365日稼働し続けているようなものです。
ダウンロード速度は、端末の性能に大きく左右されますが、実ユーザが体験している速度と考えれば、「モバイルネットワーク体験の定量化」の目的を達しています。
謂わば、モバイル通信のRUM(Real User Monitoring)みたいなもので、ユーザーが体験したネットワークのイメージを構築することができます。