WordPressサイトをCloudFlare+JetPack Photonを用いたCDN配信で高速化する方法

公開日:2018-11-24
最終更新:2018-11-24
※この記事は外部サイト(https://windii.jp/wordpress/cdn-introduction)からのクロス投稿です

はじめに

当サイトの高速化の一環のとして、CloudFlareとJetPack Photonを用いたCDN配信を導入したので、本記事では、CDNの概念とWordPressサイトへの具体的な導入方法をご紹介します。すぐできてユーザ体験を簡単に向上させられるので、まだ導入してない方は必見です。

CDN(Content Delivery Network)とは

CDNとはコンテンツデリバリーネットワーク(Content Delivery Network)の頭文字をとった呼び方です。CDNを導入すると何が良いかは下の図を見てもらえるとわかります。

CDNを導入していない場合

単一の配信元サーバから全てのコンテンツが配信されています。大手サイトからリンクをもらったり、サイトがメディアで紹介されるなど、アクセスが集中すると配信元サーバの負荷が増え、速度低下が起き、最悪の場合サーバダウンしてしまいます。 また、例えば東京に配信元サーバがあり、そのサイトにブラジルからアクセスするなど地理的に遠いアクセスの場合、速度低下が起きてしまいます。

CDNを導入した場合

CDNを導入すると、配信元サーバとは別に多数のCDNサーバからコンテンツが配信されます。複数に分散しているので、急激なアクセス増加が起きても速度低下が起きにくく、もちろんサーバダウンのリスクも低くなります。 また、CDN配信サーバは世界各国にあるのでアクセス元から地理的に近いCDNサーバからコンテンツが配信されるので速度低下が起きにくいです。

WordPressにCDNを導入するには?

CDN(Content Delivery Network)とは で解説したように、CDNを導入することでサイトのレスポンス速度を大幅にアップさせサイト内でのユーザ体験を向上させることができます。では具体的にWordPressサイトにCDNを導入する方法をご紹介します。WordPressにCDNを導入するには以下の2つのサービスがおすすめです。

CloudFlare

CloudFlareとは、CDN配信をするためのサービスです。CloudFlareを使うとCDN配信はもちろん、リソースの圧縮やセキュリティ保護などサイト運営には欠かせない機能を利用することができます。有料版もありますが、無料版で充分なので、本記事では無料版を使います。

JetPack Photon

JetPack PhotonはWordPressプラグインのJetPackに備わっている機能の一つです。こちらは記事内の画像をCDN配信してくれます。

CloudFlareの導入

それでは、CloudFlareの導入方法をご紹介します。

CloudFlareのアカウントを作成してウェブサイトを設定する

まずはCloudFlareのアカウントを作成します。CloudFlareのページに行き、サインアップ を選択してください。

メールアドレスとパスワードを入力してCreate Account を押してください。

登録が完了するとウェブサイトのURLを聞かれるので入力します。

プランを選択します。今回は無料(FREE)のプランを選択します。

しばらくすると、サイトのDNS情報を読み取ってくれます。

画面下部に行くと読み取ったDNS情報が表示されています。確認してContinue を押しましょう。

以下のような画面に遷移します。Continueを押しましょう。

以下のような画面に遷移します。この時点ではまだ not active の状態です。この情報は後で使うので、閉じないようにお願いします。

DNSの設定

ドメインを管理しているサービスにログインして、先ほどの情報を入力します。画像はお名前.comの場合です。

設定が完了したら先ほどのページに戻り、 Recheck Nameservers を押してください。 設定が正しく行えていれば以下のように ステータスがactive になります。

これにてCloudFlareの設定は完了です。

CloudFlareでHTML,CSS,JavaScriptを圧縮する

CloudFlareには、HTML、CSS、JavaScriptを圧縮してくれる機能があります。これは表示速度の向上に大変効果があるので、特に理由がない限り有効化するのをお勧めします。Speedのところをクリックし、HTML、CSS、JavaScriptにチェックをいれて設定しましょう。

以上でCloudFlareの設定は終わりです。本記事での紹介はこれにて終わりですが、他にも色々な機能があるのでぜひ調べて使ってみてください!

Photonの導入

JPhotonはWordPressプラグインのJetPackに備わっている機能の一つで、こちらは記事内の画像をCDN配信してくれます。設定はすごく簡単です。WordPressの管理画面の左メニューから Jetpack を選択して下記のように画像のパフォーマンスのところを有効化するだけです!

以上でWordPressサイトにCDN配信を導入する方法は終わりです!CDNの導入によってサイトを劇的に速くすることができるのでぜひお時間あるときにやってしまいましょう!それでは

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@jhz5vQDxKUNdAVni'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする