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

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

畫像 [1] - WoodMartパフォーマンス最適化ガイド:JS/CSSファイルの削減と遅延ロードの有効化

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

1. ファイルの結(jié)合と圧縮

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

  • プラグインの使用好きだ 自動最適化 もしかしたら WPロケット JSやCSSファイルを自動的に結(jié)合?圧縮して読み込み速度を向上させるプラグインなど。
  • 手動最適化コードに詳しい方であれば、テーマのファイル管理機(jī)能を使って手動でファイルを結(jié)合?圧縮することができます。例えば、すべてのカスタムCSSファイルを1つのファイルにマージし、オンラインツール(例えば CSSミニファイア)を圧縮する。

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

  1. ウェブサーバーにログインします(FileZillaなどのFTPツール、またはホスティングコントロールパネルのファイルマネージャーを使用します)。
  2. アクセス?パス
    /wp-content/themes/your-theme/(遺言) あなたのテーマ (現(xiàn)在の科目名に置き換える)
  3. すべてのカスタムCSSファイルを見つける(wordpressの外観 → テーマファイルエディタ → style.css)
畫像 [2] - WoodMartパフォーマンス最適化ガイド:JS/CSSファイルの削減と遅延ロードの有効化

ステップ2:複數(shù)のCSSファイルを1つのファイルに統(tǒng)合する

  • ローカルでマージするすべてのCSSファイルを、テキストエディタ(VS CodeやNotepad++など)で順番に開く。
  • 內(nèi)容をコピーして、提案された名前の新しいファイルに貼り付ける:スタイルマージ.css
  • スタイルのコンフリクトや重複オーバーライドを避けるためにマージする(例:グローバルスタイルが先、カスタムオーバーライドが後)

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

  • 例えば、オンライン圧縮ツールにアクセスする:
  • マージされたCSSコンテンツを貼り付け、[最小化]をクリックします。
畫像 [3] - WoodMartパフォーマンス最適化ガイド:JS/CSSファイルの削減と遅延ロードの有効化
  • 圧縮されたコードをコピーして スタイルマージ.min.css

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

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

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

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

  • プラグインで遅延ロードを有効にする::WPロケットAutoptimizeのようなプラグインは、JSの読み込みを遅延させる機(jī)能を提供します。関連する設(shè)定を有効にするだけで、プラグインが自動的にサイトを最適化してくれます。
畫像[4] - WoodMartパフォーマンス最適化ガイド:JS/CSSファイルの削減と遅延ロードの有効化
  • 手動遅延ローディングを修正することでテーマを変更することもできます。 functions.php ファイルを使用します。 持ち越す もしかしたら 非同期 屬性を使用すると、重要でないスクリプトのロードを遅らせることができます。例えば 持ち越す 屬性を使用すると、ページが完全にレンダリングされるまで、ページ內(nèi)のJSスクリプトの大半の読み込みを遅らせることができます。

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

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

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

  1. WordPressバックエンドにログイン
  2. 外観] > [テーマファイル編集]を開きます。
  3. 右側(cè)にある functions.php(テーマ機(jī)能)ファイル
畫像 [5] - WoodMartパフォーマンス最適化ガイド:JS/CSSファイルの削減と遅延ロードの有効化

ステップ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キーを押してブラウザの開発者ツールを開き、その中の <スクリプト ラベルが追加されているかどうか 持ち越す もしかしたら 非同期
畫像 [6] - WoodMart パフォーマンス最適化ガイド:JS/CSS ファイルの削減と遅延ロードの有効化
  • スクリプトの実行シーケンスに問題が生じないよう、ページが正しく機(jī)能しているかチェックする。

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

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

  • 不要なプラグインを無効にするページ上の追加リソースの読み込みを避けるため、使用されていないプラグインや不要なプラグインを定期的にチェックし、無効にする。
  • ページ固有のスクリプトを無効にする特定のページに対して特定のスクリプトをロードするには wp_dequeue_script() もしかしたら wp_dequeue_style() 関數(shù)は 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には畫像の読み込みを遅延させる機(jī)能が搭載されました。畫像の読み込みを遅らせるには wp-config.php ファイルでこの機(jī)能を有効にする。 以下のコードをファイルに追加するだけです: define('WP_REDIS_ENABLE', true). WordPressの最新バージョンを使用している場合、畫像の遅延読み込みは自動的に有効になっているはずです。ページのソースコードを見て loading="lazy" その屬性は イムグ この機(jī)能を検証するためにラベルを貼る。
畫像 [7] - WoodMart パフォーマンス最適化ガイド:JS/CSS ファイルの削減と遅延ロードの有効化
  • プラグインで有効化遅延ローディング 遅延ローディング機(jī)能をより細(xì)かく制御したい場合や、動畫など他のメディアファイルにも適用したい場合は、以下のような遅延ローディングプラグインを使用することができます。 a3 レイジーロード もしかしたら WP Rocketによる遅延ロード.
畫像 [8] - WoodMart パフォーマンス最適化ガイド:JS/CSS ファイルの削減と遅延ロードの有効化
  • WoodMartテーマの畫像を最適化 WoodMartテーマには、強(qiáng)力な畫像最適化オプションがあります。WordPressのバックエンドで、WoodMartテーマ設(shè)定に移動し、以下を選択します。 パフォーマンス タブをクリックして、畫像の読み込み遅延、畫像の自動リサイズなど、関連する畫像最適化オプションを有効にします。
畫像 [9] - WoodMart パフォーマンス最適化ガイド:JS/CSS ファイルの削減と遅延ロードの有効化

その他の最適化推奨事項

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

概要

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


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はリトル?リンが執(zhí)筆した。
終わり
好きなら応援してください。
クドス1129 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし