Css Module 40

   Module 40 :

1. Introduction to CSS Performance

Why CSS Performance Matters:

CSS may seem lightweight, but inefficient rules and bloated stylesheets can slow down:

Render times (FCP – First Contentful Paint)

Repaints and reflows

Time to Interactive (TTI)

How CSS Affects the Browser:

CSS is render-blocking. Until it's fully downloaded and parsed, the page won't render.

The browser constructs the CSSOM (CSS Object Model) alongside the DOM, and combines them into the Render Tree.

Complex or inefficient styles slow this pipeline.

2. Writing Efficient CSS: 

A. Keep Selectors Short and Simple

Inefficient:

css

 code

html body div.container ul li span.label { color: red; }

Efficient:

css

 code

.label { color: red; }

Explanation:

Deep selectors force the browser to evaluate multiple levels.

Flat selectors target elements directly.

Tip: Use class selectors instead of tag or descendant selectors.

B. Avoid the Universal Selector * and Overly Generic Rules

Example:

css

 code

* { margin: 0; padding: 0; }

While reset styles are useful, * can be costly in large DOMs.

Alternative: Use a scoped reset:

css

 code

body, h1, h2, p, ul, ol { margin: 0; padding: 0; }

C. Use Shorthand Properties

Reduces CSS file size and parsing time.

Instead of:

css

code

margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

Use:

css

code

margin: 10px;

D. Avoid Inline Styles and !important

Inline styles increase HTML size and reduce maintainability.

!important breaks cascading and makes styles harder to override.

E. Minimize Repaints and Reflows

CSS rules like width, height, margin, and position can trigger reflows.

Example: Changing top, left, or width dynamically can reflow the layout.

Optimization:

Use CSS transforms and opacity changes for animations:

css

 code

.element { transform: translateX(100px); opacity: 0.5; }

F. Limit Use of Complex Pseudo-Selectors

Bad:

css

 code

ul li:nth-child(2n+1):hover { background-color: yellow; }

Instead, try using a utility class:

css

code

<li class="odd">...</li>

G. Use Critical CSS

Load only above-the-fold styles in the initial render, defer the rest.

Tools:

Critical by Addy Osmani

webpack plugins for critical CSS

Example:

html

 code

<style> /* Critical CSS inline here */ </style> <link rel="stylesheet" href="main.css" media="print" onload="this.media='all';">

H. Remove Unused CSS

Tools like:

PurgeCSS

UnCSS

Chrome DevTools Coverage tab

These can help eliminate unnecessary rules, especially in large frameworks like Bootstrap.

3. Hands-on Exercises

Exercise 1: Optimize Bloated Selectors

Given:

css

 code

div#main-content .container .article h2.title { color: blue; }

Refactor this to make it more efficient.

Answer:

css

code

.title { color: blue; }

Explanation: The class .title should uniquely identify the element.

Exercise 2: Critical CSS Extraction 

Open a landing page design.

Identify visible content in the viewport.

Copy associated styles into an inline <style> block.

Defer loading the full stylesheet.

Exercise 3: Audit and Optimize a CSS File

Tools:

          

Chrome DevTools > Coverage

PurgeCSS

Steps:

Load a webpage with a large CSS file.

Use Coverage tab to identify unused rules.

Use PurgeCSS to remove them.

Measure file size before and after.

4. Example: Optimizing a Blog Template

Before Optimization:

CSS file size: 230KB

Deep selectors: .blog-post .content > p:first-child

Uses 5 Google Fonts

Animates with top and left

After Optimization:

CSS file size: 80KB

Flat selectors and utility classes

Font stack limited to 1 custom font

Uses transform for animation

Results:

Load time improved by 45%

First Contentful Paint dropped from 1.8s to 1.1s

5. Performance Tools and Testing

Tools to Use:

Lighthouse (Chrome)

WebPageTest

Chrome DevTools – Performance and Coverage tabs

6. Summary of Best Practices

Tip

Why It Helps

Short, flat selectors

Faster evaluation

Use classes over tags or IDs

Easier to manage, better specificity control

Minimize CSS

Reduces download time

Remove unused styles

Cleaner, faster CSSOM

Critical CSS

Improves First Paint

Avoid complex pseudo-classes

Better selector performance

 FormatS

 1:  What happens in the browser           (CSSOM, Render Tree)

CSS as render-blocking resource

  2:  Writing efficient selectors

3:   Exercises: Refactor and audit code

Tools: Lighthouse, PurgeCSS

 4:  Critical CSS & Lazy Loading

CSS for performance in frameworks (Tailwind, Bootstrap)

Homework/Assignment

Project Task:

Take an existing webpage and:

Minimize selector depth

Remove unused rules

Extract critical CSS

Measure performance improvement (before/after)