Contents
サイトの表示速度が遅い
サーチコンソールで自分のサイトを
確認してみたら・・
【速度】の数値が悪い。
いくつかプラグインを
使っているのだけど・・・
↑ EWWW Image Optimizer ↑
画像を劣化させることなく、記事をアップする際に
自動で画像サイズを圧縮してくれるプラグイン
↑ BJ Lazy Loa ↑
ただ画像の読み込みを遅くするのではなく、
ブラウザのウィンドウ内に
表示されている画像のみを
段階的に読み込む機能です。
Page speed Insightsで確認
使い方は上のEWWWの
記事内にあるよ
次世代フォーマットでの画像の配信
画像をJPEGやPNGではなく
これらの形式でエンコードすると、
読み込みが速くなり、
消費するセルラーデータが少なくなります。
今はJPEGがメインなんだけど、
これらを違う形式に変えれば良いって事？
ここにも書いてあるけど
WebPにしてみよう！
WebP（ウェッピー）とは
WebP（ウェッピー）
Googleが開発しているオープンソース静止画フォーマット
ファイルの拡張子は【.webp】
ウェブサイトのトラフィック量軽減と
表示速度短縮を目的としている。
Webp変換方法
1. プラグイン【Ewww～】設定
2. 【JPG,PNGからWebP】の隣にあるボックスをクリックしてチェック
3. 【変更を保存】
4. ダッシュボード→メディア
5. 一括最適化
ちょっと時間が掛かるけど
のんびり待とう。
6. 完了
この画像は一部だけど
下までズラっと出てきたよ
この赤枠のコードは次に使うから
別タブでレンタルサーバーを開くよ
レンタルサーバーで設定
1. ロリポップ！FTP
2. 該当するサイトを選択
3. .htaccessファイルをクリック
4. さっき使うと言っていたコードを貼り付ける
必ず「.htaccess」ファイルの冒頭に上記構文を挿入する。
5. 【保存する】で完了
設定確認
1. ダッシュボード
2. メディア
Page speed Insightsで確認
まだ【Webp】に変換されていない画像がある。
一括最適化では全部は
変換されていない場合がある
面倒だけど重たいのだけでも
個別にやっておくよ。
①Webpに変換されていない
②再最適化
③完了
まとめ～個人的総評～
色んなサイトを見てきましたけど
Webpを導入されている方も多いようです。
このサイトのように
まだ画像（記事）が少ない場合
1割程度しか変わってきませんでしたが
今後影響してくると思いますので
出来る時にやっておいた方が良いと
感じました。
プラグインから設定まで
そんなに難しくないので
簡単に出来ると思います。
[…] サイトの表示速度が遅いのでWebp（ウェッピー）を導入して改善！ ～ロリ… […]