Bootstrap: Otimização de Desempenho e Implantação

Q: P: O PurgeCSS excluirá acidentalmente classes dinâmicas?

R: Possivelmente. Classes dinâmicas (como btn-${color} concatenado via JS) precisam ser adicionadas à safelist. Recomenda-se listar todos os nomes de classes que possam aparecer dinamicamente na safelist da configuração do PurgeCSS.

Q: P: O Bootstrap 5 requer Babel/Webpack para usar?

R: Não. O método CDN é totalmente utilizável (as primeiras 19 lições o usaram). Ferramentas de build como Webpack/Vite são apenas para personalização Sass e compilação sob demanda—são ferramentas auxiliares, não requisitos.

Q: P: O que observar ao trocar de CDN para implantação Sass?

R: (1) Substituir todos os links CDN por CSS compilado localmente; (2) Garantir que o JS ainda referencie CDN ou bundle local; (3) Verificar se todas as funcionalidades de componentes estão normais; (4) Comparar estilos da página antes e depois para consistência.

Q: P: Em produção, usar CDN ou build npm?

R: Ambos têm prós e contras: Abordagem CDN—Prós: Não precisa de ferramentas de build, aproveita cache CDN, cache compartilhado entre múltiplos sites; Contras: Sem customização, risco de dependência externa. Abordagem npm + build—Prós: Totalmente customizável, capaz de PurgeCSS, implantação independente; Contras: Requer processo de build, precisa gerenciar cache sozinho. Recomendação: Use CDN para protótipos, npm + build para projetos oficiais.

Q: P: Como o HTTP/2 ajuda a otimizar um projeto Bootstrap?

R: O recurso Multiplexing do HTTP/2 permite que múltiplos arquivos pequenos carreguem mais rápido em paralelo, então não há necessidade de combinar todo o CSS em um arquivo—você pode dividir módulos sob demanda. Além disso, o Server Push do HTTP/2 pode enviar proativamente o CSS crítico. No entanto, o próprio Bootstrap tem apenas 28KB gzip, o que é pequeno; os benefícios do HTTP/2 são mais evidentes em projetos grandes.

Última atualização: 2026-08-26

1. Introdução ao Curso

(1) Pré-requisitos

Modo Escuro e Troca de Tema do Bootstrap (Lição 21)
Conceitos básicos de métricas de desempenho front-end
Mecanismos de carregamento de recursos HTML e CSS

(2) 🎯 O que você vai aprender

Analisar o tamanho de recursos e o desempenho de carregamento de um projeto Bootstrap
Usar PurgeCSS para remover CSS não utilizado
Otimizar carregamento sob demanda e lazy loading de JavaScript
Dominar otimização de imagens e melhores práticas de implantação CDN
Configurar um fluxo completo de build e implantação em produção

(3) O Problema

Alice concluiu seu site de portfólio Bootstrap, mas o carregamento da página leva 3 segundos—os usuários podem sair antes da página terminar de carregar. A pontuação Lighthouse também é baixa.

(4) A Solução

Construir uma página é apenas o primeiro passo; torná-la rápida para carregar e proporcionar uma ótima experiência é o objetivo final. Esta lição compila as melhores práticas de otimização de desempenho e implantação de build em projetos Bootstrap: compactação CSS, carregamento JS sob demanda, otimização de imagens, pré-aquecimento de CDN—reduzindo o tempo de carregamento para 0,8 segundos através da otimização.

(5) Benefícios

O site de portfólio Bootstrap da Alice foi otimizado de 3 segundos para 0,8 segundos, melhorando significativamente a pontuação Lighthouse, aprimorando muito a experiência do usuário e, consequentemente, aumentando a taxa de conversão do site.

2. Análise de Tamanho do Bootstrap

Recurso	Não Compactado	Compactado Gzip	Notas
`bootstrap.min.css`	~250KB	~28KB	Framework completo
`bootstrap.bundle.min.js`	~205KB	~22KB	Inclui Popper
`bootstrap.min.js`	~170KB	~19KB	Exclui Popper
Bootstrap Icons CSS	~220KB	~25KB	2000+ ícones

Conclusão-chave: O CSS + JS completo do Bootstrap compactado tem cerca de 50KB, o que é pequeno para redes modernas. Os reais impactos de desempenho são imagens, fontes e scripts de terceiros.

▶ Exemplo: Antes vs Depois da Otimização

graph LR
    subgraph "Antes da otimização (3s)"
        A1[HTML] --> B1[CSS Bootstrap completo]
        B1 --> C1[JS Bootstrap completo]
        C1 --> D1[Imagens não otimizadas]
        D1 --> E1[CSS Google Fonts]
        E1 --> F1[3s de carregamento]
    end

    subgraph "Depois da otimização (0.8s)"
        A2[HTML] --> B2[CSS purgado ~30KB]
        B2 --> C2[Imagens lazy loaded]
        C2 --> D2[JS deferido]
        D2 --> E2[Cache CDN warm]
        E2 --> F2[0.8s de carregamento]
    end

3. Otimização de CSS

(1) Compilação Sob Demanda (Sass)

SCSS

// Importar apenas os módulos usados
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/forms";

@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";

▶ Experimente

(2) PurgeCSS para Remoção de Redundância

O PurgeCSS pode analisar classes realmente usadas em HTML/JS e excluir CSS não utilizado:

BASH

npm install -D purgecss

JAVASCRIPT

// purgecss.config.js
module.exports = {
  content: ['./**/*.html', './**/*.js'],
  css: ['./dist/style.css'],
  safelist: ['show', 'active', 'fade', 'collapse', 'modal-open']
}

▶ Experimente

BASH

npx purgecss --config purgecss.config.js --output dist/style.min.css

(3) Usar Versão Minificada via CDN

HTML

<!-- Sempre use .min.css / .min.js em produção -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

▶ Experimente

4. Otimização de JavaScript

(1) Importação Seletiva de Componentes

TEXT 📖 Somente leitura

// Importar apenas os componentes JS necessários
import Alert from 'bootstrap/js/dist/alert'
import Button from 'bootstrap/js/dist/button'
import Carousel from 'bootstrap/js/dist/carousel'
import Collapse from 'bootstrap/js/dist/collapse'
import Dropdown from 'bootstrap/js/dist/dropdown'
import Modal from 'bootstrap/js/dist/modal'
import Offcanvas from 'bootstrap/js/dist/offcanvas'

// Inicializar todos os tooltips
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el))

(2) Adiar JS Não Crítico

HTML

<!-- Adiar JS não crítico -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

▶ Experimente

(3) Importação de Ícone Sob Demanda

HTML

<!-- Se usar poucos ícones, use SVG inline em vez de fonte de ícone -->
<svg class="bi" width="16" height="16" fill="currentColor">
  <use href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>

<!-- Ou baixe os SVGs necessários localmente para evitar requisições CDN -->

▶ Experimente

5. Otimização de Imagens

HTML

<!-- Sempre use width + height para evitar layout shift -->
<img src="photo.webp" width="800" height="450" class="img-fluid" alt="Foto"
     loading="lazy">

<!-- Use formatos modernos -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" class="img-fluid" alt="Foto">
</picture>

▶ Experimente

6. Build e Implantação

(1) Processo de Build de Produção

JSON

// package.json
{
  "scripts": {
    "dev": "sass scss/custom.scss:dist/style.css --watch",
    "build:css": "sass scss/custom.scss:dist/style.css --style compressed",
    "build:purge": "purgecss --config purgecss.config.js --output dist/style.min.css",
    "build": "npm run build:css && npm run build:purge",
    "serve": "npx live-server --port=3000"
  }
}

BASH

npm run build    # Compilar + purge
npm run serve    # Servidor de dev local

(2) Checklist de Implantação

Item	Pontos de Verificação	Ferramentas
CSS	Compactado, Purgado, Critical CSS inline	PurgeCSS, Critical
JS	Compactado, Carregamento sob demanda, defer	terser, webpack
Imagens	Compactadas, webp/avif, lazy loading	sharp, squoosh
Fontes	Preloaded, font-display: swap	@font-face
Caching	Cache CDN, ETag, Cache-Control	Cloudflare, Nginx
Análise	Lighthouse score >= 90	Lighthouse

(3) Metas do Lighthouse

Métrica	Alvo
First Contentful Paint	< 1.5s
Largest Contentful Paint	< 2.5s
Total Blocking Time	< 200ms
Cumulative Layout Shift	< 0.1
Speed Index	< 3.0s

7. Revisão de Seleção Bootstrap vs Tailwind

Dimensão	Bootstrap	Tailwind CSS
Curva de Aprendizado	⭐⭐⭐	⭐⭐⭐⭐⭐
Velocidade de Desenvolvimento	Rápida (Componentes prontos)	Média (Precisa combinar utilitários)
Tamanho do Arquivo	28KB gzip (Completo)	Compilação sob demanda, geralmente < 10KB
Capacidade de Customização	Média (Variáveis Sass)	Alta (Design system)
Ecossistema de Componentes	70+ embutidos	Nenhum (Precisa Headless UI)
Custo de Upgrade	Baixo (Classes semânticas)	Médio (Mudança de classes)
Projetos Adequados	Painéis admin, MVPs, sites PME	Design systems, customização de marca

8. Exemplos Práticos de Otimização

▶ Exemplo: Configuração Otimizada do PurgeCSS

JAVASCRIPT

// purgecss.config.js — Configuração completa de produção
module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.php',
  ],
  css: [
    './dist/style.css',
    './node_modules/bootstrap-icons/font/bootstrap-icons.css',
  ],
  safelist: {
    standard: [
      // Classes dinâmicas do Bootstrap
      /^bs-/,            // Todas as variáveis CSS do Bootstrap
      /^data-bs-/,       // Todos os atributos data
      'active', 'show', 'fade', 'collapsing',
      'modal-open', 'modal-backdrop',
      'carousel-item-start', 'carousel-item-end',
      'tooltip', 'popover', 'toast',
      /^btn-/,           // Classes variant de botão
      /^bg-/,            // Classes de fundo
      /^text-/,          // Classes de cor de texto
      /^border-/,        // Classes de borda
      /^alert-/,         // Variant de alerta
      /^badge-/,         // Variant de badge
    ],
    deep: [
      /^theme$/,
    ],
    greedy: [
      /dark/,
    ],
  },
  blocklist: [
    /^bi-/,              // Opcionalmente remover ícones BI não usados
  ],
  variables: true,
};

// Rodar: npx purgecss --config purgecss.config.js --output dist/style.purged.css

▶ Experimente

JSON

// scripts do package.json para build otimizado
{
  "scripts": {
    "dev": "sass scss/custom.scss dist/style.css --watch",
    "build:css": "sass scss/custom.scss dist/style.css --style compressed",
    "build:purge": "purgecss --config purgecss.config.js --output dist/style.purged.css",
    "build:copy": "cp dist/style.purged.css dist/style.min.css",
    "build": "npm run build:css && npm run build:purge && npm run build:copy",
    "build:all": "npm run build && npx terser dist/script.js -o dist/script.min.js",
    "serve": "npx live-server --port=3000 --no-browser"
  }
}

▶ Exemplo: Checklist de Otimização Lighthouse

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Meta SEO -->
  <title>Página Bootstrap Otimizada</title>
  <meta name="description" content="Página com pontuação Lighthouse 95+ construída com Bootstrap.">

  <!-- Preconnect ao CDN -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">

  <!-- Critical CSS inline (carrega primeiro) -->
  <style>
    /* CSS crítico mínimo para conteúdo above-the-fold */
    .hero { background: #0d6efd; color: #fff; padding: 4rem 0; }
    .container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
    @media (max-width: 768px) { .hero { padding: 2rem 0; } }
  </style>

  <!-- CSS não crítico (adiado) -->
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></noscript>

  <!-- Pré-carregar imagem hero -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">
</head>
<body>
  <div class="hero">
    <div class="container">
      <h1 class="display-4 fw-bold">Bootstrap Otimizado</h1>
      <p class="lead mb-4">Pontuação Lighthouse: Desempenho 98, Acessibilidade 100, Boas Práticas 95</p>
      <a href="#" class="btn btn-light btn-lg px-4">Começar Agora</a>
    </div>
  </div>

  <div class="container py-5">
    <div class="row g-4">
      <!-- Cards com imagens lazy loaded -->
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card1.webp" class="card-img-top lazy" alt="Card 1" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">Card Otimizado</h5>
          <p class="card-text text-body-secondary">Imagem WebP lazy-loaded, proporção correta.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card2.webp" class="card-img-top lazy" alt="Card 2" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">Carregamento Rápido</h5>
          <p class="card-text text-body-secondary">Font display swap habilitado.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 h-100">
          <img src="placeholder.svg" data-src="card3.webp" class="card-img-top lazy" alt="Card 3" width="400" height="250" loading="lazy">
          <h5 class="card-title mt-2">Acessível</h5>
          <p class="card-text text-body-secondary">Pontuação 100 de Acessibilidade garantida.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS adiado -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>

  <!-- Lazy load de imagens -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const lazyImages = document.querySelectorAll('.lazy');
      if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver(function(entries) {
          entries.forEach(function(entry) {
            if (entry.isIntersecting) {
              const img = entry.target;
              img.src = img.dataset.src;
              img.classList.remove('lazy');
              observer.unobserve(img);
            }
          });
        });
        lazyImages.forEach(function(img) { observer.observe(img); });
      }
    });
  </script>
</body>
</html>

▶ Experimente

▶ Exemplo: Carregamento com Fallback Multi-Fonte CDN

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CDN com Fallback</title>

  <!-- CDN Primário: jsDelivr -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        id="bootstrap-css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">

  <!-- Fallback: se o CDN primário falhar, carregar do unpkg -->
  <script>
    window.onload = function() {
      var css = document.getElementById('bootstrap-css');
      if (css && !css.sheet) {
        var fallback = document.createElement('link');
        fallback.rel = 'stylesheet';
        fallback.href = 'https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css';
        document.head.appendChild(fallback);
      }
    };
  </script>
</head>
<body>
  <div class="container py-5">
    <h1>Fallback Multi-Fonte CDN</h1>
    <div class="alert alert-success">
      <i class="bi bi-check-circle-fill me-2"></i> Bootstrap carregado com sucesso!
    </div>
    <p class="text-body-secondary">Se o jsDelivr cair, cai automaticamente para o unpkg.</p>

    <div class="card p-4 shadow-sm">
      <h5>Cadeia de Fontes CDN</h5>
      <ol class="mb-0">
        <li class="mb-1"><strong>Primário:</strong> cdn.jsdelivr.net</li>
        <li class="mb-1"><strong>Fallback 1:</strong> unpkg.com</li>
        <li><strong>Fallback 2:</strong> cdnjs.cloudflare.com</li>
      </ol>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
          crossorigin="anonymous"
          defer></script>
  <script>
    // Fallback JS — executa após scripts deferidos
    document.addEventListener('DOMContentLoaded', function() {
      if (typeof bootstrap === 'undefined') {
        var script = document.createElement('script');
        script.src = 'https://unpkg.com/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js';
        document.body.appendChild(script);
      }
    });
  </script>
</body>
</html>

▶ Experimente

▶ Exemplo: Script de Build Completo

JSON

// package.json — Pipeline de build completo
{
  "name": "bootstrap-production-build",
  "version": "1.0.0",
  "scripts": {
    "clean": "rimraf dist",
    "sass:compile": "sass scss/custom.scss:dist/css/style.css --style compressed",
    "sass:watch": "sass scss/custom.scss:dist/css/style.css --watch",
    "prefix": "postcss dist/css/style.css --use autoprefixer -o dist/css/style.prefixed.css",
    "purge": "purgecss --config purgecss.config.js --output dist/css/style.min.css",
    "js:bundle": "esbuild src/js/main.js --bundle --minify --outfile=dist/js/main.min.js",
    "img:min": "imagemin src/images/* --out-dir=dist/images",
    "copy:html": "cp src/*.html dist/",
    "build:dev": "npm run clean && npm run sass:compile && npm run copy:html",
    "build:prod": "npm run build:dev && npm run prefix && npm run purge && npm run js:bundle && npm run img:min",
    "serve": "lite-server --baseDir='dist'",
    "deploy": "npm run build:prod && gh-pages -d dist"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.17",
    "esbuild": "^0.20.0",
    "imagemin-cli": "^7.0.0",
    "lite-server": "^2.6.1",
    "postcss": "^8.4.33",
    "postcss-cli": "^11.0.0",
    "purgecss": "^6.0.0",
    "rimraf": "^5.0.5",
    "sass": "^1.70.0"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3"
  }
}

BASH

# Comandos de build completos

# Desenvolvimento
npm run build:dev     # Compilar SCSS + copiar HTML

# Produção
npm run build:prod    # Compilar → Autoprefix → Purge → Minify JS → Otimizar imagens

# Pré-visualização local
npm run serve         # Servir dist/ com auto-reload

# Implantar no GitHub Pages
npm run deploy        # Build + publicar

# Passos individuais
npx sass scss/custom.scss dist/css/style.css --style compressed
npx postcss dist/css/style.css --use autoprefixer -o dist/css/style.prefixed.css
npx purgecss --css dist/css/style.prefixed.css --content dist/**/*.html --output dist/css/
npx esbuild src/js/main.js --bundle --minify --outfile=dist/js/main.min.js

(1) Matriz de Prioridade de Otimização

graph TD
    A[Prioridade de Otimização de Desempenho] --> B[🛡️ P0: Crítico]
    A --> C[🔥 P1: Alto]
    A --> D[⚡ P2: Médio]
    A --> E[📋 P3: Baixo]

    B --> B1[Habilitar compressão Gzip/Brotli]
    B --> B2[Otimizar formato de imagem WebP/AVIF]
    B --> B3[Remover CSS não utilizado]
    B --> B4[Habilitar cache CDN]

    C --> C1[Adiar JS não crítico]
    C --> C2[Inline critical CSS]
    C --> C3[Preconnect a domínios de terceiros]

    D --> D1[Font display:swap]
    D --> D2[Image lazy loading]
    D --> D3[Resource Preload/Prefetch]

    E --> E1[Service Worker cache]
    E --> E2[HTTP/2 Server Push]
    E --> E3[Skeleton screen loading]

(2) Tabela da Matriz de Prioridade de Otimização

Prioridade	Item de Otimização	Benefício Estimado	Dificuldade de Implementação	Métrica Lighthouse
P0 (Crítico)	Habilitar Gzip/Brotli	Reduz tamanho em 70-80%	Baixa (Config servidor)	FCP, LCP
P0 (Crítico)	Formato imagem WebP/AVIF	Reduz tamanho de imagem em 30-50%	Média (Script de build)	LCP
P0 (Crítico)	PurgeCSS remove estilos não usados	Reduz CSS em 60-80%	Baixa (Arquivo de config)	FCP
P1 (Alto)	Inline critical CSS	Reduz bloqueio de render da primeira tela	Média (Precisa de ferramenta)	FCP
P1 (Alto)	Adiar carregamento JS	Reduz bloqueio de JS	Baixa (Adicionar atributo)	TBT
P1 (Alto)	Pré-aquecimento CDN	Acelera primeira visita	Média (Ação manual)	LCP
P2 (Médio)	Font display:swap	Elimina FOIT	Baixa (Propriedade CSS)	CLS
P2 (Médio)	Image lazy loading	Reduz carregamento inicial	Baixa (Adicionar atributo)	LCP
P3 (Baixo)	Service Worker cache	Segunda visita ultra-rápida	Alta (Precisa escrever SW)	Métricas de reuso

(3) Tabela de Comparação de Plataformas de Implantação

Plataforma	Cota Gratuita	Domínio Custom	HTTPS	Método de Implantação	CI/CD	Cenário Adequado
GitHub Pages	Ilimitado (repos públicos)	✅	✅	`git push`	GitHub Actions	Projetos pessoais/open-source
Netlify	100GB/mês	✅	✅	Conexão Git / CLI	Automático	Sites estáticos, Jamstack
Vercel	100GB/mês	✅	✅	Conexão Git / CLI	Automático	Next.js, projetos front-end
Cloudflare Pages	Ilimitado	✅	✅	Conexão Git / CLI	Automático	Prioridade CDN global
AWS S3 + CloudFront	Pagamento por uso	✅	✅	CLI / SDK	Configurável	Produção empresarial
Aliyun OSS + CDN	Pagamento por uso	✅	✅	CLI / SDK	Configurável	Usuários região China

❓ Perguntas Frequentes

📖 Resumo

Otimização CSS: Compilação Sass sob demanda + remoção de redundância PurgeCSS, usar versão .min via CDN
Otimização JS: Importação seletiva de componentes + lazy loading defer
Otimização de imagens: loading="lazy" + formato WebP/AVIF + largura e altura fixas
Processo de build: compilar sass > limpar purgecss > implantar
Metas Lighthouse: FCP < 1.5s, LCP < 2.5s, CLS < 0.1

📝 Exercícios

⭐ Rode uma auditoria Lighthouse em um projeto Bootstrap existente, registre as métricas FCP, LCP e CLS, então otimize item por item até que todas atinjam as metas.
⭐⭐ Configure o PurgeCSS: rode o PurgeCSS em um arquivo HTML usando Bootstrap, e compare a diferença de tamanho entre o CSS purgado e não purgado.
⭐⭐⭐ Crie um package.json completo contendo três comandos: dev (watch), build (sass + purge), e serve.

Lição Anterior: Modo Escuro

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós