關(guān)鍵要點

• 只下載 Bootstrap 包中必要的組件，不必要的組件會增加網(wǎng)站體積并降低速度。如果未使用某些功能，請將其刪除以優(yōu)化速度。
• 不要使用預(yù)編譯的下載包，而應(yīng)選擇源代碼。這樣，您就可以只包含所需的組件，從而為生產(chǎn)環(huán)境創(chuàng)建更精簡、更高效的樣式表。
• 實施經(jīng)過驗證的客戶端優(yōu)化技術(shù)，例如編寫精簡的 CSS 和 JavaScript 代碼、壓縮和合并 CSS 和 JavaScript 代碼以及優(yōu)化圖像文件大小。這些步驟可以顯著提高網(wǎng)站的速度和性能。

網(wǎng)站優(yōu)化是一組服務(wù)器端和客戶端技術(shù)，旨在加快網(wǎng)站在瀏覽器中的加載和渲染速度，從而提升用戶體驗。

如今，訪問者已經(jīng)習(xí)慣了原生應(yīng)用的即時性和響應(yīng)速度。他們期望網(wǎng)頁在 1000 毫秒內(nèi)加載完成。如果加載時間長得多，他們很可能會離開網(wǎng)站。

搜索引擎無疑也趕上了這一趨勢，并在許多方面促進了這一趨勢。事實上，Google 一直將頁面速度作為桌面搜索中網(wǎng)站排名的一個因素。 Google 宣布，從 2018 年 7 月起，移動搜索對于在搜索結(jié)果列表中獲得頂級排名也至關(guān)重要。

Bootstrap 經(jīng)常因給網(wǎng)站增加不必要的冗余而受到批評，因此，如果您在項目中使用這個流行的前端 UI 庫，請確保格外注意頁面大小和頁面速度。

在本文中，我將介紹三個前端優(yōu)化步驟，您可以采取這些步驟來確保您的基于 Bootstrap 的網(wǎng)站快速渲染且經(jīng)過良好優(yōu)化。

只下載您需要的 Bootstrap 包

如果您決定使用 Bootstrap 的預(yù)編譯下載包，您確實應(yīng)該認(rèn)真考慮一下您真正需要哪些部分。

下載文件夾包含完整的CSS 庫（bootstrap.css 和bootstrap.min.css）和JavaScript 組件庫及其所有依賴項（jQuery 除外）（bootstrap.bundle.js 和bootstrap.bundle.min.js） ，以及許多獨立的CSS 文件，其中包含此流行UI 工具包特定部分所需的代碼。

如果您只需要一個不錯的 CSS 重置樣式，只需使用 bootstrap-reboot.min.css。如果您只需要一個靈活且易于使用的網(wǎng)格系統(tǒng)，則使用 bootstrap-grid.min.css。無需下載整個框架。另一方面，如果您知道要使用庫中的所有內(nèi)容，至少請確保包含精簡版本。

JavaScript 代碼也是如此。如果您知道項目中不需要下拉菜單、彈出框和工具提示，則使用 bootstrap.min.js 而不是 bootstrap.bundle.min.js，因為您不需要包含 Popper.js。

選擇源代碼而不是預(yù)編譯的下載包

盡管 Bootstrap 的最新版本允許您選擇要包含在項目中的部分，但預(yù)編譯的文件可能仍然包含您實際上不需要的內(nèi)容。

瀏覽器仍然必須下載和處理未使用的代碼，這可能會影響網(wǎng)站性能，尤其是在網(wǎng)絡(luò)連接緩慢的情況下。

更好的方法是下載 Bootstrap 源代碼，因為：

• 您將能夠準(zhǔn)確地包含項目中所需的組件
• 自定義庫的任何部分都變得更簡潔、更高效，無需反復(fù)覆蓋樣式
• 最終用于生產(chǎn)環(huán)境的樣式表通常更精簡。

使用經(jīng)過驗證的客戶端優(yōu)化技術(shù)

除了上述幾點之外，針對性能對基于 Bootstrap 的網(wǎng)站進行優(yōu)化仍然必須像其他任何網(wǎng)站一樣包含前端性能技術(shù)。

以下是您可以注意到的有效前端網(wǎng)站優(yōu)化的關(guān)鍵因素：

編寫精簡的 CSS 和 JavaScript 代碼

代碼中的每個字符都會增加網(wǎng)頁的最終大小。編寫簡潔明了的 CSS 和 JavaScript 代碼，同時保持其可讀性并非易事。但是，這應(yīng)該是每個項目都應(yīng)努力追求的目標(biāo)。

良好的 CSS 實踐包括去除未使用的選擇器、重復(fù)代碼和過度嵌套的規(guī)則。最好在項目開始時就保持代碼井井有條。例如，使用樣式指南可以真正使您的開發(fā)過程和代碼質(zhì)量受益。

此外，還有一些很棒的工具可以幫助您清理代碼。像 CSS Lint 和 JSLint 這樣的代碼檢查器可以檢查您的文檔是否存在語法錯誤、低效的編碼模式、未使用的代碼等。

壓縮和合并 CSS 和 JavaScript 代碼

一個重要的優(yōu)化步驟是限制網(wǎng)站必須執(zhí)行的 HTTP 請求數(shù)量才能呈現(xiàn)其內(nèi)容。每次往返服務(wù)器以獲取資源都需要時間，從而對用戶體驗產(chǎn)生負(fù)面影響。

壓縮（即從文檔中刪除注釋和空格）和合并 CSS 和 JavaScript 文件現(xiàn)在已經(jīng)成為一種鞏固的實踐，旨在保持文件大小較小并減少 HTTP 請求的數(shù)量。

如果您想深入了解，Gary Stevens 的《如何優(yōu)化 CSS 和 JS 以加快網(wǎng)站速度》是一篇很好的文章。

注意圖像文件大小

網(wǎng)頁中最重的部分通常是由圖像文件表示的，但音頻和視頻文件也發(fā)揮著作用。因此，優(yōu)化視覺資產(chǎn)對于網(wǎng)站性能至關(guān)重要。

這樣做涉及兩個方面：

• 確保您為手頭的任務(wù)使用正確的圖像格式。
• 在上傳到生產(chǎn)環(huán)境之前，從您的資源中壓縮多余的字節(jié)。有一些很棒的工具可以幫助您。查看 TinyPNG 等在線工具（用于光柵圖像（PNG、JPG 等））和 Jake Archibald 的 SSVGOMG（用于 SVG 優(yōu)化）。此外，請考慮您可以本地安裝的工具，例如您最喜歡的任務(wù)運行器（Grunt、Gulp 等）。

結(jié)論

快速渲染的網(wǎng)站是決定網(wǎng)站用戶體驗的關(guān)鍵因素。在評估移動設(shè)備上的 Web 用戶體驗時，這一點變得更加重要。

在本文中，我列出了許多技術(shù)，這些技術(shù)從前端開發(fā)的角度來看，在優(yōu)化 Bootstrap 網(wǎng)站的性能方面發(fā)揮著作用。

您有哪些針對快速加載的 Bootstrap 網(wǎng)站的前端優(yōu)化技術(shù)？請在評論中告訴我！

如果您已經(jīng)掌握了 Bootstrap 的基礎(chǔ)知識，但想知道如何將您的 Bootstrap 技能提升到一個新的水平，請查看我們的《使用 Bootstrap 4 構(gòu)建您的第一個網(wǎng)站》課程，快速輕松地了解 Bootstrap 的強大功能。

關(guān)于加快 Bootstrap 網(wǎng)站速度的常見問題 (FAQ)

為什么我的 Bootstrap 網(wǎng)站可能會很慢？

您的 Bootstrap 網(wǎng)站速度慢的原因可能有很多。最常見的原因之一是使用了不必要的組件和插件。Bootstrap 帶有很多組件和插件，如果您不使用它們，最好將它們刪除。另一個原因可能是使用了大型圖像。大型圖像會大大降低網(wǎng)站速度。建議您在將圖像上傳到網(wǎng)站之前對其進行優(yōu)化。最后，不壓縮 CSS 和 JavaScript 文件也會降低網(wǎng)站速度。壓縮這些文件可以顯著提高網(wǎng)站的速度。

如何優(yōu)化我的 Bootstrap 網(wǎng)站以獲得更好的性能？

有多種方法可以優(yōu)化您的 Bootstrap 網(wǎng)站以獲得更好的性能。首先，您應(yīng)該刪除任何不必要的組件和插件。Bootstrap 帶有很多組件和插件，如果您不使用它們，最好將它們刪除。其次，您應(yīng)該在將圖像上傳到網(wǎng)站之前對其進行優(yōu)化。大型圖像會大大降低網(wǎng)站速度。第三，您應(yīng)該壓縮 CSS 和 JavaScript 文件。壓縮這些文件可以顯著提高網(wǎng)站的速度。

什么是壓縮以及它如何提高網(wǎng)站速度？

壓縮是從源代碼中刪除不必要的字符（如空格和注釋）而不改變其功能的過程。這減少了代碼的大小，進而減少了需要傳輸給用戶的數(shù)據(jù)量，從而加快了加載時間。

如何壓縮我的 CSS 和 JavaScript 文件？

有幾個可用的在線工具可以壓縮您的 CSS 和 JavaScript 文件。這些工具會從您的代碼中刪除不必要的字符，從而減小其大小并提高加載時間。一些流行的壓縮工具包括用于 JavaScript 的 UglifyJS 和用于 CSS 的 CSSNano。

如何優(yōu)化 Bootstrap 網(wǎng)站的圖像？

有多種方法可以優(yōu)化 Bootstrap 網(wǎng)站的圖像。最有效的方法之一是在將圖像上傳到網(wǎng)站之前對其進行壓縮。有幾個可用的在線工具可以壓縮您的圖像，而不會顯著降低其質(zhì)量。優(yōu)化圖像的另一種方法是使用正確的圖像格式。例如，JPEG 通常更適合照片，而 PNG 更適合具有透明背景的圖像。

有哪些特定的 Bootstrap 組件可能會降低我的網(wǎng)站速度？

是的，如果使用不當(dāng)，某些 Bootstrap 組件可能會降低網(wǎng)站速度。例如，如果您使用大型圖像，輪播組件可能會降低網(wǎng)站速度。建議您在將其用于輪播之前優(yōu)化圖像。此外，如果在每個頁面上加載模態(tài)組件，它可能會降低網(wǎng)站速度。建議僅在需要的頁面上加載模態(tài)組件。

如何刪除不必要的 Bootstrap 組件和插件？

您可以通過自定義 Bootstrap 版本來刪除不必要的 Bootstrap 組件和插件。這包括下載源文件，刪除不需要的組件和插件，然后將剩余的文件編譯成自定義版本。

使用 CDN 是否可以提高我的 Bootstrap 網(wǎng)站的速度？

是的，使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 可以顯著提高 Bootstrap 網(wǎng)站的速度。 CDN 從地理位置靠近用戶的服務(wù)器提供網(wǎng)站的靜態(tài)文件（如 CSS、JavaScript 和圖像），從而加快加載時間。

如何在我的 Bootstrap 網(wǎng)站上使用 CDN？

您可以通過在 HTML 文件中鏈接到 CDN 上的 Bootstrap 文件來使用 CDN 和您的 Bootstrap 網(wǎng)站。這包括用 CDN 上文件的 URL 替換 HTML 文件中的本地文件路徑。

加快 Bootstrap 網(wǎng)站速度還有其他技巧嗎？

是的，還有其他一些技巧可以加快 Bootstrap 網(wǎng)站的速度。例如，您應(yīng)該始終將 JavaScript 文件放在 HTML 文件的末尾。這允許在 JavaScript 文件之前加載頁面的其余部分，從而加快感知加載時間。此外，您應(yīng)該對 JavaScript 文件使用異步加載。這允許文件在后臺加載，而不會阻塞頁面的其余部分。

以上是3個提示，以加快引導(dǎo)網(wǎng)站的加速的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！