ブログ運営

サイトの表示速度が遅いのでWebp(ウェッピー)を導入して改善! ~ロリポップ編~

Contents

サイトの表示速度が遅い

サーチコンソールで自分のサイトを

確認してみたら・・

【速度】の数値が悪い。

RENくん
RENくん
【61】決して良い数値ではないね
HIRO
HIRO

いくつかプラグインを

使っているのだけど・・・

【JIN公式】でもオススメされている EWWW Image Optimizerを導入して表示速度改善したよ EWWW Image Optimizerとは インストール方法 ...

↑ EWWW Image Optimizer ↑

画像を劣化させることなく、記事をアップする際に

自動で画像サイズを圧縮してくれるプラグイン

 

WP【JIN】で推奨されているプラグイン【BJ Lazy Loa】を導入したら表示速度が!? 【BJ Lazy Loa】とは? 出典:https://jin-theme.com/manual/plugin/ サ...

↑ BJ Lazy Loa ↑

ただ画像の読み込みを遅くするのではなく、

ブラウザのウィンドウ内に

表示されている画像のみを

段階的に読み込む機能です。

RENくん
RENくん
他にも方法あるの?

Page speed Insightsで確認

RENくん
RENくん

使い方は上のEWWWの

記事内にあるよ

HIRO
HIRO
いまは【61】なんだけど

次世代フォーマットでの画像の配信

RENくん
RENくん
これは何?

画像をJPEGやPNGではなく

これらの形式でエンコードすると、

読み込みが速くなり、

消費するセルラーデータが少なくなります。

RENくん
RENくん

今はJPEGがメインなんだけど、

これらを違う形式に変えれば良いって事?

HIRO
HIRO
そういう事みたいだね
RENくん
RENくん
どの形式に、どうやれば良いの?
HIRO
HIRO

ここにも書いてあるけど

WebPにしてみよう!

WebP(ウェッピー)とは

WebP(ウェッピー)

Googleが開発しているオープンソース静止画フォーマット

ファイルの拡張子は【.webp】

ウェブサイトのトラフィック量軽減と

表示速度短縮を目的としている。

HIRO
HIRO
試してみて数値を見比べてみよう

Webp変換方法

【JIN公式】でもオススメされている EWWW Image Optimizerを導入して表示速度改善したよ EWWW Image Optimizerとは インストール方法 ...
HIRO
HIRO
このEWWW Image Optimizerで出来るんだよ

1. プラグイン【Ewww~】設定

2. 【JPG,PNGからWebP】の隣にあるボックスをクリックしてチェック

3. 【変更を保存】

HIRO
HIRO
設定は、これでOK

4. ダッシュボード→メディア

5. 一括最適化

RENくん
RENくん

ちょっと時間が掛かるけど

のんびり待とう。

6. 完了

RENくん
RENくん

この画像は一部だけど

下までズラっと出てきたよ

HIRO
HIRO

この赤枠のコードは次に使うから

別タブでレンタルサーバーを開くよ

RENくん
RENくん
次!レンタルサーバーで設定!

レンタルサーバーで設定

HIRO
HIRO
このサイトはロリポップだよ

1. ロリポップ!FTP

2. 該当するサイトを選択

3. .htaccessファイルをクリック

4. さっき使うと言っていたコードを貼り付ける

必ず「.htaccess」ファイルの冒頭に上記構文を挿入する。

5. 【保存する】で完了

設定確認

HIRO
HIRO
ちゃんと出来たか確認!

1. ダッシュボード

2. メディア

RENくん
RENくん
緑枠が【Webp】になっていればOK!

Page speed Insightsで確認

HIRO
HIRO
【57】ちょっと悪くなった?
RENくん
RENくん
そんなすぐには変わらないでしょ

まだ【Webp】に変換されていない画像がある。

一括最適化では全部は

変換されていない場合がある

RENくん
RENくん
そうなの!?
HIRO
HIRO

面倒だけど重たいのだけでも

個別にやっておくよ。

①Webpに変換されていない

②再最適化

③完了

HIRO
HIRO
これを順にやっていくよ

まとめ~個人的総評~

色んなサイトを見てきましたけど

Webpを導入されている方も多いようです。

 

このサイトのように

まだ画像(記事)が少ない場合

1割程度しか変わってきませんでしたが

 

今後影響してくると思いますので

出来る時にやっておいた方が良いと

感じました。

 

プラグインから設定まで

そんなに難しくないので

簡単に出来ると思います。

COMMENT

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