いわむぶろぐ

Webエンジニア@スタートアップ@のんびり綴ってます。

【NewsPicksより】表示速度をあげる手段としてのCDN

記事

newspicks.com

内容

  • スマホアプリやwebサイトのエンドユーザはページの読み込みに3秒以上かかると53%が離脱してしまう
  • 最近になってページの読み込み速度がかなり短縮されたサイトが登場している
    • そのサイトの多くで利用されているのがCDNという技術である

CDNについて

ネットワークの通信の仕組み

一般的にエンドユーザにコンテンツが提供される過程では、

以下の回線経路で通信が行われる

エンドユーザ → ISP* → IX → ISP* → 配信元サーバー
ISP:インターネットサービスプロバイダの略。インターネットへ接続させるサービスを提供する事業者。(例) インターネットイニシアティブ、NTTコミュニケーションズ、KDDI、ソフトバンク
IX:インターネットエクスチェンジの略。ISP間の接続ポイント

問題点

CDNのコンテンツを早く返す仕組み

  • ネットワークの各所にサーバーを設け、サーバー間での通信を行い、速度を改善する
  • エンドユーザに一番近いネットワークにキャッシュサーバを設け、image,css,jsを早く返す

CDNの問題点

  • 各所にネットワークを配置するので、管理コストがかかる
  • コンテンツ配信元が内容を変更した場合、キャッシュサーバへの反映が遅い(数日)

今回のCDNの活用法

  • IXの部分でキャッシュサーバーを配置し、問題となっていたIXを挟むことなくコンテンツを返すようにした
    • CDMで使われるサーバーも上流に位置し、キャッシュの反映を早めた
    • IXに集中するので、台数も減らすことができ、管理コストも抑えられた

感想・意見

  • こういった表示速度もUXの1つとして考えられると思う。
  • ms単位の読込速度の違いでも離脱率は大きく変わるので、ほんのわずかな読込速度の改修でも大きく効果があると思った。ただ、経験上ネットワーク部分の改修はアプリケーションよりも検証含めた改修コストが多くかかるので、費用対効果を吟味することが重要