キーポイント

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

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

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

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

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

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

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

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

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

同じことが

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

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

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

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

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

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

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

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

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

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

優(yōu)れたCSSプラクティスには、未使用のセレクターの削除、重複コード、およびオーバーネックルールが含まれます。プロジェクトの開始時(shí)にコードを整理することをお?jiǎng)幛幛筏蓼埂￥郡趣à?、スタイルガイドを使用すると、開発プロセスとコードの品質(zhì)に本當(dāng)に利益をもたらす可能性があります。

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

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

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

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

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

畫像ファイルのサイズ

に注意してください

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

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

手元のタスクに正しい畫像形式を使用していることを確認(rèn)してください。

生産にアップロードする前に、リソースから余分なバイトを圧縮します。あなたを助ける素晴らしいツールがいくつかあります。 Tinypng（ラスター畫像（PNG、JPGなど）やJake ArchibaldのSSVGOMG（SVG最適化用）などのオンラインツールをご覧ください。また、お?dú)荬巳毪辘违骏攻楗螗施`（Grunt、Gulpなど）など、ローカルでインストールできるツールを検討してください。

結(jié)論

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

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

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

  のスピードアップ時(shí)のFAQ

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

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

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

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

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

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

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

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

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

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

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

以上がブートストラップWebサイトをスピードアップするための3つのヒントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。