ブログ運営

WordPressの.jpg/.png画像を切り替えて高速化!「WebP Express」でWebp形式に変換してみる

どうもこんにちは、クスハラです。

モバイル流入が当ブログでも7割以上を占めています。

最近GoogleSpeed Insightsでページスピードを計測。

3Gのスマホ環境での計測結果だそうですが、それでも
これがめちゃくちゃ遅い!

主に画像のローディングで10秒程度待つそう。。。

なので「画像の圧縮+Webp形式」の2種類を使うことで、画像ファイルの軽量化を行うという施策を実施。ベンチマーク基準では少しの変化ですが、実際には大きくロード時間を短縮することに成功。それについて少し詳しく書いてみました。

今回はプラグイン「WebP Express」を使いました。環境によって変換に必要な外部ソフトウェアが揃わないようです。有料ですが「EWWW Image Optimizer」「Short Pixel」なんかも使い勝手が良いのでオススメです。

 

スポンサードサーチ

まずは画像圧縮前のベンチマーク公開!

僕のブログ環境:
MixHostプレミアム(5vCPUs / 8GBメモリ)
WordPress 5.1.1 (JIN テーマ バージョン1.2)

    PageSpeed Insightsを見ていて、サーバーの読み込みで2秒くらい使っていたので、低スペックのお名前共用サーバーから自前のMixHostにファイル移動施策を行いました。

    そこでのスコアの伸びはおよそ+6から7程度。サーバースペックが上がったので、みるみるロードが早くなりました。

    そこから、キャッシュ系プラグイン「WP Fastest Cache」を入れて、HTML/CSS/JSをはじめとした最適化を行いようやくスコア35。

     

    ここまできて、「次世代フォーマットでの画像の配信」がもったいなすぎたので、WordPressでゴリゴリチューニング出来る方法を探したところ、「Webp(ウェッピー)」というグーグル開発の拡張子をプラグインで対応させることができるよう。

    WebPとは、Google開発しているWeb向けの画像フォーマットである。

    WebPは、Web上に掲載される画像ファイルサイズ圧縮主な目的とした、lossy圧縮画像フォーマットである。WebPによって画像圧縮すると、現在一般的に利用されているJPEG形式画像比べて約40%近くデータ量削減することが可能とされる。これによって、Webページ上で画像読み込み速度ひいてはWebページ読み込み速度向上させることができるという。

    WebPは2010年9月Google Chrome公式ブログ上で発表された。Google Codeでは、画像変換ツール変換前後比較サンプルなどが公開されている。

    ーWeblio辞書

    要するに.jpgの3分の1程度に圧縮できるとのことだったので、まずは試してみることに。

    Webp形式は2019年現在、iOS系ブラウザが未対応

    Webpのシェアは確実に伸びてきていて、2019年3月末現在。パソコンではGoogle Chrome、Firefox、Internet Explorerで標準対応。

    しかし、iOSのSafariには未対応。よってSafariベースで開発が進んでいるiPhoneむけのブラウザーでは全滅という状態です。

    よって、Webpを対応ブラウザーのみに表示。iOS向けに圧縮した.jpg/.pngを表示する必要があります。

    そのメンドくさそうな処理をしかも無料で数クリックのみでやってくれるプラグインを見つけたので紹介します。

    今回使うプラグインは「WebP Express」

    ボタンクリックのみで、ブラウザーごとの画像の切り替え表示に標準対応。課金せずにすべての画像をWebP形式で別フォルダーに保存してくれるという神機能。

    ただ、ファイル変換にいずれかの外部サービスのAPIが必要になってきます。僕は知らない間に1つ持っていたので問題なかったです。なければ、これの確保が少し面倒かもですね。

    課金を許容すれば「EWWW Image Optimizer」「Short Pixel」あたりが同じような機能を持っていて、ワンタッチで置き換えてくれる感じで使い勝手〇。一緒に.jpg/.pngの変換まで行ってくれます。

    僕はメディアファイルを無料でEWWW Image Optimizerを使って20%程度圧縮済みです。

     

    iOSを持っていないので、クロームの検証でしか確認できなかったです。

    僕のスマホ「Android+4G」の環境だと、.jpg/.pngオンリーのときよりは圧倒的に画像の読み込みが高速化できました。数秒のはずですが、ここまで体感かわるものなんですね。

    ぜひ一度導入してみてくださいね。回線が遅いときに圧倒的に表示が素早くなりました。

    んで、ベンチマークはどうなったかという+5のみでしたが、実際の表示だとゴリゴリ早くなったので、サーバー移動のベンチ+7の労力を考えれば楽だったなーと思います。

    まとめ:楽にスピードアップができるのでぜひお試しあれ

    高速サーバーに切り替えるくらい大きいフロントの変更でした。キャッシュ系プラグインで最適化しても+3くらいだったと思うので、これから必須な処理になってくる予感がします。

    拡張子の問題はクリアできましたが、「過大なネットワークペイロードの回避」「メインスレッド処理の最小化」「JavaScriptの実行にかかる時間の低減」ここが少し厄介。今も調査中です。

    ウェブフォント読み込み中のテキストの表示は、font-displayの変更で実現可能なので、近いうちにやってみようかと思っています。それ以外はJavaScript。

    いちおうプラグインを利用して、ヘッダでの実行をしない設定ですが、これは結構めんどくさげですね。次はまずフォントに手をつけていこうと思います。

    完了したらまたレポしますね!

     

    ABOUT ME
    クスハラ ショウゴ
    新卒5ヶ月で会社をやめてから、10ヶ月程度プー太郎。 そののち、ウェブ系企業でバイト→エンジニア転職を果たす。 実はTOEICほぼ満点だったりする。 ご連絡は shogo.kusuhara@gmail.com まで

    COMMENT

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です