關(guān)鍵要點(diǎn)

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

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

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

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

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

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

只下載您需要的 Bootstrap 包

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

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

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

JavaScript 代碼也是如此。如果您知道項(xiàng)目中不需要下拉菜單、彈出框和工具提示，則使用 bootstrap.min.js 而不是 bootstrap.bundle.min.js，因?yàn)槟恍枰?Popper.js。

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

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

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

更好的方法是下載 Bootstrap 源代碼，因?yàn)椋?/p>

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

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

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

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

編寫(xiě)精簡(jiǎn)的 CSS 和 JavaScript 代碼

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

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

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

壓縮和合并 CSS 和 JavaScript 代碼

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

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

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

注意圖像文件大小

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

這樣做涉及兩個(gè)方面：

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

結(jié)論

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

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

您有哪些針對(duì)快速加載的 Bootstrap 網(wǎng)站的前端優(yōu)化技術(shù)？請(qǐng)?jiān)谠u(píng)論中告訴我！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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