Web制作

Web制作初心者でもできる！ページ速度を速くする設定まとめ

サイトを制作したあと、表示速度を改善するための方法をまとめています。

表示速度はSEOにも大きく関わってきますし、ユーザーのストレスにもなります。可能な限り早く表示するようにして、クライアントさんにとって有意義な、ユーザーにとって快適なサイトを目指しましょう！

サイトの表示速度アップのために有効な手段は、大きく3つ

  • WordPressのプラグインを使う
  • ファーストビューのサイズを整える
  • 読み込みの順番を整える

順番に見ていきましょう！

WordPressのプラグインを使う

プラグインを使い、サイトの表示を最適化していきます。中でも、画像の最適化が重要です。

投稿画像が重くて表示が遅くなってしまう、といったことがあるので、プラグインを使い最適化、圧縮して軽量化します。

おすすめするプラグインは２種類です。

プラグイン：Performance Lab

Performance Lab(パフォーマンスラボ)とは、WordPress開発チームが開発しているプラグインです。画像の最適化、予測読み込みなどを行ってくれます。設定画面を開くと、8つのパネルが表示されますので、赤枠のパネルを有効化しましょう。

プラグイン：EWWW Image Optimizer

画像を圧縮、最適化してくれるプラグインです。プラグイン導入後に設定を行わないと行けないので、忘れないようにしましょう。

ファーストビューの読み込みを早くする

ファーストビュー（大きい画像）が読み込みのボトルネックになりがちです。高解像度の画面に合わせて大きな画像を使用すると、モバイル時にサイズが大きすぎると表示速度が遅くなってしまいます。

改善案：

  • ファーストビュー画像は軽量にして、preload or 先読み優先設定
  • 画面サイズに合わせた画像の設置

モバイル高速化に向けて「ファーストビュー画像の preload（先読み）」対応をします。

LCP（Largest Contentful Paint）の改善にも超効くので、モバイルスコアアップに直結します。

preload（先読み）の基本的な書き方

<link rel="preload" as="image" href="/path/to/image.jpg" type="image/jpeg" fetchpriority="high">

WordPressの実装例

たとえば、こんな風に header.php か functions.php に書いてあげると先読みを行ってくれます。

<!-- ヒーロー画像の先読み -->
<link rel="preload"
      as="image"
      href="<?php echo esc_url(get_theme_file_uri('/assets/img/hero-image.webp')); ?>"
      type="image/webp">

ポイント解説

属性意味
rel="preload"事前に読み込む指定
as="image"種類が画像と教える
type="image/webp"ファイル形式（jpgやpngでもOK）
fetchpriority="high"重要度を伝える！（2022年以降対応ブラウザあり

 属性はモダンな追加要素！

画像タグ側でも指定できます👇（ChromeやSafariが対応）

<img src="/hero.jpg" fetchpriority="high" alt="">

WordPressで画像出すときは、PHP内で echo で追加してあげてもOK！

  1. 使っているファーストビュー画像のファイルパスを確認
  2. header.php の <head> タグ内に link preload を追加
  3. ファイル形式に注意（jpgなら image/jpeg、webpなら image/webp）

ファーストビューのリサイズ


LCP（最大コンテンツの描画）　が遅い場合の対処方法は？

<img 
  class="p-mv__sp-img" 
  src="<?php echo esc_url(get_theme_file_uri()); ?>/assets/img/SP_FV-768.webp"  // ←768px用画像を表示
  srcset="
    <?php echo esc_url(get_theme_file_uri()); ?>/assets/img/SP_FV-480.webp 480w,  // ←480px用
    <?php echo esc_url(get_theme_file_uri()); ?>/assets/img/SP_FV-768.webp 768w   // ←768px用
  "
  sizes="(max-width: 768px) 100vw, 768px"
  alt="SP画像"
  width="768"
  decoding="async"
  loading="eager"
/>

ファーストビューの画像が大きすぎるので読み込みに時間がかかるよ、という指摘ですので、画像のサイズを調整します。

スマホ用のサイズ480pxと768pxの画像を2つ、用意します。

srcsetにて、画面幅に対して、使用する画像を変更するように設定します。

sizesにて、実際に画像が何ピクセル幅で表示されるのかを指定します。

例えば、

sizes="(max-width: 768px) 100vw, 768px"

と、書いておくと、画面が768px以下なら、画面幅いっぱいで表示するようにします。

見るべきポイント

画像ファイルが大きすぎないか？

設定した画像のサイズが300KBを超えていたりしたら、少し大きいかもしれません。

webpに変換したり、圧縮して、150KB以下程度までのサイズにしたいです。

JSやCSSが表示をブロックしていない？

読み込みの順番や余分なCSSやJSによって、画像の表示が遅れている可能性があります。

jsのdefer化、webfontを必要なweightに絞るなどを行います。

fetchapriority="hight"が複数設定されていないか？

head内でlinkタグで設定し、imgタグでも設定すると読み込みが遅くなってしまうことがあります。

どちらか一回にしましょう。

jsのdefer化

javascriptをHTMLのあとに読み込むように設定します。

基本的にはfooterの直後に<script>を記入することで、defer化を行っています。

wordpressだとfunctions.phpで、wp_enqueue_script() の最後の引数をtrueにすると、jacascriptのページを一番下(フッター)で読み込んでくれるため、同じ効果が得られます。実質、「defer」と同じような効果が得られます。

cssのコメントアウトは影響する？

大きく影響はしませんが、多すぎるとファイルが重くなってしまい、少しだけ読み込み速度に影響が出ます。

最後の最後、不要なコードを処理する程度で良いでしょう。

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

ページの最初の表示(First Paint)を、CSSやJavascriptがブロックしてるから、表示が遅れているとのこと。

どのファイルを使っているかを見るために、カバレッジメニューを開きます。

DevToolを開いて、右上の【︙】→その他のツール→カバレッジを選択します。

GoogleAnalytics&Clarityが表示される場合

ページの読み込み速度が落ちてしまうけど、計測関連のタグを外す事はできない…、それでも、「計測」なので、ページの見た目に関係ありません。あとから読み込むように設定します。

footer.phpの</body>タグの直前に配置する場合。

<script>タグをそのまま貼り付けます。

functions.phpに設定する場合

以下のコードを functions.php に貼り付ければ、計測タグを自動的に <footer> に挿入できます。


// Analytics や Clarity タグを挿入する（ご自身のIDに置き換えてください）
add_action('wp_footer', function () {
    ?>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX'); // ← ご自身の測定IDに変更
    </script>

    <!-- Microsoft Clarity -->
    <script type="text/javascript">
        (function(c, l, a, r, i, t, y) {
            c[a] = c[a] || function() {
                (c[a].q = c[a].q || []).push(arguments)
            };
            t = l.createElement(r);
            t.async = 1;
            t.src = "https://www.clarity.ms/tag/" + i;
            y = l.getElementsByTagName(r)[0];
            y.parentNode.insertBefore(t, y);
        })(window, document, "clarity", "script", "XXXXXXXXXX"); // ← ご自身のClarity IDに変更
    </script>
    <?php
}, 100);

googlefontの読み込みを減らす

googlefontの読み込みを減らします。weight毎に読み込んでいるため数が多くなると時間がかかってしまいます。

日本語フォント(noto sans jp等)使わないウェイトを一つ減らすだけでも効果が得られるので、使わないウェイトは減らしていきましょう。

// 例：Lato 400/700、Noto Sans JP 400、Oswald 500だけ使う場合
wp_enqueue_style(
    'google-fonts',
    'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400&family=Oswald:wght@500&display=swap',
    array(),
    null
);

wght@の数字を変えるもの良いですし、ChatGPTに頼るのもよいですね。

サイト表示速度をはやくする：まとめ

サイト表示速度を改善するための方法をまとめてきました。

プラグイン

Performance LabかEWWW Image Optimizerを使用する

コーダー側の調整

  • ファーストビューのリサイズを行う
  • ファイルの読み込み順番を調整する
  • Fontの読み込みを減らす

最後までご覧いただきありがとうございました！

-Web制作