ゼロから始めるWordPress 
WordPressを高速化する方法はいくつもありますが、ネックになるのはだいたい画像ファイルです。
画像を圧縮したりリサイズしたりと軽くする方法は様々ですが、今回はWordPressの画像を次世代フォーマットに対応させる方法を紹介します。
目次
PageSpeed Insightsの改善できる項目
PageSpeed Insightsで測定すると改善できる項目には
「次世代フォーマットでの画像の配信」が大体1位になると思います。
JPEGやPNG以外の圧縮率が高い画像フォーマットのことです。
どのフォーマットもそれぞれ特徴がありますが、今回おすすめするのはWebPです。
なぜかと言うと、あの天下のGoogleが開発しているフォーマットだからです！
ちなみにファイルの拡張子は「.webp」になります。
様々なサイトで圧縮の劣化の具合などを評価されているので割愛しますが、ほぼ劣化なくサイズを高効率で圧縮できます。
EWWW Image Optimizerを使ってWebPに変換する
まずはEWWW Image Optimizerをインストールします。すでにインストール済の人は飛ばしてください。
EWWW Image Optimizerの設定画面から「WebP」タブをクリックします。
そして「JPG,PNGからWebPにチェック」を入れて、変更を保存します。
すると、下の方にこのような記述が表示されます。また右下の方にPNGと赤色で表示されています。
<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ファイルに追記する
これはレンタルサーバーや人によってやり方が異なります。
FTPクライアントを使用する場合
一般的な方法はFTPクライアントソフトを利用して.htaccessファイルをダウンロードして編集してアップロードする方法です。
FileZillaを使ってSSH(SFTP)接続で安全にファイル転送する方法エックスサーバーの場合
エックスサーバー
の場合は、WEBブラウザから変更が可能です。
エックスサーバーの管理画面にログイン後
「ホームページ」ー「.htaccess編集」から対象ドメインを選択して変更可能です。
ConoHa WINGの場合
ConoHa WING
の場合もWEBブラウザから変更が可能です。
管理画面にログイン後、対象ドメインを選択して
「サイト管理」ー「サイト設定」ー「応用設定」ー「.htaccess設定」から変更可能です。
WebPファイルに変換する
WebPファイルを生成するためにWordPress管理画面から
「メディア」ー「一括最適化」ー「最適化されていない画像をスキャン」
スキャン後に一括最適化を行います。
WebPで配信されているかの確認方法
画像ファイルがWebPで配信されているかを確認する方法はいくつか方法があります。
EWWW Image Optimizerの設定画面の右下がWEBPと緑色に表示されていてばOKです。
Google Chromeの検証ツールでも確認できます。
サイト上で右クリックから「検証」をクリックします。
「Network」タブでFilterを「Img」を選択し、サイトを読み込ませて画像のファイルがwebpとなっていればwebp画像が配信されています。
ブラウザキャッシュを使用している場合はWebPも追記する
別途個別にブラウザキャッシュの設定を行っている場合はWebP用のキャッシュ設定も追記する
ExpiresByType image/webp "access plus 1 weeks"これでwebpのブラウザキャッシュも1週間有効になります。
まとめ
- 画像ファイル：画像ファイルを圧縮、次世代フォーマットの利用
- 外部ファイル：広告を貼りすぎない
- 解析ダグ：アクセス解析タグを貼りすぎない
- 遅延読み込み：Lazy Loadのプラグインを使う
- コードの肥大化：Autoptimize などで圧縮する
- ブラウザキャッシュの利用：.htaccessでブラウザキャッシュを有効化
- サーバーの処理能力不足：高速なサーバーを利用する
これは私の他のサイトの測定結果ですが、モバイルでも92までスコアがありました。
しかし、100点を叩き出してもただの自己満足に過ぎないので、平均の50～89点を目指して頑張ってみてください(^^)
