ワードプレスの高速化2019 Autoptimize ＋ ShortPixel Image Optimizer

ワードプレスの高速化のためのプラグインにはいろいろありますが、今回ご紹介する「Autoptimize」に「ShortPixel Image Optimizer」の組み合わせは非常に高速化効果が高いです。設定方法とともに設定前後の速度比較もあわせてご紹介します。

まず Autoptimize のインストールと設定から図解説します。

Autoptimize をインストールするには、ワードプレスダッシュボードの、

新規追加の画面で「Autoptimize」と入力して下記を検索し、

有効化すると下記のように表示されます。

「自動最適化には WebP をサポートするオンザフライの画像最適化とShortPixel 経由の CDN が含まれています。 このオプションを有効にするには画像最適化設定を確認してください」との内容が書かれています。Autoptimize は ShortPixel と連携させることで、より高速化の効果が高くなります。

Autoptimize を設定するには、

Javascript、CSS、HTMLの最適化を設定します。Autoptimize の設定パネルの「JS, CSS & HTML」をクリックします。

JavaScript オプションで、下記の２つにチェックを入れます。

• JavaScript コードの最適化：チェックを入れると JavaScript の最適化を設定できるようになります
• Aggregate JS-files?：JavaScript ファイルの集約化

CSS オプションで、下記の３つにチェックを入れます。

• CSS コードを最適化：チェックを入れると CSS の最適化を設定できるようになります
• Aggregate CSS-files?：CSS ファイルの集約化
• インラインの CSS を連結：HTML の中の CSS も最適化

HTML オプションの「HTMLコードを最適化」にチェックを入れます。

その他オプションの設定で、下記の２つ（あるいは３つとも）にチェックを入れます。

• 連結されたスクリプト/ CSS を静的ファイルとして保存（もしうまく処理されない場合はチェックを外してください。また、別にキャッシュ機能をさせる場合は必要ありません）
• Minify excluded CSS and JS files?：除外設定したファイルを最小化するかどうか設定します
• ログイン中のユーザーも最適化：ページビルダーを用いている場合などは外します

Image Optimization の設定で、下記の４つを設定します。

• Optimize Images：画像の最適化
• Image Optimization quality：最適化品質（Lossy が一番圧縮されます）
• Load WebP in supported browsers?：WebP による画像配信のサポート
• Lazy-load images?：画像の遅延読み込み

追加の自動最適化で、

• Google Fonts Google フォントの削除：Google フォントを削除します
• 絵文字を削除
• 静的リソースからクエリー文字列を削除：必要ないパラメータを削除します

ShortPixel Image Optimizer をインストールするには、ワードプレスダッシュボードの、

プラグインの新規追加の画面で、「ShortPixel」と入力して下記を検索し、

ShortPixel Image Optimizer を設定するには、

下記のパネルが表示されるので、E-mail address に登録するアドレスを入力し、サービス利用条項とプライバシーポリシーの同意にチェックを入れて、「Request Key」をクリックします。※今のところ月に100枚までは無料で利用できます。勝手に課金されるようなことも無いので登録して試してみると良いと思います。

下記のように登録されましたと表示されます。

ワードプレスダッシュボードの「設定」＞「ShortPixel」に移動し、

API キーが認証されます。認証されたら利用設定を行います。

• API Key：API キーが表示されています。変更する場合はここに入力します。
• Compression type：圧縮の品質設定（Lossy（ロスあり）＞Glossy（ロスの少ない）＞Lossless（ロスなし））
• Also include thumbnails：サムネイルの圧縮をするかどうかの設定。チェックでサムネイルも圧縮
• Image backup：オリジナルイメージを残すかどうかの設定。チェックで残す
• Remove EXIF：EXIF 情報を残すかどうかの設定。チェックで削除
• Resize large images：画像のリサイズを行う設定

• Additional media folders：追加したい画像フォルダーがあれば設定する
• Convert PNG images to JPEG：PNG画像をJpegに変換する
• CMYK to RGB conversion：CMYKで作成された画像をRGBの画像に変換する
• WebP Images：WebP画像の利用（設定すると追加の設定項目が表示されます）
• Optimize Retina images：レティナディスプレイ対応画像も最適化
• Optimize other thumbs：リストにないサムネイルも最適化する

• Optimize PDFs：PDFの最適化設定
• Exclude patterns：除外するパターンを設定する（名称、フォルダ、サイズ等で可能）
• HTTP AUTH credentials：サイトが会員制など認証サイトの場合はそのIDとパスを設定
• Process in front-end：フロントエンドの画像（サイト上で画像のアップロードを可能にしている場合など）のアップロードの際に自動圧縮する設定
• Optimize media on upload：メディアのアップロードの際に自動圧縮する設定
• Exclude thumbnail sizes：除くサムネイルサイズがあれば設定します

上記の Advanced で WebP の利用を設定すると、追加で下記の項目の設定が必要となります。次世代画像の WebP 形式は非常におすすめできる画質とサイズなのでぜひ設定しましょう。

• Deliver the WebP versions of the images in the front-end ：WebP での配信が最初に選ばれる設定（ブラウザが対応していれば）
• Using the <PICTURE> tag syntax ：ピクチャー要素を利用して切り替えて表示させる設定
  ①Only via WordPress hooks ：ワードプレスのフックでのみ処理される
  ②Global ：HTMLがブラウザに送られる直前に処理
• Without altering the page code ： .htaccess を用いてブラウザを切り替え（自身で手動設定が必要）

高速化の効果を GoogleSpeed Insights （グーグルスピードインサイト）と、 Google Chrome （グーグルクローム）のデベロッパーツールを利用して比較します。

テストに使ったページは、画像ギャラリーや背景画像などを設置し、全部で15枚の写真があるページとしました。

左が標準状態、右がプラグインを設定後になります。大幅に点数が上がっています。

大幅に画面の表示速度が改善されました。実はこの測定を行った際に、サーバーのTTFB（サーバー応答時間）がやけに遅く、３sec程かかっていました。それを除いて考えると、２～３秒ほどで表示できている可能性が高く、良い結果になっていると思います。