WoodMartパフォーマンス最適化ガイド：JS/CSSファイルの削減と遅延ロードの有効化

WordPressでeコマースサイトを作成する場合、パフォーマンスの最適化は非常に重要です。ウッドマートこのように機能豊富なテーマ。訪問者にスムーズなショッピング体験を楽しんでもらうために、特にJS/CSSファイルのサイズを小さくし、遅延ロードを可能にするという点で、いくつかの最適化対策を講じる必要がありました。

JSファイルとCSSファイルを減らすには？

1. ファイルの結合と圧縮

複数のJSまたはカスケーディングスタイルシートファイルは1つのファイルにマージされるため、リクエスト数が減り、サーバーの負担が軽減されます。ほとんどのJSファイルとCSSファイルは、ファイルサイズを小さくし、またダウンロードを高速化するツールを使って圧縮することができます。WoodMartテーマでは、以下の方法でマージと圧縮を行うことができます：

プラグインの使用好きだ 自動最適化 もしかしたら WPロケット JSやCSSファイルを自動的に結合・圧縮して読み込み速度を向上させるプラグインなど。

手動最適化コードに詳しい方であれば、テーマのファイル管理機能を使って手動でファイルを結合・圧縮することができます。例えば、すべてのカスタムCSSファイルを1つのファイルにマージし、オンラインツール（例えば CSSミニファイア)を圧縮する。

ステップ1：CSSファイルを探す

ウェブサーバーにログインします（FileZillaなどのFTPツール、またはホスティングコントロールパネルのファイルマネージャーを使用します）。
アクセス・パス
/wp-content/themes/your-theme/(遺言) あなたのテーマ (現在の科目名に置き換える）
すべてのカスタムCSSファイルを見つける（wordpressの外観 → テーマファイルエディタ → style.css）

ステップ2：複数のCSSファイルを1つのファイルに統合する

ローカルでマージするすべてのCSSファイルを、テキストエディタ（VS CodeやNotepad++など）で順番に開く。
内容をコピーして、提案された名前の新しいファイルに貼り付ける：スタイルマージ.css

スタイルのコンフリクトや重複オーバーライドを避けるためにマージする（例：グローバルスタイルが先、カスタムオーバーライドが後）

ステップ3：オンラインツールを使って、マージしたCSSファイルを圧縮する。

例えば、オンライン圧縮ツールにアクセスする：
- https://cssminifier.com
マージされたCSSコンテンツを貼り付け、[最小化]をクリックします。

圧縮されたコードをコピーして スタイルマージ.min.css

ステップ4：圧縮されたCSSファイルをアップロードする

圧縮された スタイルマージ.min.css 例えば、テーマのCSSディレクトリにアップロードします：
/wp-content/themes/your-theme/assets/css/

2. 重要でないJSファイルの読み込み遅延

一部のJSファイルはページロードの重要な部分ではないため、オプションで遅延させることができます。ページに最初に読み込まれるJSファイルの数を減らすことで、ページの読み込み速度を大幅に改善することができます。

プラグインで遅延ロードを有効にする::WPロケットAutoptimizeのようなプラグインは、JSの読み込みを遅延させる機能を提供します。関連する設定を有効にするだけで、プラグインが自動的にサイトを最適化してくれます。

手動遅延ローディングを修正することでテーマを変更することもできます。 functions.php ファイルを使用します。 持ち越す もしかしたら 非同期 属性を使用すると、重要でないスクリプトのロードを遅らせることができます。例えば 持ち越す 属性を使用すると、ページが完全にレンダリングされるまで、ページ内のJSスクリプトの大半の読み込みを遅らせることができます。

ステップ1：ウェブサイトのバックアップ

コードを変更する前に、ウェブサイトのバックアップを取ることをお勧めします。 functions.php ファイルの修正ミスによってサイトがエラーを報告した場合に備えている。

ステップ2：開く functions.php 書類

WordPressバックエンドにログイン
外観] > [テーマファイル編集]を開きます。
右側にある functions.php(テーマ機能）ファイル

ステップ3：以下のコードを挿入してJSを追加する。 持ち越す 因果性

例：追加 持ち越す プロパティ（jQueryを除く）

function add_defer_attribute($tag, $handle) { // jQueryを除外する。
    // jQueryを除外する（必要に応じてハンドルを追加する）
    if (in_array($handle, ['jquery'])) { // jQueryを除外する。
        return $tag；
    }
    return str_replace(' src', ' defer src', $tag)；
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2)；

ステップ4：保存してページのロードをテストする

右上の[Update File]をクリックします。
フロント・ページにアクセスするには、F12キーを押してブラウザの開発者ツールを開き、その中の <スクリプト ラベルが追加されているかどうか 持ち越す もしかしたら 非同期

スクリプトの実行シーケンスに問題が生じないよう、ページが正しく機能しているかチェックする。

3. 不要なプラグインのスクリプトとスタイルを削除する

プラグインによっては、CSSやJSファイルをすべてのページで自動的に読み込むものがありますが、多くの場合、これらのスクリプトはすべてのページで読み込む必要はありません。以下の方法で、不要なスクリプトやスタイルを削除することができます：

不要なプラグインを無効にするページ上の追加リソースの読み込みを避けるため、使用されていないプラグインや不要なプラグインを定期的にチェックし、無効にする。

ページ固有のスクリプトを無効にする特定のページに対して特定のスクリプトをロードするには wp_dequeue_script() もしかしたら wp_dequeue_style() 関数は functions.php ファイルで、不要なスクリプトやスタイルを削除してください。

add_action('wp_print_scripts', function () { )
global $wp_scripts; foreach ($wp_scripts->queue as $script) { { ($wp_scripts->queue as $script)
foreach ($wp_scripts->queue as $script) { { $script .
echo $script . "
";
}
});

このコードは、フロントエンドにすべてのスクリプト名を出力するために挿入される。

画像の遅延ロードを有効にする

画像の読み込み遅延(レイジー・ロード）とは、ページのコンテンツをオンデマンドで読み込むテクニックのことです。レイジー・ロードとは、すべての画像を最初に読み込むのではなく、ユーザーがページの適切な部分までスクロールしたときにのみ画像を読み込むことを意味します。こうすることで、ページの初期読み込みに必要なリソースを大幅に削減し、読み込み速度を向上させることができます。

WordPressで遅延ロードを有効にする WordPress 5.5から、WordPressには画像の読み込みを遅延させる機能が搭載されました。画像の読み込みを遅らせるには wp-config.php ファイルでこの機能を有効にする。以下のコードをファイルに追加するだけです： define('WP_REDIS_ENABLE', true). WordPressの最新バージョンを使用している場合、画像の遅延読み込みは自動的に有効になっているはずです。ページのソースコードを見て loading="lazy" その属性は イムグ この機能を検証するためにラベルを貼る。

プラグインで有効化遅延ローディング 遅延ローディング機能をより細かく制御したい場合や、動画など他のメディアファイルにも適用したい場合は、以下のような遅延ローディングプラグインを使用することができます。 a3 レイジーロード もしかしたら WP Rocketによる遅延ロード.

WoodMartテーマの画像を最適化 WoodMartテーマには、強力な画像最適化オプションがあります。WordPressのバックエンドで、WoodMartテーマ設定に移動し、以下を選択します。 パフォーマンス タブをクリックして、画像の読み込み遅延、画像の自動リサイズなど、関連する画像最適化オプションを有効にします。

その他の最適化推奨事項

ブラウザキャッシュの有効化
ブラウザのキャッシュを有効にすることで、ユーザーはウェブサイトを訪問する際、毎回再ダウンロードするのではなく、より多くの静的リソースをロードするようになります。これは .htaccess ファイルでキャッシュ・ルールを設定してください。
コンテンツ・デリバリー・ネットワーク（CDN）の利用
CDNは、お客様のサイトのコンテンツを世界中の複数のサーバーノードにキャッシュし、配信することで、世界中のユーザーのロード時間を大幅に短縮します。WoodMartは、以下のようなほとんどのCDNサービスとの統合に対応しています。クラウドフレアKeyCDNなど。
サーバーパフォーマンスの最適化
適切なホスティング環境と設定を選択することは、ウェブサイトのパフォーマンスにとって非常に重要です。WoodMartのような機能の多いテーマの場合、PHP7.4以上をサポートするサーバーを選び、キャッシュシステム（RedisやVarnishなど）を有効にすることが、パフォーマンスを向上させる効果的な方法となります。

概要

JS/CSSファイルサイズの削減や遅延ロードの有効化などの最適化により、次のような効果が期待できます。ウッドマートのアップグレードテーマの読み込み速度とパフォーマンスファイルの結合や圧縮、画像の読み込み遅延、不要なスクリプトの削除などは、ウェブサイトの応答性を向上させる効果的な対策です。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み