WebP_Expressプラグインで
ホームページを軽く

記事公開日:
最終更新日:

マザーシップウェブ制作事務所のなるゆうです、こんにちは。

当方制作のホームページでは、画像の表示を早くする方法の1つとしてWebP Expresというプラグインを利用しています。

画像ファイル(jpgやpng)を、表示が早い「webp」というファイルに自動変換してくれるツールです。

WebP Express

 

PageSpeedインサイトの結果(スマホ)

当サイトの結果です。

 

WebP Expressを有効化していないとき

WebP_Expressプラグインで ホームページを軽く-新潟ホームページ制作(フリーランス / SOHO)

 

WebP Expressの設定をしているとき

WebP_Expressプラグインで ホームページを軽く-新潟ホームページ制作(フリーランス / SOHO)

 

、、お、、おおうというレベルのスピードなのですが、要素をかなり詰め込んだサイトのスマホ版でこの改善はありがたいです。

すこしでも早くしたいとご検討の方、他のwebPプラグインで数字の改善がないよ、という方におすすめのプラグインです。

 

WebP Expressの利用方法

1)まずはインストール

WebP_Expressプラグインで ホームページを軽く-新潟ホームページ制作(フリーランス / SOHO)

 

2)設定

管理画面サイドバーの[設定]-[WebP Express]より設定

WebP_Expressプラグインで ホームページを軽く-新潟ホームページ制作(フリーランス / SOHO)

最後のAlter HTMLについて、私は「Replace image URLs」(画像のURLを置き換える)を選択しています。

デフォルトでは、<picture>タグを使用する方法が選択されていますが、この設定の場合はサイトでLazy load等(遅延読み込み)を利用しているときにjpegやpngなどオリジナル画像のまま配信されている場合があるためです。

遅延読み込みしていてもトラブルが無いサイトでは「Replace <img> tags with <picture> tags, adding the webp to srcset」にチェックで問題ありません。こちらの方がページキャッシュの面で有利だそうです。

(どちらにしても数値上・体感上の速度にほとんど変化が無いように思います)

 

3)数時間待つ。急ぎの場合はメディアライブラリからも変換可能です。

サイトの規模によるかもしれないのですが、私の感覚では一晩おいた頃に変換が完了しています。

WebP_Expressプラグインで ホームページを軽く-新潟ホームページ制作(フリーランス / SOHO)

 

4)最後にスピードテストをしてみましょう

https://developers.google.com/speed/pagespeed/insights/?hl=ja

早くなりましたか?

 

 





ページの先頭へ