最適化

プロジェクトを軽量、レスポンシブ、そして保守可能に保ち、最高の体験を提供し、より重要な作業に集中できるようにします。

このページについて

軽量なSassインポート

アセットパイプラインでSassを使用する場合は、必要なコンポーネントのみを@importすることでBootstrapを最適化してください。最大の最適化は、おそらく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";

コンポーネントを使用しない場合は、コメントアウトするか、完全に削除してください。たとえば、カルーセルを使用しない場合は、コンパイルされたCSSのファイルサイズを節約するためにそのインポートを削除します。Sassインポートには、ファイルを省略することが困難になる可能性のある依存関係があることに注意してください。

軽量なJavaScript

BootstrapのJavaScriptには、プライマリdistファイル（bootstrap.jsとbootstrap.min.js）に含まれるすべてのコンポーネントと、バンドルファイル（bootstrap.bundle.jsとbootstrap.bundle.min.js）に含まれるプライマリ依存関係（Popper）も含まれています。Sassでカスタマイズしている間は、関連するJavaScriptを必ず削除してください。

たとえば、Webpack、Parcel、またはViteのような独自のJavaScriptバンドラーを使用していると仮定すると、使用する予定のJavaScriptのみをインポートします。以下の例では、モーダルJavaScriptのみを含める方法を示します。

// 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';

このようにして、ボタン、カルーセル、ツールチップなどのコンポーネントに使用する予定のないJavaScriptは含まれません。ドロップダウン、ツールチップ、ポップオーバーをインポートする場合は、package.jsonファイルにPopperの依存関係を必ずリストしてください。

注意！ bootstrap/js/distのファイルは、default exportを使用しています。それらを使用するには、以下を実行します

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

Autoprefixer .browserslistrc

Bootstrapは、特定のCSSプロパティにブラウザプレフィックスを自動的に追加するために、Autoprefixerに依存しています。プレフィックスは、Bootstrapリポジトリのルートにある.browserslistrcファイルによって決定されます。このブラウザのリストをカスタマイズしてSassを再コンパイルすると、そのブラウザまたはバージョンに固有のベンダープレフィックスがある場合、コンパイルされたCSSから一部のCSSが自動的に削除されます。

未使用のCSS

このセクションについて支援を求めています。PRを開くことをご検討ください。ありがとうございます。

PurgeCSSをBootstrapで使用するための事前構築済みの例はありませんが、コミュニティが作成したいくつかの役立つ記事とチュートリアルがあります。いくつかのオプションは次のとおりです。

最後に、この未使用のCSSに関するCSS Tricksの記事では、PurgeCSSおよびその他の同様のツールを使用する方法を示しています。

minifyとgzip

可能な限り、訪問者に提供するすべてのコードを圧縮するようにしてください。Bootstrap distファイルを使用している場合は、（.min.cssおよび.min.js拡張子で示される）minifyされたバージョンを試してみてください。独自のビルドシステムでソースからBootstrapをビルドする場合は、HTML、CSS、およびJSに独自のminifyを実装するようにしてください。

ノンブロッキングファイル

minifyと圧縮を使用するだけでは十分ではないように思われるかもしれませんが、ファイルをノンブロッキングにすることも、サイトを十分に最適化し、高速化するための大きなステップです。

Google ChromeでLighthouseプラグインを使用している場合は、FCPに遭遇した可能性があります。First Contentful Paintメトリックは、ページがロードを開始してから、ページのコンテンツの一部が画面にレンダリングされるまでの時間を測定します。

重要でないJavaScriptまたはCSSを延期することで、FCPを改善できます。それはどういう意味ですか？簡単に言えば、ページの最初の描画時に存在する必要がないJavaScriptまたはスタイルシートには、asyncまたはdefer属性をマークする必要があります。

これにより、重要度の低いリソースが後でロードされ、最初の描画がブロックされないことが保証されます。一方、重要なリソースは、インラインスクリプトまたはスタイルとして含めることができます。

これについて詳しく知りたい場合は、すでに多くの優れた記事があります

常にHTTPSを使用

Webサイトは、本番環境ではHTTPS接続でのみ利用可能にする必要があります。HTTPSは、すべてのサイトのセキュリティ、プライバシー、および可用性を向上させ、機密性の低いWebトラフィックというものは存在しません。WebサイトをHTTPS経由でのみ提供するように構成する手順は、アーキテクチャとWebホスティングプロバイダーによって大きく異なるため、これらのドキュメントの範囲外です。

HTTPS経由で提供されるサイトは、すべてのスタイルシート、スクリプト、およびその他のアセットにもHTTPS接続経由でアクセスする必要があります。そうしないと、ユーザーに混合アクティブコンテンツを送信することになり、依存関係を変更することでサイトが侵害される可能性のある脆弱性につながります。これにより、セキュリティの問題やブラウザ内警告がユーザーに表示される可能性があります。CDNからBootstrapを取得する場合でも、自分で提供する場合でも、HTTPS接続でのみアクセスするようにしてください。