最適化

プロジェクトを無駄のない、応答性の高い、保守可能な状態に保つことで、最高のエクスペリエンスを提供し、より重要な仕事に集中できます。

このページでは

リーンサス輸入

@importアセットパイプラインで Sass を使用する場合は、必要なコンポーネントのみを使用して Bootstrap を最適化してください。Layout & Components最大の最適化は、おそらくbootstrap.scss.

// 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 インポート全体にいくつかの依存関係があり、ファイルを省略しにくくなる可能性があることに注意してください。

無駄のない JavaScript

Bootstrap の JavaScript には、主要な dist ファイル (bootstrap.jsおよびbootstrap.min.js) にすべてのコンポーネントが含まれており、バンドルファイル (bootstrap.bundle.jsおよびbootstrap.bundle.min.js) には主要な依存関係 (Popper) も含まれています。Sass を介してカスタマイズしている間は、関連する JavaScript を必ず削除してください。

たとえば、Webpack や Rollup などの独自の 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/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 依存関係をリストしてください。

デフォルトのエクスポート

ファイルはデフォルトの exportbootstrap/js/distを使用しているため、それらのいずれかを使用する場合は、次の手順を実行する必要があります。

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

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

Autoprefixer .browserslistrc

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

未使用の CSS

このセクションで助けが必要です。PR を開くことを検討してください。ありがとう！

Bootstrap でPurgeCSSを使用するためのビルド済みの例はありませんが、コミュニティが作成した役立つ記事やウォークスルーがいくつかあります。以下にいくつかのオプションを示します。

最後に、未使用の CSS に関するこの CSS トリックの記事では、PurgeCSS やその他の同様のツールの使用方法を示しています。

縮小して gzip

可能な限り、訪問者に提供するすべてのコードを圧縮してください。Bootstrap の dist ファイルを使用している場合は、縮小版 (.min.cssおよび.min.js拡張子で示されます) を使用するようにしてください。独自のビルドシステムを使用してソースから Bootstrap をビルドする場合は、必ず HTML、CSS、および JS 用の独自のミニファイアを実装してください。

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

縮小して圧縮を使用するだけで十分に思えるかもしれませんが、ファイルをブロックしないファイルにすることも、サイトを適切に最適化して高速にするための大きな一歩です。

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

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

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

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

常に HTTPS を使用する

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

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

最適化