ハイパフォーマンスWebサイトという本を読みまして、気になったポイントのまとめです。
詳しく知らなかったな、実務にすぐに取り入れられそうだなという視点でピックアップしました。
バックエンドよりフロントエンド
この本では主にフロントエンドの改善方法が書かれていました。その理由としては、以下のようなことが挙げられます。
バックエンド側の応答時間を半分にしたとき、ユーザーに届くまでの全体の応答時間の削減率は5~10%だそうです。
フロントエンド側の応答時間を半分にしたとき、ユーザーに届くまでの全体の応答時間の削減率は40~45%だそうです。
というわけで、フロントエンドの改善が有効というわけです。
テクニック1:CDNの利用
CDN(Contents Delivery Network)というサービスでして、大規模なキャッシュサーバーみたいなものですね。有名なものでいうとAmazonのCloudFrontとかがあるかと思います。
メリットとしては、アクセスが増えたときにネットワークトラフィックの急増を吸収してくれる、キャッシュの保持をしてくれると言うことが有名です。
しかし、デメリットもあります。
それは他のWebサイトのトラフィックが急増したときも影響を受ける可能性があること、応答時間はアクセスする場所に依存すること、コンテンツサーバーを直接いじれないことがあることが挙げられます。
「応答時間はアクセスする場所に依存すること」は特に注意が必要で、東京でWebテストをしても遅くなかったサイトが、北海道からアクセスすると物理的な距離によって遅い現象が起こることがあります。
必ずしも早くなるわけではなさそうです。
テクニック2:gzipで圧縮する
HTMLドキュメントを圧縮するのはよくあるらしいんですが、スクリプトやスタイルシートも圧縮するのがポイントだそうです。
そして、画像やPDFファイルは逆にgzipで圧縮してはいけません。すでに圧縮されているので、さらに展開するときにユーザー側のCPUを喰ってしまい、動作が重くなり、時間がかかる恐れがあります。
ただ、たまにブラウザがgzipに対応していないことがあるので、Accept-EncordingというHTMLリクエストのヘッダ情報を見て、圧縮したレスポンスにするかどうかを決めて返す必要があります。
テクニック3:リダイレクトは遅い
条件分岐によって飛ばすページを変更するときにリダイレクトをよくすると思います。
ですがリダイレクトすることによって、新たなHTMLを呼ぶ必要があり、そのHTMLが読み込まれるまでレンダリングもダウンロードもできなくなってしまう状況が起きます。
なので、リダイレクトを使うのはなるべく避けるようにしましょう。
テクニック4:スタイルシートは先頭に
スタイルシートは画像やスクリプトの前に読み込むことが鉄則なようです。
ブラウザに少しでも早くロードし終わったコンテンツから表示することによって、ユーザーに視覚的にフィードバックを返し、安心させることができるからです。
Webサイトにリンクしたとき、真っ白なページが続くのと、文字やスタイルが出た後で順に画像が出てくる方が、あれ？と思うことが少ないですよね？
なので、時間がかかる処理があるときにはローディングしてますとわかる表示があるといいですね。
テクニック5:スクリプトは最後に
スタイルシートを先頭にもってくるのとは反対に、スクリプトは最後に持ってくるのが有効です。
HTTP/1.1の規格で、一つのホスト名に対して並列にダウンロードできるコンポーネント数は2つまでと制限されています。
ブラウザによって設定を変更できることもありますが、普通のユーザーはその設定をいじることはほぼありません。
そして、2つしかダウンロードできないところに重たいスクリプトファイルをダウンロードし始めてしまうと先に出す必要がある画像の表示が遅れてしまうことがあります。
こういった細かい設定がユーザーの離脱率を下げる要因になるかもしれませんね。
Ajaxの活用
ページを遷移しないで通信を行うことができるAjax通信。
Ajaxにはパッシブリクエストとアクティブリクエストという2種類のリクエストがあるそうです。
- パッシブリクエスト：将来的な必要性を見越して行うリクエスト
例えばGメールのアドレス帳などは使う可能性が高いので、前もってリクエストしておくみたいな - アクティブリクエスト：ユーザーのアクションに応じてリクエストを発行するリクエスト
Ajaxを用いた有名なサービスにGoogleMapがあるかと思います。
GoogleMapでいうパッシブリクエストは、「東京駅」で検索したときにちょっと動かす分にはスムーズに動く部分。アクティブリクエストは、「東京駅」からいっきに「大阪駅」に動かすと表示がちょっと遅れて動く部分。
と考えるとイメージしやすいかもしれません。
Ajaxを使うときに忘れていけないのは、非同期にすれば必ず早くなる！というわけでもないことです。
アクティブリクエストの場合は、周りのUIをいじることができるけども、結果的にユーザーは表示されるのを待つことがあることを忘れてはいけません。
まとめ
CDNとかAjaxとか知っていて、使っていましたが、メリット/デメリットまで理解できていたわけではなかったため、なるほどと思いました。
また、先輩にこっち使う方が早いよって言われて調べるけどなんで？状態がいくつか解決できました。
Webサービスの開発始めたばかりだよっていうエンジニアにはオススメの本でした。
文字ばっかりですみません。。。