CSSを最適化してページの読み込み時間を高速化する方法

CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か

[coliss]

CSSを最適化して、ページの読み込み時間を高速化する方法。

[Keisuke69]

Lighthouseスコア向上のために後で読もうとチラ見したところ、ブラウザがHTMLをどうレンダリングしてるかから解説されている良記事だった。スタイルの遅延ロードとかこのあたりあんまり明るくないので為になるな

[otoan52]

“ページの折り目より上の部分をレンダリングするのに必要なスタイルだけを含ませ、残りのスタイルは遅延ロードさせます。” わかるんだけど、正直人間技じゃないよなー。この辺自動化できないのかな。

[ekari]

css使わないのが一番早いんじゃね?

[hate0211]

CSSを分けるのは意味があるんだな。

[kijtra]

PurgeCSSとか使ってるのにCDNから読み込んでたりしてるの見るとズコーとなるよね

[osakan]

阿部寛のページを参考にするのが一番なんだろうけど。細かい作業の積み重ね。ちりも積もれば、が正に当てはまる。

[abcabz]

つまり「阿部寛のホームページ」が最強ってことがわかりました(^^)

[underd]

あとでよむ