画像コンテンツはユーザーがサイト訪問した時の通信量の過半数を占めることがほとんどです。
適切な形式での画像の配信=サイトの高速化に直結します。
当記事では「無料のCDNを用いた画像の配信」をワードプレスに設定して、Google PageSpeedInsightsでの改善項目「次世代フォーマットでの画像の配信」をクリアにするまでの手順を解説していきます。
そもそもCDNって何？
Webサイトを運営している方なら、時々目にすることもあると思いますが、「設定がめんどくさそうなのでやってない」なんて方も少なくないと思います。
Webサイトの高速化を目指すに当たって避けては通れない「CDN」という存在が、まずどんな役割を果たすのかを知っておいて損はありません。
CDNとは、コンテンツデリバリネットワーク（Content Delivery Network）の略で、世界中に張り巡らされたCDN専用の配信ネットワーク（CDNプラットフォーム）を利用して、Webサイトにアクセスしようとするエンドユーザに最も近いPoP（配信拠点）から効率的かつ高速にWebを配信する仕組みです。
インターネットの通信速度というのは特に「サーバーとユーザーの間の物理的な距離」に大きな影響を受けます。
ここ最近ではグローバルにインターネット上でサービスを展開してる会社のほとんどは、このCDNというシステムを利用しているおかげで中々体感しにくいことも多くなっていますが、ひと昔前は海外サイトへのアクセスはそれはそれは重たいものでした。
今でも、小規模で非グローバルな海外サイトにアクセスすれば、中々ページが表示されないなんていう現象にでくわすかもしれません。
端的に言えば「一番ユーザーの近くのサーバーからデータを配信する」ことがCDNの一番の目的です。
って言うか、海外からのアクセスとか不要
確かに、日本のWebサイトは特に言語的な障壁もあり、グローバルにアクセスが集まる、（または集めたい）というケースは非常に少ないかもしれません。
日本国内であれば、東京のサーバーにアクセスしようが、北海道のサーバーにアクセスしようが、波照間島のサーバーにアクセスしようが、それほど大きな差は出ないというのも事実です。
ただ、それでも画像CDNを導入する事への大きなメリットがいくつかあります。
画像の自動リサイズ
CDNの多くが画像のリサイズサービスを提供しています。
Webサイトに表示される画像というのは、元の大きな画像をダウンロードしてきて、HTMLやCSSによって縮小させて表示される、というケースがほとんどかと思います。
つまりユーザーに表示される大きさの以上のデータは完全に不要なわけです。
それなら初めから適切な大きさの画像を配信する方が、通信量が少なく済みます。
通信料が少なく済むという事はそれだけサイトが高速化するという事ですね。
これはGoogleのPage SpeedInsightsによる「適切なサイズの画像」の配信という項目の改善にもつながります。
画像の自動フォーマット
フォーマットというのはファイルの形式のことです。
一口に画像と言ってもJPEG、PNG、GIF、などがあり、なじみの多いであろう現行の形式でも、少なくとも3種類は知っている方も多いかと思います。
現行の画像フォーマットを更に進化させ、高い圧縮率で画像を保存できるとされている形式を「次世代フォーマット」と呼びます。
WebP、JPEG2000、JPEG XR、などWebを普段から触っている人じゃないとほぼ聞きなれない形式のことですね。
ただ、厄介なことに、この次世代フォーマット呼ばれる形式は現状、ブラウザごとに対応状況が違います。詳しくはこちらの記事で紹介しているので興味のある方は覗いてみてください。
いくら高圧縮率と言えど、すべてのブラウザで見れないのであれば、利便性も半減してしまいます。
CDNの多くでは、こうした次世代フォーマット画像の、ブラウザごとの対応状況の違いを吸収する仕組みが組み込まれています。
今サイトを訪れているユーザのブラウザを判別して、適切なフォーマットの画像を配信する仕組みです。
帯域を節約できる
難しく帯域と言いましたが、要するに通信料のことです。
廉価なサーバーを使って運営しているサイトにおいては、何らかの理由により一気にアクセスが集中すると、一時的に、サイトへのアクセスが出来なくなる帯域制限が行われる場合があります。
サーバーから「あなた使い過ぎです」と言われているわけですね。
CDNを利用することによってブログを運営しているサーバー本体へのアクセスは分散されることになるので、この帯域制限の回避にもつながると言うわけです
実際にWordpressにCDNを導入してみよう
当サイトでも現状2つのCDNを導入しています。その中でも今回は画像配信専用のCDNについて、導入方法を詳しく解説していきたいと思います。
画像配信用のCDN「Cloudinary」
今回、ワードプレスに導入していくのは Cloudinary と言うCDNです。
CDNと言うのは元来非常に高価で、個人レベルのブログが手を出すのはなかなか難しいものでした。
しかし今ではこのCloudinaryを始めとした無料または非常に低価格なCDNもあり、より身近なものになりました。
最初にクレジットカードの登録が必須となるCDNが多い中Cloudinaryは、メールアドレスの登録だけで導入ができると言う非常に良心的なものになります。
まずはCloudinaryに登録する
こちらから登録を行います。
必須項目の入力
基本的に登録はこれで完了です。
メールアドレスに確認のメールが届くので、そのメールのリンクをクリックしてメールアドレスを認証すのも忘れないでください。
Cloudinary登録後の初期設定
アカウントの登録が完了したら初期設定のパネルが立ち上がります。
基本的に画像の通り設定していただければ問題ありません。
最初のページは簡単なアンケートです。僕は画像の通り回答しています。
この部分の情報はプラグインの設定の時に確認しに戻ってきます。
4ページ目は設定の部分ですが、初期状態から特別触る必要はありません。
特に紹介しなくても問題はないのですが、フェイスブックとツイッターのアカウントを持っている人はフォローやシェアすると「無料で利用できる枠」が倍近くまで増えます。
フェイスブック→シェア、イイね
ツイッター→フォロー、ツイート
1分で終わるのでアカウントがあればちゃちゃっとやります。
ここまでやれば初期設定まで完了です。
このままWordpressの設定に進みます。
WordPressのプラグインを導入
とりあえず登録が完了したらWordpressの設定をしていきます。
設定はプラグインの導入で一発OKです。
プラグインの検索窓に「 Cloudinary 」と入力し、インストールします。インストール後に有効化することを忘れないでください。
プラグインを有効化すると Cloudinary のタブが管理パネルに出現しますのでセッティングを選択します。
Cloudinary初期設定の時の3ページ目で表示されていたURIをこちらにコピペします。
ダッシュボードからでも確認できます。
あとはここに張り付けて「Update Settings」ボタンで同期完了です。
ワードプレスから出来るCloudinaryの操作
基本的に連携をするだけで特にすることはなく「以降アップロードした」画像は自動的にCloudinaryに同期されます。
同期された画像はCloudinaryの管理パネルから確認できます。
画像の配信も自動的にCloudinary経由で行われるように書き換えられますが、既存の画像は自動的にアップロード・同期されません。
既存のメディアライブラリ画像をCloudinaryと同期する
一覧表示にするとCloudinaryという列が確認できますので、ここで個別の画像の同期状態を確認できます。
「Upload to Cloudinary」というボタンを押せば同期できます。
既存の画像を一括でCloudinaryにアップロード
一覧の表示形式に直して、表示項目数を増やします。
ワードプレスの設定状況やサーバーの個別の設定でスクリプトのタイムアウトが設定されている場合があるので、適宜表示項目数は読み替えてください。
タイムアウトにならない設定なら999件表示での処理も可能です。
左側の一括チェックボックスを選択して全件選択します。
一括操作のドロップダウン欄から「Upload to Cloudinary」で一括アップロードできます。
自動フォーマットへの対応（WebP配信に対応する）
基本的にCloudinaryにアップロードされた画像は、ワードプレス側で自動的にCDNを通した配信に置き換えられます。
しかしこのままでは、既存のJPEGやPNG、GIF等の現行フォーマットでの配信となりますので、最高効率の画像配信ではありません。
個別の画像の記事内への埋め込み等であれば、「自動フォーマットの選択をしてから埋め込む」という方法を取れるのですが、サムネイル画像や自動的に生成される画像が自動フォーマットに置き換えられる事はありません。
プラグインからは自動フォーマットに対応した設定項目がありません。
すべての画像を自動フォーマットの最高圧縮率で配信するためには、Wordpressのfunctions.phpを編集する必要が出てきます。
テーマフォルダの中のfuntions.phpに以下のコードを追記します。
//-----------------------------------------------//
// cloudinaryフォーマットとクオリティの自動化を付加
//-----------------------------------------------//
function call_back($buffer) {
$buffer = str_replace("https://res.cloudinary.com/*********/image/upload/","https://res.cloudinary.com/*********/image/upload/c_fit,f_auto,q_auto/",$buffer); //HTML出力で置き換える処理
return $buffer;
}
function buf_start() { ob_start("call_back"); }
function buf_end() { ob_end_flush(); }
add_action('after_setup_theme', 'buf_start');
add_action('shutdown', 'buf_end');
”********”の部分は自分専用の文字列ですので適宜置き換えてください。
Cloudinaryダッシュボードの右上に表示されているIDです。
WebPで配信されているかGoogleChromeのデベロッパツールから確認します。
typeの列が、WebPで配信されていれば成功です。
コメント