Web Performance Budgets: оптимізація CSS для швидкості

CSS може швидко роздути ваш сайт. Встановлюйте performance budgets та оптимізуйте безжально для швидшого завантаження.

CSS Performance Budget

Рекомендовані ліміти:

• Critical CSS: < 14KB (gzipped)
• Загальний CSS: < 50KB (gzipped)
• Невикористаний CSS: < 10%
• Render-blocking: 0 запитів

Вимірювання розміру CSS

ls -lh styles.css
gzip -c styles.css | wc -c

Видалення невикористаного CSS

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/<strong>/<em>.html', './src/</strong>/</em>.vue'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Мініфікація

npm install cssnano --save-dev

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new CssMinimizerPlugin()]
  }
};

Code Splitting

import(/<em> webpackChunkName: "page-styles" </em>/ './page.css');

Кращі практики

• Інлайніть critical CSS
• Завантажуйте некритичний CSS асинхронно
• Видаляйте дубльовані правила
• Використовуйте CSS змінні
• Уникайте @import
• Мінімізуйте специфічність
• Використовуйте скорочені властивості

Моніторинг

• Lighthouse CI
• WebPageTest
• Bundle analyzer
• Coverage tools

Тримайте CSS легким з нашими інструментами та регулярними аудитами!