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

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

【01導入】CloudflareでPageSpeed Insightsのモバイルスコアが46から81に向上 3
Cloudflare - The Web Performance & Security Company| Cloudflare
Here at Cloudflare, we make the Internet work the way it should. Offering CDN, DNS, DDoS protection and security, find out how we can help your site.

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

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

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

【01導入】CloudflareでPageSpeed Insightsのモバイルスコアが46から81に向上 9
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.[サインアップ]をクリックする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 これでCloudflareが利用できる。

WordPressのプラグインの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タイトルとURLをコピーしました