Otimizar

Importações Lean Sass

Ao usar o Sass em seu pipeline de ativos, certifique-se de otimizar o Bootstrap apenas com @importos componentes necessários. Suas maiores otimizações provavelmente virão da Layout & Componentsseção do nosso bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Se você não estiver usando um componente, comente-o ou exclua-o completamente. Por exemplo, se você não estiver usando o carrossel, remova essa importação para salvar algum tamanho de arquivo em seu CSS compilado. Lembre-se de que existem algumas dependências nas importações do Sass que podem dificultar a omissão de um arquivo.

JavaScript enxuto

O JavaScript do Bootstrap inclui todos os componentes em nossos arquivos dist primários ( bootstrap.jse bootstrap.min.js), e até mesmo nossa dependência primária (Popper) com nossos arquivos de pacote ( bootstrap.bundle.jse bootstrap.bundle.min.js). Enquanto estiver personalizando via Sass, certifique-se de remover o JavaScript relacionado.

Por exemplo, supondo que você esteja usando seu próprio bundler de JavaScript, como Webpack ou Rollup, você só importaria o JavaScript que planeja usar. No exemplo abaixo, mostramos como incluir apenas nosso JavaScript modal:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Dessa forma, você não inclui nenhum JavaScript que não pretenda usar para componentes como botões, carrosséis e dicas de ferramentas. Se você estiver importando listas suspensas, dicas de ferramentas ou popovers, certifique-se de listar a dependência do Popper em seu package.jsonarquivo.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Autoprefixador .browserslistrc

O Bootstrap depende do Autoprefixer para adicionar automaticamente prefixos do navegador a certas propriedades CSS. Os prefixos são ditados pelo nosso .browserslistrcarquivo, encontrado na raiz do repositório Bootstrap. Personalizar esta lista de navegadores e recompilar o Sass removerá automaticamente alguns CSS de seu CSS compilado, se houver prefixos de fornecedores exclusivos para esse navegador ou versão.

CSS não usado

Precisa de ajuda com esta seção, considere abrir um PR. Obrigado!

Embora não tenhamos um exemplo pré-construído para usar o PurgeCSS com Bootstrap, existem alguns artigos úteis e orientações que a comunidade escreveu. Aqui estão algumas opções:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removenused-css-from-bootstrap-or-other-frameworks/

Por fim, este artigo de truques de CSS sobre CSS não utilizado mostra como usar o PurgeCSS e outras ferramentas semelhantes.

Minimizar e gzip

Sempre que possível, certifique-se de compactar todo o código que você veicula para seus visitantes. Se você estiver usando arquivos dist do Bootstrap, tente manter as versões minificadas (indicadas pelas extensões .min.csse ). .min.jsSe você estiver compilando o Bootstrap a partir da fonte com seu próprio sistema de compilação, certifique-se de implementar seus próprios minifiers para HTML, CSS e JS.

Arquivos não bloqueantes

Embora a redução e o uso da compactação possam parecer suficientes, tornar seus arquivos sem bloqueio também é um grande passo para tornar seu site bem otimizado e rápido o suficiente.

Se você estiver usando um plug-in do Lighthouse no Google Chrome, pode ter tropeçado no FCP. A métrica First Contentful Paint mede o tempo desde o início do carregamento da página até o momento em que qualquer parte do conteúdo da página é renderizada na tela.

Você pode melhorar o FCP adiando JavaScript ou CSS não crítico. O que isso significa? Simplesmente, JavaScript ou folhas de estilo que não precisam estar presentes na primeira pintura da sua página devem ser marcados com asyncou deferatributos.

Isso garante que os recursos menos importantes sejam carregados posteriormente e não bloqueiem a primeira pintura. Por outro lado, recursos críticos podem ser incluídos como scripts ou estilos embutidos.

Se você quiser saber mais sobre isso, já existem muitos ótimos artigos sobre isso:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Sempre use HTTPS

Seu site deve estar disponível apenas em conexões HTTPS em produção. O HTTPS melhora a segurança, a privacidade e a disponibilidade de todos os sites, e não existe tráfego da Web não confidencial . As etapas para configurar seu site para ser servido exclusivamente por HTTPS variam muito dependendo da sua arquitetura e provedor de hospedagem na web e, portanto, estão além do escopo desses documentos.

Os sites servidos por HTTPS também devem acessar todas as folhas de estilo, scripts e outros ativos por meio de conexões HTTPS. Caso contrário, você enviará aos usuários conteúdo ativo misto , levando a possíveis vulnerabilidades em que um site pode ser comprometido alterando uma dependência. Isso pode levar a problemas de segurança e avisos no navegador exibidos aos usuários. Esteja você obtendo o Bootstrap de um CDN ou o servindo você mesmo, certifique-se de acessá-lo apenas por meio de conexões HTTPS.