優化網頁加載速度

1170 閱讀 0 評論 3 點贊

網站速度的重要性不言而喻，除了使用常規的緩存插件方法外，今天想從技術角度聊聊優化網頁加載速度的問題。

提示一下，文章會涉及到前端代碼等技術相關的內容，有點晦澀，對此不感冒的可以直接退出了。

都知道，HTML 代碼中的 <head> 標簽區域內通常會放一堆腳本、樣式，以及 Meta 相關的內容。但是我發現很多插件，或者說比較多的網站站長并不會注意這些元素的排列順序。

所以不得不提醒大家的是，錯誤的排列順序會直接影響網站的加載速度和網頁渲染效率。至于具體的技術原理，推薦大家看看下面的這個視頻，我便不展開敘述了。

在視頻中，作者有推薦代碼片段的最佳排序順序，我簡單總結一下各個腳本的用處及特點，借花獻佛。

首先放置 preconnect 類型標簽，用于告訴瀏覽器在請求之前預連接到指定的資源服務器，這么做有助于減少建立連接的延遲，從而提高頁面加載性能。

例如字體服務器、CDN 服務器或其他托管第三方資源的服務器。這樣，當瀏覽器真正需要請求這些資源時，客戶端與服務端已經建立好連接，從而減少了鏈接往返的時間。

接著便是 script-async 標簽了，這種標簽的主要作用就是指定腳本的異步加載方式。當腳本使用?async?屬性時，它將在加載時不會阻塞 HTML 解析，并且在加載完成后立即執行，而不考慮頁面中其他內容的加載狀態。

然后是 css-contains-@ import 標簽了。在 CSS 中，@import是一種用于導入外部樣式表的規則。它允許將一個 CSS 文件嵌套在另一個 CSS 文件中，從而可以將多個樣式文件組織在一起，便于管理和維護。但是現在這種規則很少用了，大多是使用 <link> 標簽進行替代了。

緊接著就是 sync-js 與 sync-css 標簽了，作用就是用于控制 JavaScript 腳本或者 CSS 腳本的加載和執行方式。

接下來就是 preload 腳本，其主要的作用就是在頁面加載時預加載資源（如腳本、樣式表、字體等）。它可以在瀏覽器空閑時提前加載這些資源，以優化頁面性能，提高用戶體驗。

preload 腳本之后的便是 script-defer 腳本了，其實這是 HTML 中?<script> 標簽的一個屬性，用于控制腳本的延遲加載方式。通過使用?defer?屬性，可以讓腳本在 HTML 解析完成后再執行，而不會阻塞頁面的加載。

最后便是 prefetch 與 prerender 相關的腳本了，這兩個都是 HTML 中的?<link> 標簽的屬性，用于優化資源預加載以提高頁面性能。它們可以在瀏覽器空閑時預先加載資源，以便在未來需要時可以立即使用。

對了，像我們平時安裝的 Google Analytics 監控代碼、SEO 相關的腳本代碼，是不宜直接放在頁面頂部的。一般我的做法便是放在最后，等頁面網頁加載與頁面渲染全部做完之后，再來執行監控相關代碼。

但是谷歌等平臺一般建議，都是讓你直接放在頁面頂部。所以從這個角度出發，不要老是聽谷歌的建議。