こんにちは、株式会社カスタマトリックスの寺尾です。
こちらは 新卒社員と学ぶWEBプログラミング 企画になります。
可能な限り毎日更新していくのでご期待ください。
本日は第四回、「WEBサイトはなぜ速いのか」を説明していきます。
普段私たちは世界中のWEBサイトを利用していますよね。しかし、読み込みの遅さにストレスを感じる事は通信環境以外ではあまりないかと思います。
前回はこちら
https://qiita.com/r-terao/items/24db8c8bb75e518bb0f7
第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6
前回のあらすじ
前回学んだ事は覚えていますでしょうか？
- IPアドレスに色々な情報を足す事でどこのサーバのどのファイルを必要としているのかが明確になる
引き続き間に横たわる距離
前回どんなに離れていてもどこにあるか分からなくても、サーバを特定してアクセスする事が可能な事を学べましたが、とはいえ結局データが地球の裏側にあったら物理的にアクセスに時間がかかる事に変わりはありません。
これを解決する画期的な仕組みがWEBには存在します。
データのキャッシュ
キャッシュという言葉を聞いた事はあるでしょうか？
現金ではなく、一時保存データの事を指します。
一度受け取ったサイトの情報をクライアントに一時的に保存する事で、一定期間の内はわざわざサーバにリクエストをせずともサイトを表示する事ができます。
CDN
クライアント側での高速化の工夫としてキャッシュを紹介しましたが、結局最初のアクセスには時間がかかる事は変わりありません。
これを解決するためのサーバ側の工夫が CDN（コンテンツデリバリネットワーク） の利用です。
CDNというのは世界中あちこちに設置されているキャッシュサーバにWEBサイトのデータをコピーし、ユーザに一番近いキャッシュサーバが元サーバ（オリジンサーバ）の代わりにWEBサイトを届ける仕組みです。
この「ユーザに近いキャッシュサーバ」を エッジ 、エッジを利用した技術を エッジコンピューティング と呼びます。
ユーザのアクセスに対して自動的にエッジを判断し適切にアクセス先のサーバを振り分ける事がCDNの最大の仕事になります。
このようにデータを分散する事で、高速化だけでなくデータの喪失やサーバの処理落ちを防ぐ事もでき、非常に効果的にWEBサイトを運用できるようになります。
サイトデータの小型化
そもそも送受信するデータが小さければWEBサイトの速度は当然速くなります。
これを成し遂げるための工夫をいくつか紹介します。
- 遅延ロード（Lazy Load）
今すぐ必要でない分は後からダウンロードする（例えば、文字だけ先に表示して画像は少し遅らす） - SSR/SSG
重たいJavaScriptの処理はサーバで可能な限り終わらせて、軽いHTML/CSSのみ返却する - Minify/TreeShaking
不要な改行や使っていない画像などを省いたり、変数名などを短くしたり、様々な工夫でコードを壊す事なくファイルを小さくする
まとめ
- なるべく毎回データを取りに行かなくて済むようにクライアント側で一時的にコピーを保存する
- 遠くへアクセスせずに済むように、物理的に近くのサーバに予めコピーを入れておく
- そもそもWEBサイトのファイルを小さくする事で通信量を減らす
様々な工夫でWEBサイトは高速にユーザの手元に届くわけです。
さて、ここまでWEBサイトの基盤知識三部作をお届けしました。
英語の名称も多くあり、一度で覚えきる事はきっと難しいでしょう。
しかし、第一回でも書いた通りこの企画は 単語を知る・覚える・学ぶ を目的としています。
まずは「CDN」と聞いたときに なんかどこかで見たことあるぞ！ と思えるようになる事が大事です。一発で「コンテンツデリバリネットワーク」と言えなくてもあきらめる必要はありません。この記事でも他の方の開設でも読めば思い出せるのでそれで良いのです。
次回はついにプログラミング言語に触れて実践的な内容をやっていこうと思います。
おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！