Cloudinary

Cloudinaryご存知でしょうか？ Cloudinaryは、カリフォルニア州サンタクララに本社を置き、イスラエルにオフィスを構えるSaaSテクノロジー企業です。同社は、クラウドベースの画像およびビデオ管理サービスを提供しています。これにより、ユーザーは、ウェブサイトやアプリの画像や動画をアップロード、保存、管理、操作、配信できます。https://en.wikipedia.org/wiki/Cloudinary 簡単に言うと、画像のCDNです。 これを使うと、画像の適切な配信については意識しなくても大丈夫になります。 さらに、WordPressにはこのCloudinaryを使う為のプラグインがあり10分ぐらいで導入できるので しないのは勿体ないです。 Cloudinaryには、無料プランがあり、個人サイトであれば無料枠で充分利用できます。 早速、設定を進めていきたいと思います。 導入までの流れ Cloudinaryにアカウントを作成するWordPressにプラグインをインストールするプラグインの設定画面で、Cloudinaryと連携するあとは、勝手に画像のパスが書き換わります Cloudinaryアカウント作成 以下のサイトにアクセスし、右上のSIGN UP FOR FREEボタンを押します。 https://cloudinary.com 入力するのは、名前、メール、パスワード(大文字、小文字、記号を含む8文字以上)、国、興味のあること cloud nameは、アクセス毎にランダムで割当られますが、編集で自分のわかりやすいものにも変更可能です。 登録すると、メールが送信されてくるので、認証しましょう。 ログインするとダッシュボードが表示されます。 私のサイトは、まだまだアクセス数が少ないので、無料利用枠の10%以下しか使っていない状況です。 WordPressにプラグインをインストールする 以下のプラグインをインストールします。 https://ja.wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/ 私の場合、管理画面からCloudinaryで検索してもプラグインが出てこなかったので、上記ページからファイルをダウンロードしてインストールしました。 プラグインの設定画面で、Cloudinaryと連携する インストールして、有効化後、管理画面の左メニューに、Cloudinaryができるので、Getting Startedを選択して、設定画面にいき、Connectタブを選択します。 Connection stringの所に、Cloudinaryのダッシュボードに設定されているAPI Environment variableのURLを設定します。 Copy to clipboardを選択してコピーして、先頭のCLOUDINARY_URL=を除去した部分を設定します。 接続がうまくいくと以下のように表示されます。 適用の確認 サイトを表示して、画像のパスがCloudinary経由になっていることを確認します。 上記のように、画像のsrcが、cloudinary.com経由になっていることが確認できます。 また、Cloudinaryのダッシュボードを確認すると画像が追加されていることが確認できます。 料金について ひと月25クレジット付与され、1クレジット毎の内容は以下になっているので、個人サイト利用ではおそらく充分です。 Free Plan25Monthly Credits1 Credit =1,000 Transformations OR1 GB Storage OR1 GB Bandwidth スピード測定 https://developers.google.com/speed/pagespeed/insights/ 導入して計測をしてみたところ、画像に関する警告はでなくなりました。 まとめ 簡単セットアップで、画像配信について意識しなくてよくなるので、WordPressでサイトを運用しているのであれば入れないと勿体ないかなと思います。今のところ、神サービスだなと思います。 こちらの記事も参考にしてみてください。 https://zaitakukinmu.com/2022/11/02/booster/

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