WordPressでJavaScriptの実行時間を短縮する6つの簡単な方法

ゆっくりとロードするページ以上のウェブサイトの訪問者を苛立たせるものはありません。これには多くの理由があり、そのうちの1つは過度のJavaScriptの実行時間です。

JavaScriptが処理するのに時間がかかりすぎると、すべてが遅れています。遅いページのロード、ユーザーエクスペリエンスの低下、さらにはSEOランキングを傷つけます。

しかし、心配しないでください。 JavaScriptの最適化は複雑である必要はありません。

このガイドでは、WordPressでJavaScriptの実行時間を短縮する簡単で効果的な方法を説明します。

あなたが初心者であろうと高度なWordPressユーザーであろうと、これらの簡単な方法は、サイトをスピードアップし、コアWebバイタルを改善し、SEOのパフォーマンスを高めるのに役立ちます。

飛び込みましょう！

JavaScriptの実行時間とは何ですか？

JavaScriptの実行時間とは、WebブラウザーがWebページでJavaScriptコードを処理および実行するのにかかる時間を指します。

ユーザーがサイトをロードするたびに、ブラウザはJavaScriptスクリプトを解析、コンパイル、実行する必要があります。これらのスクリプトが複雑すぎる、最適化されていない、またはレンダリングブロッキングがある場合、ページのパフォーマンスを遅くすることができ、負荷時間が高く、ユーザーエクスペリエンスが低下します。

JavaScriptの実行時間がパフォーマンスに与える影響は何ですか？

JavaScriptの実行時間がパフォーマンスにどのように影響するかの内訳は次のとおりです。

1。メインスレッドのブロック

一度に1台の車のみを通過できる狭いトンネルを考えてください。車両が長すぎない限り、交通はスムーズに動きます。

ブラウザも同じように動作します。単一のメインスレッドに依存して、コンテンツの読み込み、ページのレンダリング、ユーザーインタラクションの処理などのタスクを管理します。

JavaScriptが実行されると、このスレッドで優先されます。実行するのに時間がかかりすぎると、トラックがトンネルで停滞し、他のすべての車を持ち上げているようなものです。この遅延により、ブラウザが他のタスクを処理することができなくなり、ページの負荷が遅くなり、反応しない相互作用が発生します。

2。レンダリングの遅延

ウェブサイトにアクセスすると、コンテンツが画面にすばやく表示されると予想されます。コンテンツを「ペイント」として知られるこのプロセスにより、スムーズなユーザーエクスペリエンスが保証されます。

ただし、JavaScriptの実行が時間がかかりすぎると、この最初のレンダリングが遅れ、ユーザーが空白の画面を見つめているため、ユーザーエクスペリエンスが低下します。

3。最初の入力遅延（FID）

これは、Webサイトがボタンをクリックするなど、ユーザーの最初のインタラクションに応答するのにどれくらいの時間がかかるかを追跡します。遅延したFIDは、ユーザーにとって鈍化したエクスペリエンスをもたらします。これはイライラします。

JavaScriptの実行時間の増加は、最初の入力遅延（FID）に直接影響を与えます。 JavaScriptが過負荷になった場合、Webサイトはユーザー入力にすぐに応答することができず、反応しないように見え、ユーザーエクスペリエンスの低下を提供します。

4。メモリ消費

JavaScriptコードは、他のプログラムと同様に、メモリを実行する必要があります。複雑なまたは最適化されていないコードは、かなりの量のメモリを食べることができます。

その結果、特にメモリがほとんどないモバイルデバイスでは、ブラウザの遅くなり、クラッシュを引き起こす可能性があります。

5。SEOに悪影響を及ぼします

Googleのような検索エンジンは、検索結果をランキングするときにページ速度を使用します。

JavaScriptの実行が遅い場合、ページのパフォーマンスを低下させ、検索結果のサイトのランキングに影響を与える可能性があります。

要するに、遅延したJavaScriptの実行により、レンダリングが遅くなり、FIDが増加し、ブラウザに過負荷される可能性があります。これはすべて、ひどいユーザーエクスペリエンスにつながり、訪問者があなたのウェブサイトを放棄する可能性があります。

JavaScriptの実行時間を測定する方法は？

JavaScriptの実行時間を最適化するには、まず正確に測定する必要があります。幸いなことに、JavaScriptのパフォーマンスを監視し、WordPressサイトの速度に影響を与える問題を特定するためのいくつかのツールと技術があります。

PagesSpeed InsightsでJS実行時間を測定します

Google PagesPeed Insightsは、Webページの速度を測定し、最適化のアイデアを提供するGoogleの無料ツールです。

JavaScriptの実行時間を測定するために使用する方法は次のとおりです。

PagesSpeed Insights Webサイトにアクセスするか、PagesSpeed Insights Chrome Extensionを使用してください。

ここで、分析するWebサイトURLを入力して、[分析]ボタンをクリックします。

PagesSpeed Insightsは、JavaScriptの実行時間を含む多くのパフォーマンスインジケーターを含むレポートを提供します。

JavaScriptの実行時間の短縮について警告が発生した場合は、提案に従ってください。

GTMetrixでJS実行時間を測定します

GTMetrixは、JavaScriptの実行時間を含むWebページのパフォーマンスを測定するためのもう1つの一般的なツールです。

GTMetrix Webサイトに移動し、WebページのURLを入力してから、[今すぐテスト]オプションをクリックします。

しばらくロードした後、GTMetrixはJavaScriptの実行時間を含むパフォーマンスメトリックを含む完全なレポートを生成します。

GTMetrixのこれらの洞察を使用して、JavaScriptコードを最適化し、Webページ全体のパフォーマンスを向上させることができます。

JavaScriptの実行時間を短縮する方法

JavaScriptの実行時間を短縮し、Webサイトをより速くし、ユーザーエクスペリエンスを向上させる簡単な方法を以下に示します。

1.肥大化したテーマ/プラグインを避けてください

WordPressでJavaScriptの実行が遅い最も一般的な理由の1つは、肥大化したテーマと過剰なプラグインです。

機能が豊富なテーマとプラグインは魅力的に見えるかもしれませんが、パフォーマンスを犠牲にすることがよくあります。

すべての追加のスクリプト、アニメーション、または関数は、Webサイトの読み込み時間に追加され、実行が遅くなり、CPUの使用量が増え、ユーザーエクスペリエンスが低下します。

なぜ肥大化したテーマとプラグインが問題になっているのですか？

• 過剰なコード実行：重いテーマとコード化されたプラグインが不十分なリソースが必要であり、JavaScriptの実行時間が増加します。
• 追加のHTTPリクエスト：一部のテーマとプラグインは、それらを使用しなくても、追加のCSS、JavaScript、およびフォントをロードします。
• サーバーの負荷の増加：アクティブなプラグインが多すぎると、サーバーの応答時間が遅くなり、SEOとユーザーエクスペリエンスに影響を与えます。

軽量の代替品を選択する方法は？

• パフォーマンスを最適化したテーマを使用します： speedを優先するgeneratePress、Astra、Kadenceなどの高速で最小限のテーマに固執します。
• プラグインを監査：定期的にプラグインを確認し、不要なものを無効にします。プラグインにJavaScriptがたくさんある場合は、軽量の代替品を使用してみてください。
• 必要なもののみを使用します。同様の機能に複数のプラグインをインストールしないでください。代わりに、スクリプトの過負荷を最小限に抑えるオールインワンソリューションを選択します。
• 外部スクリプトを制限する：不要なサードパーティスクリプト、フォント、または追跡コードを含むテーマとプラグインを使用しないでください。

WordPressのセットアップを最適化することにより、JavaScriptの実行時間を短縮し、WordPressサイトをスピードアップし、SEOランキングとユーザーエクスペリエンスの両方を強化します。

2. JSを遅らせ、未使用のJSを削除します

JSファイルは、ユーザーインタラクションまでロードできないように、JSファイルを遅らせる必要があります。つまり、ユーザーがボタンをクリックしたり、ページのコンテンツをスクロールしたりしない限り、ブラウザはJSスクリプトを実行しないことを意味します。

FlyingPress、WP Rocket、Perfmatters、Flying Scriptsなどのほとんどの最適化プラグインはこれを行います。ただし、それぞれが異なって行うので、ファイルを追加する方法に関するプラグインドキュメントを読んでください（WPロケットと同様に、ファイル名、キーワード、または自動）。

たとえば、WP Rocketプラグインを使用している場合は、遅延JavaScript実行機能を活用できます。

ファイル最適化タブに移動し、遅延JavaScript実行オプションを確認するだけです。プラグインは、ユーザーインタラクションまでJSファイルの読み込みを自動的に遅らせます。

または、Perfmattersを使用している場合は、 Perfmattersプラグインの設定に移動します。 JavaScriptメニューをクリックして、遅延セクションの下でJavaScriptの遅延を切り替えます。

さらに、未使用のJSファイルを削除する必要があります。言い換えれば、上記のコンテンツに不要な、またはページのコンテンツに表示されないすべてのJSスクリプトは、ページが表示された後にのみロードする必要があります。

これにより、ブラウザは、不要なJSファイルによって動揺するのではなく、必要な素材のみをレンダリングできます。

3。JSを延期します

JS実行時間を短縮する別の効果的な方法は、JSファイルを遅らせることです。

WordPress WebサイトでJavaScriptを延期することにより、ブラウザはページがレンダリングされたときにのみロードします。

手動とプラグインの両方を使用して、JSファイルを延期できます。

Defer属性を手動で使用する場合は、最初にdefer属性を追加する前にdeferにJSスクリプトを識別する必要があります。

延期属性の例は次のとおりです。

プラグインを使用する場合は、WPロケット、Autoptimize、FlyingPress、Asset Cleanupなどから選択できます。

たとえば、Delay JSと同様に、WP RocketはJavaScriptの延期機能も提供しています。

[ファイル最適化]タブで、 JavaScriptの延期されたJavaScriptをロードして、特定のJSファイルを延期するのを制限できます。数回クリックするだけで、重要なWebパフォーマンス最適化手法を実装できます！

4。JSを削除します

WordPressでJavaScriptの実行時間を短縮する最も簡単でありながら効果的な方法の1つは、模倣です。

JavaScriptの模倣とは、機能に影響を与えずに、白人、ラインブレーク、コメントなど、不要なキャラクターを削除することを意味します。結果？ファイルサイズが小さく、ダウンロードが高速で、ページ速度が向上しました。

あなたが仕事を成し遂げるのに役立ついくつかのJavaScriptの模倣ツールが利用可能です。

手間のかからないアプローチには、Autoptimize、WP Rocket、Fast Velocity Minify、FlyingPressなどのプラグインを使用してください。

優先プラグインをインストールし、JavaScriptの模倣を有効にし、ツールに作業を行わせます。

5。特定のページでJavaScriptをアンロードします

すべてのスクリプトがWordPressサイトのすべてのページで実行する必要があるわけではありません。もしそうなら、実行時間を増やし、パフォーマンスを遅くし、ユーザーエクスペリエンスに悪影響を与える可能性があります。

例えば：

• フォームの読み込みフォームの読み込みは、フォームがない場合でも。
• ブログ投稿で実行されているWooCommerceスクリプトは必要ありません。
• スライダースクリプトは、スライダーがないテキストが多いページに表示されます。

不要な各スクリプトにより、JavaScriptの実行ワークロードが増加し、ページレンダリングが遅くなります。

この問題の最も簡単な解決策の1つは、必要でないページに不要なスクリプトを無効にすることです。

Asset CleanupやPerfmattersなどのプラグインを使用すると、コードを変更せずにページ、投稿タイプ、またはカテゴリごとにJavaScriptを無効にできます。

または、コードに満足している場合は、functions.phpファイルでwp_dequeue_script（）を使用して、不必要なスクリプトの読み込みを防ぎます。

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6.地元でサードパーティのJavaScriptをホスト

フォント、分析スクリプト、追跡コードは、外部ソースからしばしばロードされるサードパーティのJavaScriptファイルの一部です。これらのスクリプトは有用な機能を提供しますが、外部リクエスト、ネットワークレイテンシ、サーバーの応答時間の遅延により、JavaScriptの実行時間を大幅に増加させることができます。

サードパーティのJavaScriptファイルをローカルでホストすることにより、負荷時間を改善し、外部サーバーへの依存度を減らし、全体的なサイトのパフォーマンスを高めることができます。

サードパーティのJavaScriptをローカルにホストするには、サードパーティのプロバイダーのサイトにアクセスして、必要なJavaScriptファイル（Google Fonts、Recaptcha、またはAnalyticsスクリプト）をダウンロードします。

次に、FTPを使用して/wp-content/uploads/ or /wp-includes/js/ directoryにファイルを保存します。

次に、テーマのfunctions.phpを変更するか、 wp_enqueue_script（）のスクリプトをEnqueueして、外部URLの代わりにローカルバージョンを指します。

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

WP Rocketなどのプラグインを使用したり、Autoptimizeを使用して、ローカルでホストされているJavaScriptファイルをマイニル化してキャッシュして、実行して迅速に実行します。

JS実行時間の短縮を今すぐ開始します

遅いWordPressサイトは、訪問者を苛立たせ、SEOランキングを傷つける可能性があります。重要な犯人の一人？過度のJavaScript実行時間。 JavaScriptが処理に時間がかかりすぎると、メインスレッドをブロックし、レンダリングを遅らせ、最初の入力遅延（FID）を増加させ、パフォーマンスに悪影響を及ぼします。

このガイドでは、WordPressでJavaScriptの実行時間を短縮する簡単な方法を示し、サイトの速度とユーザーエクスペリエンスを向上させることができます。重要な戦略は次のとおりです。

• 不必要なコードの実行を防ぐための肥大化したテーマとプラグインを回避します。
• 不必要なJavaScriptを遅らせて削除して、必須でないスクリプトがページを遅くしないようにします。
• JavaScriptの実行を延期して、ブラウザが最初に重要なコンテンツに優先順位を付けることができます。
• JavaScriptファイルを模倣して、ファイルのサイズを削減し、実行をスピードアップします。
• 不要なスクリプトを排除するために、特定のページから未使用のJavaScriptをアンロードします。
• サードパーティのJavaScriptをローカルにホストして、外部サーバー要求によって引き起こされる遅延を排除します。

これらのJavaScript Optimization手法を実装することにより、訪問者に向けたコアWebバイタル、高いページ速度、シームレスなユーザーエクスペリエンスを実現できます。

詳細については、これらの他の有用なリソースをご覧ください。

• 10の最高のWordPressキャッシュプラグイン（無料およびプレミアムオプション）
• WordPressでのレバレッジブラウザキャッシュを簡単に修正する方法
• WPロケットレビュー：本当に支払う価値はありますか？
• Perfmattersはそれだけの価値がありますか？詳細なレビュー
• Nitropackレビュー：ベストスピードツールまたはブラックハットSEO？

最後に、FacebookとX（以前のTwitter）でフォローして、最新のWordPressとブログ関連の記事を最新の状態に保ちます。