WordPressでのページの読み込みをブロックするファイル（CSSおよびJS）を削除しますか？ Google Insights PageSpeedでサイトをテストしている場合は、ページの読み込みをブロックするスクリプトを削除するための提案が表示される可能性があります。 このチュートリアルでは、ページの読み込みをブロックするこれらのファイルを修正して、GooglePageSpeedスコアを向上させる方法を示します。
ページの読み込みをブロックしているのは何ですか？
各WordPressサイトにはテーマとプラグインがあり、ページの最後とブラウザーで表示される前にJavaScriptファイルとCSSファイルを追加します。 これらのスクリプトにより、サイトのページの読み込み時間が長くなり、ページのレンダリングをブロックすることもあります。
ユーザーのブラウザは、ページコンテンツをロードする前に、スクリプトとCSSをロードする必要があります。 つまり、接続速度が遅いユーザーは、ページを表示するためにさらに数ミリ秒待つ必要があります。
優れたGooglePageSpeedスコアを達成しようとしているサイト所有者は、この問題を解決する必要があります。
1-Autoptimizeでページレンダリングを修正する方法
この方法はより簡単で、ほとんどのユーザーに推奨されます。
最初に行う必要があるのは、プラグインをインストールしてアクティブにすることです Autoptimize 」。 詳細については、 WordPressプラグインのインストール方法に関するステップバイステップガイド.
プラグインを有効にしたら、「 設定>自動最適化 プラグイン設定を構成します。
[JavaScriptとCSS]オプションボックスをオンにしてから、[変更を保存]ボタンをクリックすることから始めます。
あなたは今あなたをテストすることができます サイトのWeb PageSpeed ツールを使用します。 ページのレンダリングをブロックするスクリプトがまだある場合は、プラグイン設定ページに戻り、上部にある [詳細設定を表示] ボタンをクリックする必要があります。
ここで、プラグインにJSインラインを含め、「seal.js」や「jquery.js」などのデフォルトで除外されているスクリプトを削除することができます。
次に、CSSオプションまで下にスクロールし、プラグインがすべてのCSSファイルを結合できるようにします。
「変更を保存してキャッシュを空にする」ボタンをクリックして変更を保存し、 キャッシュを空にしてください プラグイン。
完了したら、先に進み、 サイトのWeb 再び PageSpeed ツールを使用します。
JavaScriptまたはCSSファイルを最適化した後、サイトを注意深くテストして、すべてが正常に機能していることを確認してください。
2-W3 Total Cacheを使用したファイルレンダリングの修正
この方法にはもう少し作業が必要なので、すでに W3 Total Cache を持っている人に推奨されます。 ウェブサイト.
まず、W3 TotalCacheプラグインをインストールしてアクティブ化する必要があります。 あなたが助けを必要とする場合、 当社の完全ガイドW3合計キャッシュを参照してください。.
次に、[パフォーマンス]> [一般設定]にアクセスし、[縮小]セクションまでスクロールする必要があります。
まず、[有効にする]チェックボックスをオンにしてから、ミニフィケーションモードオプションとして[手動]を選択する必要があります。
ボタンをクリックしてください すべての設定を保存する 設定を保存します。
そして、あなたが縮小したいスクリプトやCSSを追加する必要があります。
Google PageSpeed Insightsに従って組み合わせる必要があるすべてのスクリプトとスタイルシートのURLを取得できます。
それが言うところの提案の下で、「 排除レンダリングブロックJavaScriptとCSS 」、「解決方法を表示」をクリックします。 スクリプトとスタイルシートのリストが表示されます。
スクリプトの上にマウスを移動すると、完全なURLが表示されます。 このURLを選択してから、キーボードのCTRL + C（Macの場合はCommand + C）を使用してURLをコピーできます。
次に、WordPress管理ボードに移動し、「 パフォーマンス > minifier '。
まず、圧縮するJavaScriptファイルを追加する必要があります。 JSセクションまで下にスクロールし、「ゾーン内の操作」のセットの下で、セクションの「「非同期」を使用してブロックしない」に埋め込みます。 。
次に、ボタンをクリックする必要があります スクリプトを追加 次に、Google PageSpeedツールからコピーしたスクリプトURLの追加を開始します。
完了したら、[CSS]セクションまで下にスクロールして、[スタイルシートの追加]ボタンをクリックします。 次に、GooglePageSpeedツールでコピーしたスタイルシートのURLの追加を開始します。
ボタンをクリックしてください 設定の保存とキャッシュの削除 設定を保存します。
Google PageSpeedツールにアクセスして、ウェブサイトをもう一度テストします。
また、Webサイトを注意深くテストして、すべてが正常に機能していることを確認してください。
このチュートリアルは以上です。 WordPressのブログ.
