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に当てはめると、
- Amazonでは、サイトの読み込み時間が1秒遅延することで、16億ドルの収益損失をもたらす
- 遅い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リクエストWebSocket(ウェブソケット)では、ブラウザとWebサーバーが接続されたままで、再接続が不要、またセッションIDも不要で、データ送信までの時間が短い。
参考: RFC6455 — The WebSocket Protocol 日本語訳
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系の技術で、重要になることは間違いありません。
分かれば元に戻れないような便利なものが多いです。まずはヤル!です。
コメント