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

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

1.Autoptimize のインストールと設定

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

1)Autoptimize のインストール

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

plugin-add-menu「プラグイン」>「新規追加」をクリックします。

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

wordpress-speedup-shortpixel

「Autoptimize」が表示されるので、「今すぐインストール」をクリックします。

インストールされたら有効化します。

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

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

2)Autoptimize の設定

Autoptimize を設定するには、

autoptimize-setting-menu「設定」>「Autoptimize」をクリックします。
(1) JS, CSS & HTML の設定

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

① JavaScript オプション

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

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

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

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

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

④ その他オプション

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

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

 

(2) Image optimization の設定

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

  • Optimize Images:画像の最適化
  • Image Optimization quality:最適化品質(Lossy が一番圧縮されます)
  • Load WebP in supported browsers?:WebP による画像配信のサポート
  • Lazy-load images?:画像の遅延読み込み
変更したら「変更を保存」をクリックし保存します。

 

(3) 追加の自動最適化

追加の自動最適化で、

  • Google Fonts Google フォントの削除:Google フォントを削除します
  • 絵文字を削除
  • 静的リソースからクエリー文字列を削除:必要ないパラメータを削除します
変更したら「変更を保存」をクリックし保存します。

 

2.ShortPixel Image Optimizer のインストールと設定

1)ShortPixel Image Optimizer のインストール

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

plugin-add-menu「プラグイン」>「新規追加」をクリックします。

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

ShortPixel-Image-Optimizer

「ShortPixel Image Optimizer」が表示されるので、「今すぐインストール」をクリックします。

インストールされたら有効化します。

 

2)ShortPixel Image Optimizer の設定

ShortPixel Image Optimizer を設定するには、

shortpixel-setting-menu「設定」>「ShortPixel」をクリックします。

 

(1) ShortPixel プラグインの利用登録

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

ShortPixel-Image-OptimizerShortPixel のサイトに飛ぶので、登録される E-mail アドレスを確認し、ToS(サービス利用条項)とプライバシーポリシーの確認のチェックを入れて「SIGN UP」をクリックします。

 

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

ShortPixel-Image-Optimizer登録したメールBoxを確認すると、ShortPixel から下記のようなメールが届いていると思います。メールには API キーとショートピクセルのサイトのログインパスワードが記載してあります。この API キーをコピーして、プラグインに登録します。

 

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

API キーに値を入力して、「Validate」をクリックします。

 

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

(2) ShortPixel プラグインの設定
① General の設定
  • API Key:API キーが表示されています。変更する場合はここに入力します。
  • Compression type:圧縮の品質設定(Lossy(ロスあり)>Glossy(ロスの少ない)>Lossless(ロスなし))
  • Also include thumbnails:サムネイルの圧縮をするかどうかの設定。チェックでサムネイルも圧縮
  • Image backup:オリジナルイメージを残すかどうかの設定。チェックで残す
  • Remove EXIF:EXIF 情報を残すかどうかの設定。チェックで削除
  • Resize large images:画像のリサイズを行う設定
設定を変更したら「Save Changes」をクリックして保存します。

 

② Advanced の設定
  • 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:除くサムネイルサイズがあれば設定します
WebP の設定

上記の 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 を用いてブラウザを切り替え(自身で手動設定が必要)
設定を変更したら「Save Changes」をクリックして保存します。

 

3.Autoptimize + ShortPixel Image Optimizer による高速化の効果

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

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

(1) GoogleSpeed Insights による比較

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

wp-divi-googlespeedinsights-fontwp-divi-googlespeedinsights-autoptimize

 

wp-divi-googlespeedinsights-fontwp-divi-googlespeedinsights-autoptimize

 

(2) Google Chrome のデベロッパーツールによる比較

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

pc_writer_oldman_150_01かなり高速化されました。あとはサーバーのTTFBを何とかしたいところです。サーバーの移行も考慮しつつほかの手段も探ってみます。

 

Google reCAPTCHA ワードプレスのスパムコメント対策

今回はWordpress(ワードプレス)のスパムコメント対策に Google reCAPTCHA...

ワードプレスセキュリティ強化 無料プラグイン All In One WP Security

ワードプレスのセキュリティを強化するプラグインは数多くありますが、そのうちのひとつに「All In One WP Security...
jetpack-contact-form-logo01

Jetpackのコンタクトフォームを設置する方法 初心者図解

WordPress(ワードプレス)のコンタクトフォームとしては、「Contact Form...
wordpress-speedup-shortpixel-logo

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

ワードプレスの高速化のためのプラグインにはいろいろありますが、今回ご紹介する「Autoptimize」に「ShortPixel...

Pin It on Pinterest