Jetpack

パフォーマンス

Jetpackの「サイトアクセラレーター」機能を無効/有効にした場合で、実際に出力されるimgタグは以下のように変化する。

無効にした場合

<img src="https://example.com/wp-content/uploads/2020/07/sample.jpg" alt="" width="1080" height="1620" class="alignnone size-full wp-image-123" srcset="https://example.com/wp-content/uploads/2020/07/sample.jpg 1080w, https://example.com/wp-content/uploads/2020/07/sample-200x300.jpg 200w, https://example.com/wp-content/uploads/2020/07/sample-683x1024.jpg 683w, https://example.com/wp-content/uploads/2020/07/sample-768x1152.jpg 768w, https://example.com/wp-content/uploads/2020/07/sample-1024x1536.jpg 1024w, https://example.com/wp-content/uploads/2020/07/sample-480x720.jpg 480w" sizes="(max-width: 1080px) 100vw, 1080px">

有効にした場合

<img src="https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=1080%2C1620&ssl=1" alt="" width="1080" height="1620" class="alignnone size-full wp-image-123 jetpack-lazy-image jetpack-lazy-image--handled" data-recalc-dims="1" srcset="https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?w=1080&ssl=1 1080w, https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=200%2C300&ssl=1 200w, https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=683%2C1024&ssl=1 683w, https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=768%2C1152&ssl=1 768w, https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=1024%2C1536&ssl=1 1024w, https://i1.wp.com/example.com/wp-content/uploads/2020/07/sample.jpg?resize=480%2C720&ssl=1 480w" data-lazy-loaded="1" sizes="(max-width: 1000px) 100vw, 1000px">
  • 画像の読み込みをスピードアップ（スクリーンショットの項番2）
    • CDN機能（Photon）が有効化され、https://i1.wp.com/...のようなURLから画像が読み込まれるようになる
  • 画像の遅延読み込みを有効にする（スクリーンショットの項番4）
    • data-lazy-loaded属性およびjetpack-lazy-imageクラスが追加される

※ 元のメモは番号付けが「画像の読み込みをスピードアップ（1）」となっていたが、スクリーンショット上の項番は「2」（1はサイトアクセラレーター自体の有効化トグル）のため修正した。また実URL・実サイトドメインが含まれていたため、example.comと汎用的なファイル名に置き換えた。

高速化WordPress Plugins

  • CDN
  • キャッシュ
  • 画像最適化
  • 画像遅延読込（Lazy Load）
  • CSS圧縮
  • JavaScript圧縮
  • img要素へのwidth/height指定（画面サイズに応じて設定）

プラグイン候補

  • https://wordpress.org/plugins/autoptimize/
  • 画像関連 https://wordpress.org/plugins/search/convert+webp/