SEO

【WordPress高速化プラグインで簡単!】CDN設定したらめちゃ早くなった話

あなたのWebページの読み込みは早い?あなたのページはユーザーにとって親切なページですか?
常にGoogleはあなたのWebページのことを観察しています。

僕もCDN設定の仕方がイマイチわからないまま、WordPressを触っていました。基本的にLPを作っているとはいえ、Webページを作っている側の人間としては失格だと思います。

今日はWordPressのプラグインを使用することで、Webページの読み込み速度も上がり速度数値も一気に上がったのでその方法を大公開しようと思います。

✔︎こんな人に記事を読んで欲しい
・CDNってそもそも何って人
・SEOを少しでも上げたい人
・初心者ブロガーさん

それでは、どのように数値をここまで変えていったのか実際にCDNの意味などを踏まえて解説していきます。

そもそもCDNとは?

CDNとは(コンテンツデリバリーネットワーク)の略でAkamaiというアメリの大手ネットワーク会社が1990年代に先陣を切って提唱したコンテンツを配信するネットワークのことを指します。

CDNってWordPressをはじめた方なら聞くこともあると思いますが、最近流行りだした技術などではありません。

もっと簡単に説明すると、CDNは「画像ファイルやZIPファイルといったファイルをダウンロード配信するための技術です。」

まあこのCDNの整備をすることによって、画像ファイルなどのダウンロードが使用するユーザーにとって高速化するというものです。

ざっくりとですが、一番早く読み込めそうなネットワーク的に近い情報から読み込みます

CDN=Webページ高速化と認識してオーケーです。

CDNがSEOに影響してくる理由

ページ速度に関してSEOにも少なからず影響はしてきます。

GoogleのMatt Cutts(マット・カッツ)氏が答えるには以下のように述べています。

しかし、こんなふうに言うことはできる — 上下のウェブサイトを見たり同時に返されるサイトを見たりして、もしあなたのサイトが本当に本当に遅くて異常なくらいだったり、(スピードの点で)底辺に位置していたりしたら、そのときは、ページ速度が理由でランキングが低くなるとことがたしかにあるかもしれない。
引用:https://www.suzukikenichi.com/blog/is-page-speed-a-ranking-factor-in-mobile-search/

もちろんSEOを上げるためにはページの高速化は本当にちょっとした要因の1つだが、もし同じ要因だったらGoogle側は早い方を選ぶということです。

ページ高速化はSEOだけじゃなくて、コンバージョンにも影響してくる

Webページの高速化は、SEOだけじゃなくてコンバージョンにも影響してくると言えるでしょう。

Googleが公式に発表する見解によると以下の発表をしています。

しかし、読み込みに 3 秒以上かかるページからは 53% のモバイルサイト訪問者が離れています。
引用:https://developers-jp.googleblog.com/2017/03/new-industry-benchmarks-for-mobile-page-speed.html

折角、検索であなたのページにたどり着いたとしてもあなたのWebページの読み込みに3秒以上かかってしまうと50%以上の人は諦めてブラウザを閉じてしまいます。

つまり訪問はしたものの記事やコンテンツ、広告も読まれずに終わってしまうのです。
あなたがどんなに良いコンテンツを持っていようとコンバージョンされずに終わってしまいます。

WordPressサイトをプラグインで超高速化!

自分のWordPressを使用したサイトがCDN設定でどのような結果に変わったかをお見せ致します。今回数値を測るためにGoogleのWebページ速度を測る「GooglePageSpeed Insights」を使用しました。

CDNを知る前の私のWordPressサイト

え、50%台はヤバイ。
ちょっとCDN設定をする前にスクリーンショットし忘れてしまったので、加工画像ですが実際の数値はこんなもんです。
ページ表示時間も6.7秒だったので、これでは余裕でユーザーは離脱してしまいますね。

・CDNを知った後の私のWordPressサイト

95%という最高数値!

モバイル表示も、デスクトップ表示も共に95%というモバイルフレンドリーなサイトに早変わりしました。
もちろんCDN以外の設定もしましたが、CDNだけで30%以上変わったので超効果ありでオススメです。

WordPressサイトをプラグインで簡単CDN設定方法!

どんなプラグインを使うのかといえば、おそらくほとんどのWordPressユーザーが気づかないうちにダウンロードしているであろう「JetPack」を使います。

これまで自分はWordPresのプラグインでも重そうなパッケージだと、インストールしてもすぐにアンイストールしてしまいました。

でも「JetPack」は機能が多いけどめちゃくちゃスグレモノで時間がかかりません。

別に何か不具合が起きた場合、プラグインを停止するだけで戻せるのでリスクがありません。

JetPackによるCDN設定の特徴

  • 「jpg, png, gif」の画像にのみ対応しており、「js, css」等は非対応
  • 自動でCDNとして適用されるのはメディアに登録されている画像ファイルに限る
  • キャッシュされた画像は削除または更新ができない
  • 画像の最適化は強制的にされてしまう
やまおう
やまおう
簡単にいうと、自分のWordPressサイトにアップロードした画像にしか対応してないみたい

でも、ブログを書くだけならこれくらいの使い方しかしないと思うので大抵問題は無いです。

それではプラグインを使用し、CDN設定手順を紹介していきます。

1. 「JetPack」をインストールしましょう。

いつも通り、WordPressの管理画面よりプラグインをインストールしていきましょう。

恐らく、JetPackであれば「注目」を開くと一番上に来ると思います。

2. 「JetPack」インストール後、JetPackを設定するをクリック

「JetPackを設定」をクリックしましょう。

3. WordPress.comのアカウントを作成しよう

自分の情報を書いて、WordPress.comのアカウントを作成しましょう。

すでにWordPressのアカウントを持ってい場合は、持っているアカウントを使用しましょう。

4. WordPress.comにアカウントを承認させよう

自分のアカウントが登録し終わったら、自分のユーザーネームとパスワードを入力するとサイト名と自分のユーザー名でWordPress.comと連携するかどうかの確認が出てくるので「承認」しましょう。

5. 無料プランで開始しよう

プレミアムやプロフェッショナルプランなどが用意されていますが、無料下に少しスクロールすると無料プランで利用するボタンがありますので、無料プランを選択しましょう。

無料プランで、CDN設定に関しては利用可能です。

6. JetPackずべての機能をインストールしよう

JetPackの親切なところは一つ一つに機能詳細が書かれているので、とりあえずインストールしてみて不要なものは、チェックを外していけば大丈夫です。

7. 不必要だと思う機能を解除していき、CDN関連はチェックを入れましょう

パフォーマンおよびスピードこちらにある、「グローバルCDNから画像を提供」「画像の遅延読み込みを有効にする」をチェックを入れましょう。これだけでWebページの読み込みは格段に変ります。

 

最後に:CDN設定はSEOだけじゃなく、コンバージョン率を上げるためにも必要!

折角、毎日1時間や2時間といった時間を費やして書いてる記事なら「コンテンツ見てもらいたいですよね?」

コンテンツを1人でも多くの読者に見てもらうためには、Webページのスピードを改善する以外ありません。

SEOだけではなく、あなたの書いたコンテンツが見られるか、見られないかも掛かっているのです。

もしまだWordPressでブログを書こう!と思っていたり、最近WordPressでブログを始めたよ!って方は早いうちにCDN設定はしておきましょう。

プラグインなら細かい知識は不要ですし、何か不具合が起きた場合は「停止」すれば戻れるので是非CDN設定皆さんもしてみて下さい。

もうちょっと無料でWebマーケティングツールを見てみたい人向けにこんな記事もあります。

【厳選】これだけあればWebマーケティングは充分!無料で使える便利なツール8選明日からWebマーケティングの部署を始める。0から始めるってそれ本気ですか? もし明日からWebマーケティングで食べていきたい、そう考...

 

ABOUT ME
山田 裕太(やまちゃん)
現在、東京とセブを行き来する大学4年生のwebデザイナー。高校時代に情報科に所属していたことから、困っている人をwebの力で助けたいと思いながら、大学2年次セブ島へ留学したり、大学4年時ではスタディツアーを大学生向けに運営したり、かき氷店の出店を見据えたかき氷販売などをセブ島にてする。20代の若者達に新しい生き方に挑戦できるロールモデルとして「Yamalog.online」を運営。
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus