Wordpress

地道にサイトの高速化実施中。

今回取り組んだのは、画像の遅延読み込み「Lazy Load」。

プラグインで。

Lazy Loadのプラグインは色々あるが、今回は

  • 有効インストール数が多い
  • 更新頻度が高い
  • 現在使用中のSPバージョンと相互性がある
  • 他サイトでの評価が高い

等の理由から、「Smush」というプラグインを導入した。

 

このプラグインは、全ての画像の圧縮&最適化と遅延読み込みが可能。

画像圧縮には、以前「EWWW Image Optimizer」というプラグインを使用していたが、

圧縮率はそこまで変わらないようなので、EWWWは削除し、画像圧縮とLazy Loadが両方可能なSmushで統一した。

Smushの使用方法 

 

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

管理画面にSmushの項目が現れる

ダッシュボードのところに、

  • Bul Smush
  • Directry Smush
  • Integrations
  • Lazy Load
  • CDN

画像圧縮等の説明は今回割愛し、Lazy Loadの設定を記載しておく。

Lazy Load

1. ダッシュボードのリストからLazy Loadを選択

WP-Smush

以下、基本全ての項目にチェックを入れる。

2. メディアタイプ

  • .jpg
  • .png
  • .ip
  • .svg
  • iframe

4. Display & Animation

  • フェードイン
  • スピナー
  • プレースホルダー
  • なし

お好みで。

5. Include/Exclude

  • フロントページ
  • ブログ
  • 固定ページ
  • 投稿
  • アーカイブ
  • カテゴリー
  • タグ

遅延読み込みを外したい投稿、固定ページ、URL等があれば、その下にある項目に記載する。

6. スクリプト

フッターかヘッダーか選べる。

デフォルトのフッターでOK。

7. 設定を保存。

 

 

以上により、サイトのスピードは

  • モバイル: 27 -> 33
  • デスクトップ: 85 -> 97

に改善した。

デスクトップの改善が大きい。

でも、肝心のモバイルのスピードは、期待していたほどのは改善が見込めず…

うーん、モバイル対策のはずだったんだけどなー。

 

 

戦いは続く…

References

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村