今日のWebでは、ページの読み込み速度は最も重要なWebサイトの指標の1つです。ミリ秒でもユーザーエクスペリエンスと製品に大きな影響を与え、ページの読み込みが遅いとコンバージョン率が簡単に低下します。あなたはあなたのウェブサイトをスピードアップするために多くのツールとテクニックを使うことができます。この記事では、フロントエンドのパフォーマンスを向上させるために使用できる最高のCSS最適化手法を紹介します。
1.パフォーマンスのボトルネックを見つける
すべての最適化で最も重要なことは、包括的な診断から始めることです。幸い、パフォーマンスのボトルネックを見つけるのに役立つCSS診断ツールはたくさんあります。まず、WebブラウザのDevToolsを使用して、アセットの読み込み速度を確認できます。ほとんどのブラウザでは、F12ボタンを押すことでDevToolsを開くことができます。
たとえば、Firefox DevToolsでは、[ネットワーク]タブを使用して、ページに読み込まれるすべてのCSSファイルのサイズと読み込み時間を確認できます。キャッシュを使用する場合と使用しない場合のCSS読み込みの速度をテストすることもできます。DevToolsは、サードパーティのCDNから抽出されたGoogleフォントファイルやCSSリソースなどの外部CSSも表示するため、これまで知らなかった多くのリソースを見つけることができます。
Googleが提供するPingdomToolsとLighthouseは、開発者がWebサイトの速度とフロントエンドのパフォーマンスを分析するためによく使用する他の2つの無料ツールです。たとえば、簡単なWebサイトの速度テストを実行する場合、PingdomToolsはいくつかの便利なCSS最適化のヒントを提供します。
2.CSSファイルを縮小および圧縮します
ほとんどのWebサイトは、複数のCSSファイルに依存しています。ほとんどの場合、モジュラーCSSがベストプラクティスと見なされますが、すべてのファイルのロードには時間がかかる場合があります。ただし、これがCSSの縮小および圧縮ツールが存在する理由です。適切に使用すれば、ページの読み込み時間を大幅に短縮できます。
CSS Minifyなど、CSSファイルをコピーして単純な形式に貼り付けることでサイズを縮小できるオンラインツールがいくつかあります。このタイプのツールは、小規模なプロジェクトでうまく機能します。ただし、複数のCSSファイルを含む大規模なプロジェクトの場合、それらを使用するのは面倒で時間がかかる可能性があります。この場合、自動化されたソリューションを選択するのが最善です。
現在、ほとんどのビルドツールでは、コードベースで自動的に圧縮を実行できます。たとえば、デフォルトでは、Webpackはすべてのファイルを縮小パッケージとして返します。PostCSSには、CSS Nanoなどのスマートプラグインもあります。これにより、ファイルサイズを縮小できるだけでなく、多くのターゲットを絞った最適化を実行できます。
3.FlexboxとCSSグリッドを使用する
CSSを作成するときに従来のボックスモデルのみに依存し、マージン、パディング、フローティングポイントを使用して画面上のアイテムを整列させる場合は、より新しいレイアウトモジュール、つまりフレックスボックスとCSSグリッドの採用を検討する必要があります。これらの新しいモデルを使用すると、少ないコードで複雑なレイアウトを実装できます。
古い手法では、プロジェクトを垂直方向に中央揃えするなどの単純な場合でも、多くのトリックや調整を行う必要があります。ただし、これはフレックスボックスとCSSグリッドには当てはまりません。新しいレイアウトモジュールを取得するには時間がかかる場合がありますが、CSSファイルがはるかに小さいため、それだけの価値があります。これは特にフレックスボックスに当てはまります。これまでのところ、フレックスボックスはかなり優れたブラウザサポートを備えています（現在、世界全体で98.3％）。
ブラウザーによるCSSグリッドのサポートは完全ではありませんが（現在、世界の92.03％を占めています）、古いブラウザーをサポートする必要がない場合、またはバックアップ機能を提供する意思がある場合は、CSSグリッドを使用できます。
4. @ importルールの代わりに<link>タグを使用します**
WebページにCSSファイルをロードさせるには、2つの主要な手法を使用できます。
<link>タグを使用して、HTMLページの<head>セクションに追加します。
* @import * CSSルールを使用して、他のスタイルシートからインポートします。
メインのCSSファイルの先頭に@importルールを追加する必要があります。ほとんどの場合、フォントやその他のデザイン要素など、より小さなリソースをロードするために使用されます。当初、これは良い解決策のように見えましたが、<link>タグを使用してスタイルシートを直接ロードするHTMLページと比較すると、ブラウザが追加のスタイルシートをロードするのにはるかに長い時間がかかります。
HTMLページに複数のCSSファイルを追加する場合は、CSSの特異性に注意してください。最初に最も一般的なスタイルシートを追加してから、より具体的なスタイルシートを選択します。後で追加されるスタイルシートは前のCSSファイルのルールを上書きするため、これを行う必要があります。たとえば、次の例では、CSSファイルを正しい順序で追加します。
<link rel = "stylesheet" href = "main.css"> <link rel = "stylesheet" href = "page.css"> <link rel = "stylesheet" href = "component.css">
5.画像の代わりにグラデーションとSVGを使用する
Webページにすべての画像をロードするには時間がかかる場合があります。開発者は、外部CDNから画像をロードしたり、TinyJPGなどの画像圧縮ツールを使用したりするなど、多くの画像最適化手法を使用してこの影響を軽減します。これらのソリューションは多くの助けを提供できますが、多くの場合、ネイティブCSS効果を使用して、多数のリソースJPGおよびPNG画像を置き換えることができます。
たとえば、背景画像の代わりにグラデーションを使用すると、背景画像によってユーザーのブラウザの速度が大幅に低下する可能性があります。CSSのグラデーション機能を使用して、線形、放射状、繰り返しのグラデーションを作成できます。これらのネイティブCSS機能を使用すると、色だけでなく、グラデーションの角度も定義できます。
たとえば、次のルールは、どの画像よりも速く読み込まれる素敵なグラデーションの背景を作成します。
div {背景：線形グラデーション（45度、ライトグリーン、ロイヤルブルー）;
}
より複雑なグラデーションやテクスチャの場合は、CSSmatic（以下に表示）やColorZillaなどのジェネレーターを使用することもできます。
グラデーションに加えて、Scalable Vector Graphics（SVG）を使用して、従来のJPGおよびPNG画像を置き換えることもできます。読み込みが速くなるだけでなく、画像の1つのバージョンを含めるだけで済みます。これは、SVGがそのベクトルの性質により品質を損なうことなく、任意のサイズにスケールアップできるためです。さらに、通常のHTMLファイルと同じように、CSSを使用してSVGのスタイルを設定することもできます。
6.重要なルールを避ける
にもかかわらず！重要なルールは状況によっては天の恵みかもしれませんが、最後の手段としてのみ使用する必要があります。このルールは、カスケードから例外を作成します。したがって、CSS宣言を追加すると！重要な場合は、他のすべての宣言を上書きします。その構文は次のとおりです。
h1 {margin-bottom：20px！important;
}
CSSに重要なルールが多すぎる場合、ユーザーのブラウザはコードに対して追加のチェックを実行する必要があり、ページ速度が大幅に低下する可能性があります。経験則として、サイト全体のCSSや、テーマやプラグインの作成には絶対に使用しないでください。重要。可能であれば、サードパーティのライブラリからCSSを上書きする場合にのみ使用してください。
7.CSSリファクタリングを検討する
CSSリファクタリングが簡単な作業になることはめったにありませんが、多くの場合、Webサイトのパフォーマンスを大幅に向上させることができます。たとえば、CSSファイルが大きすぎる場合、古いコードベースを継承している場合、またはページの読み込み時間が短い場合は、変換率が大幅に低下します。CSSリファクタリングの目標は、コードをよりクリーンで、保守しやすく、ロードを高速化することです。
CSSリファクタリングは複数のステップからなるプロセスであり、その間にCSSコードベースのすべての側面を分析する必要があります。次のようないくつかの異なることを確認する必要があります。
未使用または繰り返しのCSSルールまたはリソースがあるかどうか。
FlexboxやCSSグリッドなどの最新のテクノロジーを使用することは可能ですか？
あまりにも多くの特異性を使用するかどうか（この視覚的特異性計算機を使用して計算できます）、
CSSファイルの構造が妥当であるかどうか（たとえば、大きなファイルよりも小さなファイルを維持する方が簡単です）、
自動ビルドツールを使用する価値はありますか？
そして他の多く
リファクタリングを開始する前に、測定可能な目標を設定し、使用するベンチマーク（ページの読み込み時間や最初の意味のある描画など）を選択して、前後の値を比較できるようにする必要があります。
また、Gitなどのバージョン管理ツールを使用することを忘れないでください。このようにして、問題が発生した場合は、以前のバージョンのコードに戻ることができます。
要約
多くのCSS最適化手法を使用して、Webサイトのパフォーマンスを向上させることができます。それらのほとんどは実装が簡単ですが、ページの読み込み時間に大きな影響を与える可能性があります。ページの読み込みを高速化すると、ユーザーエクスペリエンスが向上するだけでなく、Googleやその他の検索エンジンでのランキングも向上します。
CSS最適化のベストプラクティスに加えて、キャッシュ、Google AMP、HTTPSプロトコルなど、他の多くの手法を使用して読み込み速度を向上させることもできます。