ブログに戻る

フォロー&ご登録

英語のみで利用可能

このページは現在英語でのみ閲覧可能です。ご不便をおかけして申し訳ございませんが、しばらくしてからこのページに戻ってください。

最速のサイトは Fastly で動いています

Leon Brocard

Principal Solutions Architect, Fastly

ページの表示速度は、単なる自慢の種ではありません。直帰率の低下、コンバージョン率の向上、カート内商品数の増加、さらには顧客の信頼にも直結します。サイトの読み込みが遅いと、ユーザーは重要な見出しや画像、行動喚起を見落とすことがあり、最悪の場合は競合サイトへ移動してしまいます。

SpeedCurve がページのメインコンテンツが読み込まれるタイミングを測定する指標、Largest Contentful Paint(LCP)でサイトをランク付けした際、私たちは注目しました。Business Insider、Financial Times、BuzzfeedVox.com などのサイトがトップのパフォーマンスを誇っており、これらはすべて Fastly で運営されています。

それは偶然ではありません。それはアーキテクチャです。何が起こっているのか、そしてなぜそれが重要なのかを解き明かしましょう。

Fastly のサイトが高速な理由

実際のパフォーマンスデータがそれを裏付けています。Webサイトが Cloudflare から Fastly に移行されると、最初の1バイトを受信するまでの時間 (TTFB) が25%、平均で約300ミリ秒短縮されます。また、サイトが Akamai から Fastly に移行されると、最初の1バイトを受信するまでの時間 (TTFB) は平均200ミリ秒(速度が57% 向上)、LCP は300ミリ秒 (17% 高速化)、First Contentful Paint は200ミリ秒改善(18%高速化)されます。しかし、Fastly はどのようにしてそれを実現しているのでしょうか?

その答えは、従来の CDN を超えるプログラム可能なエッジアーキテクチャにあります。従来の CDN ではキャッシュで止まりますが、Fastly を使用するとエッジで何が起こるかをプログラムできます。Instant Purge™ を使用すると、「キャッシュできない」ものをキャッシュでき、キャッシュは150ミリ秒以内にグローバルに無効化されます。つまり、ライブインベントリや最新ニュース、価格変更などの動的コンテンツをキャッシュできるということです。

大規模なセールイベントなどの高負荷時でも、ソフトウェア定義ネットワークは持ちこたえます。多くのルールを柔軟に追加して、Webサイトの各部分の動作とキャッシュをカスタマイズできます。高度な自動再ルーティング機能と自己修復機能により、インターネット環境や予期しないトラフィックスパイクに関係なく、常にネットワーク全体でトラフィックが最適にルーティングされるようになります。

高速化を専門とする Fastly のエンジニアリングチームは、ティア1トランジットとソリッドステートドライブ(SSD)駆動のサーバーを使用し、少ないハードウェアで世界全体に配信できる超高速なネットワークを構築しました。POP は最新のネットワークトポロジーのメリットを活用して構築されており、より多くのデータをキャッシュ内に長時間保持するため、データ送信コストが下がり、レイテンシが短縮されます。私たちが「Fastly」という名を名乗るのには理由があるのです。

Webサイトを高速化するための実践的なヒント

速度向上のために必ずしもフロントエンドの全面的な見直しが必要なわけではありません。特に Fastly をすでに使用している場合、小さな変更から最大のメリットが得られます。すぐに実行して測定可能な利益を得ることができる 6 つの実用的な方法をご紹介します。

  1. エッジで画像を最適化
    画像のサイズを変更し、圧縮し、デバイスに合わせて画像形式を調整します。Fastly の Image Optimizer は、エッジでこれらすべてを処理し、アセットの分散や再デプロイは不要です。

  2. 重要な場所をキャッシュ
    バージョン管理されたアセットには有効期限の長い TTL を使用し、可能な場合は API をキャッシュし、再検証中は失効済みデータを配信しましょう。これによりレイテンシを低減し、オリジンサーバーへの負荷を大幅に削減できます(キャッシュオフロード率が5% 増加しても、オリジンでの負荷を50% 減らせる場合もあります)。

  3. よりスマートに圧縮
    Brotli または Gzip を有効にしますが、1回のみです。静的コンテンツは事前に圧縮し、動的コンテンツは Fastly の動的コンテンツ圧縮機能を使用して、必要なときに必要な分だけ圧縮します。

  4. 必要なときだけ更新
    データが変更された場合やユーザーが要求した場合を除き、再取得は行わないようにしましょう。これにより動作が軽快になり、サーバー負荷も軽減できます。

  5. サードパーティの肥大化に注意コンテンツセキュリティポリシーで新たなドメインを例外として追加するたびに、接続のオーバーヘッドが発生します。可能な限りサードパーティコンテンツはプロキシ経由で配信するか、必須でない場合は削除しましょう。

  6. フォントを最適化
    フォントは見落とされがちですが、適切な注意を払わないと、コンテンツが表示されるまでに数百キロバイトもの読み込みが必要になることがあります。最新の WOFF2形式のみを使用しましょう。主要なブラウザでは10年近くにわたってサポートされています。広くサポートされている可変フォントの使用を検討し、未使用のフォント機能を削除してサイズをさらに縮小してください。

より高速なサイトを一緒に構築しましょう

すでにサイトを Fastly で運用しているなら、一歩踏み込んだ使い方をお試しください。キャッシュヘッダーを確認し、画像アセットを効率化し、不必要なプリロードを削除し、処理時間の使われ方を分析しましょう。Fastly をご利用でない場合は…リーダーボードをご覧になってみてください。

今すぐ当社のチームに連絡して、違いを生む速度の向上を実現してください。