最適化 Optimize

プロジェクトを無駄なく、レスポンシブで、保守可能に保ち、最高のエクスペリエンスを提供し、より重要な作業に集中できるようにします。

On this page

無駄のないSassインポート

アセットパイプラインでSassを使用する場合は、必要なコンポーネントのみを@importして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のJavaScriptには、プライマリdistファイル(bootstrap.jsおよびbootstrap.min.js)にすべてのコンポーネントが含まれており、bundleファイル(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のファイルはデフォルトエクスポートを使用します。これらを使用するには、次のようにします:

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を開くことを検討してください。ありがとうございます!

BootstrapでPurgeCSSを使用するための事前構築された例はありませんが、コミュニティが書いた役立つ記事とウォークスルーがいくつかあります。次のようなオプションがあります:

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

縮小とgzip

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

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

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

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

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

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

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

常にHTTPSを使用する

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

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