CSS optimization for performance: a complete guide for web developers

CSS is a fundamental web development technology that determines the appearance and styling of websites. However, poorly optimized CSS files can significantly slow down page loading and worsen the user experience. In this article, we’ll cover all aspects of CSS optimization to achieve maximum performance in web applications.

Why CSS optimization matters

CSS files can make up a significant portion of a web page’s total size, especially in complex projects with many styles. Unoptimized CSS files can:

Increase page load times
Block content rendering
Cause performance issues on mobile devices
Affect Core Web Vitals metrics

Understanding the principles of CSS optimization is essential for building fast, responsive web applications.

Analyzing CSS performance

Before you begin optimizing, analyze the current state of your CSS files and their impact on performance.

Analysis tools

Chrome DevTools:

Network tab to analyze the size and load time of CSS files
Coverage tab to identify unused CSS rules
Performance tab to analyze CSS’s impact on rendering

Lighthouse:

CSS performance audit
Optimization recommendations
Critical CSS analysis

WebPageTest:

Detailed analysis of CSS loading
Timelines
Performance comparisons

Metrics to track

CSS file size - the total size of all CSS files
CSS load time - the time needed to load all styles
Number of HTTP requests - the number of CSS files
Unused CSS rules - the percentage of unused styles

CSS minification

Minification is one of the most effective ways to reduce the size of CSS files. It removes all unnecessary characters, such as whitespace, comments, and line breaks.

Manual minification

Although manual minification isn’t recommended for large projects, understanding the process is useful:

CodeCSS

/* Исходный CSS */
.container {
    background-color: #ffffff;
    padding: 20px;
    margin: 10px;
    border: 1px solid #cccccc;
}

/* Минифицированный CSS */
.container{background-color:#fff;padding:20px;margin:10px;border:1px solid #ccc}

Automatic minification

CSSNano:

CodeShell

# Установка
npm install cssnano --save-dev

# Использование
npx cssnano input.css output.css

PostCSS with cssnano:

CodeJavaScript

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
        normalizeWhitespace: true,
      }]
    })
  ]
}

Webpack with css-loader:

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        ]
      }
    ]
  }
}

Critical CSS

Critical CSS includes the styles needed to display above-the-fold content (content visible when the page first loads). Extracting critical CSS lets the page start rendering sooner.

Identifying critical CSS

Critical CSS includes:

Styles for headings and navigation
Styles for visible main content
Styles for buttons and interactive elements
Base styles (reset, typography)

Tools for extracting critical CSS

Critical:

CodeShell

# Установка
npm install critical --save-dev

# Использование
npx critical https://example.com --base ./dist --inline --dimensions 1300x900

Penthouse:

CodeJavaScript

const penthouse = require('penthouse');

penthouse({
  url: 'https://example.com',
  css: 'path/to/styles.css',
  width: 1300,
  height: 900
}).then(criticalCss => {
  // Сохранение критического CSS
  fs.writeFileSync('critical.css', criticalCss);
});

Implementing critical CSS

Inline critical CSS:

CodeHTML

<head>
  <style>
    /* Критический CSS */
    .header { background: #fff; }
    .hero { padding: 40px 0; }
    .btn { background: #007bff; }
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Load the remaining styles asynchronously:

CodeJavaScript

// Загрузка не-критических стилей
function loadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

// Загрузка после рендеринга критического контента
window.addEventListener('load', () => {
  loadCSS('non-critical.css');
});

Tree shaking and removing unused CSS

Tree shaking is a technique for removing unused code. In the context of CSS, this means removing styles that don’t apply to elements on the page.

PurgeCSS

PurgeCSS analyzes HTML files and removes unused CSS rules:

CodeShell

# Установка
npm install purgecss --save-dev

# Использование
npx purgecss --css css/styles.css --content index.html --output css/purged.css

PurgeCSS configuration:

CodeJavaScript

// purgecss.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.vue'
  ],
  css: ['./src/**/*.css'],
  output: './dist/css/',
  safelist: [
    'html',
    'body',
    /^btn-/,
    /^modal-/
  ]
}

UnCSS

UnCSS is an alternative tool for removing unused CSS:

CodeShell

# Установка
npm install uncss --save-dev

# Использование
npx uncss src/*.html > dist/css/cleaned.css

Automating with Webpack

Webpack with PurgeCSS:

CodeJavaScript

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
      safelist: ['html', 'body']
    })
  ]
}

Selector optimization

The efficiency of CSS selectors can significantly affect rendering performance. Browsers read selectors from right to left, so it’s important to optimize their structure.

Selector performance hierarchy

From fastest to slowest:

ID selectors - #header
Classes - .btn
Elements - div
Pseudo-classes - :hover
Attributes - [type="text"]
Pseudo-elements - ::before
Child selectors - >
Descendant selectors -
Universal selectors - *
Adjacent sibling selectors - +, ~

Selector optimization examples

Bad:

CodeCSS

/* Медленный селектор */
body div.container ul li a {
  color: blue;
}

/* Сложный селектор */
.container .sidebar .widget .title .link:hover {
  color: red;
}

Good:

CodeCSS

/* Быстрый селектор */
.nav-link {
  color: blue;
}

/* Оптимизированный селектор */
.widget-link:hover {
  color: red;
}

Using CSS-in-JS

CSS-in-JS solutions can optimize selectors automatically:

CodeJavaScript

// styled-components
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// emotion
const buttonStyles = css`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

Optimizing CSS loading

The right CSS loading strategy can significantly improve performance.

Preload and prefetch

Preload critical resources:

CodeHTML

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Prefetch non-critical resources:

CodeHTML

<link rel="prefetch" href="non-critical.css">

Media queries for conditional loading

CodeHTML

<!-- Загрузка только для печати -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Загрузка только для больших экранов -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">

<!-- Загрузка только для мобильных устройств -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

Asynchronous loading

CodeJavaScript

// Функция для асинхронной загрузки CSS
function loadCSSAsync(href, media = 'all') {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.media = media;
  
  // Установка media в 'all' после загрузки
  link.onload = () => {
    link.media = 'all';
  };
  
  document.head.appendChild(link);
}

// Загрузка не-критических стилей
loadCSSAsync('non-critical.css');

Optimizing CSS variables

CSS variables (custom properties) can improve performance and maintainability.

Using variables effectively

CodeCSS

:root {
  /* Цвета */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  
  /* Размеры */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  /* Типографика */
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;
  
  /* Тени */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Использование переменных */
.btn {
  background-color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-sm);
}

Dynamic variables

CodeCSS

/* Темная тема */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #333333;
}

/* Светлая тема */
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

/* Применение */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Animation optimization

CSS animations can significantly affect performance. Proper animation optimization is essential for a smooth user experience.

Using transform and opacity

These properties don’t trigger reflow or repaint:

CodeCSS

/* Хорошо - использует transform */
.animate {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

/* Плохо - вызывает reflow */
.animate {
  left: 100px;
  transition: left 0.3s ease;
}

Hardware acceleration

CodeCSS

/* Включение аппаратного ускорения */
.accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Для анимаций */
.animated {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

Optimizing keyframes

CodeCSS

/* Оптимизированные keyframes */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Использование */
.slide-in {
  animation: slideIn 0.3s ease-out;
}

Optimizing for mobile devices

Mobile devices have limited resources, so CSS optimization is especially important for them.

Media queries for mobile devices

CodeCSS

/* Базовые стили для мобильных */
.container {
  padding: 1rem;
  font-size: 16px;
}

/* Стили для планшетов */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 18px;
  }
}

/* Стили для десктопов */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    font-size: 20px;
  }
}

Optimizing for touch devices

CodeCSS

/* Увеличение размера touch targets */
.touch-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

/* Отключение hover эффектов на touch устройствах */
@media (hover: none) {
  .hover-effect:hover {
    /* Отменяем hover эффекты */
    transform: none;
    box-shadow: none;
  }
}

Monitoring and analytics

Regularly monitoring CSS performance helps identify issues and optimize loading.

Monitoring tools

Google PageSpeed Insights:

CSS performance analysis
Optimization recommendations
Core Web Vitals metrics

WebPageTest:

Detailed analysis of CSS loading
Timelines
Performance comparisons

Chrome DevTools:

Network tab for analyzing CSS files
Coverage tab for unused styles
Performance tab for analyzing rendering

Metrics to track

First Contentful Paint (FCP) - time until the first content is displayed
Largest Contentful Paint (LCP) - time until the largest element is displayed
Cumulative Layout Shift (CLS) - layout stability
First Input Delay (FID) - response time to the first interaction

Automating optimization

Automating CSS optimization helps maintain high performance throughout a project’s lifecycle.

CI/CD integration

GitHub Actions:

CodeYAML

name: CSS Optimization
on: [push, pull_request]
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Optimize CSS
        run: npm run optimize:css
      - name: Build project
        run: npm run build

Webpack configuration:

CodeJavaScript

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
  ],
};

CSS optimization best practices

1. Minification and compression

Always minify CSS files for production
Use gzip or Brotli compression
Remove unused CSS rules

2. Critical CSS

Extract critical CSS for above-the-fold content
Inline critical CSS in the HTML
Load non-critical styles asynchronously

3. Selector optimization

Use simple, efficient selectors
Avoid deep nesting
Prioritize classes over elements

4. CSS loading

Use preload for critical resources
Use media queries for conditional loading
Minimize the number of HTTP requests

5. Animations and transitions

Use transform and opacity for animations
Enable hardware acceleration
Optimize keyframes

6. Mobile optimization

Adapt CSS for mobile devices
Optimize touch targets
Account for mobile device limitations

Conclusion

Optimizing CSS for performance is a multifaceted task that requires an understanding of various aspects of web development. Proper CSS optimization can significantly improve page load speed, user experience, and search result rankings.

Key points to remember:

Minify CSS to reduce file size
Extract critical CSS for faster rendering
Remove unused styles with tree shaking
Optimize selectors for better performance
Use the right CSS loading strategies
Monitor performance regularly

By following these recommendations, you can build fast, responsive web applications with optimized CSS files that provide a great user experience on all devices.

Why CSS optimization matters

CSS files can make up a significant portion of a web page’s total size, especially in complex projects with many styles. Unoptimized CSS files can:

Increase page load times
Block content rendering
Cause performance issues on mobile devices
Affect Core Web Vitals metrics

Understanding the principles of CSS optimization is essential for building fast, responsive web applications.

Analyzing CSS performance

Before you begin optimizing, analyze the current state of your CSS files and their impact on performance.

Analysis tools

Chrome DevTools:

Network tab to analyze the size and load time of CSS files
Coverage tab to identify unused CSS rules
Performance tab to analyze CSS’s impact on rendering

Lighthouse:

CSS performance audit
Optimization recommendations
Critical CSS analysis

WebPageTest:

Detailed analysis of CSS loading
Timelines
Performance comparisons

Metrics to track

CSS file size - the total size of all CSS files
CSS load time - the time needed to load all styles
Number of HTTP requests - the number of CSS files
Unused CSS rules - the percentage of unused styles

CSS minification

Minification is one of the most effective ways to reduce the size of CSS files. It removes all unnecessary characters, such as whitespace, comments, and line breaks.

Manual minification

Although manual minification isn’t recommended for large projects, understanding the process is useful:

CodeCSS

/* Исходный CSS */
.container {
    background-color: #ffffff;
    padding: 20px;
    margin: 10px;
    border: 1px solid #cccccc;
}

/* Минифицированный CSS */
.container{background-color:#fff;padding:20px;margin:10px;border:1px solid #ccc}

Automatic minification

CSSNano:

CodeShell

# Установка
npm install cssnano --save-dev

# Использование
npx cssnano input.css output.css

PostCSS with cssnano:

CodeJavaScript

// postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
        normalizeWhitespace: true,
      }]
    })
  ]
}

Webpack with css-loader:

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true
            }
          }
        ]
      }
    ]
  }
}

Critical CSS

Critical CSS includes the styles needed to display above-the-fold content (content visible when the page first loads). Extracting critical CSS lets the page start rendering sooner.

Identifying critical CSS

Critical CSS includes:

Styles for headings and navigation
Styles for visible main content
Styles for buttons and interactive elements
Base styles (reset, typography)

Tools for extracting critical CSS

Critical:

CodeShell

# Установка
npm install critical --save-dev

# Использование
npx critical https://example.com --base ./dist --inline --dimensions 1300x900

Penthouse:

CodeJavaScript

const penthouse = require('penthouse');

penthouse({
  url: 'https://example.com',
  css: 'path/to/styles.css',
  width: 1300,
  height: 900
}).then(criticalCss => {
  // Сохранение критического CSS
  fs.writeFileSync('critical.css', criticalCss);
});

Implementing critical CSS

Inline critical CSS:

CodeHTML

<head>
  <style>
    /* Критический CSS */
    .header { background: #fff; }
    .hero { padding: 40px 0; }
    .btn { background: #007bff; }
  </style>
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Load the remaining styles asynchronously:

CodeJavaScript

// Загрузка не-критических стилей
function loadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

// Загрузка после рендеринга критического контента
window.addEventListener('load', () => {
  loadCSS('non-critical.css');
});

Tree shaking and removing unused CSS

Tree shaking is a technique for removing unused code. In the context of CSS, this means removing styles that don’t apply to elements on the page.

PurgeCSS

PurgeCSS analyzes HTML files and removes unused CSS rules:

CodeShell

# Установка
npm install purgecss --save-dev

# Использование
npx purgecss --css css/styles.css --content index.html --output css/purged.css

PurgeCSS configuration:

CodeJavaScript

// purgecss.config.js
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx',
    './src/**/*.vue'
  ],
  css: ['./src/**/*.css'],
  output: './dist/css/',
  safelist: [
    'html',
    'body',
    /^btn-/,
    /^modal-/
  ]
}

UnCSS

UnCSS is an alternative tool for removing unused CSS:

CodeShell

# Установка
npm install uncss --save-dev

# Использование
npx uncss src/*.html > dist/css/cleaned.css

Automating with Webpack

Webpack with PurgeCSS:

CodeJavaScript

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
      safelist: ['html', 'body']
    })
  ]
}

Selector optimization

The efficiency of CSS selectors can significantly affect rendering performance. Browsers read selectors from right to left, so it’s important to optimize their structure.

Selector performance hierarchy

From fastest to slowest:

ID selectors - #header
Classes - .btn
Elements - div
Pseudo-classes - :hover
Attributes - [type="text"]
Pseudo-elements - ::before
Child selectors - >
Descendant selectors -
Universal selectors - *
Adjacent sibling selectors - +, ~

Selector optimization examples

Bad:

CodeCSS

/* Медленный селектор */
body div.container ul li a {
  color: blue;
}

/* Сложный селектор */
.container .sidebar .widget .title .link:hover {
  color: red;
}

Good:

CodeCSS

/* Быстрый селектор */
.nav-link {
  color: blue;
}

/* Оптимизированный селектор */
.widget-link:hover {
  color: red;
}

Using CSS-in-JS

CSS-in-JS solutions can optimize selectors automatically:

CodeJavaScript

// styled-components
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

// emotion
const buttonStyles = css`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

Optimizing CSS loading

The right CSS loading strategy can significantly improve performance.

Preload and prefetch

Preload critical resources:

CodeHTML

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Prefetch non-critical resources:

CodeHTML

<link rel="prefetch" href="non-critical.css">

Media queries for conditional loading

CodeHTML

<!-- Загрузка только для печати -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Загрузка только для больших экранов -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">

<!-- Загрузка только для мобильных устройств -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

Asynchronous loading

CodeJavaScript

// Функция для асинхронной загрузки CSS
function loadCSSAsync(href, media = 'all') {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.media = media;
  
  // Установка media в 'all' после загрузки
  link.onload = () => {
    link.media = 'all';
  };
  
  document.head.appendChild(link);
}

// Загрузка не-критических стилей
loadCSSAsync('non-critical.css');

Optimizing CSS variables

CSS variables (custom properties) can improve performance and maintainability.

Using variables effectively

CodeCSS

:root {
  /* Цвета */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  
  /* Размеры */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  /* Типографика */
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;
  
  /* Тени */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Использование переменных */
.btn {
  background-color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-sm);
}

Dynamic variables

CodeCSS

/* Темная тема */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #333333;
}

/* Светлая тема */
[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

/* Применение */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Animation optimization

CSS animations can significantly affect performance. Proper animation optimization is essential for a smooth user experience.

Using transform and opacity

These properties don’t trigger reflow or repaint:

CodeCSS

/* Хорошо - использует transform */
.animate {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

/* Плохо - вызывает reflow */
.animate {
  left: 100px;
  transition: left 0.3s ease;
}

Hardware acceleration

CodeCSS

/* Включение аппаратного ускорения */
.accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Для анимаций */
.animated {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

Optimizing keyframes

CodeCSS

/* Оптимизированные keyframes */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Использование */
.slide-in {
  animation: slideIn 0.3s ease-out;
}

Optimizing for mobile devices

Mobile devices have limited resources, so CSS optimization is especially important for them.

Media queries for mobile devices

CodeCSS

/* Базовые стили для мобильных */
.container {
  padding: 1rem;
  font-size: 16px;
}

/* Стили для планшетов */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 18px;
  }
}

/* Стили для десктопов */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    font-size: 20px;
  }
}

Optimizing for touch devices

CodeCSS

/* Увеличение размера touch targets */
.touch-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

/* Отключение hover эффектов на touch устройствах */
@media (hover: none) {
  .hover-effect:hover {
    /* Отменяем hover эффекты */
    transform: none;
    box-shadow: none;
  }
}

Monitoring and analytics

Regularly monitoring CSS performance helps identify issues and optimize loading.

Monitoring tools

Google PageSpeed Insights:

CSS performance analysis
Optimization recommendations
Core Web Vitals metrics

WebPageTest:

Detailed analysis of CSS loading
Timelines
Performance comparisons

Chrome DevTools:

Network tab for analyzing CSS files
Coverage tab for unused styles
Performance tab for analyzing rendering

Metrics to track

First Contentful Paint (FCP) - time until the first content is displayed
Largest Contentful Paint (LCP) - time until the largest element is displayed
Cumulative Layout Shift (CLS) - layout stability
First Input Delay (FID) - response time to the first interaction

Automating optimization

Automating CSS optimization helps maintain high performance throughout a project’s lifecycle.

CI/CD integration

GitHub Actions:

CodeYAML

name: CSS Optimization
on: [push, pull_request]
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Optimize CSS
        run: npm run optimize:css
      - name: Build project
        run: npm run build

Webpack configuration:

CodeJavaScript

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
  ],
};

CSS optimization best practices

1. Minification and compression

Always minify CSS files for production
Use gzip or Brotli compression
Remove unused CSS rules

2. Critical CSS

Extract critical CSS for above-the-fold content
Inline critical CSS in the HTML
Load non-critical styles asynchronously

3. Selector optimization

Use simple, efficient selectors
Avoid deep nesting
Prioritize classes over elements

4. CSS loading

Use preload for critical resources
Use media queries for conditional loading
Minimize the number of HTTP requests

5. Animations and transitions

Use transform and opacity for animations
Enable hardware acceleration
Optimize keyframes

6. Mobile optimization

Adapt CSS for mobile devices
Optimize touch targets
Account for mobile device limitations

Conclusion

Key points to remember:

Minify CSS to reduce file size
Extract critical CSS for faster rendering
Remove unused styles with tree shaking
Optimize selectors for better performance
Use the right CSS loading strategies
Monitor performance regularly

By following these recommendations, you can build fast, responsive web applications with optimized CSS files that provide a great user experience on all devices.

Why CSS optimization matters

Analyzing CSS performance

Analysis tools

Metrics to track

CSS minification

Manual minification

Automatic minification

Critical CSS

Identifying critical CSS

Tools for extracting critical CSS

Implementing critical CSS

Tree shaking and removing unused CSS

PurgeCSS

UnCSS

Automating with Webpack

Selector optimization

Selector performance hierarchy

Selector optimization examples

Using CSS-in-JS

Optimizing CSS loading

Preload and prefetch

Media queries for conditional loading

Asynchronous loading

Optimizing CSS variables

Using variables effectively

Dynamic variables

Animation optimization

Using transform and opacity

Hardware acceleration

Optimizing keyframes

Optimizing for mobile devices

Media queries for mobile devices

Optimizing for touch devices

Monitoring and analytics

Monitoring tools

Metrics to track

Automating optimization

CI/CD integration

CSS optimization best practices

1. Minification and compression

2. Critical CSS

3. Selector optimization

4. CSS loading

5. Animations and transitions

6. Mobile optimization

Conclusion

The website loads slowly

Terms by topic

Core Web Vitals: what they are and how to improve them

FID (First Input Delay): What Is It, and Is the Metric Obsolete?

Code minification: what it is and why it matters

Brotli: what it is and how it compares to Gzip

Text jumps after a font loads: how to prevent layout shifts

CSS Flexbox: a complete guide with examples

CSS Grid: A Complete Guide to Grid Layouts

Check your website

Feedback

Why CSS optimization matters

Analyzing CSS performance

Analysis tools

Metrics to track

CSS minification

Manual minification

Automatic minification

Critical CSS

Identifying critical CSS

Tools for extracting critical CSS

Implementing critical CSS

Tree shaking and removing unused CSS

PurgeCSS

UnCSS

Automating with Webpack

Selector optimization

Selector performance hierarchy

Selector optimization examples

Using CSS-in-JS

Optimizing CSS loading

Preload and prefetch

Media queries for conditional loading

Asynchronous loading