最適化

Optimize

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

項目

最低限のSass

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

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の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/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内のファイルはデフォルトエクスポートを使用しているため、次のように記述する必要があります。

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

Autoprefixer .browserslistrc

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

使用されていないCSS

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

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

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

軽量化とgzip圧縮

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

ファイルをブロックしない

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

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

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

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

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

常にHTTPSを使用する

本番環境では, ウェブサイトはHTTPS接続でのみ利用するようにしてください。HTTPSは、すべてのサイトのセキュリティ、プライバシー、可用性を向上させ、機密性の低いWebトラフィックなどはありません。敏感でないウェブトラフィックは存在しません。 WebサイトがHTTPSでのみ提供されるように設定する手順は、アーキテクチャやWebホスティング・プロバイダによって大きく異なるため、このドキュメントでは説明しません。

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