新規投稿のお知らせを受信されたい方は、サブスクリプションをご登録ください:

WordPressからはじまるプラットフォーム自動最適化の紹介

2020/10/02

8分で読了

今日は、Webサイトの静的コンテンツの提供にプラスした新しいサービスであるプラットフォーム自動最適化(APO)サービスをご紹介いたします。このローンチにより、当社はWordPressをサポートします。WordPressは、最も人気のあるWebサイトホスティングソリューションで、Webサイト全体の38%のシェアを誇ります。以下に詳述するとおり、当社のテストでは、最初のバイトまでの時間(TTFB)が72%削減され、First Contentful Paintが23%削減されており、さらにSpeed Indexが13%削減されました。この結果は、ほぼすべてのWebサイトコンテンツがCloudflareネットワークから提供されたときに、デスクトップユーザーの90%で得られた傾向です。つまり、Webサイトの訪問者にとっては、最初のコンテンツがより早く表示されるだけでなく、すべてのコンテンツの表示時間がより早くなるということです。

WordPressのプラットフォーム自動最適化を使用すれば、顧客が、共有ホスティングの輻輳、遅いデータベース検索、プラグインの不具合のような一般的な問題によって引き起こされる遅延に悩まされることはありません。このサービスは、WordPressを使用しているすべての方にご利用いただけるようになりました。

プラットフォーム自動最適化の価格設定

WordPressのAPOは、Freeプランのお客様は5ドル/月でご利用いただけます。Pofessional、Business、Enterpriseプランのお客様は追加料金なしでご利用いただけます(利用料金なし、予想外の料金なしで、スピートをお楽しみいただけます)。

使用開始手順

最も簡単にAPOを始める方法は、WordPressアドミンコンソールからです。

1. はじめに、  WordPressのWebサイトにCloudflare WordPressプラグインをインストールするか 、最新バージョン(3.8.2以上)にアップデートしてください。

2. まだ実行していない場合は、プラグインを認証して(手順はこちら)、Cloudflareに問い合わせます。

3. Cloudflareセクションのホーム画面から、プラットフォーム自動最適化をオンにします。

Freeプランのお客様は、最初にCloudflareダッシュボードに移動してサービスをご購入ください。

このサービスを構築した理由

Cloudflareは、ボタンをクリックするだけでお客様が抱える難題を解消できる機会を逃しません。常時一貫して高速なWebサイトを運営するのは困難です。多くの企業は、自社サイトのために、複雑で高価なパフォーマンスソリューションに費やす時間もお金もありません。資金と時間があったとしても、可能な限り最高のパフォーマンスを得るためには、特別な注意を払う必要があり、それは非常にコストがかかることもあります。しかし、速いWebサイトを持つために、複雑である必要はありません。コンテンツが顧客に近ければ近いほど、サイトパフォーマンスは向上します。静的コンテンツキャッシュは、画像、CSS、JavaScriptなどのファイルに対してこれを行っていますが、これは一部に過ぎません。動的コンテンツは依然としてオリジンからフェッチされ、コストのかかるラウンドトリップと追加の処理時間が必要です。動的コンテンツと静的コンテンツの詳細については、ラーニングセンターをご覧ください

WordPressは、世界で最もオープンなプラットフォームの一つですが、それは、プラグインやその他のソースのために、パフォーマンスを低下させる危険性が常にあることを意味します。必要であっても、その危険性を正確に指摘し、解決することは難しいかもしれません。プラットフォーム自動最適化サービスでは、既存のホスティングプロバイダーを変更することなく、10ミリ秒以内に、インターネットに接続している先進国人口の99%に到達するように、お客様のWebサイトを当社のネットワークに配置します。つまり、ほとんどのリクエストに対して、みなさまのお客様はオリジンにアクセスする必要がなくなるため、コストのかかるラウンドトリップの多くとサーバーの処理時間が短縮されます。これらの最適化はエッジネットワーク上で実行され、クライアント側で追加のJavaScriptが実行されないため、レンダリングや双方向性にも影響しません。

Webパフォーマンスの測定方法

Webサイトのパフォーマンスを評価することは困難です。追跡できる指標の種類や数が多く、どの指標が最もユーザー体験を有意義に説明するかについて、いつも明らかであるとは限りません。すでに新しいSpeedページについてブログでも述べたように 、当社では、お客様のために、Webパフォーマンスの測定方法をできるだけシンプルにするために、webpagetest.org のインフラストラクチャを使用してテストを自動化し、視覚的/数値的に結果を一か所に表示するように努めています。

Tests your website's performance and provides visual and numerical metrics along with recommended optimizations

可視化することにより、サイトの訪問者が、サイト上で目にするものを明確に把握できます。また、Critical Loading Times 、パフォーマンスを判断するための最も重要な指標を提供します。サイトのパフォーマンスの確認に加えて、当社では、パフォーマンスをさらに高めるための推奨事項が記載されたリストも提供しています。WordPressをご利用のお客様には、プラットフォームの自動最適化を使用してサイトをテストし、サービスを利用することで得られる利点を推定します。

プラットフォーム自動最適化のメリット

Cloudflareでは、パフォーマンスの改善とはなにかを調べるために、WordPress上で実行されている500以上のCloudflareのお客様のWebサイトでAPOをテストしました。この結果から次のことが明らかになりました。

テスト結果

指標 パーセンテージ Cloudflareのベースライン APOの効果 改善値(%)
Time to First Byte (TTFB) 90th 1252 ms 351 ms 71.96%
10th 254 ms 261 ms -2.76%
First Contentful Paint
(FCP)
90th 2655 ms 2056 ms 22.55%
10th 894 ms 783 ms 12.46%
Speed Index
(SI)
90th 6428 5586 13.11%
10th 1301 1242 4.52%

注:この結果は、ランダムに選択され、Cloudflareによってキャッシュされた、505のWebサイトのテスト結果に基づいています。テストには、米国サウスカロライナ州のWebPageTestと次の環境を使用しました:Chrome、ケーブル接続時の速度。

最も重要なのは、APOを使用すると、サイトのTTFBが高速かつ一貫性のあるものになるということです。CloudflareのエッジからHTMLをオリジン処理時間ゼロで提供するため、エンドユーザーには、最初のバイトを一貫して高速に提供できるようになります。読み込みが遅い場合、WordPressのオリジンは、HTMLの構築時やこれを訪問者に返す際に、遅延に悩まされることになります。APOは、読み込みで生じる差異を無くし、TTFBを一貫して400ミリ秒未満で提供できるようになります。

さらに、TTFBの高速化とサードパーティ製フォントの追加キャッシュの間でも、パフォーマンスの向上がみられました。この結果は、テストしたサイトのFCP(First Contentful Paint)とSI(Speed Index)の両方、そして、最も速いサイトと最も遅いサイトの両方でみられました。パフォーマンスの向上の一因は、TTFBの削減から自然に生じたものです。なぜなら、TTFBから削減したミリ秒単位の時間は、他の指標の数ミリ秒の向上につながるからです。追加のサードパーティフォントをキャッシュすることで、そのコンテンツの取得にかかる時間を短縮できます。フォントがあれば、多くの場合、テキストのレンダリングのための描画(paint)をブロックすることができます。これにより、ページの描画速度を向上させ、Speed Indexを改善することができるのです。

当社は、Kinstaのメンバーに依頼して、APOを試してもらいました。KinstaはWordPressの専門知識が豊富なので、感想を聞かせてほしいとお願いしたのです  。WebサイトコンテンツマネージャーであるBrian Li氏が、東京でホストされているWebサイトで、世界中から一連のテストを実施しました。Li氏がどんなことをしたのか、その結果について説明してもらいましょう。

Kinstaでは、WordPressのパフォーマンスを重視し 、大切に考えています。ですから、CloudflareがWordPressの新しい自動プラットフォーム最適化(APO)サービスのテストをはじめようとしたとき、当社は興味津々でした。

新しいサービスをテストする際に行ったことは以下の通りです。

東京にテストサイトを設置しました。 東京は、Kinstaのお客様が利用可能な24か所の高性能データセンター拠点のうちの1つです 。

CloudflareのAPOがある場合とない場合を比較するために、世界中の6つの異なる場所からスピードテストをいくつか実行しました。

すばらしい結果が得られました!

Cloudflareのエッジネットワークに、 静的HTML をキャッシュすることで 、パフォーマンスが70~300%向上しました。予想通り、東京から最も離れた試験拠点では、負荷時間が最も短縮しました。

WordPressサイトが、CSS、JS、画像のみをキャッシュする従来のCDNを使用している場合、Cloudflareの WordPress APOにとても簡単にアップグレードできます。これにより、お客様はサイトの競争力を維持したまま、現代のJamstackやデフォルトでエッジにある静的サイトとも互角に渡り合えます。

ブライアンのテスト結果は次の画像にまとめられています:

ページ読み込み速度の比較:東京でホストされているWebサイトを世界6か所から読み込む際の速度を、Kinsta、KinstaとKeyCDN、KinstaとCloudflare APOとで比較した場合。

KinstaによるAPOテストで示された明確なメリットの1つは、訪問者が世界のどこにいても、サイトには一貫したパフォーマンスが提供されることです。APOでは1秒以内のパフォーマンスが一貫してみられるのに対し、他のセットアップには2~3秒のロード時間を要することから、グローバルな顧客を擁する場合、APOがすべての訪問者の体験を向上させることが明確に示されました。

プラットフォーム自動最適化の仕組み

プラットフォーム自動最適化は、Cloudflare Workers の力を利用して動的コンテンツをインテリジェントにキャッシュできるようになったことにより実現したものです。動的コンテンツをキャッシュすることで、エッジネットワークからWebサイト全体にサービスを提供することができます。「静的サイト」のようなものを想像してみてください。ただし、静的サイトを構築または維持する作業は必要ありません。お客様は、同じ方法でWebサイト上のコンテンツを管理/更新し、パフォーマンスのための大仕事は当社に任せることができます。当社のネットワークから静的コンテンツと動的コンテンツの両方を提供できるということは、たいていの場合、オリジンリクエストやオリジンの処理時間がなくなるということです。これは、通信のすべてが、ユーザーデバイスとエッジの間で発生することを意味します。動的コンテンツのために通常必要とされる、エッジからオリジンまでの多数のラウンドトリップを減らすことで、このサービスを非常に効率的なものにできます。まずはじめに、訪問者がWordPressサイトを読み込むと通常はどのような手順を経るのかを見てみましょう。

一般的なサイト訪問者のシーケンス図‌‌

通常のリクエストフローでは、Cloudflareは、画像、CSS、またはJSなど、コンテンツの一部をキャッシュすることができ、他のリクエストはコンテンツを取得するためにオリジンまたはサードパーティのサービスのいずれかに送信されます。最も重要なのは、サイトのHTMLを取得する最初のリクエストはオリジンに送信する必要があり、これがTTFBの典型的な原因になるということです。これは、クライアントが HTMLを受け取り、それを解析して後続のリクエストを行うまでは、他のリクエストが行われないためです。

同じサイトへの訪問で、APOが有効になっている場合。

APOが有効になると、オリジンへのすべての通信が不要になります。TTFBは大きな恩恵を受けます。最初のホップがCloudflareのネットワーク上で開始/終了するためです。これは、ブラウザがWebページの取得と描画の作業をより早く開始することを意味します。つまり、描画の機会が早期に発生します。最後に、サードパーティのフォントをキャッシュすることで、Cloudflareのネットワークを離れ、ユーザーにテキストを表示するための時間を延長する必要があった、追加のリクエストが削除されます。多くの場合、Webサイトはサードパーティのドメインでホストされているフォントを使用します。これにより、オリジンでホストすることで発生する帯域幅の費用が節約されますが、フォントがホストされている場所によっては、フォント取得がコストのかかる作業になります。フォントをホストし直し、当社のキャッシュから提供することで、残りのコストのかかるラウンドトリップの1つを減らすことができます。

WordPress用のAPOを使用すると、データベースの輻輳や、顧客の体験を劣化させてしまう扱いにくいプラグインを使用しなくてもよくなります。これらのメリットが、すでに高速なTLS 接続時間、および HTTP/2 などの業界をリードするプロトコルサポートに加わることから、当社が、Webサイトの接続/配信のために、最も効率的で最速の方法をお客様に提供できることがわかります。

認証されたセッションをサポートするWordPressサイトをご利用のお客様に対して、当社が認証されたユーザーからコンテンツをキャッシュし、第三者に提供することはありません。ご心配は無用です。当社では、認証されたユーザーには、標準のWordPressとWooCommerce Cookieのキャッシュをバイパスします。これにより、特定のユーザー用にカスタマイズされたコンテンツは、そのユーザーのみに表示されます。このサービスはこれまで、ビジネスレベルのサービスをお申し込みのお客様にご利用いただいておりましたが、APOを有効にするWordPressのお客様にもご利用いただけるようになりました。

お客様は疑問に思われるかもしれません:「確かにすばらしそうだが、サイトのコンテンツを変更した場合はどうなるのか」と。このサービスは、当社のWordPressプラグインと連携して作動するため、お客様が変更を行った場合、当社には変更がわかり、Cloudflareのエッジにあるコンテンツを早急にパージし、新しいコンテンツでそれをリフレッシュすることができます。プラグインをインストールすると、コンテンツの変更を検出し、自動キャッシュパージを使用して世界中のエッジネットワークを更新します。このリリースの一環として、WordPressのプラグインを更新しました。そのため、APOの使用の是非に関わらず、お客様はすぐに最新バージョンにアップグレードする必要があります。お客様が、当社のWordPressプラグインを使用されない、または使用できない場合、APOは同じパフォーマンスのメリットを提供しますが、コンテンツが再リクエストされた場合は、最大で30分間古いコンテンツを提供する場合があります。

このサービスは、ブログ記事(こちらとこちら)に記載したプロトタイプ作品に基づいて構築されました。サービスの技術的な側面と、Cloudflare Workersからプラットフォーム自動最適化サービスを構築した方法についての詳細は、ブログ記事をご参照ください

WordPress 本日発表、他のプラットフォームは近日公開予定

本日の発表は、WordPressのサポートに焦点を当てていますが、これはスタートに過ぎません。当社は、Webホスティングに使用される他の一般的なプラットフォームに対しても、同じ機能を提供する予定です。お客様がプラットフォームを運営していて、当社と共同して全顧客のために改善をご検討される場合は、ぜひお問い合わせください。お客様がWebサイトを運営されている場合は、新しくプラットフォーム自動最適化の適用を希望されるプラットフォームをお知らせください。

Cloudflareは企業ネットワーク全体を保護し、お客様がインターネット規模のアプリケーションを効率的に構築し、あらゆるWebサイトやインターネットアプリケーションを高速化し、DDoS攻撃を退けハッカーの侵入を防ぎゼロトラスト導入を推進できるようお手伝いしています。

ご使用のデバイスから1.1.1.1 にアクセスし、インターネットを高速化し安全性を高めるCloudflareの無料アプリをご利用ください。

より良いインターネットの構築支援という当社の使命について、詳しくはこちらをご覧ください。新たなキャリアの方向性を模索中の方は、当社の求人情報をご覧ください。
日本語Product News (JP)Birthday Week (JP)Speed & Reliability (JP)WordPress (JP)Automatic Platform Optimization (JP)

Xでフォロー

Cloudflare|@cloudflare

関連ブログ投稿