ウェブサイト表示時間の大部分を占める原因となるのが画像です。Kinstaでは、数回のクリックで画像を最適化することでサイトの表示速度を改善し、訪問者のユーザー体験を向上することができます。画像の最適化は、CDNを使用している場合にのみ実行可能です。

サイトのファイルに保存されている画像そのものを変更することはなく、画像を新規作成した上で最適化が実行されます。このようにして新たに作成された画像は、ストレージを消費せず、ご利用のプランに付帯するディスク容量が削られることはありません。

可逆圧縮または非可逆圧縮の機能が有効であるとき、CloudflareのPolish機能により、CDNで画像のWebPバージョンが自動作成されます(オンザフライ最適化)。WebPバージョンがCloudflareのCDNにキャッシュされ、以下の条件に合致した時に配信されます。

  1. 訪問者のブラウザのAcceptヘッダーにWebPが含まれている
  2. 圧縮された画像が元画像より圧倒的に小さい

なお、元画像のサイズがWebPバージョンよりも小さい場合には、CDNで前者が配信されます。

画像の最適化を有効にする

画像の最適化を有効にするには、MyKinstaにログイン後、「WordPressサイト」>(サイト名)>「CDN」に移動し、「画像最適化」セクションの「設定」をクリックします。

MyKinstaの画像最適化設定
MyKinstaの画像最適化設定

ポップアップウィンドウで、可逆圧縮または非可逆圧縮を選択します。

画像最適化のポップアップウィンドウ
画像最適化のポップアップウィンドウ

可逆圧縮で画像を最適化する

可逆圧縮を使った最適化は、画質に影響を与えません。GIFとPNG画像のみが圧縮され、WebPバージョンが作成されます。メタデータはすべての画像から削除されます。

画像最適化に「可逆」を選択
画像最適化に「可逆」を選択

画質の維持を重視する場合は、この方法を選択してください。JPEG画像を圧縮して、WebPバージョンを作成するには、非可逆圧縮を選択します。

設定を保存」をクリックすると、「画像最適化」セクションに以下のメッセージが表示されます。

画像の可逆圧縮が有効になっている状態
画像の可逆圧縮が有効になっている状態

非可逆圧縮で画像を最適化する

非可逆圧縮での最適化では、画像をできる限り小さくするためにJPEG圧縮が行われることから、画質が低下する可能性があります。可逆圧縮と同様に、GIFやPNG画像が圧縮され、すべての画像からメタデータが削除されます。また、すべての画像の Webp バージョンが作成されますが、WebPバージョンは、非可逆圧縮または可逆圧縮された画像よりも大幅に小さい場合のみ使用されます。

画像最適化に「非可逆」を選択
画像最適化に「非可逆」を選択

画質よりも最大限の最適化を重視する場合には、この方法を選択してください。

設定を保存」をクリックすると、「画像最適化」セクションに以下のメッセージが表示されます。

画像の非可逆圧縮が有効になっている状態
画像の非可逆圧縮が有効になっている状態

画像の最適化をテストする

画像の最適化は、画像のURLやファイル拡張子を変更したり、ウェブサイトのページのHTMLを変更したりすることはありません。画像が最適化されていることを確認するには、ブラウザの開発者ツールで、画像のHTTPヘッダーを確認します。

  1. ウェブサイトにアクセスし、開発者ツールを開きます(ページまたは画像を右クリックして「検証」をクリック)。
  2. ネットワーク」タブで必要に応じてページを再読み込みし、画像を選択します。
  3. 選択した画像の「ヘッダー」タブで「レスポンスヘッダー」が表示されるまでスクロールし、以下のヘッダーと値を確認します。
    1. cf-polished:画像の元の形式とファイルサイズが表示されます。WebPバージョンが元の画像よりもファイルサイズが大きい場合は、元の画像がそのまま使用されます。
    2. content-type::URLやファイル拡張子に関係なく、どのようなファイル形式で提供されているかが表示されます。
    3. ki-cache-typeCDNであることを確認します。
    4. ki-cf-cache-statusHITであることを確認します。ki-cache-typeヘッダーのCDNと組み合わせで、画像がKinstaのCDNによって配信されていることを示します。

画像の最適化を無効にする

画像の最適化を無効にするには、MyKinstaにログイン後、「WordPressサイト」>(サイト名)>「CDN」に移動し、「画像最適化」セクションの「設定」をクリックします。表示されたウィンドウで「なし」を選択して、「設定を保存」をクリックしてください。

無効化が適用されると、「画像最適化」セクションに以下のメッセージが表示されます。

画像最適化が無効になっている状態
画像最適化が無効になっている状態