Optimizar

Mantén tus proyectos eficientes, responsivos y fáciles de mantener para que puedas ofrecer la mejor experiencia y concentrarte en trabajos más importantes.

En esta página

Importaciones eficientes de Sass

Cuando uses Sass en tu canalización de recursos (asset pipeline), asegúrate de optimizar Bootstrap importando solo mediante @import los componentes que necesitas. Tus mayores optimizaciones probablemente provendrán de la sección Layout & Components de nuestro bootstrap.scss.

scss/bootstrap.scss

// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@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ás usando un componente, coméntalo o elimínalo por completo. Por ejemplo, si no estás usando el carrusel, elimina esa importación para ahorrar algo de tamaño de archivo en tu CSS compilado. Ten en cuenta que existen algunas dependencias entre las importaciones de Sass que pueden hacer que sea más difícil omitir un archivo.

JavaScript eficiente

El JavaScript de Bootstrap incluye cada componente en nuestros archivos dist principales (bootstrap.js y bootstrap.min.js), e incluso nuestra dependencia principal (Popper) en nuestros archivos bundle (bootstrap.bundle.js and bootstrap.bundle.min.js). Mientras personalizas a través de Sass, asegúrate de eliminar el JavaScript relacionado.

Por ejemplo, suponiendo que estás utilizando tu propio empaquetador de JavaScript como Webpack, Parcel o Vite, solo importarías el JavaScript que planeas usar. En el siguiente ejemplo, mostramos cómo incluir solo el JavaScript de nuestro modal:

// Importar solo lo que necesitamos

// 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 manera, no incluirás ningún JavaScript que no tengas la intención de usar para componentes como botones, carruseles y tooltips. Si estás importando dropdowns, tooltips o popovers, asegúrate de incluir la dependencia de Popper en tu archivo package.json.

¡Atención! Los archivos en bootstrap/js/dist utilizan la exportación predeterminada (default export). Para usarlos, haz lo siguiente:

import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))

Autoprefixer y .browserslistrc

Bootstrap depende de Autoprefixer para agregar automáticamente prefijos del navegador a ciertas propiedades CSS. Los prefijos están dictados por nuestro archivo .browserslistrc, ubicado en la raíz del repositorio de Bootstrap. Personalizar esta lista de navegadores y volver a compilar el Sass eliminará automáticamente algo de CSS de tu CSS compilado, si hay prefijos de proveedores exclusivos de ese navegador o versión.

CSS no utilizado

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

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

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

Minificar y comprimir con gzip

Siempre que sea posible, asegúrate de comprimir todo el código que ofreces a tus visitantes. Si utilizas los archivos dist de Bootstrap, intenta optar por las versiones minificadas (indicadas por las extensiones .min.css y .min.js). Si estás compilando Bootstrap desde la fuente con tu propio sistema de compilación, asegúrate de implementar tus propios minificadores para HTML, CSS y JS.

Archivos no bloqueantes

Si bien minificar y usar la compresión puede parecer suficiente, hacer que tus archivos no sean bloqueantes también es un gran paso para hacer que tu sitio esté bien optimizado y sea lo suficientemente rápido.

Si estás utilizando un complemento de Lighthouse en Google Chrome, es posible que te hayas topado con el FCP. La métrica First Contentful Paint (Primer despliegue de contenido) mide el tiempo transcurrido desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se representa en la pantalla.

Puedes mejorar el FCP posponiendo el JavaScript o CSS no críticos. ¿Qué significa eso? Simplemente, el JavaScript o las hojas de estilo que no necesitan estar presentes en el primer renderizado de tu página deben marcarse con los atributos async o defer.

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

Si quieres aprender más sobre esto, ya hay muchos artículos excelentes al respecto:

Usa siempre HTTPS

Tu 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 tu sitio web para que se sirva exclusivamente a través de HTTPS varían ampliamente según tu arquitectura y proveedor de alojamiento web, por lo que están fuera del alcance de esta documentación.

Los sitios servidos a través de HTTPS también deben acceder a todas las hojas de estilo, scripts y otros recursos a través de conexiones HTTPS. De lo contrario, enviarás a los usuarios contenido mixto activo, lo que generará vulnerabilidades potenciales donde un sitio puede verse comprometido al alterar una dependencia. Esto puede provocar problemas de seguridad y advertencias en el navegador para los usuarios. Ya sea que obtengas Bootstrap desde una CDN o lo sirvas tú mismo, asegúrate de acceder a él solo a través de conexiones HTTPS.