あなたのCSSを最適化し、あなたのサイトをスピードアップする方法

Sep 12, 2025

操作方法

CSSは、HTMLとJavaScriptのように、比較的複雑なパイプラインを通過する必要があります。ブラウザはサーバーからファイルをダウンロードしてから、それらを解析してDOMに適用する必要があります。最適化の極端なレベルの最適化のために、このプロセスは通常かなり速いです - フレームワークに基づいていないより小さいWebプロジェクトでは、CSSは通常、総リソース消費のわずかな部分を構成します。

フレームワークはこの均衡を混乱させる。 jQuery UIのようなJavaScript GUIスタックを含め、CSS、JS、HTMLサイズのSkyrocketを監視します。多くの場合、開発者は通常Pinchを最後に感じます - T3インターネットとの強力な8コアのワークステーションの後ろに着席すると、スピードについて気にかけません。これは、待ち時間またはCPU制約のデバイスが再生されるようになるにつれて、これは変わります。

19 Cool CSSアニメーションの例を再現するための例

CSSの最適化には多次元アプローチが必要です。手書きコードはさまざまなテクニックを使用してスリムダウンすることができますが、手でフレームワークコードを超えると非効率的です。このような場合、自動化された最小値を使用すると、より良い結果が得られます。

次の手順は、CSS最適化の世界を通る旅行に参加します。すべてのシングルがあなたのプロジェクトに直接適用可能であるかもしれませんが、それらを念頭に置いてください。より単純なものが欲しいですか？お試しください ウェブサイトビルダー 。

01.短距離を使う

最速のCSS句は決して解析されないものです。下記のマージン宣言などの短縮条項を使用して、CSSファイルのサイズを常に縮小します。 Googling 'CSS短距離'によって、多くの追加の短縮形式が見つかります。

 P {Margin-Top：1px;
    マージン右：2ピクセル。
    Margin-Bottom：3px;
    Margin-Left：4px; }

p {マージン：1px 2px 3px 4px;

02.未使用のCSSを見つけて削除します

マークアップの不要な部分を排除すると、明らかに莫大なスピードが向上します。 GoogleのChromeブラウザには、この機能が箱から出しています。単にview＆gtに行きます。開発者＆gt;開発者ツールと最近のバージョンの[Sources]タブを開き、コマンドメニューを開きます。その後、Coverage Analysisウィンドウでカバレッジを表示し、現在のWebページで未使用のコードを強調表示します。

03.より快適なファッションでそれをしなさい

回線ごとの分析を介してナビゲートすることは必ずしも快適ではありません。 ChromeのWeb Performance Auditは同様の情報を返します - ツールバー、ビュー＆gtからそれを開くだけです。開発者＆gt;開発者ツール＆gt。監査して実行しましょう。完了したら、問題のある要素のリストがポップアップします。

04.問題に注意してください

CSSの自動化された分析は常にエラーにつながる可能性があることに注意してください。 CSSファイルをミリーションに置き換えた後、Webサイト全体の徹底的なテストを実行してください。そして前進し、まともな ウェブホスティング あなたのサイトのりんごをアイロアウトするのを助けることができます。

05.インラインクリティカルなCSS

外部スタイルシートのロードは待ち時間のために時間がかかります - 誰でも「Unstaled Contentのフラッシュ」を覚えていますか？したがって、コードの最も重要なビットはヘッダータグに入ることができます。ただし、過剰にしないでください。コードはメンテナンスタスクを実行する人間によっても読む必要があります。

06.逆並列構文解析を許可します

@ImportはあなたのCSSコードに構造を追加します。残念ながら、利点は無料ではありません。輸入が巣があるので、それらを並行して解析できません。より並列な方法では、シリーズを使用します ＆lt; link＆gt; ブラウザが一度にフェッチできるタグ。

 @IMPORT URL（ "A.CSS"）;
@import URL（ "b.css"）;
@import URL（ "C.CSS"）;
v

07.画像をCSSで置き換えます

何年も前、ウェブサイトに半透明の効果を生み出すための半透明のPNGのセットが一般的でした。今日、CSSフィルタはリソースの節約の代替案を提供します。一例として、このステップに伴うスニペットは、問題の画像がそれ自体のグレースケール版として現れることを保証します。

 img {
    -webkit-filter：グレースケール（100％）。 / *古い
サファリ* /
    フィルタ：グレースケール（100％）。

08.カラーショートカットを使用します

一般的な知恵は、6桁の色記述子が色を表現するための最も効率的な方法であることを教えています。そうではありません - 場合によっては、省略形の説明やカラー名を短くすることができます。

ターゲット{背景色：#FFFFFF; }
ターゲット{背景：#FFF;

09.不要なゼロとユニットを排除します

CSSはさまざまな単位と数値フォーマットをサポートしています。下のスニペットで説明されているように、最適化のための感謝のターゲットです - 末尾と後続のゼロの両方を削除することができます。さらに、常にゼロがゼロで、次元を追加することは含まれている情報に値を追加しないことに注意してください。

パディング：0.2em;
マージン：20.0em;
Avalue：0px;
パディング：.2em;
マージン：20em;
アバレ：0;

10.過度のセミコロンを排除します

この最適化は、コードの変更に影響を与えるため、やや重要です。 CSSの指定を使用すると、プロパティグループ内の最後のセミコロンを省略できます。この最適化方法によって達成された節約が最小限であるため、これは主に自動オプティマイザに取り組んでいる人のために言及しています。

 P {
。 。 。
フォントサイズ：1.33EM

11.テクスチャATLASを使用してください

プロトコルのオーバーヘッドのため、複数の小さなスプライトをロードすることは非効率的です。 CSSスプライトは、一連の小さな写真を1つの大きなPNGファイルにまとめ、それは次にCSSルールを介して壊れます。などのプログラムテクスチャパッカー作成プロセスを大幅に簡素化します。

ダウンロード{
  幅：80px;
  高さ：31px;
  背景 - 位置：-160px -160px
}
。download：hover {
  幅：80px;
  高さ：32px;
  背景 - 位置：-80px -160px

12. PXを追跡します

パフォーマンスを向上させるための1つのきちんとした方法は、CSS規格の特殊性を使用します。単位なしの数値はピクセルであると想定されます - PXを削除するには、各番号ごとに2バイトが保存されます。

 H2 {パディング：0px;マージン：0px;}
H2 {パディング：0;マージン：0}

13.高価な特性を避けます

分析により、他のタグが他のタグよりも高価であることがわかりました。このステップに付随するリストは特にパフォーマンスが空腹であると考えられています - それをする機会が与えられたときにそれらを避けてください。

境界半径
    ボックスシャドウ
    変わる
    フィルタ
    ：NTH  - 子供
    位置：固定

14.空白を取り除きます

Whitespace - Thinkタブ、キャリッジリターン、スペース - コードを読みやすくするのを簡単にしますが、パーサーの観点からわずかな目的を果たします。出荷する前にそれらを排除してください。さらに良い方法で、このジョブをシェルスクリプトまたは類似のアプライアンスに委任することが含まれます。

15.コメントを排除します

コメントはコンパイラの目的はありません。配信前に削除するためのカスタムパーサを作成します。帯域幅を節約するだけでなく、攻撃者やクローナーが手元のコードの背後にある考え方を理解するのに困難な時間を過ごすこともできます。

16.自動圧縮を使用してください

Yahooのユーザーエクスペリエンスチームは、多くの圧縮タスクを処理するアプリケーションを作成しました。それはJARファイルとして出荷されます、ここで利用可能ですそして、選択したJVMで実行することができます。

 java -jar yuicompressor-x.y.z.jar.
使用法：java -jar yuicompressor-x.y.z.jar.
 [オプション] [入力ファイル]
グローバルオプション
    -h、--helpこれを表示します
 情報
    --type＆lt; JS | CSS＆GT。を指定します
 入力ファイルの種類

17. NPMからそれを実行します

製品をNode.jsに統合することを好む場合は、訪問する必要があります。 npmjs.com/package/yuicompressor. 。ひどく維持されているリポジトリには、一連のラッパーファイルとJavaScript APIが含まれています。

 var compressor =要求（ 'Yuicompressor'）。
compressor.compress（ '/ path / to /
JS 'のファイルまたは文字列、{
//コンプレッサーオプション：
文字セット： 'utf8'、
タイプ： 'js'、

18. Sassらをチェックで保つ

CSS Selectorのパフォーマンスは、数年前のほど重要ではありません（リソースを参照）、SASSなどのフレームワークは非常に複雑なコードを発信することがあります。出力ファイルを時々調べて、結果を最適化する方法について考えてください。チームと共有する結果が得られましたか？ファイルを共有可能に保存します クラウドストレージ 。

SASSとは何ですか？

19.キャッシングを設定します

古い格言は、最速のファイルがワイヤを越えて送信されることがないものであると主張しています。ブラウザキャッシュ要求を実行すると、これを効率的に達成します。残念ながら、キャッシングヘッダーのセットアップはサーバー上で行われなければなりません。スクリーンショットに表示されている2つのツールをよく使用してください - 彼らはあなたの変更の結果を分析するための迅速な方法を提供します。

キャッシュをバストします

デザイナーは、今後の変更に関する問題の恐れのためにキャッシングを嫌います。問題の周りにきちんとした方法は、ファイル名のタグを含むことです。残念なことに、この手順に付随するコードで概説されているスキームは、いくつかのプロキシが「動的」パスを持つファイルをキャッシュすることを拒否しているため、どこにでも機能しません。

 link rel = "スタイルシート" href = "style.css？v = 1.2.3"＆gt;

21.基本を忘れないでください

CSSの最適化はゲームの一部です。サーバーがHTTP / 2とGZIP圧縮を使用しない場合は、データ送信中に多くの時間が失われます。幸いなことに、これら2つの問題を修正することは通常簡単です。私たちの例は、一般的に使用されているApacheサーバーへのいくつかの調整を示しています。あなたは別のシステムであなた自身を見つけるべきですが、サーバーの資料を参照してください。

 pico /etc/httpd/conf/httpd.conf
AddOutputFilterByTypeのDeflate Text / HTML
AddOutputFilterByType Deflate Text / CSS

この記事はもともとCreative Web Design Magazineの第282号に掲載されました ウェブデザイナー 。 ここに問題282を購入してください または ここでWeb Designerを購読してください 。

関連記事：

10素晴らしい新しいCSSテクニック
最高のCSSプリプロセッサはどれですか？
CSSカスタムプロパティの概要

あなたのCSSを最適化し、あなたのサイトをスピードアップする方法

01.短距離を使う

02.未使用のCSSを見つけて削除します

03.より快適なファッションでそれをしなさい

04.問題に注意してください

05.インラインクリティカルなCSS

06.逆並列構文解析を許可します

07.画像をCSSで置き換えます

08.カラーショートカットを使用します

09.不要なゼロとユニットを排除します

10.過度のセミコロンを排除します

11.テクスチャATLASを使用してください

12. PXを追跡します

13.高価な特性を避けます

14.空白を取り除きます

15.コメントを排除します

16.自動圧縮を使用してください

17. NPMからそれを実行します

18. Sassらをチェックで保つ

19.キャッシングを設定します

キャッシュをバストします

21.基本を忘れないでください

操作方法 - 最も人気のある記事

How to rank in Google

Adobe XDを使用してマイクロインタラクションを作成します

ローカル開発環境の設定方法

Photoshopでの画像のサイズを変更する方法

フラッシュゲームをHTML5に変換する

サブスタンスデザイナーのタイル材料を作成する

8個の必須WordPressセキュリティ秘密

4を向上させるための4つの簡単なステップ

カテゴリ