未使用のCSSを削除する:GooglePageSpeedエラー

開発者がウェブサイト速度をテストするために最も使用するツールの1つは、    間違いなくGoogleが提供するツールです。PageSpeedInsightsと呼ばれるツールです    。これは、当社のWebサイトのページを調べて、何が問題なのかを詳細に分析できる非常に強力なツールです。

実際、貴重な秒数を失う可能性のあるいくつかの間違いがあり、その結果、SEOの位置付け、コンバージョン率の低下などが発生します。実際、遅いウェブサイトが好きな人は誰もいません。今日は、このエラーに具体的に対処します    。未使用のCSSを削除します。

過去に、オフスクリーン画像の相互参照  と  最近の形式  での画像の公開に関連するバグを解決する方法を示し  ましたが、今日は、パフォーマンス向上させるためにサイトスタイルに基づいて行動する方法を見ていきます    。

コンテンツインデックス

  • Google PageSpeedInsightsを使用する理由
  • 未使用のCSSを削除するとはどういう意味ですか
    • スタイルタグのコードを印刷します
    • 特定のCSSファイルを作成する
    • 自動ツールを使用する
  • 未使用のCSSを削除するWordPressプラグイン
  • 結論

Google PageSpeedInsightsを使用する理由

あなたが確かにあなた自身に尋ねるであろう最初の質問はあなたのサイトをテストするためになぜこのツールを使うのかということです。一方で、GTmetrixは市場に数多く出回っています    。

Os motivos são muitos mesmo, vamos tentar analisar melhor o assunto e perceber porque é que esta ferramenta, juntamente com o Farol da Google, é a mais utilizada, assim como aquela que francamente acredito ser a mais fiável e rica em funções.

Esta ferramenta, conforme referido, é-nos disponibilizada  gratuitamente  pelo Google para poder medir a velocidade do nosso site e melhorar a sua indexação nos motores de busca. Se você não sabe, o desempenho de um site e seus  principais elementos vitais da web  afetam muito sua capacidade de se indexar corretamente.

O Google, aliás, está entre os promotores de uma internet cada vez mais rápida, por isso disponibiliza  gratuitamente uma ferramenta tão útil e funcional  : ajudar os usuários a melhorar o desempenho de seu site.

Podemos testar facilmente nosso site na  versão desktop  e  móvel  . Um site otimizado para desktop, na verdade, não necessariamente mantém o mesmo desempenho no celular. O último tipo de display é o usado pelo Google para indexar o site. Portanto, ter uma versão mobile otimizada do site é, sem dúvida, um ponto a nosso favor.

実際、Webサイトを開発するときは、常に「モバイルファースト  」と呼ばれるアプローチを使用する必要があります  。つまり、最初にモバイルでその要素を設計および実装し    、次にデスクトップでそれらを適応させる必要があります。

あなたのウェブサイトをテストすることは本当にとても簡単です。PageSpeedウェブサイトにアクセスして、確認したいウェブページのURLを入力するだけです。URLを入力して[スタート]ボタンを押すと、Googleはすぐにクロールを開始し、サイトのパフォーマンスに影響を与える可能性のあるエラーを見つけます。

彼があなたに報告するかもしれないバグの中には、この記事で話しているバグもあります。それでは、WordPressサイトでさえ、Googleがこの欠如を報告する理由と、主にそれを解決する方法を一緒に見てみましょう。

未使用のCSSを削除するとはどういう意味ですか

しかし  、未使用のCSSを削除するとはどういう意味  ですか?質問は正当です。実際、cssをサイトに埋め込んだ場合、それはおそらくそれを使用するつもりであるためです。さて、これまでのところ、私たちはすべて同意していますが、多くの場合、そうではありません。

実用的な例をあげましょう。あなたで あるmain.css  htmlファイルの外部にあるファイルを、あなたのサイトのポートフォリオセクションにあるギャラリーを支配するCSSを挿入する必要があるかもしれません。

ただし、同じファイルmain.cssは、ギャラリーが  基本的に  存在しないホームページにも読み込まれ  ます  。したがって、使用されていないためホームページに印刷できないコードです。

したがって、最善のアプローチは、ギャラリーのCSSを使用することです。これらは、本当に必要なページに  あります。

しかし、どうすればこのエラーを修正できますか?実際には、多くのアプローチがあります。あまり技術的ではなく、それらのいくつかをリストします

スタイルタグのコードを印刷します

最初の解決策は、シンプルで速度の点でも多くのポイントを獲得できることに加えて、ページに必要なCSSをのヘッドセクションにあるスタイルタグに直接挿入することです。あなたのウェブサイト。

このようにして、実際には使用されていないクラスをページに含めずに、タイムリーかつ正確な方法でCSSを印刷できます。

スタイルタグに印刷されたCSSの例

さらに、このソリューションを使用すると、Googleから報告されることが多く、別の記事ですでに取り上げた別のエラーを解決できます。これにより、折り畳み上のコンテンツでのレンダリングをブロックするCSSが  排除されます。

特定のCSSファイルを作成する

ただし、2番目の解決策は、cssをミニcssに解凍して、必要に応じて取得することです。いわばmain.cssファイルはなくなりますが、gallery.css、sidebar.css、menu.cssなどがあります。

このソリューションは、最もクリーンですが、需要が増加します。以前は、実際には1つのファイルしかダウンロードしていなかった場合、今ではリクエストが増加します。したがって、この2番目のオプションを使用する場合は、スクリプトとスタイルに縮小とパッケージ化のオプションを使用することを強くお勧めします。

WordPressを使用している場合は、W3 TotalCacheプラグインを使用してこれを行うことができます。私は最近この記事でこれについて話しました、そこで私はWordPressサイトをスピードアップするための他のトリックを説明し  ます

自動ツールを使用する

私がお勧めしたい最後のオプションは、ノードごとにDomを分析し、ページで実際に使用されていないCSSルールを自動的に理解できる高度な自動ツールを使用することです。

現在、これを可能にするいくつかのツールがありますが、信頼性に加えて最も有名なのは  PurgeCSS  です。しかし、輝くものすべてが金であるとは限らないことを知ってください。PurgeCSSおよび他の同様のツールは、モーダルや非同期リクエストを介してロードされた要素など、ページの後半でロードされる要素を実際に認識できません。

このような場合、エラーやアプリケーションの誤動作を避けるために、クラスを手動で削除する必要があります。

未使用のCSSを削除するWordPressプラグイン

主題は角張っています。実際、それは非常に複雑で手動の操作であり、プラグインに委任するのは困難です。しかし、誰もがコードの専門家であるとは限らないことを理解しているので、私はそれを実行できるプラグインを探し始めました。

何度か試した後、  私たちにとって非常に興味深いプラグインであるPageSpeedNinjaを見つけました  。ちなみに、このプラグインは、私たちのページで使用されていないCSSを削除することに加えて、他の興味深い機能を提供します。

詳細に:

  • これにより、Gzip圧縮を有効にできます  
  • これにより 、ページ上の呼び出されていないCSSとJavascript削除でき  ます
  •  HTML、CSS、JS ミニファイ
  • 遅延読み込みにより   画像の読み込みを最適化します
  •  ページ上のスクリプトの順序を最適化  する
  • ブラウザのキャッシュの活用を停止できます

このプラグインの唯一の欠点は、それを使用すると言った場合、W3TotalCacheの使用は推奨されないことです。一般に、実際に  は、同じことを良いか悪いかを行うプラグインのみを使用  する必要があります。キャッシュとミニファイの操作をこのツールに委任する場合は、同様の操作を使用しない方がよいでしょう。

結論

これまで見てきたように、PageSpeed Insightsによって報告されたこのエラーは、少量のグリースで簡単に修正することもできます。

パフォーマンスが高く、高速で、最適化されたWebサイトを持つことは、コンバージョン率を高め、あらゆる観点からビジネスを改善するための最良の方法です。

この問題を解決する他の方法をご存知の場合は、遠慮なく私に書いてください。このリストを更新させていただきます。

 

Leave a Comment

Your email address will not be published. Required fields are marked *