WordPress + Cloudinaryでサイトを高速化する

WordPress + Cloudinaryでサイトを高速化する

2021年2月12日
高速化
Pocket

Cloudinaryご存知でしょうか?

Cloudinaryは、カリフォルニア州サンタクララに本社を置き、イスラエルにオフィスを構えるSaaSテクノロジー企業です。同社は、クラウドベースの画像およびビデオ管理サービスを提供しています。これにより、ユーザーは、ウェブサイトやアプリの画像や動画をアップロード、保存、管理、操作、配信できます。

https://en.wikipedia.org/wiki/Cloudinary

簡単に言うと、画像のCDNです。

これを使うと、画像の適切な配信については意識しなくても大丈夫になります。

さらに、WordPressにはこのCloudinaryを使う為のプラグインがあり10分ぐらいで導入できるので

しないのは勿体ないです。

Cloudinaryには、無料プランがあり、個人サイトであれば無料枠で充分利用できます。

早速、設定を進めていきたいと思います。

導入までの流れ

  • Cloudinaryにアカウントを作成する
  • WordPressにプラグインをインストールする
  • プラグインの設定画面で、Cloudinaryと連携する
  • あとは、勝手に画像のパスが書き換わります

Cloudinaryアカウント作成

以下のサイトにアクセスし、右上のSIGN UP FOR FREEボタンを押します。

WordPress + Cloudinaryでサイトを高速化する
Streamline media management and improve user experience by automatically deliver…
cloudinary.com

入力するのは、名前、メール、パスワード(大文字、小文字、記号を含む8文字以上)、国、興味のあること

cloud nameは、アクセス毎にランダムで割当られますが、編集で自分のわかりやすいものにも変更可能です。

Cloudinaryサインアップ画面
Cloudinaryサインアップ画面

登録すると、メールが送信されてくるので、認証しましょう。

Cloudinary認証メール

ログインするとダッシュボードが表示されます。

cloudinaryダッシュボード

私のサイトは、まだまだアクセス数が少ないので、無料利用枠の10%以下しか使っていない状況です。

cloudinaryクレジット利用状況

WordPressにプラグインをインストールする

以下のプラグインをインストールします。

WordPress + Cloudinaryでサイトを高速化する
Use Cloudinary's plugin to efficiently create, manage and deliver images, v…
ja.wordpress.org

私の場合、管理画面からCloudinaryで検索してもプラグインが出てこなかったので、上記ページからファイルをダウンロードしてインストールしました。

WordPressプラグイン追加

プラグインの設定画面で、Cloudinaryと連携する

インストールして、有効化後、管理画面の左メニューに、Cloudinaryができるので、Getting Startedを選択して、設定画面にいき、Connectタブを選択します。

Cloudinary設定画面

Connection stringの所に、Cloudinaryのダッシュボードに設定されているAPI Environment variableのURLを設定します。

Copy to clipboardを選択してコピーして、先頭のCLOUDINARY_URL=を除去した部分を設定します。

Cloudinaryダッシュボード

接続がうまくいくと以下のように表示されます。

Cloudinary設定完了

適用の確認

サイトを表示して、画像のパスがCloudinary経由になっていることを確認します。

Cloudinary画像パス確認

上記のように、画像のsrcが、cloudinary.com経由になっていることが確認できます。

また、Cloudinaryのダッシュボードを確認すると画像が追加されていることが確認できます。

Cloudinaryリソース確認

料金について

ひと月25クレジット付与され、1クレジット毎の内容は以下になっているので、個人サイト利用ではおそらく充分です。

Free Plan
25Monthly Credits
1 Credit =
1,000 Transformations OR
1 GB Storage OR
1 GB Bandwidth

スピード測定

developers.google.com

導入して計測をしてみたところ、画像に関する警告はでなくなりました。

WordPress + Cloudinaryでサイトを高速化する

まとめ

簡単セットアップで、画像配信について意識しなくてよくなるので、WordPressでサイトを運用しているのであれば入れないと勿体ないかなと思います。今のところ、神サービスだなと思います。