EWWW Image OptimizerでWebP変換次世代フォーマットで高速化

スタディ

こんにちはTac^^です。

前回

モバイル表示速度を改善するプラグイン
こんにちはTac^^です。モバイルの表示速度が遅いので対策をしてみた40→50、60台には回復

で紹介しましたがモバイルの表示が極端に遅く改善をしようとしました。

色々調べてみると画像の最適化が不足していたことと細かいことで多少ですが改善したので報告します。

スポンサーリンク

PageSpeed Insightsの改善できる項目

次世代フォーマットでの画像の配信」が1位になっていました。

次世代フォーマットとは
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます

JPEGやPNG以外の圧縮率が高い画像フォーマットのことです。

どのフォーマットもそれぞれ特徴がありますが、今回おすすめするのはWebPです。

なぜかと言うと、あの天下のGoogleが開発しているフォーマットだからです!

ちなみにファイルの拡張子は「.webp」になります。

様々なサイトで圧縮の劣化の具合などを評価されているので割愛しますが、ほぼ劣化なくサイズを高効率で圧縮できます。

EWWW Image Optimizerを使ってWebPに変換する

まずはEWWW Image Optimizerをインストールします。

EWWW Image Optimizerの設定画面から「WebP」タブをクリックします。

そして「JPG,PNGからWebPにチェック」を入れて、変更を保存します。

すると、下の方にこのような記述が表示されます。また右下の方にPNGと赤色で表示されています。

 .htacsses

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

上の記述内容を.htaccessファイルに追記します。

追記する内容についてわかりやすく言いうと、ブラウザがWebPに対応しているなら画像ファイルをWebPで配信して、非対応なら元のフォーマット(JPEGやPNG)で配信するという内容です。

 注意

「リライトルールを挿入する」をクリックすると自動で.htaccessファイルに追記されますが、バグやトラブルを避けるために手動で追記することを勧めします。

.htaccessファイルに追記する

これはレンタルサーバーや人によってやり方が異なります。

 注意

.htaccessファイルを不用意にいじるとサイトが表示されなくなるなどの不具合が発生するため、必ずバックアップを取って作業を行ってください。

エックスサーバーの場合

エックスサーバーの管理画面にログイン後

「ホームページ」ー「.htaccess編集」から対象ドメインを選択して変更可能です。

変換方法

WebPファイルを生成するためにWordPress管理画面から

「メディア」ー「一括最適化」ー「最適化されていない画像をスキャン」

スキャン後に一括最適化を行います。

WebPで配信されているかの確認方法

画像ファイルがWebPで配信されているかを確認する方法はいくつか方法があります。

EWWW Image Optimizerの設定画面の右下がWEBPと緑色に表示されていてばOKです。

Google Chromeの検証ツールでも確認できます。

サイト上で右クリックから「検証」をクリックします。

Network」タブでFilterを「Img」を選択し、サイトを読み込ませて画像のファイルがwebpとなっていればwebp画像が配信されています。

ブラウザキャッシュを使用している場合はWebPも追記する

別途個別にブラウザキャッシュの設定を行っている場合はWebP用のキャッシュ設定も追記する

 .htaccess ブラウザキャッシュ追記

  ExpiresByType image/webp "access plus 1 weeks"

これでwebpのブラウザキャッシュも1週間有効になります。

そのほかにした処理

Cocoonで出来る高速化設定

テーマのみで行える高速化設定は、WordPress管理画面から「Cocoon設定→高速化」メニューを選択してください。

Cocoonの高速化メニューを選択

「サイト高速化」設定画面で、以下の項目にチェックを入れて設定を保存してください。

サイトの高速化設定方法

  1. ブラウザキャッシュの有効化(ブラウザにリソースを保存する)
  2. HTMLを縮小化する(HTMLのサイズを減らす)
  3. CSSを縮小化する(CSSのサイズを減らす)
  4. JavaScriptを縮小化する(JavaScriptのサイズを減らす)
  5. Lazy Loadを有効にする
  6. 変更を保存

バージョン1.4.0(2018/11/22)以前にブラウザキャッシュを有効化した場合は、一旦無効にしてから保存して、再度有効にして保存してください。
2018-11-21_20h26_11
ブラウザーキャッシュ設定が更新されます。

これだけで、PageSpeed Insightsでモバイル・パソコン双方90点前後は出るのではないかと思います。

画像を更に最適化する方法(この設定は不要になりました)

v1.4.0以降でLazy Loadを有効にしている場合、この設定は不要になりました。設定している場合は、サイトアクセラレータを無効にしてください
パフォーマンスおよびスピード

JetpackのLazy Loadが有効になっていると、一部画像が表示されない等の不具合が出る可能性があります。CocoonのLazy Loadを有効化した場合は、JetpackのLazy Loadを無効にしてください

整理すると

1)Jet packのほうは全てオフ

2)コクーンの高速化設定をリセットオールオン

3)そして最後にサイドトップの広告を削除

正直3)の要因が一番強かったのかもしれないです(T . T)

とりあえず、60台をなんとか維持していきたいと思います。

 

コメント