web-dev-qa-db-ja.com

未使用のCSSルールは高額なので削除する必要がありますか？

私はさまざまなWebアプリケーションの最適化に関する記事を読んでおり、それらの多くは、未使用のCSSルールを削除することを提案しています。現在、私はjQueryUI css、Bootstrap CSS、Datatables CSS、およびその他のいくつかを含むページを持っています。それらすべてを合わせると、約数千のルール（私の見積もり）に変換されます。 20〜30％しか使用していない

非常に高速のブロードバンドを使用している英国の友人にページの読み込み時間を確認するように依頼したところ、接続の他のすべてのページと同様に、このページも1秒で読み込まれるため、レンダリング時間はページにとって重要ではないようです。ロード時間。未使用のCSSルールを削除することでどの程度の改善が期待されますか？それは本当に価値がありますか？

web-developmentcssoptimization
5
Shubham

非常に高速なブロードバンドを使用している英国の友人に、ページの読み込み時間を確認するよう依頼しました

これは、パフォーマンスを測定する正しい方法ではありません。自動化することはできません。正確なメトリックではなく、確実に再現することはできず、本質的に主観的です。正しい方法は次のとおりです。

  1. 厳しい条件下でのページレンダリングの予想されるパフォーマンスを指定する非機能要件を決定します。

  2. パフォーマンスの懸念があるかどうか、つまり、これらの非機能要件が実際のコードと一致していないかどうかを確認してください。

  3. isが実際にパフォーマンスの問題である場合は、プロファイラーを実行してボトルネックを特定します。ほとんどのブラウザーには1つあり、実際に何が起こっているかについての詳細を表示します。 JavaScriptの処理に1 300ミリ秒かかる場合。およびCSS処理-25ミリ秒。CSSは今は気にしないでください。

  4. ベンチマークとプロファイラーによると、予想されるレンダリング時間（要件で指定）と実際のテスト時間の差がCSSによるものであることがわかった場合は、CSSを最適化するためにいくつかの手法を使用します。 Googleドキュメント から始めるのがよいでしょう。

Programmers.SEのホームページで行われたテストです。 CSSセレクタープロファイルには59ミリ秒かかりました。次の詳細で：

Selector                                                         Total  Matches   Source
―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
.widget_ad_rotator, .widget_adrotate_widgets, .widget_ads [...]  57.6%        0
html, body, div, span, applet, object, iframe, h1, h2, h3 [...]  11.9%     3862   all.css
a:-webkit-any-link                                                5.1%      913
:focus                                                            3.4%        0
input[type=button], input[type=submit], input[type=reset] [...]   3.4%        4
div                                                               3.4%     2101
.badge:hover                                                      1.7%        0   all.css
a:visited                                                         1.7%      913   all.css

ご覧のとおり、ほとんどのパフォーマンス低下は、ブラウザーでアドブロッカーを使用していることが原因です。 Stack Exchangeで広告をブロックしたくないので、それは残念です。 Stack Exchangeをホワイトリストに登録したので、CSSセレクターの時間は59ミリ秒になりました。 23ミリ秒まで。

2番目に高価なセレクターは、タグ名で識別される要素を引き受けるグローバルセレクターです。一致の数を考えると、これはコストがかかります。ブラウザの不整合による影響をあまり受けずに、それを最適化する方法はおそらくありません。

次の4つは、Webページ用に書かれたCSSではなく、Webkitに関連しています。

7番目のセレクターから開始すると、パーセンテージが低すぎて気になりません。実際のもの、.badget:hoverは使用されていませんが、他のページで使用されているときにこのページで削除すると、コードのメンテナンスが難しくなり、特に100マイクロ秒よりも低いゲインになります。

私の経験（1秒あたり数千回アクセスされるアプリではなく、小規模から中規模のWebアプリでのみ作業する開発者）の経験から、注意が必要なのはCSSの複雑さです。以下のようなセレクター：

body.en-us div#sidePanel.moveable div:first-child input[type=submit]:hover,
*.lang.en-us div#sidePanel.moveable div:first-child input[type=submit]:hover {
    color:#59a;
}

開発者には判読不能であり、ブラウザには遅いです。 Webサイトでの機能のクリープを回避し、スタイルを簡素化して以下を行います。

#sidePanel .top-submit:hover {
    color:#59a;    
}

努力する価値があります。同じやり方で：

.style {
    background-color: #000000;
    background-image: url('im/fade.jpg');
    background-repeat: repeat-x;
    background-position: top left;
}

沿って：

.style {
    background: #000 url(im/fade.jpg) repeat-x top;
}

それほど難しくはなく、メンテナンスが大幅に簡略化されます（ Google CSS Style Guide も参照してください）。

しかし、数ミリ秒を稼ぐために、使用されていないという理由だけでスタイルの20％を削除するのに何時間も費やしません。特にLESS/Sassを使用する場合。

9
Arseni Mourzenko

ページの読み込み時間に関してはかなり小さいですが、影響があると思います。たとえば、ベストプラクティスに従わず、CSSをクリーンに維持しない開発者がいる場合、影響が増大し始める可能性があります。結局のところ、CSSが適切に構造化され、整理されていれば、ユーザーエクスペリエンスは一般的に向上し、サイトをすばやくナビゲートできます。

未使用のCSSを削除することに加えて、ページの読み込み時間を改善する別の方法は、CSS（およびJavaScript）の縮小を使用することです： http://www.minifycss.com/ 、 http： //cssminifier.com/

同様の質問： https://stackoverflow.com/questions/6669672/what-is-the-performance-impact-of-having-many-unused-css-selectors-rules

2
Theomax