Optimizar

Importaciones Lean Sass

Cuando utilice Sass en su canalización de activos, asegúrese de optimizar Bootstrap incorporando solo @importlos componentes que necesita. Es probable que sus mayores optimizaciones provengan de la Layout & Componentssección de nuestro bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@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";

Si no está utilizando un componente, coméntelo o elimínelo por completo. Por ejemplo, si no está utilizando el carrusel, elimine esa importación para ahorrar algo de tamaño de archivo en su CSS compilado. Tenga en cuenta que existen algunas dependencias en las importaciones de Sass que pueden dificultar la omisión de un archivo.

JavaScript simplificado

El JavaScript de Bootstrap incluye todos los componentes de nuestros archivos de distribución principales ( bootstrap.jsy bootstrap.min.js), e incluso nuestra dependencia principal (Popper) con nuestros archivos de paquete ( bootstrap.bundle.jsy bootstrap.bundle.min.js). Mientras personaliza a través de Sass, asegúrese de eliminar el JavaScript relacionado.

Por ejemplo, suponiendo que esté usando su propio paquete de JavaScript como Webpack, Parcel o Vite, solo importará el JavaScript que planea usar. En el siguiente ejemplo, mostramos cómo simplemente incluir nuestro 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';

De esta forma, no incluye ningún JavaScript que no pretenda utilizar para componentes como botones, carruseles e información sobre herramientas. Si está importando menús desplegables, información sobre herramientas o ventanas emergentes, asegúrese de incluir la dependencia de Popper en su package.jsonarchivo.

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

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

Prefijador automático .browserslistrc

Bootstrap depende de Autoprefixer para agregar automáticamente prefijos de navegador a ciertas propiedades de CSS. Los prefijos son dictados por nuestro .browserslistrcarchivo, que se encuentra en la raíz del repositorio de Bootstrap. Personalizar esta lista de navegadores y volver a compilar el Sass eliminará automáticamente algunos CSS de su CSS compilado, si hay prefijos de proveedores exclusivos para ese navegador o versión.

CSS sin usar

Se necesita ayuda con esta sección, considere abrir un PR. ¡Gracias!

Si bien no tenemos un ejemplo preconstruido para usar PurgeCSS con Bootstrap, hay algunos artículos útiles y tutoriales que ha escrito la comunidad. Aquí hay algunas opciones:

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

Por último, este artículo de CSS Tricks sobre CSS sin usar muestra cómo usar PurgeCSS y otras herramientas similares.

Minificar y gzip

Siempre que sea posible, asegúrese de comprimir todo el código que ofrece a sus visitantes. Si está utilizando archivos dist de Bootstrap, intente ceñirse a las versiones minimizadas (indicadas por las extensiones .min.cssy ). .min.jsSi está compilando Bootstrap desde la fuente con su propio sistema de compilación, asegúrese de implementar sus propios minificadores para HTML, CSS y JS.

Archivos sin bloqueo

Si bien minimizar y usar la compresión puede parecer suficiente, hacer que sus archivos no bloqueen también es un gran paso para que su sitio esté bien optimizado y sea lo suficientemente rápido.

Si está utilizando un complemento de Lighthouse en Google Chrome, es posible que haya tropezado con FCP. La métrica First Contentful Paint mide el tiempo desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se representa en la pantalla.

Puede mejorar FCP aplazando JavaScript o CSS no críticos. ¿Qué significa eso? Simplemente, JavaScript o las hojas de estilo que no necesitan estar presentes en la primera pintura de su página deben marcarse con asynco deferatributos.

Esto asegura que los recursos menos importantes se carguen más tarde y no bloqueen la primera pintura. Por otro lado, los recursos críticos se pueden incluir como scripts o estilos en línea.

Si desea obtener más información sobre esto, ya hay muchos artículos excelentes al respecto:

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

Utilice siempre HTTPS

Su sitio web solo debe estar disponible a través de conexiones HTTPS en producción. HTTPS mejora la seguridad, la privacidad y la disponibilidad de todos los sitios, y no existe el tráfico web no confidencial . Los pasos para configurar su sitio web para que se sirva exclusivamente a través de HTTPS varían ampliamente según su arquitectura y proveedor de alojamiento web y, por lo tanto, están más allá del alcance de estos documentos.

Los sitios servidos a través de HTTPS también deben acceder a todas las hojas de estilo, scripts y otros activos a través de conexiones HTTPS. De lo contrario, enviará a los usuarios contenido activo mixto , lo que generará vulnerabilidades potenciales en las que un sitio puede verse comprometido al alterar una dependencia. Esto puede generar problemas de seguridad y advertencias en el navegador que se muestran a los usuarios. Ya sea que esté obteniendo Bootstrap de un CDN o sirviéndolo usted mismo, asegúrese de acceder solo a través de conexiones HTTPS.