【01導入】CloudflareでPageSpeed Insightsのモバイルスコアが46から81に向上

 このブログは、リンクをクリックしてからページが表示されるまで3秒から7秒かかることがあった。この問題を解決するためにCDNの「Cloudflare」を試したら、1秒から2秒程度に短縮できた。また、GoogleのWebページのベンチマーク「PageSpeed Insights」にて、モバイルのスコアが46から81にまで向上した。

Cloudflare - Webパフォーマンスとセキュリティを追求する企業 | Cloudflare
Cloudflareはインターネットを最適化します。Cloudflareが提供するCDN、DNS、DDoS攻撃対策、セキュリティサービスで、サイトをどのように改善できるかを実感してください。
スポンサーリンク
スポンサーリンク

最終的には、PageSpeed Insightsのモバイルスコアが46から81に向上

 Webページの表示速度の1つの目安として、Googleが提供するWebサイトのベンチマーク「PageSpeed Insights」がある。Webページを開く時間を測定しスコア化するというものだ。これによると、Cloudflareの導入前は、パソコンは96でモバイルは46だった。パソコンは“速い”とされているが、モバイルは“遅い”となる。そのため、Cloudflareを用いてこのスコアを改善した。

 なお、Cloudflareを試したのは、Webサーバーに「LiteSpeed」を採用したホスティングサービスMixhost。このスコアの向上は、あくまでもこの環境での参考であるため、これより高速化する可能性もあるが、それほど効果がないことも考えられる。

PageSpeed Insights

CDNの導入とCloudflareが利用できる環境は?

CDNの導入は焦らなくてもいい

 Webページの読み込みが早くなるなら、すぐにでもCloudflareを導入したいだろう。しかし、CloudflareをはじめとしてCDNを導入する適切なタイミングがある。それは、Webサイトのデザインや広告がある程度、固定化してからだ。

 Webサイトの開設当初やWordPressのテーマを変更した直後は、デザインや広告の位置を変更する事が多いため、この時点では導入しない方がいいだろう。

 というのも、CDNはキャッシュサーバーがWebページのコピーを保持するという仕組みだからだ。オリジナルのWebページを変更しても、場合によってはCDNのキャッシュが更新されるまで時間がかかる。強制的な更新はできるが、その間はWebページを開く時間がかかったりする。

 個人のブログ程度なら、CDNの導入はブログの記事が10でも100でも手間は変わらない。焦らず、デザインが固定化した時点でCDNを導入する事をおすすめする。

Cloudflareが利用できる環境は?

 Cloudflareは、DNSの仕組みを利用することで、ユーザーからのリクエストをキャッシュサーバーに誘導している。そのため、独自ドメインを取得して運営しているWebサイトであることが必須だ。

 また、このドメインに設定されているネームサーバーのアドレスを書き換えるという作業がある。この作業を行うユーザーインターフェースは、ドメインを登録したサービスにより異なる。これが理解できないとCloudflareの導入は難しいだろう。

 この2点がクリアできるなら、Cloudflareの導入は簡単だ。

Cloudflareの導入方法

CloudflareにWebサイトを登録する

1.[サインアップ]をクリックする

2.ここからは表記が英語になる。[Email]と[Password]を入力して[Create Account]をクリックする

3.[Site]にCloudflareを利用したいWebサイトのURLを入力して[Add Site]をクリックする

4.WebサイトのDNSに関する情報を自動的に収集する。[Next]をクリックする

5.プランを選択する。まずは無料の[FREE]を選択して、[Confirm plan]をクリックする

6.無料プランだと1つのWebサイトしか利用できないという説明がある。[Confirm]をクリックする

7.3.で自動的に収集したDNSの情報が表示される。画面をスクロールして[Next]をクリックする

8.Cloudflareで指定されたようにドメインの登録サービスにてネームサーバーを書き換える。

9.ネームサーバーの設定を書き換えてもCloudflareに伝わるには時間がかかる。適時[Re-check now]をクリックする

 これでCloudflareが利用できる。

WordPressのプラグインの設定

 Cloudflareは、WordPress向けのプラグイン「Cloudflare」を用意している。このプラグインを使うと、CloudflareとWordPressが連携。ワンクリックでWordPressをCloudflareに最適な設定に変更できる。そのほかには、WordPressでデザインなどを変更した際に自動的にCloudflareに通知するなどの機能がある。

1.WordPressにてプラグインの「Cloudflare」をインストールして有効化する

2.WordPressの[設定] → [Cloudflare]を選択する

3.「Enter Cloudflare API Credentials」にてメールアドレスと「API Key」を入力する。このAPI KeyはCloudflareのWebサイトから取得する。[Home] → [buytech.today](API Keyを取得したいWebサイト) 「Get your API key」をクリック

4.API Keysの[Global API Key]の[View]をクリック

5.[Password]にCloudflareにログインするためのパスワードを入力。[I’m not a robot] → [View]をクリック

6.「Your API Key」のAPI Keyをコピーする

7.WordPressのダッシュボードに戻り、[Have an account already? Sign in here.]の[here.]をクリック

8.「Enter Cloudflare API Credentials」にて[Email]にはCloudflareで登録したメールアドレスを、API Keyには先ほど取得したGlobal API Keyを[API Key]に入力して[Save API Creentials]をクリック

 これだけでもある程度、Webサイトの読み込みが早くなる。さらに早くするためにCloudflareの設定が必要だ。詳しくは設定編で。

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