こんにちは！
川口のWEB屋さんTEDASKのSeitoです。
SEOの評価で重要視されている一つにページ表示速度があります。
ページ表示速度を上げるためには、スペックの高いサーバーに乗り換えたり、JavaScriptの圧縮、画像の圧縮やWebP化、キャッシュプラグインを使うなどいくつかありますが、今回はプロキシサーバーを利用するという方法を取り上げました。
プロキシサーバーの設定は一般の方には少し作業が難しく感じると思いますので、この記事でやり方を確認した上でやるべきかどうかを判断いただければと思います。
SEOの表示スピード対策の全体的な説明については以下の記事をご覧下さい。
プロキシサーバーサービスのCloudflareとは？
まずCloudflareについて簡単に説明します。
Cloudflareはプロキシサーバーサーバーの一つで、イメージとしてはレンタルサーバーとウェブの閲覧者の間に配置されるサーバーのことをいいます。
このような配置にすることでどんな良いことがあるかというと、中間にプロキシサーバーを配置することで、データ（WordPressやHTML/CSSファイル）が保存されている元のサーバーを隠蔽することができるため、セキュリティが向上されます。
プロキシサーバーは一般的にはこの用途で使われることが多いです。
Cloudflareでは、このセキュリティとしての使い方もPRしていますが、それに加えてCDN（Contents delivery network）というプロキシサーバーにキャッシュしたデータを配信することで、サーバーから直接データを配信するよりも高速で配信できるため、ページ表示速度を上げるためにもおすすめしています。
そういった理由からページ表示速度対策の一つとしてCloudflareを今回取り上げました。
Cloudflareを利用する上での注意
Cloudflareはサイト上のデータをキャッシュする仕組みでホームページの表示速度を向上させるものですが、以下のサイトは専門家に相談した上で利用してください。
- ECサイト
- 会員制サイト
- JavaScriptを利用したフォームがあるサイト
1，2番に該当するサイトでデータキャッシュを利用してしまうと、他のユーザー入力データや個人情報がサーバーに残ってしまうため、情報が意図しない形で漏洩してしまうリスクがあります。
3番は、フォームがうまく機能しなくなっていまう可能性があります。
どちらの場合もキャッシュするページを除外することで対応が可能ですが、今回は細かい設定については触れていませんので、理解している場合のみ上記に該当するサイトでCloudflareを利用するようにして下さい。
ちなみにページの除外方法は最後の「Cloudflare設定後の確認」に一例を説明しています。
また、Cloudflareはあくまでもクラウド上のサービスですので、Cloudflareのサーバーが落ちた場合には当然Cloudflareに接続しているWEBサイトにはアクセスできなくなるので、そういったリスクも知った上で利用しましょう。
Cloudflareの設定の流れと作業時間、必要な知識について
Cloudflareの設定の流れは
- Cloudflareの利用登録とドメインの登録
- エックスドメインでネームサーバーの切り換え
- Cloudflareとの接続確認
- WordPressでCloudflareプラグインの設定※
という流れになります。
全体的な作業時間はネームサーバーが切り替わるのが大体1時間、2時間なのでそれを含めると約3時間～4時間はみておくと良いかなと思います。
今回の記事ではCloudflareの設定を行うにあたって、エックスサーバーで利用しているWebサイトを例にしたいと思います。ドメインの取得先はエックスドメインとなります。
今回の作業をするにあたって、以下の経験があった方が望ましいです。
- レンタルサーバーでドメインを設定した経験がある
- ネームサーバーやDNSの設定を触ったことがある
特に2番の作業に関しては、設定を失敗してしまうとホームページのアクセスが一時的にできなくなったり、直るまでホームページにアクセスできないなどのリスクが伴うため、いきなり本番でやらないで練習してからやるか、周りにいるプロにお願いするなど上手く行かなかったときのリスク管理を必ずしてください。
※今回はWordPressのプラグインの設定も行いますが、もしWordPressではないサイトの場合は4番の作業は不要です。
現在の表示速度のチェック
まずCloudflareにしてどのくらいの変化があるのかを確認したいと思います。
表示速度のチェックにはGoogleの公式サービスで、PageSpeed Insightsを利用します。
今回は私がかなり前に作ったサービスサイトを実験いつかってみたいと思います。
URLを入力欄に貼り付けて「分析」をクリックします。
数秒待つと結果が表示されます。
パフォーマンスが「54」とあまりよろしくない数値が表示されました。
ここからどのくらい変化があるかを実験してみます。
※このサイトはWordPressで作られているサイトで、キャッシュプラグインの仕様や画像のWebP化などの表示スピード対策は一切していないサイトです。
Cloudflareのプランについて
Cloudflareは無料から利用出来るプロキシサーバーサービスです。
Cloudflareの凄いところは、今回の目的の表示速度の向上とセキュリティの向上が無料プランに含まれている点です。
項目の中の「CDN」が冒頭で説明したプロキシサーバーにキャッシュする仕組みでスピード向上が望めます。
項目の中の「DDoS攻撃対策」「WAF」が外部からの攻撃を検知する仕組みで、セキュリティの向上が望めます。これらのCNDやWAFについてはレンタルサーバーによっては有料のオプションとして用意されている場合が多く、無料で利用出来るのが凄いところですね。
有料プランとの違いは、「ロスレス圧縮による画像の最適化」や「（Accelerated Mobile Pages（AMP）」があります。
「ロスレス圧縮による画像の最適化」についてはCloudflare上で画像圧縮を行うものです。
「（Accelerated Mobile Pages（AMP）」はGoogleがGoogleのサーバーにキャッシュするための仕組みがあり、AMPに対応するコードを記述することで、検索結果から表示までの速度が通常よりも早く表示される仕組みです。
以前はAMPで記述されたホームページは、検索結果にAMPのアイコンが表示されてSEOとしても優遇されていた時期がありましたが、現在はアイコンも表示されませんし優遇措置もありません。
ただ、AMP自体の仕組みが無くなったわけではないので、対応が可能であればこうしたサービス経由でできるメリットは大きいです。
その他のプランの違いは、より高度なセキュリティ対策や接続の保証といったものになります。
まとめると、無料でも十分利用価値のある機能が備わっているので、理由が無い限りは無料プランを選んで大丈夫です。
Cloudflareとエックスドメインの設定
Cloudflareの設定
それではCloudflareの設定を行っていきます。
Cloudflareのサイトに移動します。
右上の「サインアップ」をクリックして登録を行います。
Freeのプランの「Webサイトを追加」をクリックします。
メールアドレスとパスワードを設定して、「サインアップ」をクリックします。
アカウント有効化のメールが届きますので、リンクをクリックして有効化します。
Cloudflareのホームの画面に来たら、「サイトを追加する」をクリックします。
「ドメイン名を入力」にドメインを入力して「続行」をクリックします。
プラン一覧が表示されるので、下の方にスクロールして「Free」を選択した状態で「続行」をクリックします。
そうすると、現在のホームページが設置されているサーバーの情報が表示されますので、特に気にせず「続行」をクリックします。
画像の様な画面になるので、一旦ここでCloudflareの画面をこのままにして、ドメインホスティングサービスでの設定に進みます。
今回はエックスドメインを例に設定を進めます。
エックスドメインのネームサーバーの設定
エックスドメインはエックスサーバーでレンタルサーバーを契約した場合は一般的に標準で利用するドメインホスティングサービスです。
もしレンタルサーバーはエックスサーバーでドメインはお名前.comやValueドメインで取得した、という場合はここからの設定はドメインを取得したサービス上で行いますので、エックスドメインの設定を読み替えて設定するようにして下さい。
エックスサーバーのアカウントログインをした後に、「Xserver Domain」のメニューを選択します。
左メニューの「ネームサーバー設定」をクリックして対象のドメインの「選択する」をクリックします。
ここで一度Cloudflareの先程の画面に戻ります。
「3．次のネームサーバーを削除します：」という項目がありますが、これは特に気にせず「4．Cloudflareのネームサーバーを追加します」の先ず上の「クリックしてコピー」をクリックします。
エックスドメインの画面に戻り、「その他のサービスで利用する」を選択して、「ネームサーバー1」にコピー下アドレスを貼り付けます。
またCloudflareの画面に戻って、「ネームサーバー2」も貼り付けます。
画像の様に、二つのアドレスを貼り付け終わったら、「確認画面へ進む」をクリックします。
「設定を変更する」をクリックします。
「OK」をクリックします。
ネームサーバーがこのようになっていればOKです。
Cloudflareの画面に戻り、アドレスをコピーしたその下の方に「ネームサーバーをチェック」ボタンがあるのでとりあえずクリックしておきます。
ネームサーバーの切替とCloudflareが接続するまでに大体早くて1時間以内で、掛かるときは2，3時間はかかると思ってください。
確認中にCloudflareのSSLの設定も行っておきます。
左メニューの「SSL/TLS」→「概要」をクリックします。
初期設定では「フィレキシブル」に設定されている化と思うので、「フル」に切り換えておきます。
この設定を行わないと、サイトにアクセスできない可能性も出てきますので注意して下さい。
この後、Cloudflareとの接続が確認出来ると「[Cloudflare]: maycho.com は Cloudflare Free プランで有効になりました。」というメールが届きますので、設定自体は上手く行ったと分かります。
Cloudflareの左メニューの「Webサイト」をクリックしてホームに移動します。
すると登録したドメイン名の下に「アクティブ」となっていると思うので設定は無事完了です。
その時に念のために、ドメインにアクセスしてページが表示されるのを確認して下さい。
もしメールが届かなければ、ネームサーバーの設定が上手く行っていないので、ネームサーバーの設定を見直してください。
有効化のお知らせのメールが届いてから約1時間後くらいにCloudflareの左メニューの「分析とログ」→「トラフィック」をクリックします。
もし上手く行っていて、アクセスがあれば画像の様にリクエスト数に数値が反映されているはずです。これはCloudflareと接続が上手く行っている証拠です。
ここまで上手く行っていのを確認したら、最後にWordPressでの設定を行います。
WordPressの設定
CloudflareではWordPressで利用しやすくするためのプラグインが用意されているので、インストールして設定をしていきます。
WordPressのダッシュボードにログインして「プラグイン」→「新規プラグインを追加」をクリックします。
「Cloudflare」を検索窓に入力して、Cloudflareを見つけたら「今すぐインストール」をして「有効化」までします。
プラグイン一覧に移動したら「Cloudflare」の「Setting」をクリックします。
アカウントはすでに持っているので「here」をクリックします。
「Enter Cloudflare API Credentials」の画面に来たら、この画面のままにしてCloudflareの画面に移動します。
画面右上の「アカウントアイコン」をクリックして「マイプロフィール」をクリックします。
その後に、左メニューの「APIトークン」をクリックします。
画面下の「APIキー」の「Global API Key」の「表示」をクリックします。
Cloudflareのログイン時に使うパスワードを入力して「表示」をクリックします。
「お客様APIキー」が表示されるので「クリックしてコピー」をクリックしてコピーします。
APIの取得が終わったので、WordPressの画面に戻ります。
WordPressのCloudflareプラグインの設定画面に戻ったらCloudflareでログインする時の「メールアドレス」と先程コピーしたトークンを「Global API Key Or API Token」に貼り付けて「Save API Credentials」をクリックします。
問題が無ければ設定画面に移動します。
Homeの「Apply Recommended Cloudflare Settings for WordPress」の「Apply」をクリックします。
「Settings」メニューをクリックして「Always Online™」を「On」にします。
この二つの設定以外は、有料のプランになるのでWordPressでの設定は以上になります。
これで、Cloudflareに関する全ての設定は完了となります。
Cloudflare設定後の確認
Cloudflareの設定が全て完了しましたが、この後に一通りページが表示されているか確認が必要です。
重要なページとして
- トップページ
- お問い合わせページで送信の確認
- 検索結果表示ページ（ブログ検索機能がある場合）
- 固定ページ
- 投稿ページ
- カテゴリーページ
といった優先順位で通常使っているブラウザと、シークレットモードで表示の確認を必ずする用にして下さい。
もし、ページの崩れなどがあった場合は、キャッシュするページの除外設定を行います。
キャッシュページの除外設定方法
Cloudflareの左メニューの「ルール」→「ページルール」をクリックします。
「URL」には対象となるページのURL（https抜き）を入力します。
「設定を選択する」では一つ目は「キャッシュレベル」→「スキップ」を選択します。
二つ目は「パフォーマンスを無効にする」を選択します。
設定が終わったら「ページルールを保存およびデプロイ」をクリックして、設定を完了します。
設定が完了するとページルールに設定した内容が表示されますので、確認しましょう。
これらの設定は、そのページのキャッシュや圧縮などを行わない設定ですので、ページが崩れた場合などの対処方として試してみてください。
再度表示速度のチェック
Cloudflareの設定が完了された後に改めてページスピードを確認すると「66」となりました。
劇的なアップとはいきませんでしたが10以上はスコアがあがりましたね。
セキュリティ対策も兼ねているので使うほうがメリットが大きそうですね。
まとめ
今回はCloudflareの接続とWordPressの設定を行ってきました。
ネームサーバーを切り換える作業があるため、難易度が高めですが導入すればパフォーマンス改善にメリットがありました。
今回の例ではエックスドメインでのネームサーバーの設定を行いましたが、もちろん他のドメインホスティングサービスでも可能です。
ネームサーバーの切替でホームページが表示されなくなるのが事業的にリスクがある場合は、プロの方にお願いするのがおすすめです。
TEDASKでもCloudflareの設定を始め、スピード対策のご相談に乗っていますので、お気軽にご相談ください。
以上、「CloudflareでWordPressの表示速度を上げる対策方法」でした！
WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです！
コメント