{"id":42303,"date":"2015-01-19T13:12:37","date_gmt":"2015-01-19T07:42:37","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=42303"},"modified":"2026-10-13T13:43:04","modified_gmt":"2026-10-13T08:13:04","slug":"load-bootstrap-faster","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/","title":{"rendered":"5 Tricks to Load Bootstrap Themes and Templates Faster (Bootstrap 5)"},"content":{"rendered":"<p>Bootstrap makes building a responsive, mobile-first website easy, but loading the whole framework adds weight your visitors pay for on every page. We used Bootstrap for the core design of this site for years, and these tricks to load Bootstrap faster cut our CSS and JavaScript down to a fraction of the default size. Here are the five that matter most in 2026, updated for Bootstrap 5.<\/p>\n<p><strong>Quick answer:<\/strong> To make Bootstrap themes load faster: (1) drop Bootstrap&#8217;s JavaScript if you don&#8217;t need modals or dropdowns, or load it with <code>defer<\/code>; (2) build a custom CSS file with only the components you use via Sass; (3) remove unused CSS with a tool like PurgeCSS; (4) use a lightweight icon set instead of a full icon font; and (5) serve the files compressed from a CDN with long caching.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6adc859cf1f52\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6adc859cf1f52\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#1_Remove_or_defer_Bootstraps_JavaScript\" >1. Remove or defer Bootstrap&#8217;s JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#2_You_no_longer_need_jQuery\" >2. You no longer need jQuery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#3_Build_a_custom_Bootstrap_with_only_what_you_use\" >3. Build a custom Bootstrap with only what you use<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#4_Remove_unused_CSS_and_drop_the_icon_font\" >4. Remove unused CSS (and drop the icon font)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#5_Serve_Bootstrap_from_a_fast_CDN_compressed_and_cached\" >5. Serve Bootstrap from a fast CDN, compressed and cached<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#Or_switch_to_a_lighter_framework\" >Or switch to a lighter framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#How_big_is_Bootstrap_5\" >How big is Bootstrap 5?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#Does_Bootstrap_slow_down_a_website\" >Does Bootstrap slow down a website?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/01\/load-bootstrap-faster\/#Is_the_Bootstrap_CDN_still_available\" >Is the Bootstrap CDN still available?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Remove_or_defer_Bootstraps_JavaScript\"><\/span>1. Remove or defer Bootstrap&#8217;s JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bootstrap&#8217;s JavaScript powers modals, dropdowns, collapsible navbars, tooltips and carousels. Many sites barely use them. If yours doesn&#8217;t, don&#8217;t load <code>bootstrap.bundle.min.js<\/code> at all; the CSS works fine on its own.<\/p>\n<p>If you do need it, load it at the end of the page or with <code>defer<\/code>, so it doesn&#8217;t block rendering:<\/p>\n<pre><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\" defer&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>A simple navbar can even work with pure CSS, without any JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_You_no_longer_need_jQuery\"><\/span>2. You no longer need jQuery<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Bootstrap 3 and 4, every plugin needed jQuery, adding another ~30 KB. <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/bootstrap-5-features\/\">Bootstrap 5 dropped jQuery<\/a> completely, so if you&#8217;ve upgraded, remove jQuery unless another plugin on your site needs it. On WordPress, see whether you can <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/11\/wordpress-jquery-to-google-hosted-jquery\/\">stop loading jQuery<\/a> on the front end.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Build_a_custom_Bootstrap_with_only_what_you_use\"><\/span>3. Build a custom Bootstrap with only what you use<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-42310 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/customize-bootstrap.png\" alt=\"Customize Bootstrap to load faster\" width=\"422\" height=\"331\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/customize-bootstrap.png 422w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/customize-bootstrap-150x118.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/customize-bootstrap-300x235.png 300w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/p>\n<p>Bootstrap 3 had an online Customize page (above) where you ticked the components you needed. That tool is gone, but Bootstrap 5&#8217;s Sass source makes the same thing easy. Install Bootstrap with npm, then import only the parts you need:<\/p>\n<pre><code>\/\/ custom.scss\r\n@import \"bootstrap\/scss\/functions\";\r\n@import \"bootstrap\/scss\/variables\";\r\n@import \"bootstrap\/scss\/maps\";\r\n@import \"bootstrap\/scss\/mixins\";\r\n@import \"bootstrap\/scss\/utilities\";\r\n@import \"bootstrap\/scss\/root\";\r\n@import \"bootstrap\/scss\/reboot\";\r\n@import \"bootstrap\/scss\/containers\";\r\n@import \"bootstrap\/scss\/grid\";\r\n@import \"bootstrap\/scss\/buttons\";\r\n@import \"bootstrap\/scss\/utilities\/api\";<\/code><\/pre>\n<p>Compile it, and you get a much smaller file. Most blogs use the grid, buttons, alerts, cards and utilities, and can skip carousels, accordions, offcanvas, toasts and more. The <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/customize\/sass\/\" target=\"_blank\" rel=\"noopener\">Bootstrap Sass docs<\/a> show the full import list.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Remove_unused_CSS_and_drop_the_icon_font\"><\/span>4. Remove unused CSS (and drop the icon font)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Even a custom build includes classes you never use. Tools like <a href=\"https:\/\/purgecss.com\/\" target=\"_blank\" rel=\"noopener\">PurgeCSS<\/a> scan your templates and remove unused selectors, often shrinking Bootstrap CSS by 80% or more. On WordPress, LiteSpeed Cache and WP Rocket have &#8220;remove unused CSS&#8221; options that do something similar.<\/p>\n<p>Bootstrap 3 bundled the Glyphicons icon font. It was removed in Bootstrap 4, and loading a whole icon font for a few icons is wasteful anyway. Use inline SVG icons, <a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">Bootstrap Icons<\/a> as individual SVGs, or load only the icons you need from <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">Font Awesome<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Serve_Bootstrap_from_a_fast_CDN_compressed_and_cached\"><\/span>5. Serve Bootstrap from a fast CDN, compressed and cached<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Serve your CSS and JS from a CDN so they load from a server close to each visitor. We used MaxCDN back then; that service has since shut down. Today, use your own CDN (such as Cloudflare or your host&#8217;s CDN) for custom builds, or <a href=\"https:\/\/www.jsdelivr.com\/\" target=\"_blank\" rel=\"noopener\">jsDelivr<\/a> for the standard files. Make sure files are served with Brotli or gzip compression and long cache headers.<\/p>\n<p>Go further by inlining the small critical part of your CSS in the head and <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/\">delaying non-critical CSS<\/a>. Here are more tips to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/css-files-load-faster\/\">load CSS faster<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Or_switch_to_a_lighter_framework\"><\/span>Or switch to a lighter framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you only use Bootstrap&#8217;s grid and buttons, a micro framework may be enough. We eventually moved to the 3 KB <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/11\/chota-micro-css-framework\/\">Chota CSS framework<\/a>, which uses similar class names and is small enough to inline completely.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"How_big_is_Bootstrap_5\"><\/span>How big is Bootstrap 5?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The full minified CSS is about 230 KB (around 30 KB compressed), and the JavaScript bundle about 80 KB (around 23 KB compressed). A custom, purged build is usually far smaller.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_Bootstrap_slow_down_a_website\"><\/span>Does Bootstrap slow down a website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Unused CSS and JavaScript add download and processing time, especially on mobile. Trimming it to what you use removes most of the cost.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Is_the_Bootstrap_CDN_still_available\"><\/span>Is the Bootstrap CDN still available?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. Bootstrap&#8217;s docs link to jsDelivr. The old StackPath\/MaxCDN BootstrapCDN links are no longer the recommended source.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap makes building a responsive, mobile-first website easy, but loading the whole framework adds weight your visitors pay for on&#8230;<\/p>\n","protected":false},"author":4,"featured_media":42310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-42303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=42303"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42303\/revisions"}],"predecessor-version":[{"id":65516,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/42303\/revisions\/65516"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/42310"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=42303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=42303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=42303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}