WordPressでJavaScriptのロード体験を最適化するプラグインの紹介
3897 ワード
WordPress自体とトピックとプラグインは、通常、いくつかの特殊な機能を実現するためにJavaScriptをロードする必要があります.互換性を最大限に保つためにJavaScriptが無効になることはないので、JavaScriptファイルをヘッダーにロードするのが一般的です.ただし、Yahoo開発者フォーラムの推奨に従って、JavaScriptをロードするには、ページの表示(応答、レンダリング)速度を向上させるために、できるだけページの最後にロードする必要があります.本稿では、著者の使用経験に基づいて、いくつかの関連プラグインを紹介し、特定のページでJavaScriptをページの先頭にロードする方法について説明します.
次に、JavaScriptの最適化に関するWordPressプラグインと特徴を簡単に紹介し、特別な状況をどのように処理するかを示します.
一.JavaScriptを最適化するWordPressプラグインWP Minify、Autoptimize、JavaScript to Footerの3つのプラグインを使ったことがありますが、その特徴を紹介します.
1.WP MinifyこのプラグインはMinifyエンジンをWordPressに統合します.有効にすると、プラグインはJSとCSSファイルを統合して圧縮し、ページのロード速度を向上させることができます.
WP Minifyは、生成されたWordPressページのJS/CSSファイルをキャプチャし、ファイルリストをMinifyエンジンに渡すことができます.Minifyエンジンは、WP MinifyによってWordPressページの先頭に置き換える強化され、簡素化され、圧縮されたJavaScriptまたはスタイルシートファイル(CSS)を返します.
主な特徴は次のとおりです.は使いやすい. はJavaScript、CSS、HTMLに有効です. はデバッグツールを提供します. 外部JSとCSSファイルを処理することができる. は指定されたJSとCSSファイルを除外することができる. は、処理後のJSおよびCSSファイルの場所(ヘッダーまたは末尾、さらには別の場所)を指定することができる; 処理後のJSやCSSファイルに期限切れなどを追加できます.
WordPress 3.1のテスト版が出た後、WP Minifyが互換性がなく、ウェブサイトが正しくロードできないことに気づきました.
2.Autoptimizeは将来、WP Minifyのアップグレード後に互換性のない問題を解決するかもしれませんが、待ちきれません.その後、Autoptimizeという似たような機能を持つプラグインが見つかり、このプラグインの操作が簡単になりました.
Autoptimize統合、すべてのJSとスタイルシート(CSS)ファイルをコンパクトに圧縮し、キャッシュの有効期限を増やします.スタイルシートファイルをヘッダーに配置します.(同じようにページのロード効率を高めるために)、JSファイルをページの最後に置きます.HTMLコードを簡素化してページを痩せることもできます.しかし、HTMLページに痩せる作用は明らかではないと思います.サーバーがGzip圧縮特性を開いていれば、そうする必要はありません.
デフォルトでは、Autoptimizeは上記の方法ですべてのHTML/CSS/JavaScriptを最適化します.
個人的には、AutoptimizeはWP Minifyよりも使いやすいWordPress最適化プラグインだと思います.
3.JavaScript to Footerというプラグインは非常に簡潔に書かれています.ソースコードを確認しましたが、タスクを完了したコードはWordPress関数が6つ(以下参照)、つまり6行しかありません.そのため、このプラグインは作成後からどのように更新されたのか分かりません.最初から最終変更日が2009年9月22日にとどまっているのを見ていたので、無視しました.
ただし、JavaScriptのロード場所を最適化するだけで、WordPressで正しく宣言されたJavascriptファイルをすべてページの最後に移動してロードします.HTMLコードやCSSスタイルシートファイルは一切処理されていません.
JavaScript to Footerのソースコードに従って、次の6行のコードを使用して作業を完了します.
必要に応じて、特定のWordPressテンプレートのwp_head()関数の前に次のコードを加え、上記の手順を逆転させ、つまり失効させ、本来のロード位置に復元します.
もちろん特定のページテンプレートについてだけですが、すべてのページであれば、プラグインを無効にしてください.D
二.使用方法は、多くのWPerにとって、前の紹介を見て、自分が必要とする最適化プラグインをどのように選択し、合理的に使用するかを知っていると信じています.以下の3つの側面に基づいて考えているにほかならない.
あなたのページテンプレートにはHTMLコメント、スペース、空行などのマークがたくさん使われていますか?なければ、少しのために(Gzip圧縮をオンにすると通常1%以下)の帯域幅を節約してHTMLシン機能を使用します.あなたのページには複数のCSSスタイルシートファイルがロードされていますか?ない場合は、プラグインを使用してCSSスタイルシートをシンおよび統合する必要はありません.手動でCSSスタイルシートをシンおよび統合することは、プラグインを使用するよりも簡単で効率的です.WordPressのデフォルトに基づいて、JavaScrがページヘッダにロードされますiptは、一般的なWordPressサイトでJSのロード位置を最適化する必要があります.しかし、ほとんどのページでJSが無効にならないようにページヘッダにJSをロードする必要がある場合は、このような最適化はできません.私から見れば、WP Minifyは必要ありません.理由は前に述べました.残りのAutoptimizeとJavaScript to Footerはどちらかまたは両方を組み合わせて使用できます(併用であれば当然前者のHTMLとCSSシン/統合機能を使用し、後者のJS位置制御機能を使用します.後者はこの機能ですから).JSのロード位置を制御するだけなのでJavaScript to Footerを選びました統合.
三.特殊な場合の処理JavaScriptファイルをすべてページの末尾にロードするのはページのロード速度に役立ちますが、ページの末尾とはWordPressのwp_を指すことに注意してください.footer()関数で呼び出されます.この関数は通常、ページの
次に、JavaScriptの最適化に関するWordPressプラグインと特徴を簡単に紹介し、特別な状況をどのように処理するかを示します.
一.JavaScriptを最適化するWordPressプラグインWP Minify、Autoptimize、JavaScript to Footerの3つのプラグインを使ったことがありますが、その特徴を紹介します.
1.WP MinifyこのプラグインはMinifyエンジンをWordPressに統合します.有効にすると、プラグインはJSとCSSファイルを統合して圧縮し、ページのロード速度を向上させることができます.
WP Minifyは、生成されたWordPressページのJS/CSSファイルをキャプチャし、ファイルリストをMinifyエンジンに渡すことができます.Minifyエンジンは、WP MinifyによってWordPressページの先頭に置き換える強化され、簡素化され、圧縮されたJavaScriptまたはスタイルシートファイル(CSS)を返します.
主な特徴は次のとおりです.
WordPress 3.1のテスト版が出た後、WP Minifyが互換性がなく、ウェブサイトが正しくロードできないことに気づきました.
2.Autoptimizeは将来、WP Minifyのアップグレード後に互換性のない問題を解決するかもしれませんが、待ちきれません.その後、Autoptimizeという似たような機能を持つプラグインが見つかり、このプラグインの操作が簡単になりました.
Autoptimize統合、すべてのJSとスタイルシート(CSS)ファイルをコンパクトに圧縮し、キャッシュの有効期限を増やします.スタイルシートファイルをヘッダーに配置します.(同じようにページのロード効率を高めるために)、JSファイルをページの最後に置きます.HTMLコードを簡素化してページを痩せることもできます.しかし、HTMLページに痩せる作用は明らかではないと思います.サーバーがGzip圧縮特性を開いていれば、そうする必要はありません.
デフォルトでは、Autoptimizeは上記の方法ですべてのHTML/CSS/JavaScriptを最適化します.
個人的には、AutoptimizeはWP Minifyよりも使いやすいWordPress最適化プラグインだと思います.
3.JavaScript to Footerというプラグインは非常に簡潔に書かれています.ソースコードを確認しましたが、タスクを完了したコードはWordPress関数が6つ(以下参照)、つまり6行しかありません.そのため、このプラグインは作成後からどのように更新されたのか分かりません.最初から最終変更日が2009年9月22日にとどまっているのを見ていたので、無視しました.
ただし、JavaScriptのロード場所を最適化するだけで、WordPressで正しく宣言されたJavascriptファイルをすべてページの最後に移動してロードします.HTMLコードやCSSスタイルシートファイルは一切処理されていません.
JavaScript to Footerのソースコードに従って、次の6行のコードを使用して作業を完了します.
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
必要に応じて、特定のWordPressテンプレートのwp_head()関数の前に次のコードを加え、上記の手順を逆転させ、つまり失効させ、本来のロード位置に復元します.
remove_action('wp_footer', 'wp_print_scripts', 5);
remove_action('wp_footer', 'wp_enqueue_scripts', 5);
remove_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_head', 'wp_print_scripts');
add_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_head', 'wp_enqueue_scripts', 1);
もちろん特定のページテンプレートについてだけですが、すべてのページであれば、プラグインを無効にしてください.D
二.使用方法は、多くのWPerにとって、前の紹介を見て、自分が必要とする最適化プラグインをどのように選択し、合理的に使用するかを知っていると信じています.以下の3つの側面に基づいて考えているにほかならない.
あなたのページテンプレートにはHTMLコメント、スペース、空行などのマークがたくさん使われていますか?なければ、少しのために(Gzip圧縮をオンにすると通常1%以下)の帯域幅を節約してHTMLシン機能を使用します.あなたのページには複数のCSSスタイルシートファイルがロードされていますか?ない場合は、プラグインを使用してCSSスタイルシートをシンおよび統合する必要はありません.手動でCSSスタイルシートをシンおよび統合することは、プラグインを使用するよりも簡単で効率的です.WordPressのデフォルトに基づいて、JavaScrがページヘッダにロードされますiptは、一般的なWordPressサイトでJSのロード位置を最適化する必要があります.しかし、ほとんどのページでJSが無効にならないようにページヘッダにJSをロードする必要がある場合は、このような最適化はできません.私から見れば、WP Minifyは必要ありません.理由は前に述べました.残りのAutoptimizeとJavaScript to Footerはどちらかまたは両方を組み合わせて使用できます(併用であれば当然前者のHTMLとCSSシン/統合機能を使用し、後者のJS位置制御機能を使用します.後者はこの機能ですから).JSのロード位置を制御するだけなのでJavaScript to Footerを選びました統合.
三.特殊な場合の処理JavaScriptファイルをすべてページの末尾にロードするのはページのロード速度に役立ちますが、ページの末尾とはWordPressのwp_を指すことに注意してください.footer()関数で呼び出されます.この関数は通常、ページの