プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます！

はじめに

当サイトの高速化の一環のとして、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を導入するには以下の２つのサービスがおすすめです。

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の導入によってサイトを劇的に速くすることができるのでぜひお時間あるときにやってしまいましょう！それでは〜

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

riri

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by riri (全て見る)

• Canvaが最高すぎる。使い方を完全ガイド【チュートリアルあり】 - 2019年5月14日
• 人気急上昇中のLaravelをはじめよう！【徹底解説】 - 2019年4月23日
• Laravelの認可を理解して実装してみよう！ - 2019年3月29日