Wordpress

PageSpeed Insightsで検証した結果、かなりUser-unfriendlyなサイトになっている事が判明(こちら)。

 

対策1は、レンダリングを妨げるリソースの除外に挑戦し、ある程度効果が得られた(こちら)。

 

対策2として、次は画像サイズの縮小を検討。

画像サイズの縮小について

私は元々Photoshopで解像度を変更し、圧縮保存して、それぞれの画像を50kb以内に抑えるようにしてきたけれど、

調べると、劣化を最小限にしたままさらに画像サイズを縮小させられるよう。

 

因みにPhotoshopでWeb用に保存する場合、

  • 通常の写真等はJPEG
  • ロゴなどのはっきりした画像はPNG

で保存すると良い。

 

また、元々ある程度小さい画像なら、画像圧縮サイトを使うと便利。

tinypng-1

 

 

今回は、EWWW Image Optimizerで画像圧縮を試みる。

また、次世代画像フォーマットWebPにも挑戦。

画像の一括圧縮

EWWW Image Optimizerのインストール 

管理画面 → プラグイン →新規追加 → EWWW Image Optimizerで検索 → インストール → 有効化

ベーシック:メタデータを削除にチェックを入れる → 変更を保存

写真にはレンズ焦点距離や露光量、撮影日時・場所などのメタデータが保存されているが、それらを削除する。

画像を軽くする観点でも、個人情報を護る意味でも設定するべし。

他の設定はデフォルトでOK。

変換:コンバージョンリンクを非表示にチェックを入れる → 変更を保存

Convertタブは特に触る必要はないが、コンバージョンリンクを非教示だけはチェックしておく必要あり。

画像形式の変換を意図しない形で変換しないようにする目的。

時々極端に劣化した画像になったりと、不都合が生じる事があるから。

一括最適化

  1. 管理画面 → メディア → 一括最適化
  2. 「最適化されていない画像をスキャンする」を選択
  3. この時点で数千画像がピックアップされた。
  4. 「最適化を開始」をクリック。
  5. 候補画像を全て最適化してくれる → 終了。

WebPに変換

WebP(ウェッピー)は、Googleが提供する最新の静止画フォーマット。

既存の画像形式と比較して、約2,3割サイズを小さくすることが可能。

  • Chrome, Microsoft Edge, Firefoxでは対応。
  • Safari, IEは非対応。

WebP:WebP変換にチェックを入れる→変更を保存

ここにチェックを入れると、対応ブラウザではWebPに、非対応ブラウザではオリジナルフォーマットで表示してくれる。

表示されたコードを.htaccessファイルに追記

(1) が終了すると、コードが表示される。

※ まだWebP化されていない状態なので、画像は赤背景にPNGの文字 ↓

PNGの状態

このコードをサーバーにアップロードする。私は、サーバ内へのアクセスにFFFTPソフトを使っている。

  1. FFFTPを起動し、サーバ内にアクセス。
  2. メインは、○○.com → public_html の中に、.htaccessのファイルがある。
  3. サブドメインは、○○.com → public_html → サブドメインのフォルダ の中にある。
  4. クリックし、ダウンロード。
  5. テキストファイルで開き、トップに表示されていたコードを追記して.htaccessで保存。
  6. FFFTP経由で同じ場所にアップロード。

 

アップロード後、画像は緑背景にWEBPの文字に変わる↓

WEBPに変わった

 

これで、ちょっとはサイトスピードがあがったんだけれど、まだまだ赤信号の状態。

戦いは続く……

現時点での課題と対処状況

「レンダリングを妨げるリソースの除外」

「画像サイズの縮小と次世代フォーマットの適応」

「使用していないJavaScriptの削除」

「課題なROMサイズの回避」

「アドセンスの自動広告を遅延読み込み」

References

にほんブログ村 子育てブログ ワーキングマザー育児へ