英文 | https://javascript.plainenglish.io/how-to-improve-your-websites-page-load-speed-8fa81caf3ed2
翻譯 | 小愛
如果你曾經遇到過網站加載緩慢的問題，那麼，你今天需要來了解一下頁面速度如何影響使用者體驗。沒有人願意等待10秒鐘甚至更長的時間來通路他們正在尋找的資訊或者網頁。
快速加載的頁面具有更好的使用者留存率和更低的跳出率，并且更快地赢得了使用者的信任。
無論你的設計或内容有多強，如果你的網站加載速度過慢，使用者都不會在你的網站上投入更多時間。
有資料研究發現，延遲一秒鐘的電子商務網站，“頁面浏覽量将減少11％，客戶滿意度下降16％，轉化次數減少7％”。
是以，網站的使用者體驗非常重要，Google會積極跟蹤負載速度訓示器，例如大内容塗料（LCP），首次輸入延遲（FID）和累積布局偏移（CLS）。必須在三個因素上取得良好的成績。你可以通過Google Search Console中的核心網絡生命力報告來衡量網站的效果。
3種測量頁面速度的工具
你必須先了解自己的效果如何，才能優化網站速度。你可以使用三種簡單的工具來完成這項工作：
1、Google Search Console
盡管從技術上講它不能衡量站點速度，但是，你可以使用新的核心網絡生命力報告來查找需要解決的加載問題。Google Search Console将為你的整體網站評分，并為你提供需要優化的URL清單。
2、PageSpeed
由Google開發的PageSpeed Insights是一個站點速度測試儀，能夠識别潛在的負載速度問題。輸入要檢查的URL即可，該工具将對你的站點進行爬網并建立完整的報告。
該工具将生成“桌面和移動”得分，以及一些優化頁面的建議。這是我們的目标：
這是我們需要避免的事情：
3、GTmetrix
如果你需要更進階的功能，或者要在特定位置測試頁面速度，GTmetrix是一個有用的工具。
它将測試來自不同位置的網站的頁面加載速度，是以，你可以專注于在目标地理位置内增加網站的使用者體驗。進階設定工具非常有用。你可以設定位置，裝置，螢幕分辨率等，以執行更準确的資訊。
改善網站頁面加載速度的8個步驟
在不了解基礎知識的情況下，讓我們探索提高站點加載速度的八種方法：
1、優化圖像
在談論針對站點速度的圖像優化時，我們指的是三件事：
圖像檔案大小
圖像是添加上下文，解釋複雜主題或隻是在内容塊之間提供喘息空間的好方法。但是，沉重的圖像會減慢你的頁面加載速度。
你應該将檔案的大小盡可能地縮小。大圖像的好标記是每幅圖像150kb至500kb。畢竟，你可能會有幾張圖像，它們都會對你頁面的整體大小有所幫助。
如果你需要壓縮它們，TinyPNG是一個很好的免費工具，可以開始使用。隻需從伺服器下載下傳圖像，對其進行壓縮，然後重新加載。
提示：借此機會優化其名稱，alt屬性和格式。
檔案格式
建立内容時使用PNG圖像并不少見。畢竟，它們更易于處理。
問題是這些是較重的圖像類型，導緻加載速度較慢。在不對圖像擴充進行全面讨論的情況下，我們建議使用JPG。這些已成為網絡上圖像的标準格式。它們不會丢失圖像資料資訊，損失圖檔品質，并且圖像檔案很小。
注意：WebP是一種備受關注的半新格式。這種格式非常輕巧，比JPG輕33％。不利之處是該格式仍與某些浏覽器存在相容性問題。
圖檔尺寸
是的。你的圖像分辨率很重要。但是，除非它覆寫了使用者的所有螢幕空間，否則你實際上并不需要4000 x 4000像素的圖像。
確定上傳的圖像在縮放時不會失去品質。即，文章上最常見的是800 x 1200的圖像。
此外，你必須在image标簽内直接聲明圖像的尺寸。浏覽器将計算圖像在加載之前需要“儲存”的空間，進而減少頁面的CLS（累積布局偏移）。
你可以添加width和height屬性。例如：
<！—設定640：360，即16：9的長寬比→
<img src =“ puppy.jpg” width=“ 640” height=“ 360” alt =“帶氣球的小狗” />
2、縮小CSS和JavaScript
最小化CSS和JavaScript檔案旨在減少浏覽器加載顯示網站所需的每個元素所花費的時間。
由于機器對樣式選擇不敏感，是以我們可以通過删除空格，删除注釋，使用較短的名稱，以及基本上除去我們的機器運作它，所不需要的任何代碼來建立較小尺寸的檔案。
當然，你不想縮減正在使用的實際代碼，因為它将變得幾乎無法閱讀。
你想建立檔案的縮小版本，然後在你的實時項目中實作它們。為此，我們建議使用兩個簡單的工具：
- https://cssminifier.com/
- https://javascript-minifier.com/
這些簡單易用的工具隻需要你在“輸入”框中添加代碼，然後單擊“縮小”即可将代碼轉換為可複制并粘貼到項目上的縮小版本。
提示：除了縮小檔案之外，你還可以啟用Gzip壓縮以進一步減小檔案大小。
3、當心第三方腳本
如果你使用的是Google Analytics（分析）之類的工具，那麼你已經在使用第三方腳本。
這些腳本對于将新功能添加到你的站點非常有幫助。但是，它們仍然是需要在用戶端渲染或讀取的代碼片段，進而增加了頁面速度的加載時間。確定要添加的代碼經過優化且必不可少。删除所有未使用的東西。
4、使用VPS托管服務
你的托管服務提供商使用的伺服器對于你的站點速度至關重要。如果機器對使用者請求的響應速度很慢，則無論使用者的網際網路連接配接速度有多快，浏覽器都會緩慢接收資訊。
另一個因素是你使用的計劃。通常是共享計劃是廉價的，因為托管服務提供商會為多個用戶端租用同一台伺服器，這對于流量低的站點來說綽綽有餘。
但是，如果你确實需要提高站點速度，則需要從伺服器通路更多資源。更重要的是，你将需要站點可通路的資源數量保持一緻。
首先，我想到的是專用伺服器。你基本上是在為自己租用整個伺服器。但這可能會很昂貴，而且對于大多數用例而言，它遠遠超出了你的需求。
本質上，托管服務提供商在伺服器的作業系統上建立一個層，使你可以完全控制虛拟機的資源，并将其與其他使用者分開。這樣可以防止其他站點從你的資源中擷取資源，并允許你以所需的方式自定義伺服器。
5、使用内容傳送網絡（CDN）
就像我們在上面指出的那樣，你的托管隻不過是一台存儲你網站資料并在浏覽器送出請求後就通過Internet傳遞資料的機器。
對于你的網站速度而言，意味着你的托管距離使用者越遠，傳遞資料所需的時間就越多。這就是CDN或内容傳遞網絡發揮作用的地方。
簡而言之，CDN是一個遍布全球的伺服器網絡，可将你的站點資産（例如圖像，HTML檔案，JSON檔案等）從最近的伺服器傳遞給最終使用者。
你可以在其中找到一些選擇，但是如果你急于趕快，建議你探索Cloudflare。
如果你不使用内容傳送網絡，則它可能是你獲得的最快捷徑。
6、推遲JavaScript加載
當你的網站加載時，浏覽器會下載下傳你的網站所需的所有檔案，包括JavaScript檔案。
但是，你的主要重點是向使用者提供他們想要在頁面上看到的資訊。這就是為什麼推遲JavaScript對縮短頁面加載時間如此有用的原因。
簡而言之，延遲檔案可防止在加載其他（更重要的）元素之前将其加載。你可以先加載HTML和CSS，以便使用者可以更快地通路内容，然後才加載腳本，以添加你為頁面設想的額外功能。
你可以使用defer屬性來執行此操作。這是有關如何使用defer有效加載JavaScript的深入指南。
提示：另一種有效加載javascript的方法是在關閉body标簽之前添加腳本。這将使浏覽器在擷取并執行腳本之前先解析整個站點。
7、啟用浏覽器緩存
每次使用者通路你的網站時，浏覽器都需要下載下傳構成你頁面的所有檔案。如果可以使浏覽器存儲資料，以便下次使用者鍵入URL時，浏覽器已經具有顯示其内容所需的所有資訊，該怎麼辦？
為此，你需要通過設定資産的過期日期來從.htaccess檔案中啟用浏覽器緩存。
這将告訴浏覽器，将這些檔案保留到設定的時間。
注意：這是增加網站回訪使用者加載速度的好方法。
8、使用延遲加載
現在，讓我們減少首次通路者的加載時間。
我們要使浏覽器在加載頁面其餘部分之前首先呈現頁面頂部（在折疊内容上方）。
是以，浏覽器将確定使用者看到的網站的第一部分立即加載，而不是等待所有圖像和視訊加載以使頁面具有互動性。這個過程就是我們所謂的延遲加載。
我們可以使用圖像和iframe中的loading屬性來本地實作它。
<img src=”myimage.jpg” loading=”lazy” alt=”…” />
<iframe src=”content.html” loading=”lazy”></iframe> 這些屬性将告訴浏覽器，僅在使用者滾動到元素并且現在在視口上可見時才下載下傳元素。
結論
當然，這些并不是改善網站性能的唯一方法。
實際上，還有其他方法，例如使用預取技術來告訴浏覽器提前擷取某些元素。但是，經過這8個步驟後，你網站的頁面速度應該比最佳速度還要好。
盡管網站速度對于降低跳出率和增加使用者留存率至關重要，但是，例如，在PageSpeed Insights中達到85-90後，你将看不到任何明顯的好處。在對網站進行基準測試并明智地投資資源時，請記住這一點。
我希望今天的這個内容，對你很有用。如果你有其他想法，或者覺得我們應該讨論其他方法，請務必在留言中告知我們。
感謝閱讀。