Amazon10/19まで!プライム感謝祭開催中! セール会場へ

SWELL│読み込みファイル(CSS/JS)を極力減らす方法

SWELLはWP Rocketなどの有料プラグインを入れなくても、高速化の対策が組み込まれているテーマです。この記事は、画像もコンテンツもない初期状態のサンプル記事で、読み込みファイルをどこまで減らせるかを試した記録です。

とはいえ、まだまだ読み込んでいるCSSやJSがあるので、初期SWELL状態でのサンプル記事(画像は不使用)を指針に、色々削ってみました。

ちなみにファイルを限界まで削ることは推奨しません。

今回はあくまで趣味の範囲での最適化です。

条件は以下の通り。

・サーバーはエックスサーバーの最安プラン
・サイトはWordPress初期状態でSWELLと子テーマを導入
・計測は固定記事にあるサンプル記事

最適化した結果。

画像もコンテンツ量も何にもないサイトなので、スコアは携帯もPCも満点です。

最適化した結果として携帯またはパソコンで満点を記録した測定スコアの画面。
2024年10月19日の検証用サイトでの計測結果。現行のWordPress・SWELLでは再計測していません。
最適化後のもう一方の端末環境における測定結果の画面。
2024年10月19日の検証用サイトでの計測結果。現行のWordPress・SWELLでは再計測していません。
初期状態における良好な測定スコアを示したパフォーマンスレポートの画面。
2024年10月19日の検証用サイトでの計測結果。現行のWordPress・SWELLでは再計測していません。

そもそものSWELLのテーマ自体が高速化対策されていて、初期状態は非常にスコアが良いですね!

追記

シン・エックスサーバーでもサイトを複製して試してみました。

Lighthouse(モバイル)で満点でした(faviconだけ適当に用意)

モバイル環境の測定で満点を獲得した結果画面。
2024年10月19日の検証用サイトでの計測結果。現行のWordPress・SWELLでは再計測していません。
目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELLで読み込み時に残したファイル 4選

結果的には読み込みするリクエスト数は5個(72.7KB)になりました。

読み込みリクエスト数が抑えられた測定結果の内訳画面。
2024年10月19日の検証用サイトでの計測結果。現行のWordPress・SWELLでは再計測していません。

※現在はw-logo-blue-white-bg.png読み込みなしの4つまで抑えられました。

1. / (47.0KB)

当たり前ですが、ページ本体のHTMLです。

2. style.min.css (15.6KB)


SWELLのテーマで必要不可欠なページのレイアウトやデザインを制御するためのCSSです。

3. main.min.js (6.06KB)

SWELLのテーマで必要不可欠なサイトの動作やインタラクションを制御するためのJavaScriptです。

4. favicon.ico (3.95KB)

ファビコンです。

初期はWordPressのファビコンが読み込まれています。

初期状態だとリダイレクトしてw-logo-blue-white-bg.pngを読み込んでしまうので、適当な画像を読み込みましょう。

w-logo-blue-white-bg.png (4.02KB)

読み込み対象となっていたロゴ画像の表示例。

こちらはfaviconを適応すると、読み込まなくなりました。

SWELLでできるだけ不要な読み込みファイルを読み込まない設定

調整した場所はカスタマイズ、管理画面のSWELL設定、functions.phpです。

カスタマイズ│追従ヘッダーを使わない

カスタマイズ>ヘッダー>ヘッダーの追従設定

  • ヘッダーを追従させる(PC)のチェックを外す
  • ヘッダーを追従させる(SP)のチェックを外す

set_fix_header.min.jsを読み込まないように追従ヘッダーをOFFにします。

カスタマイズ│URLコピーボタンを使わない

投稿・固定ページ>SNSシェアボタン>URLコピーボタンを表示しない

set_urlcopy.min.jsとclipboard.min.jsを読み込まないようにURLコピーボタンをOFFにします。

SWELL設定・jQuery│jQueryの読み込み位置

「jQueryをwp_footerで登録する」は読み込み位置を変える設定です。OFFにしてもjQueryの読み込み自体は止まりません。2026年10月11日に参照した管理画面では、SWELL設定の「jQuery」タブにあります。項目名と位置はバージョンによって変わります。

設定・機能停止│SWELLの機能

SWELL機能は全てOFFにしました。

設定・高速化│プリフェッチを使わない

prefetch.min.jsを読み込まないようにPrefetchをOFFにします。

設定・高速化│フッターを遅延読み込みさせるを使わない

/wp-json/wp/v2/swell-lazyload-contents?placement=after_article

記事下コンテンツを遅延読み込みさせるのチェックを外します。

フッターを遅延読み込みさせるのチェックを外します。

設定・高速化│遅延読み込み(lazysizes.js)を使わない

lazysizes.jsを読み込まないようにloading="lazy"を使用するの方をONにします。

functions.php│子テーマのstyle.cssを読み込まないようにする

子テーマのstyle.cssは使わないので読み込まないようにします。

以下に載せている<link>は2024年の検証サイトでの出力例です。ドメイン・パス・ver=の値は環境とバージョンによって変わります。

<link rel="stylesheet" id="child_style-css" href="https://motoki-design.co.jp/wp-content/themes/swell_child/style.css?ver=2024101960318" type="text/css" media="all">

これは単純に子テーマのfunctions.phpの記述を削除かコメントアウトすれば読み込まれなくなります。

/**
 * 子テーマでのファイルの読み込み
 */
//add_action('wp_enqueue_scripts', function() {
	
	//$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
	//wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

	/* その他の読み込みファイルはこの下に記述 */

//}, 11);

functions.php│print.cssを読み込まないようにする

印刷用のCSSを通常読み込むので、それをOFFにします。

<link rel="stylesheet" href="https://motoki-design.co.jp/wp-content/themes/swell/build/css/print.css" media="print">

コードはwp-content/themes/swell/lib/output.php にあります。

print.cssはテーマが直接出力しているため、読み込みの登録を外す方法では消えません。次の例は、head内の出力から対象のlinkタグだけを取り除きます。

// テーマが直接出力するprint.cssのlinkタグを、wp_headの範囲だけで取り除く例。
add_action('wp_head', function () {
    ob_start();
}, 1);

add_action('wp_head', function () {
    $head = ob_get_clean();
    echo preg_replace('#<link[^>]*build/css/print\.css[^>]*>#', '', $head);
}, PHP_INT_MAX);

functions.php│swell-icons.cssを読み込まないようにする

<link rel="stylesheet" id="swell-icons-css" href="https://motoki-design.co.jp/wp-content/themes/swell/build/css/swell-icons.css?ver=2.12.0" type="text/css" media="all">

このスタイルは読み込みの登録(キュー)から外せます。出力されたHTMLを後から書き換える必要はありません。

// link の id="swell-icons-css" は、登録ハンドル swell-icons に対応します。
add_action('wp_enqueue_scripts', function () {
    wp_dequeue_style('swell-icons');
}, 20);

これを消すと使われている部分が×マークがつくので、個別にCSSで変更または消すなどの対応が必要になります。

コード削除により対象部分にバツ印がついた表示状態の画面。

SWELLアイコンを使わないとSWELLっぽさが減るので、あえて消してみるのも良いでしょう。

どうしてもSWELLアイコンを使いたい場合はwp-content/themes/swell/assets/fonts/icomoon.svg のコードを見てCSS化するといいです。

参考例

/* Facebookアイコンを表示 */
.icon-facebook {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform: scaleY(-1); fill:white;"><path d="M736 401.067l25.6 172.8h-166.4v113.067c0 46.933 23.467 93.867 98.133 93.867h76.8v147.2c0 0-68.267 12.8-134.4 12.8-136.533 0-226.133-83.2-226.133-234.667v-132.267h-153.6v-172.8h153.6v-420.267h187.733v420.267h138.667z"/></svg>');
}

/* Twitter Xアイコンを表示 */
.icon-twitter-x {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform: scaleY(-1); fill:white;"><path d="M599.467 533.333l341.333 396.8h-81.067l-296.533-345.6-236.8 345.6h-273.067l358.4-522.667-358.4-416h81.067l313.6 364.8 249.6-364.8h273.067l-371.2 541.867zM488.533 403.2l-36.267 51.2-290.133 413.867h123.733l232.533-332.8 36.267-51.2 302.933-433.067h-123.733l-245.333 352z"/></svg>');
}

/* はてなアイコンを表示 */
.icon-hatebu {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform: scaleY(-1); fill:white;"><path d="M977.067 170.667c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM780.8 853.333h189.867v-520.533h-189.867c-2.133 0-2.133 520.533 0 520.533zM492.8 505.6c0 0 132.267 8.533 132.267 166.4 0 183.467-164.267 183.467-258.133 183.467-61.867 0-322.133 0-322.133 0v-787.2c0 0 266.667 0 320 0 260.267 0 305.067 142.933 305.067 232.533s-46.933 177.067-177.067 204.8v0zM243.2 706.133c72.533 0 68.267 0 87.467 0 17.067 0 87.467-6.4 87.467-74.667 0-81.067-61.867-78.933-104.533-78.933s-21.333 0-72.533 0l2.133 153.6zM347.733 234.667c-49.067 0-68.267 0-104.533 0v172.8c0 0 44.8 0 106.667 0s106.667-12.8 106.667-85.333-61.867-87.467-108.8-87.467z"/></svg>');
}

/* Pocketアイコンを表示 */
.icon-pocket {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform: scaleY(-1); fill:white;"><path d="M896 878.933h-768c-46.933 0-85.333-38.4-85.333-85.333v-283.733c0-260.267 209.067-469.333 469.333-469.333s469.333 209.067 469.333 469.333v285.867c0 46.933-36.267 83.2-85.333 83.2zM556.8 317.867c-25.6-25.6-66.133-23.467-89.6 0-236.8 228.267-238.933 219.733-238.933 258.133 0 36.267 29.867 64 64 64 36.267 0 34.133-8.533 219.733-187.733 189.867 181.333 185.6 187.733 221.867 187.733s64-29.867 64-64c0-38.4-6.4-34.133-241.067-258.133v0z"/></svg>');
}

/* Lineアイコンを表示 */
.icon-line {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="transform: scaleY(-1); fill:white;"><path d="M430.933 136.533c57.6-12.8 51.2-34.133 38.4-110.933-2.133-12.8-8.533-49.067 42.667-27.733 53.333 21.333 283.733 166.4 386.133 285.867 70.4 78.933 104.533 157.867 104.533 245.333 0 221.867-221.867 401.067-490.667 401.067s-490.667-179.2-490.667-401.067c0-196.267 174.933-360.533 409.6-392.533zM693.333 627.2c0 4.267 4.267 8.533 8.533 8.533h138.667c4.267 0 8.533-4.267 8.533-8.533v-34.133c0-4.267-4.267-8.533-8.533-8.533h-93.867v-36.267h93.867c4.267 0 8.533-4.267 8.533-8.533v-36.267c0-4.267-4.267-8.533-8.533-8.533h-93.867v-34.133h93.867c4.267 0 8.533-4.267 8.533-8.533v-34.133c0-4.267-4.267-8.533-8.533-8.533h-138.667c-4.267 0-8.533 4.267-8.533 8.533v209.067zM456.533 625.067c0 4.267 4.267 8.533 8.533 8.533h34.133c2.133 0 6.4-2.133 8.533-4.267l98.133-132.267v128c0 4.267 4.267 8.533 8.533 8.533h34.133c4.267 0 8.533-4.267 8.533-8.533v-213.333c0-4.267-4.267-8.533-8.533-8.533h-34.133c-2.133 0-6.4 2.133-8.533 4.267l-98.133 132.267v-128c0-4.267-4.267-8.533-8.533-8.533h-34.133c-4.267 0-8.533 4.267-8.533 8.533v213.333zM366.933 627.2c0 4.267 4.267 8.533 8.533 8.533h34.133c4.267 0 8.533-4.267 8.533-8.533v-213.333c0-4.267-4.267-8.533-8.533-8.533h-32c-4.267 0-8.533 4.267-8.533 8.533v213.333h-2.133zM181.333 627.2c0 4.267 4.267 8.533 8.533 8.533h34.133c4.267 0 8.533-4.267 8.533-8.533v-168.533h93.867c4.267 0 8.533-4.267 8.533-8.533v-34.133c0-4.267-4.267-8.533-8.533-8.533h-136.533c-2.133 0-4.267 2.133-6.4 2.133-2.133 2.133-2.133 4.267-2.133 6.4v211.2z"/></svg>');
}

/* パンくずの家アイコンを非表示 */
.icon-home:before {
    content: "";
}

/* 日付の時計アイコンを非表示 */
.icon-posted:before {
    margin-right: 0;
    content: "";
}

/* カテゴリーのファイルアイコンを非表示 */
.c-categoryList:before {
    content: "";
}

/* タグアイコンを非表示 */
.c-tagList:before {
    content: "";
}

/* 目次に表示されるアイコンを消す */
.p-toc__ttl:before {
    content: ""!important;
}

ちなみにアイコンによっては反転も必要だったりするので、結構面倒です。

.is-style-more_btn a:after {
    content: "";
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="white"><path d="M938.667 396.8h-853.333v64h782.933l-123.733 138.667 46.933 42.667 170.667-192z"/></svg>');
     transform: translateY(-50%) scaleY(-1); 
}

.is-style-more_btn a:hover:after {
    -webkit-transform: translateX(4px) translateY(-50%) scaleY(-1);
    transform: translateX(4px) translateY(-50%) scaleY(-1);
}

まとめ

色々ファイル読み込みを削った状態のWordPress初期のサンプル記事ですが、携帯でもスコア100が出るとは思いませんでした。

読み込みを削り、本当に必要なものだけを使用すれば、WP Rocketなどを使わなくてもSWELLでスマートフォンのスコアを伸ばせます。ただし、この結果は画像・コンテンツのないサンプル記事での計測です。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

現在の管理画面の参照

以下は2026年10月11日にWindows Chromeで参照した設定画面です。SWELLのバージョンは撮影記録で確認できていません。設定名・位置の参照であり、この記事の高速化例の適用や速度向上を証明した画像ではありません。撮影時のLazy LoadとPrefetchは「使用しない」で、ヘッダー追従は有効でした。

高速化のLazy Load
2026年10月11日、現在の高速化のLazy Loadの項目を参照。設定値は検証例を適用した結果ではありません。
Prefetch
2026年10月11日、現在のPrefetchの項目を参照。設定値は検証例を適用した結果ではありません。
jQueryの読み込み位置
2026年10月11日、現在のjQueryの読み込み位置の項目を参照。設定値は検証例を適用した結果ではありません。
機能停止
2026年10月11日、現在の機能停止の項目を参照。設定値は検証例を適用した結果ではありません。
ヘッダー追従
2026年10月11日、現在のヘッダー追従の項目を参照。設定値は検証例を適用した結果ではありません。
SNSシェアボタン
2026年10月11日、現在のSNSシェアボタンの項目を参照。設定値は検証例を適用した結果ではありません。

確認した範囲と未確認の点

掲載しているスコアと読み込みファイルの内訳は、2024年10月19日に、画像もコンテンツもない初期状態のサンプル記事で計測した結果です。現行のWordPress・SWELLでの再計測、記事数や画像のある実サイトでの効果、各プラグインとの組み合わせは確認していません。

SWELL設定とカスタマイザーの項目名は、お使いのバージョンの管理画面で確認してください。PHPは子テーマのfunctions.phpかPHPスニペット管理プラグインのどちらか1か所にだけ追加し、追加前の内容を保存しておきます。戻すときは、今回追加したコードだけを削除します。

読み込みを減らす以外の高速化はCore Web Vitalsの改善方法、有料プラグインを使う場合はWP Rocketの設定方法、画像の遅延読み込みの個別除外は特定の画像のLazy Loadを除外する方法にまとめています。ほかのカスタマイズはSWELLカスタマイズまとめから探せます。

2026年10月11日に掲載PHPの書き方を見直しました。swell-iconsの登録解除とprint.cssの出力処理を差し替えたコードは、現行の実サイトへ導入して動作や速度を再確認したものではありません。子テーマやプラグインの出力順序・スタイルの依存関係により動作が変わるため、検証環境で確認してください。

よくある質問:SWELLの読み込みファイル(CSS/JS)を極力減らす方法

この記事は、何を試した記録ですか?

記事では、SWELLはWP Rocketなどの有料プラグインを入れなくても高速化の対策が組み込まれているテーマで、この記事は、画像もコンテンツもない初期状態のサンプル記事で、読み込みファイルをどこまで減らせるかを試した記録です。ファイルを限界まで削ることは推奨しておらず、あくまで趣味の範囲での最適化、としています。

どんな条件で、計測しましたか?

記事の条件は、サーバーはエックスサーバーの最安プラン、サイトはWordPress初期状態でSWELLと子テーマを導入、計測は固定記事にあるサンプル記事です。画像もコンテンツ量も何もないサイトなので、スコアは携帯もPCも満点でした。

結果的に、読み込みファイルはいくつ残りましたか?

記事では、結果的に読み込みするリクエスト数は5個(72.7KB)になりました。ファビコンについては、初期状態だとリダイレクトしてw-logo-blue-white-bg.pngを読み込んでしまうので、適当な画像を設定すると読み込まなくなりました。

どこの設定を変えましたか?

記事では、調整した場所はカスタマイズ、管理画面のSWELL設定、functions.phpです。追従ヘッダーを使わない(カスタマイズ>ヘッダー>ヘッダーの追従設定)、URLコピーボタンを使わない、SWELLの機能をOFF、プリフェッチを使わない、フッターを遅延読み込みさせるを使わない、遅延読み込みを使わない、子テーマのstyle.cssを読み込まないようにする、などです。

jQueryの設定をOFFにすると、jQueryは読み込まれなくなりますか?

記事では、「jQueryをwp_footerで登録する」は読み込み位置を変える設定で、OFFにしてもjQueryの読み込み自体は止まりません。2026年10月11日に参照した管理画面では、SWELL設定の「jQuery」タブにあり、項目名と位置はバージョンによって変わります。

この記事の設定を、そのまま自分のサイトに適用してよいですか?

記事では、掲載しているスコアと読み込みファイルの内訳は、2024年10月19日に初期状態のサンプル記事で計測した結果で、現行のWordPress・SWELLでの再計測、記事数や画像のある実サイトでの効果、各プラグインとの組み合わせは確認していません。PHPは子テーマのfunctions.phpかPHPスニペット管理プラグインのどちらか1か所にだけ追加し、追加前の内容を保存しておきます。

元に戻すには、どうしますか? 管理画面の画像は、今も同じですか?

戻すときは、今回追加したコードだけを削除します。記事では、2026年10月11日にWindows Chromeで参照した設定画面は設定名・位置の参照で、SWELLのバージョンは確認できておらず、この記事の高速化例の適用や速度向上を証明した画像ではありません。SWELL設定とカスタマイザーの項目名は、お使いのバージョンの管理画面で確認してください。読み込みを減らす以外の高速化は、記事内で案内しているCore Web Vitalsの改善方法などにまとめられています。最新は公式で確認してください。

  • URLをコピーしました!

表示速度でお困りなら

WordPress高速化の代行

記事のとおりに進めるのが難しいときは、当社が代行します。高速化設定は¥50,000〜、診断のみのご依頼も¥15,000〜(税込)で承ります。改善前後の計測レポートをお渡しします。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトの高速化のサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次