ツール:Webアプリケーションの応答性ベンチマーク

Web Speed Hackathon Onlineツール
Web Speed Hackathon Online
Table of Content

SEOの専門家ではありませんが、Webの業務を行う上で、SEOや高速化、使い勝手を追求することは当然ながら必要です。

Webの改善ノウハウを提供している企業の調査結果

  • モバイルインターネットユーザーの73%は、ロードが遅すぎるWebサイトに遭遇したと答えています。
  • モバイルインターネットユーザーの51%が、クラッシュ、フリーズ、またはエラーを受けたWebサイトに遭遇したと答えています。
  • モバイルインターネットユーザーの38%が、利用できないWebサイトに遭遇したと答えています。
  • 消費者の47%が、2秒以内にWebページが読み込まれると予想しています。
  • 40%の人が、ロードに3秒以上かかるウェブサイトを見捨てています。
  • ページ応答が1秒遅れると、変換が7%減少する可能性があります。
  • 電子商取引サイトが1日あたり10万ドルを稼いでいる場合、1秒のページ遅延により、潜在的に毎年250万ドルの売上損失が発生する可能性があります。

言われていること

  • 読み込み時間が1秒遅くなるとページビューは11%減少。
  • 顧客満足度は16%低下。
  • コンバージョン率は7%減少。

これをAmazon.comに当てはめると、

  1. Amazonでは、サイトの読み込み時間が1秒遅延することで、16億ドルの収益損失をもたらす
  2. 遅いWebがサービスの利用、消費者の購買意欲に対し、機会損失を与える

応答時間時間する調査結果

詳しくは応答時間時間に関するPDFをご覧ください。

まず、プログラマーやマークアップエンジニアが意識することとして、
Webブラウザの仕組み、インターネットの仕組みなどが必要ですが、それらは他の記事に任せて、参考になるルールだけ少しまとめます。

記述の順番や記述歩法

同じ内容でも、HTMLの記述方法によってパフォーマンスにわずかに差が生じる場合がある。
原則はファイルサイズを減らす。
修飾を最低限に抑える。UI Frameworkの検証を行う。
たとえばjavascriptはページの最後で読み込む、画像のサイズをHTML内にあらかじめ記述しておく等。
また、非同期読み込みや、次世代画像フォーマット(JPEG2000等)も検証する。

CDNの利用CDNの利用

もしあなたが、jQueryをサイトに導入する場合、
ローカルにjQueryを設置する場合と、CDN(コンテンツデリバリネットワーク)を使用する場合の、どちらの応答が速いかtraceroute等で確認してみるといい。
様々な条件、環境下でアクセスするサイト利用者達は、CDNでサーバー負荷の軽減、パフォーマンス向上を得るだろう。

HTTPS/SSLHTTPS/SSL

HTTPS/SSLによる速度劣化について、サーバー側のキャッシュの設定等で、パフォーマンスが改善されないか検討する。

サードパーティ製サービスの利用サードパーティ製サービスの利用

サードパーティ製サービスの呼び出しについて、ボトルネックが非常に大きくなることがある、導入、運用に関しては、パフォーマンス検証を早めに行っておくことを推奨する。

HTML5 WebSocket

WebSocket(ウェブソケット)は、コンピュータネットワーク用の通信規格の1つで、ウェブアプリケーションにおいて、双方向通信を実現するための技術規格です。

従来のWebサイトのアクセスでは、ユーザー操作を契機に、

  • ブラウザからサーバーへのページ要求
  • WebサーバーからDBサーバーへのデータ要求
  • データ応答
  • ページ生成
  • ページ表示

これらの間に、ブラウザの無応答時間が存在していました。


従来のHTTPリクエスト従来のHTTPリクエストWebSocket(ウェブソケット)では、ブラウザとWebサーバーが接続されたままで、再接続が不要、またセッションIDも不要で、データ送信までの時間が短い。
参考: RFC6455 — The WebSocket Protocol 日本語訳


WebSocletのHTTPリクエストWebSocletのHTTPリクエスト### 各ブラウザのWeb Socket対応状況

現在は、多くのブラウザでサポートされている。

こちらで確認できます。
https://caniuse.com/#search=websocket

応答性ベンチマーク確認ツール

AppleのWebKit開発チームが、「Speedometer 2.0」を公開している。

https://browserbench.org/Speedometer2.0/

サポートしているフレームワーク

  • React with Redux
  • Ember.js
  • Backbone.js
  • AngularJS
  • Angular
  • Vue.js
  • jQuery
  • Preact
  • Inferno
  • Flight
  • JES2015 JavaScript
  • Babel
  • TypeScript

Reactや、Angular、Vue.jsなどを技術記事を目にすることも、めずらしくなくなりました。

今後もブラウザと、JavaScript系の技術で、重要になることは間違いありません。

分かれば元に戻れないような便利なものが多いです。まずはヤル!です。

コメント

タイトルとURLをコピーしました