BLOG

WordPressサイトの高速化完全ガイド｜PageSpeed Insights改善術

ページ表示速度は UX と Core Web Vitals の要。
本記事では、WebP 画像の導入と、JavaScript での画像遅延読み込みを中心に、
PageSpeed Insights スコアを底上げする手順をご紹介します。
実際に MV カルーセルで試したところ、見た目もクールになりつつ高速化に成功しました！

1. WebP画像を導入する

JPEG/PNG→WebP へ変換すると、同画質でファイルサイズを大幅に削減可能。
プラグイン（例：WebP Express）を使うか、ビルド時に画像を変換してアップロードしましょう。

  • 画像サイズが50％〜70％程度に減少
  • PageSpeed Insights の「画像の最適化」警告を解消
  • 対応ブラウザは増加中（非対応ブラウザにはフォールバック）

2. JavaScriptで画像を遅延読み込み

jQuery＋slick.js のカルーセル内で、画像タグを動的に読み込むことで
初期の描画コストを抑制。見た目もフェードインで演出できます。 


jQuery(function() {
  var $topFvSlide = jQuery('.fv-slide .slide-row');

  topFvSlide();
  jQuery(window).on('resize', function() {
    $topFvSlide.slick('unslick');
    topFvSlide();
  });

  function topFvSlide() {
    if (!$topFvSlide.length) return;
    $topFvSlide.slick({
      autoplay: true,
      autoplaySpeed: 0,
      arrows: false,
      cssEase: "linear",
      infinite: true,
      pauseOnFocus: false,
      pauseOnHover: false,
      rtl: true,
      swipe: false,
      speed: 6000,
      slidesToShow:6,
      slidesToScroll:1,
    });
    $topFvSlide.animate({opacity:1}, 300, 'swing');

    // 画像遅延読み込み＆フェードイン
    jQuery('.front-page .fv img').each(function(){
      var $img = jQuery(this);
      var src = $img.attr('src');
      $img.attr('src', '');
      $img.on('load', function() {
        $img.animate({opacity:1}, 600, 'swing');
      });
      $img.attr('src', src);
    });
  }
});

3. その他の軽量化ポイント

  • CSS/JSの遅延読み込み：deferやasync属性で非同期化
  • キャッシュ活用：ブラウザキャッシュ＆CDN で再訪問時の読み込みを高速化
  • 不要プラグインの見直し：使用状況を精査して不要なリソースを削減

まとめ

1) WebP 画像導入でサイズを削減
2) JavaScript で画像の遅延読み込み＆フェードイン
3) 遅延読み込み・キャッシュ・軽量テーマでさらに高速化！
これらを組み合わせることで、PageSpeed Insights のスコアを確実に向上できます。
コピペで導入して、自分のサイトで試してみてください！

ご相談ください

より高度なパフォーマンスチューニングや、ヘッドレス CMS 連携など、
専門的な改善は山キノコロリ WEB事業部にお任せください。
▶ お問い合わせフォーム

BACK