ブートストラップWebサイトをスピードアップするための3つのヒント

キーポイント

• ブートストラップパッケージに必要なコンポーネントのみをダウンロードします。特定の機能を使用していない場合は、速度を最適化するためにそれらを削除します。
• プリコンパイルされたダウンロードパッケージを使用しないでくださいが、ソースコードを選択します。このようにして、必要なコンポーネントのみを含めることができ、生産環境に向けてよりlear的で効率的なスタイルシートを作成できます。
• 合理化されたCSSやJavaScriptコードの書き込み、CSSとJavaScriptコードの圧縮とマージ、画像ファイルサイズの最適化など、実証済みのクライアント最適化手法を実装します。これらの手順は、ウェブサイトの速度とパフォーマンスを大幅に改善できます。

Webサイトの最適化は、ブラウザ内のWebサイトの読み込みとレンダリングを高速化するために設計されたサーバー側およびクライアント側のテクノロジーのセットであり、それによりユーザーエクスペリエンスが向上します。

今、訪問者はネイティブアプリの即時性と応答性に慣れています。彼らは、Webページが1000ミリ秒でロードされることを期待しています。読み込み時間がはるかに長い場合、彼らはおそらくサイトを離れるでしょう。

検索エンジンは間違いなくこの傾向に追いついており、多くの点でそれを宣伝しています。実際、Googleは常にデスクトップ検索のWebサイトランキングの要因としてページ速度を使用してきました。 Googleは、2018年7月から、検索結果リストでトップランキングを取得するためにもモバイル検索が重要であると発表しました。

ブートストラップは、多くの場合、ウェブサイトに不必要な冗長性を追加したとして批判されているため、プロジェクトでこの人気のあるフロントエンドUIライブラリを使用する場合は、ページサイズとページ速度に特に注意を払ってください。

この記事では、ブートストラップベースのWebサイトが迅速かつ適切に最適化されるようにするために実行できる3つのフロントエンド最適化ステップを取り上げます。

必要なブートストラップのプリコンパイルされたダウンロードパッケージを使用することにした場合、本当に必要な部分について本当に考える必要があります。

ダウンロードフォルダーには、完全なCSSライブラリ（bootstrap.css and bootstrap.min.css）とJavascriptコンポーネントライブラリとそのすべての依存関係（jqueryを除く）（bootstrap.bundle.jsおよびbootstrap.bundle.min.js）が含まれています。 、およびこの人気のあるUIツールキットの特定の部分に必要なコードを含む多くのスタンドアロンCSSファイル。

素敵なCSSリセットスタイルのみが必要な場合は、bootstrap-reboot.min.cssを使用してください。柔軟で使いやすいグリッドシステムのみが必要な場合は、bootstrap-grid.min.cssを使用してください。フレームワーク全体をダウンロードする必要はありません。一方、ライブラリですべてを使用したいと思っている場合は、少なくとも薄いバージョンを含めるようにしてください。

同じことが

javaScriptコードにも当てはまります。プロジェクトにドロップダウンメニュー、ポップアップ、ツールチップが必要ないことがわかっている場合は、popper.jsを含める必要がないため、bootstrap.bundle.min.jsの代わりにbootstrap.min.jsを使用してください。

プリコンパイルされたダウンロードパッケージの代わりにソースコードを選択します

Bootstrapの最新バージョンでは、プロジェクトに含めるパーツを選択できますが、事前コンパイルされたファイルには実際に必要のないものが含まれている場合があります。

ブラウザは引き続き未使用のコードをダウンロードして処理する必要があります。これは、特にネットワーク接続が遅い場合は、ウェブサイトのパフォーマンスに影響を与える可能性があります。

より良い方法は、ブートストラップソースコードをダウンロードすることです。

プロジェクトに必要なコンポーネントを正確に含めることができます
カスタムライブラリのどの部分も、スタイルを繰り返し上書きすることなく、よりシンプルで効率的になります
生産に終わるスタイルシートは、通常より合理化されます。

実証済みのクライアント最適化テクノロジーを使用 上記のポイントとは別に、ブートストラップベースのWebサイトをパフォーマンス用に最適化することで、他のWebサイトと同様にフロントエンドのパフォーマンステクノロジーを含める必要があります。

以下は、効果的なフロントエンドWebサイトの最適化の重要な要素です。

合理化されたCSSおよびJavaScriptコードを書き込む

コード内の各文字は、Webページの最終サイズを増やします。 CSSとJavaScriptコードを読みやすくしながら、簡潔で明確なCSSとJavaScriptコードを作成するのは簡単ではありません。ただし、これはすべてのプロジェクトが努力すべき目標であるはずです。

優れたCSSプラクティスには、未使用のセレクターの削除、重複コード、およびオーバーネックルールが含まれます。プロジェクトの開始時にコードを整理することをお勧めします。たとえば、スタイルガイドを使用すると、開発プロセスとコードの品質に本当に利益をもたらす可能性があります。

さらに、コードをクリーンアップするのに役立ついくつかの優れたツールがあります。 CSS LintやJSLINTなどのコード検査官は、構文エラー、非効率的なエンコードパターン、未使用のコードなどについてドキュメントを確認できます。

CSSとJavaScriptコードを圧縮およびマージ

重要な最適化ステップは、コンテンツを提示するためにWebサイトが実行する必要があるHTTP要求の数を制限することです。リソースを取得するためにサーバーに行き来するたびに時間がかかり、ユーザーエクスペリエンスに悪影響を及ぼします。

圧縮（つまり、ドキュメントからコメントやスペースを削除します）とCSSとJavaScriptファイルのマージは、ファイルサイズを小さく保ち、HTTPリクエストの数を減らすように設計された堅実なプラクティスになりました。

より深い見方をしたい場合は、Gary StevensのCSSとJSを最適化してWebサイトをスピードアップする方法は素晴らしい記事です。

画像ファイルのサイズ

に注意してください

Webページの最も重い部分は通常、画像ファイルで表されますが、オーディオファイルとビデオファイルも役割を果たします。したがって、視覚資産の最適化は、ウェブサイトのパフォーマンスにとって重要です。

これを行うには、2つの側面が含まれます

手元のタスクに正しい画像形式を使用していることを確認してください。

生産にアップロードする前に、リソースから余分なバイトを圧縮します。あなたを助ける素晴らしいツールがいくつかあります。 Tinypng（ラスター画像（PNG、JPGなど）やJake ArchibaldのSSVGOMG（SVG最適化用）などのオンラインツールをご覧ください。また、お気に入りのタスクランナー（Grunt、Gulpなど）など、ローカルでインストールできるツールを検討してください。

結論

• Webサイトの高速レンダリングは、Webサイトのユーザーエクスペリエンスを決定する重要な要素です。これは、モバイルデバイスでWebユーザーエクスペリエンスを評価するときにさらに重要になります。

  この記事では、フロントエンド開発の観点からブートストラップWebサイトのパフォーマンスを最適化する役割を果たす多くのテクノロジーをリストしています。
  ブートストラップWebサイトを迅速に読み込むために、どのフロントエンド最適化テクニックがありますか？コメントで教えてください！
  すでにブートストラップの基本を持っているが、ブートストラップスキルを次のレベルに引き上げる方法を知りたい場合は、Bootstrap 4コースで最初のWebサイトをビルドして、Bootstrapの力についてすばやく簡単に学ぶことができます。

  ブートストラップWebサイト（FAQ）

  のスピードアップ時のFAQ

  なぜ私のブートストラップのウェブサイトが遅いのですか？
  ブートストラップのウェブサイトが遅い多くの理由があるかもしれません。最も一般的な理由の1つは、不要なコンポーネントとプラグインの使用です。 Bootstrapには多くのコンポーネントとプラグインが付属しており、使用しない場合は削除する方が良いです。別の理由は、大きな画像が使用されていることです。大きな画像は、ウェブサイトの速度を大幅に低下させる可能性があります。画像をWebサイトにアップロードする前に、画像を最適化することをお勧めします。最後に、CSSやJavaScriptファイルを圧縮しないことも、ウェブサイトを遅くすることができます。これらのファイルを圧縮すると、Webサイトの速度が大幅に向上する可能性があります。
  ブートストラップWebサイトを最適化するには、パフォーマンスを向上させるにはどうすればよいですか？
  ブートストラップWebサイトを最適化するために、パフォーマンスを向上させるには複数の方法があります。まず、不要なコンポーネントとプラグインを削除する必要があります。 Bootstrapには多くのコンポーネントとプラグインが付属しており、使用しない場合は削除する方が良いです。次に、ウェブサイトにアップロードする前に画像を最適化する必要があります。大きな画像は、ウェブサイトの速度を大幅に低下させる可能性があります。第三に、CSSとJavaScriptファイルを圧縮する必要があります。これらのファイルを圧縮すると、ウェブサイトの速度が大幅に向上する可能性があります。
  圧縮とは何ですか？また、Webサイトの速度をどのように向上させますか？
  圧縮とは、機能を変更せずにソースコードから不要な文字（スペースやコメントなど）を削除するプロセスです。これにより、コードのサイズが削減され、ユーザーに転送される必要があるデータの量が減少し、ロード時間が高速化されます。
  CSSおよびJavaScriptファイルを圧縮する方法は？
  CSSおよびJavaScriptファイルを圧縮するためのいくつかのオンラインツールがあります。これらのツールは、コードから不要な文字を削除し、サイズを削減し、読み込み時間を増やします。いくつかの一般的な圧縮ツールには、JavaScript用のuglifyjsとCSS用のCSSNANOが含まれます。
  ブートストラップWebサイトの画像を最適化する方法は？
  ブートストラップWebサイトの画像を最適化する方法はいくつかあります。最も効果的な方法の1つは、画像をWebサイトにアップロードする前に圧縮することです。品質を大幅に低下させることなく、画像を圧縮するためのいくつかのオンラインツールがあります。画像を最適化する別の方法は、正しい画像形式を使用することです。たとえば、JPEGは一般に写真により適していますが、PNGは透明な背景を持つ画像により適しています。

  私のウェブサイトを遅くする可能性のある特定のブートストラップコンポーネントは何ですか？

  はい、一部のブートストラップコンポーネントは、不適切に使用された場合、ウェブサイトを遅くする可能性があります。たとえば、大きな画像を使用すると、CarouselコンポーネントがWebサイトを遅くする場合があります。カルーセルに使用する前に、画像を最適化することをお勧めします。さらに、各ページにモーダルコンポーネントがロードされている場合、Webサイトが遅くなる可能性があります。必要なページにのみモーダルコンポーネントをロードすることをお勧めします。

  不要なブートストラップコンポーネントとプラグインを削除するにはどうすればよいですか？

  ブートストラップバージョンをカスタマイズして、不必要なブートストラップコンポーネントとプラグインを削除できます。これには、ソースファイルのダウンロード、不要なコンポーネントとプラグインの削除、および残りのファイルをカスタムバージョンにコンパイルすることが含まれます。

  cdnを使用して、ブートストラップWebサイトの速度を上げることはできますか？

  はい、コンテンツ配信ネットワーク（CDN）を使用すると、ブートストラップWebサイトの速度が大幅に向上する可能性があります。 CDNは、ユーザーに地理的に近いサーバーからWebサイトの静的ファイル（CSS、JavaScript、画像など）を提供するため、読み込み時間を高速化します。

  私のブートストラップWebサイトでCDNを使用する方法は？

  HTMLファイルのCDN上のブートストラップファイルにリンクすることにより、CDNとBootstrap Webサイトを使用できます。これには、HTMLファイルのローカルファイルパスをCDN上のファイルのURLに置き換えることが含まれます。

  ブートストラップのWebサイトをスピードアップするための他のヒントはありますか？

  はい、Bootstrap Webサイトをスピードアップするための他のヒントがいくつかあります。たとえば、JavaScriptファイルをHTMLファイルの最後に常に配置する必要があります。これにより、ページの残りの部分をJavaScriptファイルの前にロードできるようになるため、知覚される読み込み時間を高速化できます。さらに、JavaScriptファイルに非同期ロードを使用する必要があります。これにより、ページの残りの部分をブロックせずにファイルをバックグラウンドにロードできます。

以上がブートストラップWebサイトをスピードアップするための3つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。