Optimize (最適化)

より重要なことに集中し、最高の体験を提供できるように、プロジェクトを無駄のない、応答性の高い、メンテナンス性が高い状態に保ちましょう。

On this page

Lean Sass imports

アセットパイプラインで Sass を使うときには、使うコンポーネントのみをインポートして Bootstrap を常に最適にしましょう。bootstrap.scss の Layout & Components セクションで特にその効果を発揮します。

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

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

もしコンポーネントを使わないときには、コメントアウトしましょう。例えば、カルーセルを使わない場合には、それを削除することでコンパイル後の CSS のファイルサイズを節約することができます。Sass の中には相互に依存性をもつものがあるため、ファイルを削除する際には気をつけましょう。

Lean JavaScript

Bootstrap の dist フォルダにある基本的な JavaScript (bootstrap.js と bootstrap.min.js) は全てのコンポーネントを含んでおり、またバンドルファイル(bootstrap.bundle.js と boostrap.bundle.min.js) は主な依存ライブラリ(Popper.js)を含んでいます。Sass を用いてカスタマイズする際には、関連する JavaScript を削除するよう注意しましょう。

例えば、Webpack や Rollup のような JavaScript バンドラを使っているとき、使おうとしている JavaScript のみをインポートします。以下の例では、modal の 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/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 を追加しましょう。

Default Exports

bootstrap/js/dist 内のファイルは デフォルトエクスポート を使用しているため、次のように記述する必要があります。

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

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

Autoprefixer .browserslistrc

Bootstrap は CSS プロパティにブラウザプレフィックスを付加するために Autoprefixer に依存しています。プレフィックスは .browwerlintrc に記載されており、Bootstrap レポジトリのルートに置かれています。ブラウザのリストをカスタマイズし、Sass を再コンパイルすることで、特定のブラウザのベンダープレフィックスを削除することができます。

Unused CSS

このセクションでは改善してくださる方を募集しています、ぜひ PR を作成してください！

PurgeCSS を Bootstrap と組み合わせて使用した例がないため、コミュニティが記述した記事を紹介します:

最後に、CSS Tricks article on unused CSS では PurgeCSS などのツールの使い方が書かれています。

Minify and gzip

可能であれば、サイトに公開するコードは全て圧縮しておくことが望ましいです。Bootstrap の dist ファイルを使っている場合は、ミニファイされたバージョン(.min.css か .min.js で示されています)を使うことをおすすめします。Bootstrap をソースから独自システムでビルドしている場合は、独自の HTML, CSS, JS のミニファイを実装するようにしてください。

Nonblocking files

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

Google ChromeでLighthouseプラグインを使用している方は、FCPに出くわしたことがあるかもしれません。First Contentful Paintという指標は、ページの読み込みを開始してから、ページのコンテンツのいずれかの部分が画面に表示されるまでの時間を測定します。

クリティカルでないJavaScriptやCSSを延期することで、FCPを改善することができます。簡単に言えば、ページの最初のペイントに存在する必要のないJavaScriptやスタイルシートには、asyncやdeferの属性を付けるべきです。

これにより、重要度の低いリソースは後から読み込まれ、最初のペイントをブロックすることはありません。一方、重要なリソースは、インラインのスクリプトやスタイルとして含めることができます。

これについて詳しく知りたい方は、すでにたくさんの素晴らしい記事がありますので、ぜひご覧ください。

Always use HTTPS

本番環境では, ウェブサイトは HTTPS 接続でのみ利用するようにしてください。HTTPS は, すべてのサイトのセキュリティ, プライバシー, 可用性を向上させ, 機密性の低いWebトラフィックなどはありません。 there is no such thing as non-sensitive web traffic

Web サイトが HTTPS でのみ提供されるように設定する手順は、アーキテクチャや Web ホスティング・プロバイダによって大きく異なるため、このドキュメントでは説明しません。

HTTPS で提供されているサイトは, すべてのstylesheets, scripts, assets に HTTPS 接続でアクセスする必要があります。そうしないと、ユーザーに mixed active content を送信することになり、依存関係を変更することでサイトが危険にさらされるという潜在的な脆弱性につながります。これは、セキュリティ問題や、ユーザーに表示されるブラウザ内の警告につながる可能性があります。CDN から Bootstrap を入手する場合も、自分で提供する場合も、HTTPS 接続でのみアクセスすることを確認してください。