迭代地修復慢速站點

站點性能可能是最重要的指標。性能越好，用戶留在頁面上，閱讀內容，進行購買或幾乎需要做的任何事情就越好。 Akamai 2017年的一項研究說，當發現即使延遲100毫秒的頁面負載也可以將轉換率降低7％，並且每100ms的銷售額損失1％，而他們的網站加載所需的加載，而在研究時，如果該網站減慢了一秒，則該網站的加載量也相當於16億美元。 Google的行業基準從2018年開始，還提供了令人驚訝的細分，即每一秒的負載如何影響跳出率。

另一方面，Firefox平均使他們的網頁負載平均2.2秒，並且每年驅動6000萬個Firefox下載。在將您的網站放置在移動設備上時，速度也是Google考慮的事情。慢速站點可能會讓您進入搜索結果的第452頁，無論其他指標如何。

考慮到所有這些，我認為提高自己版本的慢速站點的速度將是一個有趣的練習。該網站的代碼可在GitHub上獲得參考。

這是一個非常基本的網站，由簡單的HTML，CSS和JavaScript製成。我故意試圖使其盡可能簡單，這意味著它慢的原因與網站本身的複雜性無關，或者是因為它使用的某些框架。關於最複雜的部分是一些社交媒體按鈕，供人們共享頁面。

這就是事實：性能不僅僅是一次性任務。它固有地與我們建立和開發的一切聯繫在一起。因此，雖然很容易解決所有問題，但提高性能的最佳方法可能是一種迭代性的方法。確定是否有較低的水果，並弄清楚可能會更大或長期的努力。換句話說，增量改進是得分績效獲勝的好方法。同樣，每毫秒都很重要。

本著這種精神，我們在本文中所關注的內容更多地集中在增量勝利上，而不是提供詳盡的績效策略清單或清單。

燈塔

我們將與燈塔合作。你們中的許多人可能已經對此非常熟悉。它甚至在CSS漫步上都被覆蓋了一堆。這是一項Google服務，可以審核事物的性能，可訪問性，SEO和最佳實踐。我將在本文中解決問題之前和之後審核我慢速站點的性能。燈塔報告可以直接在Chrome的Devtools中訪問。

繼續前進，簡要查看燈塔所說的內容在網站上是錯誤的。很高興知道在直接潛水之前需要解決什麼。

我們可以完全解決這個問題，所以讓我們開始吧！

改進＃1：重定向

在我們做其他事情之前，讓我們看看當我們第一次上網站時會發生什麼。它被重定向。該網站曾​​經在一個URL上，現在它住在另一個URL。這意味著引用舊URL的任何鏈接都將重定向到新URL。

就其添加到網站的延遲而言，重定向通常很輕，但是它們是首先要檢查的一件事，而且通常很少會努力將其刪除。

我們可以嘗試通過更新網站的先前URL來更新來刪除它們，並將其指向更新的URL，以便將用戶直接帶到那里而不是重定向。使用網絡請求Inspector，我將查看是否可以通過DevTool中的網絡面板刪除任何內容。如果需要，我們也可以使用工具，例如Postman，但是為了簡單起見，我們將盡可能地將工作限制為Devtools。

首先，讓我們看看是否有任何HTTP或HTML重定向。我喜歡使用提琴手，當我檢查網絡請求時，我發現確實有一些舊的URL和重定向浮動。

我最近將我的github從Anonrobot重命名為Kealanparr ，所以除了域名外，所有內容都是相同的。

看來我們點擊的第一個請求是https://anonrobot.github.io/redirect-to-slow-site/ html將其重定向到https://anonrobot.github.io/slow-site/。我們可以將所有重定向到較低點的URL重點放在更新的URL上。在DevTools中，網絡檢查員可以幫助我們查看第一個網頁也在做什麼。從我在提琴手中的看來，它看起來像這樣：

這告訴我們該站點將使用HTML重定向到下一個站點。我將將引用的URL更新為新站點，以幫助減少延遲，從而為初始頁面加載增加拖動。

改進＃2：關鍵的渲染路徑

接下來，我將使用DevTools中的Performance面板來介紹SIT。我最感興趣的是，盡可能快地解開網站的渲染內容。這是將HTML，CSS和JavaScript變成完全充實的交互式網站的過程。

它首先從服務器檢索HTML並將其轉換為文檔對像模型（DOM）。我們會看到任何內聯JavaScript，或者下載它是外部資產，因為我們逐行解析HTML。我們還將將CSS構建到CSS對像模型（CSSOM）中。 CSSOM和DOM結合以製造渲染樹。從那裡開始，我們運行的佈局將所有內容都放在屏幕上，然後再運行油漆。

如果必須在運行之前等待資源加載，則可以“阻止”此過程。這就是我們所說的關鍵渲染路徑，而阻止路徑的事物是關鍵資源。

最常見的關鍵資源是：

• 中的<script>標籤，不包含異步，延期或模塊屬性。</script>
• 沒有禁用屬性可以告知瀏覽器下載CSS並且沒有與用戶設備匹配的媒體屬性。

還有更多類型的資源可能會阻止關鍵渲染路徑，例如字體，但是上面的兩個是迄今為止最常見的。這些資源塊渲染是因為瀏覽器認為該頁面“未完成”，並且不知道它需要或擁有什麼資源。對於所有瀏覽器都知道，該網站可以下載一些期望瀏覽器做更多工作的東西，例如樣式或顏色更改；因此，該站點對瀏覽器不完整，因此它假定最差並阻止渲染。

無法阻止渲染的示例CSS文件是：

 <link href="%E2%80%9C" printing.css rel="“" stylesheet print>

當用戶打印網頁時，“媒體=” print'屬性僅下載樣式表（因為也許您想在打印中樣式不同），這意味著該文件本身並沒有阻止任何內容。

正如克里斯喜歡說的那樣，前端開發人員知道。並且在渲染開始之前要了解頁面需要下載的內容對於提高性能審核分數至關重要。

改進＃3：解析解析

阻止渲染路徑是我們可以立即加快速度的一件事，如果我們不小心的JavaScript，我們也可以阻止解析。解析是使HTML元素一部分的部分原因，每當我們遇到需要運行的JavaScript時，我們都會阻止HTML解析的發生。

我慢網頁中的一些JavaScript不需要阻止解析。換句話說，我們可以異步下載腳本，並繼續將HTML解析到DOM中。

標籤是允許瀏覽器異步下載JavaScript資產的原因。頁面構造完成後，標籤僅運行JavaScript。

在此之間，在內置JavaScript（因此運行它不需要網絡請求）與將其放入其自己的JavaScript文件（用於模塊化和代碼恢復）之間有折衷。隨意在這裡做出自己的判斷，因為最好的路線將取決於用例。將CSS和JavaScript應用於網頁的實際性能將是相同的，無論是外部資產還是歸咎於該網頁。當我們內聯時，我們唯一要刪除的是網絡要求獲得外部資產的時間（有時會產生很大的不同）。

我們的目標是盡我們所能。我們想推遲裝載資產，並同時使這些資產盡可能小。所有這些都將轉化為更好的性能結果。

我的慢網站是鏈接多個關鍵請求，瀏覽器必須讀取下一行HTML，等待，然後閱讀下一條以檢查另一個資產，然後等待。資產的大小，下載時，以及它們是否阻止它們都將大量播放我們的網頁可以加載的速度。

我通過對DevTools Performance面板中的站點進行分析來解決此問題，該站點只是記錄了網站隨時間的加載方式。我簡要掃描了我的HTML及其下載的內容，然後將添加到任何阻止事物的外部JavaScript腳本（例如社交媒體<script>），在渲染之前無需加載）。</script>

有趣的是，Chrome具有一個瀏覽器限制，它只能處理每個域名的六個機上HTTP連接，並且將等待資產返回，然後一旦這六個是在線飛行，請要求另一個。這使得要求HTML解析的多個關鍵資產更糟。允許瀏覽器繼續解析將加快向用戶展示某些東西並改善我們的性能審核所需的時間。

改進＃4：減少有效載荷尺寸

站點的總尺寸是其加載速度的巨大決定因素。根據Web.dev的說法，網站的目標應在10秒鐘內以低於1,600 kb的交互式。大的有效載荷與長時間的負載密切相關。您甚至可以將大的有效載荷視為最終用戶的費用，因為大量下載可能需要較大的數據計劃，而花費更多的錢。

在這個確切的時間點，我的慢速站點是9,701 kb的高度，是理想尺寸的六倍以上。讓我們修剪一下。

識別未使用的依賴性

在開發開始時，我認為我可能需要某些資產或框架。我將它們下載到我的頁面上，現在甚至不記得實際使用了哪些。我肯定有一些資產，除了浪費時間和空間外，什麼也沒做。

使用DevTools中的網絡檢查員（或您感到舒適的工具），我們可以看到一些可以從網站上刪除的東西而不會改變其基本行為。我在DevTools的覆蓋面板中發現了很多價值，因為它將顯示出下載所有內容後正在使用多少代碼。

正如我們已經討論過的那樣，在與外部資產相比，與CSS和JavaScript相比，總是有一個很好的平衡。但是，在這一刻，似乎該網站的下載遠遠超過了真正的需求。

減少修剪物品的另一種快速方法是找到該網站是否試圖加載404的任何資產。這些請求絕對可以被刪除，而不會對網站產生任何負面影響，因為它們無論如何都沒有加載。這是提琴手向我展示的東西：

再次查看覆蓋範圍的報告，我們知道有些東西已下載，但仍有大量未使用的代碼仍然進入頁面。換句話說，這些資產正在做某事，但也準備好做我們甚至不需要它們做的事情。其中包括React，jQuery和Vue，因此可以從我的慢速站點中刪除，而沒有真正的影響。

為什麼這麼多JavaScript庫？好吧，我們知道有一些現實生活中的場景，因為它符合我們的要求，因此我們可以追求某件事。但是隨後這些要求發生了變化，我們需要達到其他東西。同樣，我們必須意識到作為前端開發人員，並不斷關注與網站相關的資源是整體意識的一部分。

壓縮，縮小和緩存資產

僅僅因為我們需要提供資產，並不意味著我們必須將其作為其全尺寸，甚至在下一次用戶訪問網站時重新提供資產。我們可以壓縮我們的資產，縮小樣式和腳本，並負責任地緩存，以便我們以最有效的方式為用戶提供所需的服務。

• 壓縮意味著我們將文件（例如圖像）優化至其最小的文件，而不會影響其視覺質量。例如，GZIP是一種使資產較小的常見壓縮算法。
• 為了在電線上發送較少的字節，縮短通過從代碼中刪除Cruft（例如評論和Whitespace）來改善基於文本的資產的規模，例如外部腳本文件。
• 緩存使我們能夠將資產存儲在瀏覽器的內存中一段時間​​，以便在後續頁面加載下立即為用戶使用。因此，加載一次，享受很多次。

讓我們看一下三種不同類型的資產，以及如何使用這些策略來解決它們。

基於文本的資產

其中包括文本文件，例如HTML，CSS和JavaScript。我們希望盡一切力量盡可能輕巧，以便盡可能地壓縮，縮小和緩存它們。

在很高的水平上，GZIP通過在內容中找到常見的重複零件來工作，將這些序列存儲一次，然後將它們從源文本中刪除。它可以保留一個字典的查找，以便可以快速引用保存的碎片並將其放回原處的位置，以稱為砲彈的過程。查看此示例包含詩歌的文件。

我們這樣做是為了使任何基於文本的下載盡可能小。我們已經在利用GZIP。我使用Gidnetwork使用此工具進行了檢查。它表明緩慢站點的內容被壓縮了59.9％。這可能意味著有更多機會使事情變得更小。

我決定將多個CSS文件合併到一個名為styles.css的單個文件中。這樣，我們將限制需要網絡請求的數量。此外，如果我們打開三個文件，每個文件都包含瞭如此少量的CSS，以至於三個網絡請求簡直是不合理的。

而且，在執行此操作時，它使我有機會刪除未在DOM中應用的不必要的CSS選擇器，再次減少了發送給用戶的字節數。

伊利亞·格里戈里克（Ilya Grigorik）撰寫了一篇出色的文章，其中包含壓縮基於文本的資產的策略。

圖像

我們還能夠優化慢速站點上的圖像。如報告始終顯示的那樣，圖像是最常見的資產請求。實際上，從2016年到2021年，台式機的中位數據傳輸為948.1 kb，移動設備的902 kb為902 kb。整個頁面負載的理想1,600kb尺寸的一半以上。

我的慢網站沒有提供那麼多的圖像，但是所使用的圖像可能會更小。我通過一個名為Squoosh的在線工具運行了圖像，並節省了40％（18.6 KB至11.2 KB）。那是勝利！當然，這是您可以在使用桌面應用程序（例如ImageOptim，甚至是作為構建過程的一部分）上傳之前要做的事情。

我看不到原始圖像和優化版本之間的視覺差異（這很棒！），甚至能夠通過調整實際文件，降低圖像質量，甚至更改調色板來進一步減小大小。但是這些就是我在圖像編輯軟件中所做的事情。理想情況下，這是您或設計師最初製作資產時會做的。

快取

我們已經談到了縮小和壓縮，以及我們可以嘗試利用這些方法來發揮自己的優勢。我們可以檢查的最後一件事是緩存。

我一直在一遍又一遍地要求慢速站點，到目前為止，我可以看到它總是每次都需要新鮮的要求，而無需任何緩存。我瀏覽了HTML，看到緩存在這裡禁用：

 <meta http-equiv="“" cache-control content="“" no-cache>

我刪除了該線路，因此現在應該能夠進行瀏覽器緩存，從而使內容更快地服務。

改進＃5：使用CDN

我們可以在任何網站上都可以從內容交付網絡（CDN）中獲得的另一個重大改進。大衛·阿塔德（David Attard）對如何添加和利用CDN有一個超級詳盡的作品。傳遞內容的傳統途徑是擊中服務器，請求數據並等待它返回。但是，如果用戶正在從世界的另一端向您的數據提供數據，那麼會增加時間。即使其他一切都快速閃電，使服務器在服務器的響應中進一步傳播也可能會增加速度的巨大損失。

CDN是世界各地的一組分佈式服務器，它們能夠智能地將內容智能地交付到用戶，因為它具有多個位置，因此可以選擇它。

我們之前討論了當用戶實際上沒有使用下載的代碼時，我如何使用戶下載jQuery，然後將其刪除。如果我確實確實需要jQuery，則在這裡簡單的解決方案是從CDN請求資產。為什麼？

• 用戶可能已經從訪問另一個站點下載了資產，因此我們可以為CDN提供緩存的響應。畢竟，在前一百萬個網站中，有75.49％的網站仍在使用jQuery。在2020年，瀏覽器（Safari，Chrome）開始進行“緩存分區”，這意味著資產不會在不同站點之間緩存，因此可以刪除這種潛在的好處。該文件仍將緩存每個網站。
• 它不必遠離請求數據的用戶。

我們可以做一些簡單的事情，例如從Google的CDN中獲取jQuery，他們可以在自己的網站中參考任何人：

 
  <script src="%E2%80%9C" https:> </script>

肯定的是，這比我的服務器的標準請求要快得多。

事情更好嗎？

如果您到目前為止與我一起實施，或者只是閱讀，那麼該是重新提出的，看看到目前為止我們所做的工作是否有任何改進。

回想一下我們開始的地方：

改變之後：

我希望這是一個有益的樂趣，並鼓勵您在自己的網站上搜索增量性能勝利。通過最佳要求資產，將一些資產從加載中推遲，並降低站點大小的整體大小將盡快在用戶面前獲得功能性，完全交互的站點。

想保持對話嗎？如果您想查看更多或連接，我在Twitter上分享我的寫作。

以上是迭代地修復慢速站點的詳細內容。更多資訊請關注PHP中文網其他相關文章！