【CDN】CloudinaryがCDNとしては最強過ぎる気がする
CDNってのはコンテンツデリバティブネットワーク。
つまりコンテンツの配信サーバーで、それを分散保存してWebサイトなどを閲覧する際に提供するリソースなんだけど、動画とかはAkamaiなどが有名。
Webでは、AWSのCDNやCloudFlareとかが有名で、色々使ってみたけど利便性や無料枠という面でもCloudinaryが高速でパフォーマンスもよく導入も楽という素晴らしいサービス。
WordPressでも公式のプラグインも提供されているので導入は簡単にできる。※このくらいのことが簡単じゃないという人は一体何ができるのかよくわからないレベルとは思う。
サービス自体は、Cloudinaryに会員登録することで利用出来る。
会員登録は
- メールアドレス
- パスワード
- メール認証
というお定まりのパターン。
そもそも使うきっかけとなったのは
「爆速すぎて笑う」「速すぎて逆に不安になるレベル」――「dev.to」という米国のWebサイトの表示速度が異常に速いと、ネット上で話題だ。なぜ速いのか、サイト創設者のベン・ハルパーンさんがサイト内の記事で説明している。
ITメディア - 「爆速すぎて笑う」 表示速度が“異常な”Webサイト「dev.to」 その仕組みは
という記事を読んで、その恩恵にあずかろうと調べたら簡単に導入できた。
導入方法
Cloudinaryを使う前はアップロードする画像をローカルでいちいち最適化したりしたけど、そのサービスを使えばCDN側で最適化を自動化出来るので追加はアドオンから
導入方法は簡単で、プラグイン >> 新規追加
Auto Cloudinaryなどは画像のアップロードを全部Cloudinaryへ置き換えるのかもしれないけど、使ったことはないのでわからないけど公式のプラグインの場合は、Cloudinaryへ画像をアップロードする経路と、ローカルへ画像をアップロードすると自動でCloudinaryにもアップロードされるという機能があるので、わざわざ、Auto Cloudinaryという別のプラグイン化する意義もない気がする。
Cloudinaryの設定方法
Cloudinaryで会員登録が完了すると、CDNの導入をウィザード形式で対応してくれる。
まあ、特に設定することはないのだけど、ドメイン合わせたCDNの名称がよければそうした文字列にも変更出来る。
※こう書くとたまに日本語でも良いのか？なんてトンデモなことを聞いてくる人がいるけど、良いわけがない。
自由に変更出来るのは
https://s-pegasus.com/wp-content/uploads/2020/04/thum-385_crd56s.jpgの部分でいえばdlk0sruqbの部分ね。ここは任意値を設定出来ます。ただ、あえてここを指定の文字列にするということは何の意味もない気がするのでわからない人は触らない方が無難だ。
便利だなと思うのはWordPressのコンテンツエディターをビジュアルモードにすると画像のURLを貼ってあげると勝手に画像が挿入される。
本来は
ドメイン/wp-content/uploads/dlm_uploads/2017/02/jobify.jpg
といったファイルパスになるのだけど、置き換わるわけです。
話を戻すと、
ウィザード形式をとりあえず全部見て完了させます。
英語だけど気にしない。たいしたことは書いてないし読みたい人はGoogle先生にお願いしましょう。
プラグインをインストールしてアクティブにすればダッシュボードの一覧に管理画面へのリンクが表示されますが、ライブラリと設定です。
また、設定にはCloudinary で発行されたURLを入力する欄があるので、入力する。
これはウィザード中に表示もされるのですがCloudinary上での表示はここ↓
この赤枠の部分を選択したりダブルクリックすると範囲選択で自動で選択されるのでそれを設定画面のURLにいれたら、Cloudinaryを使うことが出来る様になります。
Cloudinary は有料のプランもある
| Images / Month | Images | Storage | Bandwidth | Price / Month | |
| Free Plan | 2,000 | 300,000 | 10 GB | 20 GB | 無料 |
| Small | 40,000 | 600,000 | 20 GB | 40 GB | $29 |
| Plus | 150,000 | 2 Million | 50 GB | 150 GB | $99 |
| Advanced | 400,000 | 5 Million | 120 GB | 400 GB | $249 |
| Advanced Extra | 800,000 | 10 Million | 250 GB | 1 TB | $549 |
てな具合。
CloudFlareはDNSの設定とかあったりめんどくさいし速度低下の原因にもなったりするので問題を解決するにも大変だったりするし、AWSも敷居が高いといった場合は、こうしたサービスが大変便利だ。
それに、無料プランでもいいねをしたりシェア、ツイートすることで上記のプランにエクストラ特典として容量がプラスされたりする。
プラグインがアクティブになるとこんな感じでボタンが追加されるし、従来のメディア追加から画像をアップしても同じくCloudinaryにアップされる。
Cloudinaryの注意点①
アイキャッチ画像を適応すると
ってなるけど、しっかり適応されているので気にする必要はない。
Cloudinaryのアップローダーだと
通常のアップローダーと同じようにDrop file hereという枠線の部分にアップすると下部の赤枠に画像が表示されるのでタグ付けをしたりフォルダーを作成したりしてアップロードしたメディアを管理しやすくなっている。
アップロードした画像のURLをビジュアルモードで貼り付ける方法もあるけど記事中にインサートしたい場合は、
その画像を選択するとさらに詳細な管理画面が開いて、Insert into Postという黄色いボタンを押下してあげると挿入も出来る。
この画面からタイトルやALT属性をつけてあげることでSEO対策の設定も用意だ。
便利さを体感してほしいので、WordPressの高速化なども含めて検討する場合は一考の価値は十分ある。
Cloudinaryの注意点②
何点か気をつける点もあって、
WordPressの機能でメディアのサイズを指定している場合は表示されない
つまり
function theme_setup() {
/* 画像サイズ設定 */
add_theme_support( 'post-thumbnails' );
add_image_size('single', 754, 496, true );
add_image_size('slider', 525, 328, true );
add_image_size('grid', 428, 205, false );
add_image_size('widget', 80, 50, true );
add_image_size('related', 240, 150, true );
}
add_action( 'after_setup_theme', 'theme_setup' );といった関数で画像のサイズを追加している場合はエラーになってしまう。
これは解決方法もあるのだけど、まあ、速度的に既存されないのでわざわざ設定する必要がなくなる。
Googleのページスピードのスコアが悪くなる。
CDNを使っていたり外部かしているとよくあるのだけど、スコア自体は悪くなったりしますが、実際の読み込み速度は確実に上がるので、指標としてこの速度や最適化しろよという表示を気にする必要自体が実際にはないって面もあるので、ページスピードの値は気にする必要がない。
それにGoogle先生自体がWordPressの高速化に強力するというアナウンスもされているので、いずれかのバージョンでそうした数字の問題などテーマがボロいもの以外は気にする必要もなくなるほど早くなることも想定出来る。
推奨CDNとかも出てくるかもしれないので是非つかって見てほしいCDNサービスの一つだ。
