SEO対策としての速度チェックでお馴染みの「Google PageSpeed insights」。これは自分のWebサイトの速さ（サクサク動く）を調べるGoogleのツールです。自分のURLを入力ボックスに入れると、PC版とスマホ版のページスピードが0〜100%の数値で示されます。もちろん100%が一番いいですが、ほぼ奇跡の数字です。だいたい80〜90%が「速い」、40%を下回ると「遅い」。スマホ版のチェックが特に厳しく、どう頑張っても70%にいきません。（アドセンス広告か画像かプログラム）
一時期は「パケ死」とも騒がれていた容量問題。重すぎるサイトはスマホユーザーにとってはマイナス要因。今やパケットは使い放題が当たり前ですが、それよりも離脱の方が重要。現代のネットユーザーは1秒を超えると遅い。待てないのです。早く情報が知れるという「スピード感」の方が重要なのですね。
手っ取り早くできる改善方法は、アニメーションやスクリプトは極力控える、Wordpressならプラグインは最低限に抑える、画像データは軽くする、ということになります。
目次
次世代フォーマットでの画像の配信＝WebP（ウェッピー）
私が最初にチェックしたとき、一番改善が見込めると指摘されていたのは「次世代フォーマットでの画像の配信」というもの。JPEGやPNGではなく、Googleが推奨しているWebP（ウェッピー）というフォーマット形式ですが、現段階で非対応のブラウザは多いとのこと（2019年4月）。
Mac、iPhoneユーザーは純正である「Safari」がメインブラウザになっていると思いますが、WebP対応するかしないかってとこで止まっています。ゆくゆくは導入するという話も出ていますので、追い追いWepPに変更していくと仮定して、今ある画像を軽くでき、WebPにも変換できるプラグインを探しました。
画像軽量化のおすすめプラグイン「EWWW Image Optimizer」
他にも色々とサイトを巡って探してみたのですが、これが一番簡単で良さそうだったので選びました。サルワカやバズ部でも紹介されているプラグインです。
「EWWW Image Optimizer」の設定は2箇所だけ
プラグインの追加で「EWWW Image Optimizer」をインストールし、有効化します。まずは設定です。（メニューの「設定」欄にあります）
いじるところは2箇所「Basic」と「Convert」タブです。
1.「Basic」
「Remove Metadata（これにより、すべてのメタデータが削除されます）」にチェックを入れます。画像のメモやテキストなどのメタデータを削除してくれます。
2.「Convert」
「コンバージョンリンクを非表示」にチェックを入れます。画像の拡張子が勝手に変化するのを防ぎ、画質低下トラブルを回避します。
以上で終了。変更を保存を押してください。
追記：WepPに変換もできる
ちなみにこのプラグインでWebPへの変換もできます。場所は「WebP」タブの「JPG, PNG から Web」にチェックをいれればOKです。
この設定は今後アップロードする画像に対して適応されますので、まだ過去の画像が最適化したわけではありません。これから一気に今まで使っていた画像を最適化します。
メディアライブラリの画像を一括で最適化！
すでにメディアライブラリにある画像を一気に軽くしましょう。
メニューの「メディア」から「一括最適化」を選択します。
「最適化されていない画像をスキャンする」ボタンをクリック。すると下に画像が並びます。スキャンが終わるまで待ち、完了すれば「最適化を開始」ボタンをクリック。これで過去画像の最適化が終わりました。
私の場合、この最適化で「次世代フォーマットでの画像の配信」は4位まで下げることができました。
画像圧縮ツールはオンラインサイトにもある
情報サイトで見つけた二つのオンライン画像圧縮ツール「compress png」と「TinyPNG」。どっちが圧縮率が高いのか比較してみました。
比較対象の画像サイズ（初期）：909KB
- compress png…223KB
- TinyPNG…187KB
単純に数字で考えると「TinyPNG」の勝ちです。ということで、画像は最初「TinyPNG」でオンライン圧縮し、さらにアップロードして最適化が一番いいのかも。
WebPはいつからメインに？
現段階でWebP画像が確認できるのはChromeとFirefox、Microsoft Edge。Safariは非対応です。
ちなみに2019年3月時点で日本のブラウザのシェア率が発表されています。
1位 Chrome 56.87%
2位 IE 15.12%
3位 Firefox 9.31%
4位 Safari 9.62%
5位 Edge 7.21%
6位 Opera 0.76%
7位 Vivaldi 0.19%
8位 QQ Browser 0.18%
9位 Sleipnir 0.18%
10位 その他 0.56%
次いで日本のスマホブラウザシェア率はChrome 63.3%、Safari 26.9%。後は1%台です。それに比例してスマホシェア率はAndroid 60%、iPhone 40%。
スマホファーストと言われる現代において、第2シェアであるSafariは無視できませんので、まだもうちょい先といった感じでしょうか。全部統一してほしいところです。
htmlでの画像最適化：<picture>要素でスマホ&WebP対応（HTML5）
一般的な認識として、今まで画像というのは<img>で一つの画像を指定し、サイズをレスポンシブ対応させるためにはメディアクエリというCSSを使って調整していましたが（または二つのhtmlを記述しておき、displayでオンオフを切り替える）、これが全てhtmlで対応できるようになったのが<picture>要素です。
PCビュー用とモバイルビュー用で解像度を変えた2種類の画像を用意し、先にsoure srcset属性でモバイル用画像を指定しておき、その後に通常通りimgでPC用画像を指定します。
メディアクエリと同じ働きをするmediaはsourceの中に記述します。
<picture>
<source srcset="images/mobile.png" media="(max-width: 600px)">
<img src="images/pc.png" alt="画像の説明">
</picture>
まとめ：<img>を<picture>で囲み、<img>の上にスマホ用の<source>を追加する。
WebP画像を表示させたい場合の使い方
今あるJPEGやPNGの画像をWebP画像に変更させることもできるみたいです。WebP対応のブラウザではWebP画像を選んで表示してもらうというコードです。WebP非対応の場合はそのままJPEGが表示されるということですね。imagesフォルダにはJPEGとWebPの両方を置いておき、パスで指示します。
<picture>
<source srcset="images/pc.webp" type="image/webp">
<img src="images/pc.jpg">
</picture>
色々と進化してますなぁ。
WordPressのプラグイン関連記事
要らなくなったWordPressを削除する方法【ロリポップ向け】
WordPressのバックアップは「All-in-One WP Migration」で
吹き出しのプラグイン「Word Balloon」が可愛い
WordPressでダウンロードボタンを設置する