不必要な.jsと.cssコールを削除する（Rt-Theme19 - themeforest）

Question

私は（上記）テーマの単純なWPサイトを持っています。

テーマは、レンダリングブロックの原因となる大量の外部の.cssファイルと.jsファイルを読み込みます。私はそれらの半分を使用しないと確信しています。

header.phpにはいくつかのものが直接含まれていますが、ほとんどはphp wp_head（）タグを介して含まれています。私は調べるのに苦労しています。どちらの.jsと.css が使用されていますとはありません。また、どのように私は 'defer'または 'async'を使用していると感じるので、それらを完全に取り除く問題は部分的にしか問題を解決していません。

私のサイトはhttp://toptand.dkです。私は現在、WPスーパーキャッシュを使用して圧縮と自動最適化を行い、レンダーブロックなどを最小限に抑えて、ヘッダーの見た目を大きく変える可能性があることに注意してください。私はむしろ本物のためにそれを取り除くだろう。

私はレンダリングを防ぐ方法について多くの記事を読んできましたが、WPテンプレートからすべての駄目をどう扱うかは実際には説明されていません。

Answer 1

テーマは、外部の.cssのトンをロードし、レンダリング、ブロッキングが発生し、私はそれらの半分を使用していないと確信して倍 上.jsファイル。

これは市販のWordPressテーマの非常に典型的なものです。このようなテーマは、ショートコード、ドラッグ＆ドロップ機能、カスタムポストタイプ、eコマースなどを提供する「多目的」バックエンド機能に必要な多くのファイルをロードします。

すべての人のスピードとページの重みを犠牲にしますあなたが使用している機能だけでなく潜在的な機能も使用できます。スピードと軽量サイトが必要な場合は、そのようなテーマを使用しないでください。あなたはです。はそのテーマに入り、wp_dequeue_scriptのスクリプトとスタイルシートですが、機能のテーマは壊れてしまいます。 https://codex.wordpress.org/Function_Reference/wp_dequeue_script

がhttps://wordpress.org/themes/から単純、軽量化（および無料）のテーマを試してみて、テーマはすべての余分なコードなしで必要な機能を得るためにhttps://developer.wordpress.org/themes/getting-started/の仕組みを学ぶ参照してください。

Answer 2

Chrome Dev Toolsの[監査]タブを利用できます。

私は が

は、監査]タブを選択するとされない必要性に基づいて、ネットワーク使用率が含まれるが、強制のWebをチェックした.jsファイルや.cssファイルが使用中であるとされ、見つけるのに苦労していますページパフォーマンスオプション。選択が完了したら、現在の状態の監査または再読み込みと監査をクリックします。

プロセスが完了すると、結果は未使用のCSSルールの数を入力します。これにより、未使用のCSSに関するアイデアが得られます。

また、私は「延期」や 「非同期」は部分的にしか問題を解決されて使用してのように感じているので、完全にそれらを取り除く方法について説明します。

最近のバージョンのChrome（59）では、「カバレッジ」という新しい機能が導入されました（これはdevツールの「その他のツール」にあります）。これは、現在のページで使用されているCSSのパーセンテージを理解し、結果の1つをクリックするとコードにリダイレクトされ、実行されていないコードの部分が赤色に、実行されたコードが緑色にマークされます。

これらの入力は、あなたの資産を最適化し、未使用のコードを削除するに役立つはずです。

希望すると便利です。