web-dev-qa-db-ja.com

CSSを最適化するとき、ページにインラインで挿入するために「小さい」と見なされるものは何ですか?

Cssはどこに置くべきですか?

Googleは、上のページのCSSを同じページに配置することをお勧めします。 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

外部CSSリソースが小さい場合、それらをHTMLドキュメントに直接挿入できます

しかし、何が小さいと考えられますか?ブログのある定期的なサイトがあります。すべてのページでCSSをインライン化する必要がありますか?もしそうなら、p、h1、a ...のような一般的なCSSを各ページで繰り返す必要がありますか?

4
Nrc

基本的に3つのオプションがあります。外部、内部、インライン。

外部:外部CSSファイルがある場所です。

インライン:各タグのスタイルを指定する場所です。

内部:外部CSSファイルに使用するCSSコードがpages <head>タグ内に配置される場所です。

個々のHTMLタグにスタイルを追加することはお勧めしません。

少しのCSSコードでは大したことではありませんが、各ページにスタイルを追加することもお勧めしません。なんて痛い!

代わりに、外部CSSファイルを使用することを常にお勧めします。どうして?単純な変更の場合、変更を行うためにすべてのページを編集する必要がないためです。

このページは役立つかもしれません: http://www.w3schools.com/css/css_howto.asp

従来、CSSファイルはstyle.cssと呼ばれ、/ cssディレクトリ内に配置され、<link rel="stylesheet" type="text/css" href="/css/style.css">タグ内の<head>として指定されます。/cssディレクトリを使用したり、ファイルにstyle.cssという名前を付けたりする必要はありませんが、複数のサイトを編集する場合、CSSファイルの場所と名前を知ることは簡単です。

速度に関しては、議論全体が少し間違った呼び名です。一方では、CSSコードがページ内にある場合、CSSファイルを取得するための別の要求は必要ありません。一方、コードはHTMLダウンロードを大きくすることができます。 CSSファイルをキャッシュすることで、2番目のリクエストの問題全体をほとんど意味のないものにすることができます。内部CSSまたはインラインCSSを使用するか外部CSSを使用するかの制限は、議論の余地があります。私の経験から、ページ内の数十のスタイルのマークアップは問題ありません。ただし、1ページの速度の差は、複数のページまたは多数のページをダウンロードする合計コストを上回ることはありません。これは、1回だけ要求する必要がある1つのCSSファイルのコストに対する累積コストです。これが明らかになるのは、いくつかのスタイルが適用される場所です。それでも、外部ファイルの使用をお勧めします。それは人生をはるかに楽にし、コストは完全に無駄ではないとしても非常に最小限です。

2
closetnoc