如何優化 JavaScript 執行並提高您的網站速度
已發表: 2022-06-07在技術 SEO 領域，Core Web Vitals 可能是最難改進的指標之一，尤其是當您的網站使用大量 JavaScript 時。
JavaScript 在整個網絡中用於創建交互式和動態內容，據估計，高達 97% 的所有網站都以某種形式使用 JavaScript。 問題是——JavaScript 的加載可能會佔用大量資源，從而增加了首次內容繪製 (FCP)、最大內容繪製 (LCP) 和總阻塞時間 (TBT)。
在本教程結束時，您將能夠確定哪些 JavaScript 文件對加載時間有重大影響，以及如何優化它們的執行是提高性能和安撫 Core Web Vitals 報告的最有效方法之一。
簡要介紹 JavaScript 及其對加載時間的影響
JavaScript 是一種通用的編程語言，可用於各種不同的應用程序，因為它是 Web 瀏覽器的原生語言，JavaScript 最廣為人知的是一種基於 Web 的語言，可以被 Web 瀏覽器自然理解。
開發人員通常使用 JavaScript 創建複雜的基於 Web 的遊戲和應用程序以及動態的交互式網站。 由於其多功能性，JavaScript 已成為世界上最流行的編程語言。
在 JavaScript 之前，網站只能使用靜態 HTML 和 CSS 構建，這意味著它們不能是動態的。 現在，互聯網上幾乎每個網站都是使用至少一些 JavaScript 元素創建的，以提供動態內容，例如：
- 下拉“漢堡”菜單，顯示或隱藏某些信息
- 輪播元素和水平滾動
- 鼠標懸停和懸停效果
- 在網頁上播放視頻和音頻
- 創建動畫、視差元素等
JavaScript對SEO有什麼影響
嚴重依賴 JavaScript 會使搜索引擎更難閱讀和理解您的頁面。 儘管近年來最流行的搜索引擎在索引 JavaScript 方面做出了巨大的改進，但它們是否可以完全渲染 JS 仍不清楚。
要了解 JS 如何影響 SEO，重要的是要了解 Googlebot 在抓取網頁時會做什麼。 它需要的3個步驟是； 抓取、渲染和索引。
首先，Googlebot 在隊列中有一個 URL 列表。 它一一抓取這些頁面，然後爬蟲向服務器發出 GET 請求，服務器發送 HTML 文檔。
接下來，Google 會確定渲染頁面內容需要哪些資源，通常這只需要抓取靜態 HTML，而不需要任何鏈接的 CSS 或 JS。 這有助於減少 Google 需要的資源數量，因為有數百萬億個網頁！
由於需要大量的計算能力，以這種規模渲染 JavaScript 的成本可能很高。 這就是為什麼 Google 將在稍後由 Google Web Rendering Services 處理 JavaScript 時才呈現 JavaScript 的確切原因。
最後，在至少部分 JS 被渲染之後，頁面就可以被索引了。
Googlebot 抓取過程
JavaScript 會影響鏈接的可抓取性，在其指南中，Google 建議使用 HTML 錨鏈接和描述性錨文本鏈接頁面。 儘管如此，研究表明 Googlebot 能夠抓取 JavaScript 鏈接。 但是，堅持使用 HTML 鏈接絕對是最佳實踐。
許多技術 SEO 認為最好的做法是謹慎使用 JavaScript，並且不要使用 JS 注入書面內容、圖像或鏈接，因為有可能不會被抓取，或者至少不會經常被抓取，因為如果頁面已經在其中谷歌的索引很有可能，它會比一個全新的頁面更頻繁地呈現它的 JavaScript。
如何檢查您網站上的 JS 加載時間
要檢查 JavaScript 對加載時間的影響，您可以啟動 PageSpeed Insights 以獲得頂級視圖。
但是，要確定細節以及哪些元素對加載時間有直接影響，您需要使用瀑布圖，例如 Google Dev Tools 上的網絡報告。
Google 開發工具網絡報告
您可以通過單擊“JS”過濾器按鈕過濾報告以僅顯示 JavaScript，生成的圖表清楚地表明哪些文件在您的網站上加載時間最長。
從這裡，您知道需要查看哪些元素，並且根據腳本的目的，無論是第一方/第三方還是首屏，您都可以採取正確的措施來優化 JS 並加快其性能。
改善 JavaScript 加載時間的不同方法
如果您曾經通過 Google 的 PageSpeed Insights 運行過一個網站，那麼您很可能已經看到了至少一個關於 JavaScript 的推薦。
根據您的網站對 JavaScript 的依賴程度，您可以通過在瀏覽器中禁用它並查看您的網站看起來有多麼不同來進行檢查。 如果您注意到很多 JavaScript（例如內容和圖像）是動態提供的，並且在 JS 被禁用時不再可見，那麼您應該考慮使用 HTML 和 CSS 提供這些內容。
需要考慮多種因素，因為搜索引擎在抓取網站時並不總是呈現 JavaScript，因此很可能，您的很多內容可能不會經常被抓取，因此您會看到內容的索引速度較慢。
話雖如此，每個網站都需要至少使用一些 JS 元素，並且有多種方法可以加快其加載時間。
[案例研究] 優化鏈接以改善具有最大投資回報率的頁面
閱讀案例研究延遲 JavaScript
defer 值可以添加到 JS 腳本中，以便在文檔被解析後執行，但是，這僅適用於外部腳本，當 src 屬性在 <script> 標記中指示時。
這向 Web 瀏覽器聲明該腳本不會創建內容，因此它可以解析頁面的其餘部分。 這意味著當使用 defer 屬性時，JS 文件不會對頁面的其餘部分造成渲染阻塞。
如果使用延遲 JavaScript，它會告訴瀏覽器不要等待腳本加載。 這意味著可能需要一段時間才能加載的外部腳本只有在預先加載整個文檔後才會被處理。 這允許繼續處理 HTML 而無需等待 JS，從而提高頁面的性能。
defer 屬性只能用於外部腳本，不能應用於內聯代碼，這是因為 defer 屬性類似於異步過程，因此即使第一個任務沒有完成，Web 瀏覽器也可以移動到另一個任務。
縮小 JavaScript
JS 代碼的最小化是在不影響其功能的情況下從代碼中刪除不必要的字符的過程。 這涉及刪除所有註釋、分號和空格，以及為函數和變量使用較短的名稱。
縮小 JavaScript 會導致文件更緊湊，從而提高加載速度。
但是，任何代碼（包括 JavaScript）的縮小都可能導致複雜的腳本被破壞。 這是由於站點範圍或公共變量可能導致難以解決的錯誤。 在測試 JS 縮小時，在暫存環境中進行徹底測試以檢查和修復出現的任何問題至關重要。
刪除未使用的 JavaScript
兩種主要類型的未使用 JavaScript 會導致您的網站出現渲染阻塞； 非關鍵 JS 和死 JS。
非關鍵 JavaScript 是指首屏內容不需要但在頁面其他地方使用的元素，例如頁面內容底部的嵌入地圖。
死 JavaScript 是指頁面上不再使用的代碼。 這些可能是網站過去版本的元素。
您可以使用瀑布圖（例如開發工具上的覆蓋率選項卡）確定網站上未使用的 JavaScript 加載的位置。 這將允許您注意哪些文件導致了渲染阻塞，如果它們不需要並且可以從您的網站中刪除。
延遲 JavaScript 執行
改善加載時間的最簡單、最有效的方法之一是使用 JavaScript 延遲功能。
使用此功能，您可以阻止 JavaScript 加載，直到用戶與您的頁面交互，這可能是滾動或單擊。 一旦用戶進行了交互，所有的 JS 都會內聯加載。
延遲 JS 執行是改善 Core Web Vitals 的好方法，例如 LCP、FCP 和 TBT。 但是，只有在交互時加載 JavaScript 時不會導致頁面佈局發生變化的情況下才應該使用它，因為這可能會導致佈局變化和糟糕的用戶體驗。
跟踪 JavaScript
減少 JavaScript 加載時間的最好方法就是盡量少用！
某些第三方元素（例如視覺跟踪軟件）可能會顯著增加加載時間，如果不再需要該數據，請刪除跟踪代碼！
當您或開發人員對網站進行重大設計更改（例如交互式地圖）時，它將為您節省無數時間來預先考慮加載時間，並在網站上實施之前盡可能快地加載元素。
要密切關注 Googlebot 在您的網站上抓取 JavaScript 的次數，您可以導航到 Google Search Console 中的抓取統計報告，其中將顯示抓取請求的數量、總下載大小和平均響應時間。
該報告非常有用，特別是如果您一直在優化 JS 以查看它對 Googlebot 的實際影響。
JS 抓取請求
關鍵要點
- 如果您的網站上不需要某個 JS 文件，請刪除它！
- 如果可以的話，盡量推遲第三方 JS。
- 在不破壞功能的情況下縮小和延遲第一方 JS 的執行。
- 首先在臨時站點上測試所有內容！
通過了解 JavaScript 對加載時間的影響，您可以（希望）在不破壞網站的情況下解決它。 重要的是要記住用戶體驗是第一位的，如果您通過刪除某個 JS 文件來破壞網站的轉換率，只是為了將加載時間增加 0.2 秒，那麼您需要評估它所產生的更廣泛的影響。
但是走出去，使用一個臨時站點，看看你能做些什麼來讓那些討厭的 JS 文件加載得更快！