3個提示，以加快引導網站的加速

關鍵要點

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

網站優化是一組服務器端和客戶端技術，旨在加快網站在瀏覽器中的加載和渲染速度，從而提升用戶體驗。

如今，訪問者已經習慣了原生應用的即時性和響應速度。他們期望網頁在 1000 毫秒內加載完成。如果加載時間長得多，他們很可能會離開網站。

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

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

在本文中，我將介紹三個前端優化步驟，您可以採取這些步驟來確保您的基於 Bootstrap 的網站快速渲染且經過良好優化。

只下載您需要的 Bootstrap 包

如果您決定使用 Bootstrap 的預編譯下載包，您確實應該認真考慮一下您真正需要哪些部分。

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

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

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

選擇源代碼而不是預編譯的下載包

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

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

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

• 您將能夠準確地包含項目中所需的組件
• 自定義庫的任何部分都變得更簡潔、更高效，無需反复覆蓋樣式
• 最終用於生產環境的樣式表通常更精簡。

使用經過驗證的客戶端優化技術

除了上述幾點之外，針對性能對基於 Bootstrap 的網站進行優化仍然必須像其他任何網站一樣包含前端性能技術。

以下是您可以注意到的有效前端網站優化的關鍵因素：

編寫精簡的 CSS 和 JavaScript 代碼

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

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

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

壓縮和合併 CSS 和 JavaScript 代碼

一個重要的優化步驟是限製網站必須執行的 HTTP 請求數量才能呈現其內容。每次往返服務器以獲取資源都需要時間，從而對用戶體驗產生負面影響。

壓縮（即從文檔中刪除註釋和空格）和合併 CSS 和 JavaScript 文件現在已經成為一種鞏固的實踐，旨在保持文件大小較小並減少 HTTP 請求的數量。

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

注意圖像文件大小

網頁中最重的部分通常是由圖像文件表示的，但音頻和視頻文件也發揮著作用。因此，優化視覺資產對於網站性能至關重要。

這樣做涉及兩個方面：

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

結論

快速渲染的網站是決定網站用戶體驗的關鍵因素。在評估移動設備上的 Web 用戶體驗時，這一點變得更加重要。

在本文中，我列出了許多技術，這些技術從前端開發的角度來看，在優化 Bootstrap 網站的性能方面發揮著作用。

您有哪些針對快速加載的 Bootstrap 網站的前端優化技術？請在評論中告訴我！

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

關於加快 Bootstrap 網站速度的常見問題 (FAQ)

為什麼我的 Bootstrap 網站可能會很慢？

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

如何優化我的 Bootstrap 網站以獲得更好的性能？

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

什麼是壓縮以及它如何提高網站速度？

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

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

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

如何優化 Bootstrap 網站的圖像？

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

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

是的，如果使用不當，某些 Bootstrap 組件可能會降低網站速度。例如，如果您使用大型圖像，輪播組件可能會降低網站速度。建議您在將其用於輪播之前優化圖像。此外，如果在每個頁面上加載模態組件，它可能會降低網站速度。建議僅在需要的頁面上加載模態組件。

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

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

使用 CDN 是否可以提高我的 Bootstrap 網站的速度？

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

如何在我的 Bootstrap 網站上使用 CDN？

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

加快 Bootstrap 網站速度還有其他技巧嗎？

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

以上是3個提示，以加快引導網站的加速的詳細內容。更多資訊請關注PHP中文網其他相關文章！