メインコンテンツへスキップ

最適化について（Optimize） v5.0.0-alpha1新設

プロジェクトを無駄なくレスポンシブ性の高い保守可能な状態に保つことで、最高の体験を提供し、より重要な仕事に集中させる。

目次

Sassのインポートに頼る（Lean Sass imports）

アセットパイプラインでSassを使用する場合は、必要なコンポーネントのみを @import してBootstrapを最適化すること。最大の最適化は、bootstrap.scss のレイアウトとコンポーネントの項目から行われる可能性がある。

デフォルトの設定
scss/bootstrap.scss 内 import-stack の設定
// 構成
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

//レイアウトとコンポーネント
@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 "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 "helpers";

// ユーティリティ
@import "utilities/api";

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

 

JavaScriptに頼る（Lean JavaScript）

BootstrapのJavaScriptには、プライマリdistファイル（bootstrap.js と bootstrap.min.js）のすべてのコンポーネントが組み込まれている。またバンドルファイル（bootstrap.bundle.js と bootstrap.bundle.min.js）との主要な依存関係（Popper）も組み込まれている。Sassを使用してカスタマイズしている間は、関連するJavaScriptを必ず削除すること。

例えば、WebpackやRollupなどの独自のJavaScriptバンドラを使用している場合、使用する予定のJavaScriptのみをインポート。以下の例では、モーダルJavaScriptを組み込む方法を示す：

JavaScript// 必要なものだけをインポート

// 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は組み込まない。ドロップダウン、ツールチップ、ポップオーバーをインポートする場合は、必ずPopperの依存関係を package.json ファイルにリストアップする。

 

Autoprefixer browserslistrc

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

 

未使用のCSS（Unused CSS）

この項目のヘルプが必要な場合は、PRを開くことを検討してください。

BootstrapでPurgeCSSを使用するための構築済の例はないが、コミュニティが作成した役立つ記事やウォークスルーはいくつかある。ここにいくつかのオプションがある：

最後に、未使用のCSSに関するこのCSS Trickの記事では、PurgeCSSやその他の類似のツールの使用方法を示している。

 

縮小化とgzip（Minify and gzip）

できる限り、訪問者に提供するすべてのコードは必ず圧縮すること。Bootstrapのdistファイルを使用している場合は、縮小バージョン（.min.css や .min.js 拡張子で示される）を使用すること。独自の構築システムを使用してソースからBootstrapを構築する場合は、HTML、CSS、JSに独自の縮小機能を実装すること。

 

ノンブロッキング・ファイル（Nonblocking files）v5.0.0-beta3更新

コードの圧縮を縮小して使用することで十分に思えるかもしれないが、ファイルをブロックしないファイルにすることは、サイトを十分に最適化して十分に高速にするための大きなステップでもある。

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

重要でないJavaScriptやCSSを先延ばしにすることで、FCPの改善ができる。どういう意味か簡単に言うと、ページの最初のペイントに存在する必要のないJavaScriptやスタイルシートは、async か defer でマークする必要がある。

これにより、重要度の低いリソースが後で読み込まれ、最初のペイントがブロックされないことが保証される。一方、重要なリソースは、インラインスクリプトやスタイルとして組み込める。

これについてもっと知りたいなら、以下の記事を参照：

 

常にHTTPSを使用（Always use HTTPS）v5.0.0-beta2更新

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

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