ブラウザがようやくCSS3に同意し始めたため、多くのWeb開発者は、画像のない新しいWebデザインに興奮して手をこすっています。彼らはきれいです。それらはスケーラブルです。彼らは強力です。
border-radii、box-shadows、font-facesなどを使用して、ページをimgタグでパックする代わりに、デザイナーの美しいデザインをコード行に変換できるようになりました。
2つの関連する質問：
スタイルシートが大きくなりすぎて、実際に[悪影響]パフォーマンスに顕著な影響を与えるポイントはありますか？
それは本当に常識です。スタイルシートが非常に大きくなると、画像がたくさんあるのと同じくらい悪影響があります。一般的に、スタイルシート（CSS3とファンシービットがたくさん含まれている）は、大量の画像よりもダウンロードが高速です。
ケースバイケースで、ダウンロード速度、ブラウザのサポート要件、デスクトップとモバイルなどを考慮して、CSSと画像のどちらがより良いソリューションを提供するかを判断することをお勧めします。
多くのアイコン（16pxから48pxのサイズの範囲）を持つWebアプリケーションでは、アイコンフォントを使用することで、パフォーマンスがどの程度向上しますか？
数百/数千のアイコンについて話しているのでない限り、パフォーマンスに大きな違いはありません。アイコンフォントを使用すると、おそらくユーザーにカスタムフォントをダウンロードさせることもできます。
繰り返しになりますが、これは実際には、現在のプロジェクトに最適なものを使用する場合です。
私はあなたの質問に対する決定的な答えがあるとは思いませんが、うまくいけば、私が言ったことはあなたのためにそれを少しクリアします。
「ポイント」はないと思いますし、パフォーマンスはスタイルルールそのものに関係しているので、サイズにはあまり関係していません。私が見た主な問題は、CSSグラデーション（特に放射状グラデーション）に関連しています。これは1年ほど前のことですが、グラデーションを組み合わせたモバイルデバイスをテストしたことを覚えています。（Webkit）モバイルデバイスでは、Webページの表示が著しく遅れていました。グラデーションを削除し、画像を追加すると、ラグが削除されました。さて、私が知っている限りでは、ほとんどのデバイスには、その問題を修正する可能性のある新しいWebkitディスプレイエンジンが搭載されている可能性がありますが、それでも考慮すべき有効なポイントだと思います。
CSSファイルのサイズがパフォーマンスに影響を与える場合があります。CSSが特に大きい場合、いくつかの問題が発生します。しかし、他の誰かが言ったように、それはテキストなので、おそらくかなり小さなファイルです。しかし、そのCSSが多くのファイルに分割されている場合、それはより大きな問題になります。10〜20個のcssファイルがあり、すべて単一のサーバー上にあるサイトを見たことがあります。ブラウザによっては、各サーバーへの接続を一度に開くことができるのは2〜6（おそらく8）のみです。10個のcssファイル、さらに10個のjs、および100個の他のアセットがある場合、さまざまな接続を開いたり閉じたりするのに比較的長い時間がかかります。これを解決する1つの方法は、開発プロセスの一部としてCSSファイルを連結することです。私が好きなこれを行ういくつかのツールは、YeomanまたはCodekitです。
アイコンフォントはスケーラブルで単一のファイルを使用するため、アイコンフォントを使用すると便利です。ページを拡大しても、アイコンは見栄えがよくなりますが、使用するpngはひどく見えます。アイコンフォントも1つのファイルであるため、上記と同じ理由で、10s-100sに対して1つのファイルです。アイコンではない一部の部分にPNGファイルを使用する必要がある場合は、CSSスプライトと呼ばれることが多いスプライトの使用を検討してください。これは、複数の画像を1つのpngファイルに結合するための手法であり、サイトでクリエイティブなCSSを使用して使用できます。
CSSの要点は、スタイルが相互にカスケードすることです。非常に大きなスタイルシートは、CSSが適切に記述されておらず、したがってカスケードされていないと私に信じさせます。そうは言っても、適切にカスケードされた大きなスタイルシートがある可能性があると思います。その場合は、ミニファイアを使用して空白を排除し、コードを圧縮してロード時間を短縮することをお勧めします。
アイコンに関しては、スプライト（複数の画像のコレクション）を作成し、CSSポジショニングを使用して必要なアイコンのみを表示することができます。このようにして、サーバーは多数の小さな画像ではなく、1つの大きな画像のみをフェッチします。確かに、1つの画像は他の画像よりも大きくなりますが、サーバーによる画像の大量のフェッチリクエストほど、読み込み時間を短縮したり、ページのパフォーマンスを低下させたりすることはありません。