Ver en GitHub

Optimizar

Mantén tus proyectos ligeros, responsivos y mantenibles para que puedas ofrecer la mejor experiencia y centrarte en tareas más importantes.

On this page

Imports de Sass ligeros

Cuando uses Sass en tu pipeline de assets, asegúrate de optimizar Bootstrap importando solo los componentes que necesitas mediante @import. Tus mayores optimizaciones probablemente vendrán de la sección Layout & Components de nuestro 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";

Si no usas un componente, coméntalo o elimínalo por completo. Por ejemplo, si no usas el carrusel, elimina ese import para ahorrar algo de tamaño de archivo en tu CSS compilado. Ten en cuenta que hay algunas dependencias entre los imports de Sass que pueden dificultar la omisión de un archivo.

JavaScript ligero

El JavaScript de Bootstrap incluye todos los componentes en nuestros archivos principales de distribución (bootstrap.js y bootstrap.min.js), e incluso nuestra dependencia principal (Popper) en nuestros archivos bundle (bootstrap.bundle.js y bootstrap.bundle.min.js). Mientras personalices mediante Sass, asegúrate de eliminar también el JavaScript relacionado.

Por ejemplo, asumiendo que usas tu propio bundler de JavaScript como Webpack o Rollup, solo importarías el JavaScript que planeas usar. En el ejemplo de abajo, mostramos cómo incluir solo nuestro JavaScript del 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 manera, no estarás incluyendo ningún JavaScript que no tengas previsto usar para componentes como botones, carruseles y tooltips. Si importas menús desplegables, tooltips o popovers, asegúrate de listar la dependencia de Popper en tu archivo package.json.

Exportaciones por defecto

Los archivos en bootstrap/js/dist usan la exportación por defecto, por lo que si quieres usar uno de ellos tienes que hacer lo siguiente:

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

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

Autoprefixer .browserslistrc

Bootstrap depende de Autoprefixer para añadir automáticamente prefijos de navegador a ciertas propiedades CSS. Los prefijos se determinan mediante nuestro archivo .browserslistrc, que se encuentra en la raíz del repositorio de Bootstrap. Personalizar esta lista de navegadores y recompilar el Sass eliminará automáticamente algo de CSS de tu CSS compilado, si hay prefijos de proveedor únicos de ese navegador o versión.

CSS no utilizado

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

Aunque no tenemos un ejemplo preconstruido para usar PurgeCSS con Bootstrap, hay algunos artículos y guías útiles que la comunidad ha escrito. 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 gzip

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

Archivos no bloqueantes

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

Si usas el plugin Lighthouse en Google Chrome, puede que te hayas topado con el FCP. La métrica First Contentful Paint mide el tiempo desde que la página empieza a cargarse hasta que cualquier parte del contenido de la página se renderiza en la pantalla.

Puedes mejorar el FCP aplazando el JavaScript o CSS no crítico. ¿Qué significa eso? Simplemente, el JavaScript o las hojas de estilo que no necesitan estar presentes en el primer renderizado de tu página deberían 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 pueden incluirse como scripts o estilos inline.

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

Usa siempre HTTPS

Tu sitio web debería estar disponible únicamente 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 algo llamado tráfico web no sensible. Los pasos para configurar tu sitio web para que se sirva exclusivamente a través de HTTPS varían ampliamente dependiendo de tu arquitectura y proveedor de hosting web, y por lo tanto están fuera del alcance de esta documentación.

Los sitios servidos a través de HTTPS también deberían acceder a todas las hojas de estilo, scripts y otros assets a través de conexiones HTTPS. De lo contrario, estarás enviando a los usuarios contenido activo mixto, lo que lleva a posibles vulnerabilidades donde un sitio puede verse comprometido al alterar una dependencia. Esto puede provocar problemas de seguridad y advertencias en el navegador mostradas a los usuarios. Ya sea que obtengas Bootstrap desde un CDN o lo sirvas tú mismo, asegúrate de acceder a él únicamente a través de conexiones HTTPS.