WordPress│CDN│Cloudinaryの使い方

cloudinary

CDNという言葉を聞いたことがあるでしょうか?

Content Delivery Network(コンテンツデリバリーネットワーク)と呼ばれていて、

例えば画像や動画、コード等を別の専用サーバーに置いて、

サイトの表示を高速化したりサーバーのストレージ容量を節約できたりします。

今回は画像特化のCDNのCloudinary(クラウディナリー)をWordPressで使う検証をしてみましたので、その備忘録になります。

目次

著者

WEB制作をしながらカナダ留学をしているデジタルノマド
技術的なことが好きでWordPressのカスタマイズもいろいろ自作しています。

WordPressのカスタマイズに困ったらご相談ください!

WordPressでのCloudinary(クラウディナリー)の概要

Cloudinaryで初めに知っておきたいことを簡潔に記載しておきます。

料金

基本的に無料です。

ただし月額25クレジット以上を消費した場合は、有料プランに切り替える必要があります。

1クレジットというのは下記の条件になります。

Cloudinaryのクレジットとは

以下のいずれかに該当するとクレジットを消費します。

  • 1クレジット = 1000枚
  • 1クレジット = 1GB
  • 1クレジット = 1GB ※1ヶ月当たりの画像の転送量
  • 1クレジット = 2GB ※1ヶ月当たりの動画の転送量

ちなみにDashbordの下にクレジットを無料で増やす方法が記載されています。

WordPressでのCloudinary(クラウディナリー)の使い方

Cloudinaryのプラグインをインストールして、アカウント登録、APIキーを入れて連携するだけです。

専用プラグイン「Cloudinary」のインストール

WordPressでCloudinaryと検索して、プラグインをインストールしましょう。

Cloudinaryのアカウント作成

管理画面メニューにCloudinaryのメニュが―できているのでクリック。

まずはSignupのボタンを押して、アカウントを作成しましょう。

Cloudinaryのサイトに呼びます。

右上からアカウントの登録。

メールかGoogleアカウント、GitHubのアカウントで登録できます。

アカウント作成後、サイトにアクセスすると2つのアンケートに答えましょう。

管理画面が表示されたら、登録完了です。

CloudinaryとWordPressの連携

Cloudinaryの管理画面が確認できたら、DashbordメニューからAPIキーをコピーします。

WordPressにもどり、先ほどコピーしたAPIキーを登録します。

Cloudinaryにログインしていれば②に進めます。

最後に鍵のアイコンを押して、おすすめ設定をONにして連携完了です。

以上です。

Cloudinaryの設定

Cloudinaryは様々な設定ができます。

推奨設定のままだとWordPressとCloudinaryが完全に同期した状態になります。

たとえばWordPressの画像を消すとCloudinary側の画像も消えます。

普通の使い方をするのであれば、このままでよいでしょう。

CDN側だけ画像を保存する

日本のサーバー(平均ストレージ容量 300GB)違って、海外サーバー(平均ストレージ容量 8GB)はストレージ容量が数GBと極端に少ない場合があります。

サイトのストレージ容量を圧迫するのは基本的には画像だと思いますので、CDNを使うのは有効です。

ストレージの設定変更

General SettingsからStorageをCloudinary onlyにします。

以上でWordPress側の画像を消しても、Cloudinary側の画像は削除されなくなります。

Cloudinaryの同期

Cloudinaryの同期、アップロードが完了していれば、メディアのファイルURLがCloudinaryに変更されています。

この状態であればFTP側から画像を削除しても、記事の表示がそのままです。

管理画面のメディアライブラリには記録のデータだけ残っています。
こちらは消さないようにしましょう。

ちなみに設定後に新しく画像をアップロードした場合は、Cloudinaryにだけ画像がアップされます。

FTPで画像を確認してもuploadsの中に新規画像はありませんでした。

Cloudinaryの注意点

実際に使ってみての注意点です。

画像ファイルを元に戻したい時

Cloudinaryを停止する場合、ローカルの画像がないと停止時に画像が表示されなくなります。

ですので、General SettingsからStorageをCloudinary and WordPressに戻してやります。

ファイル数が多いとローカルへの画像保存に時間がかかるので、同期が完了するばで十分な時間を置きましょう。

無料枠の25GB以上を使うとどうなるのか?

実際に画像数とアクセス数の多いサイトで試してみたところ、転送量が多くなり165%を使ってしまったところで警告メールが届きました。

Cloudinaryはかなりの高速化が見込めるものの、画像の転送量が多いサイトだと無料枠で納めるのは厳しいです。

※ちなみに6GB、追加で枠を増やします。

まとめ

CDN「Cloudinary」の月の無料枠を利用すると、ストレージ容量の圧迫を解消できるかもしれません。

また、実際に使ってみて、かなりの高速化になった結果をサーチコンソールで確認できました。

CDNのサーバーの置き場所の距離も重要です。
日本だけで完結するサイトの場合はかえって表示が遅くなる可能性がもあります。

気になった方は是非ためしてみてください。

ちなみに月25GB以上の容量を使ってしまう場合はCloudflareのCDNをおすすめします。

こちらは画像だけでなく、ページ全体をキャッシュするサービス(無料)になります。

次に読んで欲しい記事

全記事一覧

カスタマイズの依頼・相談

目次