DEV Community: Metin Abbaszade

10 CSS Optimization Tips to Make Your Website Faster

Metin Abbaszade — Fri, 05 Sep 2025 07:42:23 +0000

CSS is more than just a tool for styling.

When a user visits a webpage, the browser retrieves the site’s HTML structure along with its CSS. If your CSS is large, repetitive, or overly complex, it slows down rendering—like giving the browser a puzzle that takes longer to solve. Cleaner, simpler CSS helps web pages load faster and feel more responsive.

Here are 10 practical tips developers use to optimize CSS for better performance.

1. Write Shorter CSS

Apply the Don’t Repeat Yourself (DRY) principle to CSS. Repeating properties across multiple selectors adds unnecessary code.

Example: Repetitive CSS

h1 {
  font-size: 20px;
  color: #fff;
}
h2 {
  font-size: 20px;
  color: #fff;
}

Optimized version: Group selectors

h1, h2 {
  font-size: 20px;
  color: #fff;
}

Use shorthand properties wherever possible:

/* Before shorthand */
.same-sides {
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

/* After shorthand */
.same-sides {
  padding: 15px;
}

Shorthand properties reduce CSS file size and improve efficiency.

2. Use Shallow CSS Selectors

Avoid deeply nested selectors that make browsers work harder to find elements.

Inefficient:

header nav ul li a {
  color: #000;
  font-size: 10px;
}

Efficient:

.nav-link {
  color: #000;
  font-size: 10px;
}

Direct, concise selectors are faster for browsers to interpret and easier to maintain.

3. Segment CSS Code

Breaking your CSS into component-specific or page-specific files improves maintainability and load performance.

Before (single large CSS file):

/* Styles for the home page */
.homepage { background-color: #f0f0f0; padding: 10px; }

/* Styles for the services page */
.services { background-color: #333; color: white; }

/* Styles for the contact page */
.contact { background-color: #222; color: white; padding: 20px; }

After: Separate CSS files

homepage.css

.homepage { background-color: #f0f0f0; padding: 10px; }

services.css

.services { background-color: #333; color: white; }

contact.css

.contact { background-color: #222; color: white; padding: 20px; }

Segmented CSS allows browsers to load only what is needed for a specific page.

4. Optimize CSS Delivery

Minify CSS to remove whitespace, comments, and unnecessary characters.

Original CSS:

header {
  background-color: #333;
  color: white;
  padding: 10px;
}

nav {
  background-color: #444;
  margin-top: 10px;
}

Minified CSS:

header{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}

Minified CSS reduces file size and speeds up page loading.

5. Cache Your CSS

Browsers can store CSS files locally after the first visit, so they don’t need to download them on every page load.

Benefits of caching:

Reduces load times for returning visitors
Decreases server requests
Improves overall performance

How to enable caching:

Configure server headers like Cache-Control, ETag, or Last-Modified.
Use cache busting with version numbers or hashed filenames to ensure users receive updated CSS when necessary.

6. Avoid Overusing the Universal Selector ()

The universal selector targets all elements, which can create performance issues and unintended styling conflicts.

/* Universal selector misuse */
* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: #333;
}

Better approach:

Use CSS resets like normalize.css
Apply styles selectively (e.g., html, body, or specific element groups)
Scope styles to components to avoid global overrides

7. Cut Down on Image HTTP Requests with CSS Sprites

CSS sprites combine multiple small images into a single file. Use background-position to display only the part of the image you need, reducing HTTP requests.

Learn more about CSS sprites →

8. Preload Critical Assets

Use rel="preload" to fetch essential assets early—like CSS, fonts, and hero images—so they’re ready when the browser needs them.

<link rel="preload" href="/css/main.css" as="style" />
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/images/hero-banner.jpg" as="image" media="(min-width: 768px)" />

Benefits of preloading:

CSS loads faster, reducing render delays
Fonts load early, preventing “flash of unstyled text”
Key images display immediately, improving user experience

9. Remove Unnecessary Styles

Unused CSS adds bytes and slows down page load.

/* Unused styles */
.old-btn { background: red; color: white; }
.legacy-container { border: 1px solid #ccc; padding: 20px; }

How to Identify Unused CSS

Use Chrome DevTools Coverage tab – shows which CSS and JS rules are used while navigating your site. Keep in mind it only captures what’s loaded on the pages you visit.
Automated tools – use PurgeCSS, UnCSS, or Tailwind’s purge option during your build process to remove unused selectors. Be careful: these tools may remove CSS needed for dynamic content or JavaScript-rendered elements if not configured properly.
Visual regression testing – tools like Percy can compare screenshots across pages and states, helping ensure removing unused CSS doesn’t break your site.
Component-scoped CSS – keeping styles modular and tied to components reduces the risk of accumulating unused CSS over time.

You have to know that no tool can guarantee 100% accuracy. Always verify on all pages, states, and screen sizes before deleting CSS, especially dynamic or rarely used selectors.

How to clean CSS:

Manually delete unused selectors
Use tools like PurgeCSS, UnCSS, or Tailwind’s purge option
Keep styles modular and component-based

10. Optimize Element Changes with `will-change`

The will-change property hints to the browser which CSS properties are likely to change, allowing it to optimize rendering ahead of time.

.card {
  will-change: transform, opacity;
}

Important considerations:

Use only on elements that actually need it
Overusing will-change can increase memory usage and hurt performance
Treat it as a last-resort tool after optimizing animations and CSS

By following these 10 tips, you can make your CSS more efficient, reduce page load times, and create a smoother, faster experience for your users. Optimized CSS isn’t just cleaner—it’s faster and smarter.

Understanding JavaScript Execution Contexts and Lexical Environments

Metin Abbaszade — Mon, 25 Aug 2025 10:13:17 +0000

Whenever JavaScript runs code, the engine needs a workspace to manage what’s happening. This workspace answers key questions:

Which variables and functions are available? → Scope
Where should I look if a variable isn’t here? → Scope Chain
What is this right now? → Context Object

This workspace is called an Execution Context, and every execution context contains three main components:

*Lexical Environment (LE) *→ Stores variables, functions, parameters, and references to outer environments.

Variable Environment (VE) → Internal storage mainly for var declarations and function declarations.

this binding → Determines the current context object.

Types of Execution Contexts

Global Execution Context (GEC) → Created first when JS starts. Holds the Global Lexical Environment. Only one GEC exists.
Function Execution Context (FEC) → Each function call creates a new Execution Context with its own Lexical Environment (local variables, arguments, inner functions). Its Outer points to the parent scope (where the function was defined).
Eval Execution Context (EEC) → Created when using eval("..."). Runs code from a string. ⚠️ Rarely used and considered bad practice (security + performance issues).

Example 1 – Global + Function Execution Context

// Global Execution Context
var name = "Metin";

function sayHello() {
  // Function Execution Context
  var greeting = "Hello";
  console.log(greeting + ", " + name);
}

sayHello();

Now lets go analyze Step-by-Step:

Global Execution Context (GEC) created:

Lexical Environment: { name: "Metin", sayHello: <function> }, Outer: null

Scope: name, sayHello

Scope Chain: Only global

this: window (browser) or global (Node.js)

Function Execution Context (FEC for sayHello) created:

Lexical Environment: { greeting: "Hello" }, Outer → Global Lexical Environment

Scope: greeting

Scope Chain: Function scope → Global scope

this: undefined (strict mode)

Variable lookup:

greeting → found in FEC

name → not in FEC → check outer → Global LE → found "Metin"

Output:

Hello, Metin

Example 2 – Lexical Environment and Closures

function outer() {
  let counter = 0;  // outer lexical environment

  function inner() {
    counter++;  // inner still "remembers" outer's variables
    console.log(counter);
  }

  return inner;
}

const fn = outer();  
fn(); // 1
fn(); // 2
fn(); // 3

Step-by-Step

Call outer() → FEC for outer created:

Lexical Environment: { counter: 0, inner: <function> }, Outer → Global LE

Scope: counter, inner

Scope Chain: outer → global

this: undefined (strict mode)

inner returned → closure formed → retains reference to outer LE

Call fn() → FEC for inner created:

Lexical Environment: {}, Outer → Lexical Environment of outer()

Scope: empty

Scope Chain: inner → outer → global

this: undefined