【02設定】CloudflareでPageSpeed Insightsのモバイルスコアが46から81に向上

 このブログに導入したCDNサービスの「Cloudflare」。ひとまず、導入が終わり、今度は設定を行う。ここではCloudflareのほかに、オリジナルのWebサーバーを設定する必要があるが非常に簡単だ。

Google AdSenseの自動広告でモバイルのスコアは大幅に悪化

Google AdSenseの自動広告を導入したら、モバイルのスコアが大幅に悪化。しかし、スマホで確認したところ、快適に閲覧できる。

スポンサーリンク
スポンサーリンク

オリジナルWebサーバの設定

 オリジナルのWebサーバーのCMSはWordPressで、プラグインとしてCloudflareをインストールしている。

1.[設定] → [Cloudflare]を開く
2.「Optimize Cloudflare for WordPress」の[Apply]をクリックする

 これだけで、WordPressがCloudflareに適した設定になる。

WordPressの高速化プラグインの設定は?

 WordPress向けには、高速化を実現するさまざまなプラグインが用意されている。このブログでは、「LiteSpeed Cache」を使っているが、おおよそ「キャッシュ」と「チューニング」はオフ、「最適化」と「メディア」はオンにしている。

 大まかに説明をすると、チューニングはCSSとJavaScriptの結合の優先順位、メディアは画像の処理、最適化はCSSとJavaScript、HTMLの結合と圧縮だ。

Cloudflareの設定

 Cloudflareは、CDNサービスであると同時に、オリジナルのWebサーバーが対応していなくてもIPv6化やhttps化などが行える機能がある。また、万が一、大量のパケットが送信されるような攻撃があっても、Cloudflareのキャッシュサーバーが身代わりになり、オリジナルのWebサーバーを守ってくれる。

Cripto(主にhttpsに関する設定を行う)

(オンにする項目)Always Use HTTPS、Authenticated Origin Pulls、Opportunistic Encryption、Onion Routing、Automatic HTTPS Rewrites

 「Always Use HTTPS」と「Automatic HTTPS Rewrites」は、暗号化されていないhttpの通信をhttpsに変更するためのオプション。WordPressのプラグインや.htaccessによってhttpsに切り替えている場合は、これらの設定は外して、Cloudflareに任せるのもいいだろう。

Speed(コンテンツの圧縮や配信の最適化)

(オンにする項目)Auto Minify(JavaScript、CSS、HTML)、Broli、Rocket Loader

 「Auto Minify」はJavaScript、CSS、HTMLの圧縮、「Brotli」はこれらのコンテンツの圧縮方式の指定だ。

 一番、期待出来るのは、「Rocket Loader」。通常、Webページは、JavaScriptを実行しながら、HTMLとCCSを読み込み描画をしている。そのため、JavaScriptの処理が遅いと、Webページの読み込みが遅く見えてしまう。Rocket Loaderは、HTMLや画像などのコンテンツを描画してから、JavaScriptを実行するため、Webページの読み込みが速く感じる機能だ。

We have lift off - Rocket Loader GA is mobile!
Today we’re excited to announce the official GA of Rocket Loader, our JavaScript optimisation feature that will prioritise getting your content in front of your...

Network

(オンにする項目)HTTP/2、QUIC、IPv6 Compatibility、WebSockets、Pseudo IPv4(OFF)、IP Geolocation

 Networkの設定で気になるのは、「HTTP/2」と「IPv6 Compatibility」がOFFにできないという点だ。HTTP/2は、従来のHTTP/1.1よりも効率的にコンテンツが配信できる標準規格。コンテンツの高速配信が確実にできるため、CloudflareではHTTP/2の使用を強くすすめているため、OFFにはできない。

 さらにHTTP/2の次の規格として、HTTP/3にあたる規格が通称「QUIC」だ。Cloudflareを使うと、このQUICでコンテンツが配信できる。なおCloudflareでは、QUICはベーターという扱い。Onにしてもすぐに利用はできない。順番待ちとなり、利用できるようになるとメールが届く。

 また、Cloudflareは、IPv6での動作が基本のためオフにはできない。

Page Rules

 Page Rulesは、Webキャッシュのルールを設定する項目。ここでは、WordPressのダッシュボードはCloudflareをバイパスしてオリジナルのWebサーバーに接続する、コンテンツはすべてキャッシュするという設定がおすすめだ。

WordPressのダッシュボードはCloudflareをバイパスするルール

1.「Create Page Rule」をクリックする
2.「If the URL matches」の項目には、WordPressのダッシュボードのURLを入力する。「*ホスト名/wp-admin/*」というフォーマットだ。このブログの場合「*buytech.today/wp-admin/*」とした。
3.「Then the settings are」では、「Cache Level」を「Bypass」に設定する
4.「+Add a Setting」で条件を1つ追加。「Disable Performance」を選択して、「Save and Deploy」をクリックして登録

すべてのWebコンテンツをキャッシュするルール

1.「Create Page Rule」をクリックする
2.「If the URL matches」は「ホスト名/
3.「Then the settings are」では、「Cache Level」を「Cache Everyting」に設定する
4.「+Add a Setting」で条件を1つ追加。「Edge Cache TTL」を選択して、「4hours」を選び、「Save and Deploy」をクリックして登録

確認

 ダッシュボードをバイパスする設定が上になっていることを確認する。なお、この設定を行ったのち、オリジナルのWebサーバーには負荷がかかる。また、Google Analyticsなどの測定値が上がる。

CDNが配信したコンテンツの通信量は?

 以下のグラフは、Cloudflareを導入して約24時間後のトラフィック。濃い青はCloudflareから配信、薄い青はオリジナルのWebサーバーから配信したコンテンツの通信量だ。4分の3以上のコンテンツはCloudflareから配信されており、オリジナルのWebサーバーからの配信は4分の1程度に抑えられている。

Cloudflareの料金は?

 Cloudflareは、無料、Pro、Business、Enterpriseの4つのメニューが用意されている。特徴的なのは、無料のメニューであっても、転送量やリクエスト数の上限はないこと。上位のプランへの移行やオプション料金を支払うと、より高速なコンテンツの配信、セキュリティ対策、画像の最適化、モバイル向けに最適化された高速化サービスが利用できるという仕組みだ。

Cloudflareのプラン | Cloudflare
お客様の要件に適したプランを見つけましょう。詳しくはこちらをご覧ください。

Webページの読込速度にこだわる理由

 このようにCloudflareを採用すると、Webページの読込速度が速くなる。読込速度を速くする理由は、PageSpeed Insightsのスコアを上げるためでもなく、SEOでもなく、ユーザビリティーを向上させるためだ。

 Cloudflareを導入する前は、リンクをクリックして数秒間、待たないとWebページが表示できなかった。これは、スコアもSEOも関係なく、ストレスを感じるのは確実なことだ。Googleで検索して、Webページを開こうとしたら数秒たっても表示されない。その間にタブを閉じる人も多いだろう。これでは、せっかく作ったコンテンツが台無しだ。

 PageSpeed Insightsのスコアも、現在、有効とされているSEOの手法は、数年たてば朽ちていくのは見えている。しかし、リンクをクリックして、ストレスなくすぐに開けるという技術は、Webがある限り永遠に有効だ。

スポンサーリンク
スポンサーリンク
スポンサーリンク
Web制作ハウツー
buyTech.today