性能黃金法則:80- 90%的終端用戶回應時間花在下載前端，即頁面上的所有組件:img、stylesheets、scripts等
1.縮小HTML、CSS和JavaScript
減少資源意味著從HTML、JavaScript和CSS中洗掉不必要的、不需要加載的字符，如空白字符、換行字符、注釋和塊分隔符，
這將加快您的加載時間，因為它減少了必須從服務器請求的代碼量，
最小化自動化任務系統的插件——Grunt和Gulp，
縮小JavaScript代碼的工具——JSMin和YUI Compressor，
2.減少HTTP請求
當你的瀏覽器從服務器獲取資料時，它使用HTTP(超文本傳輸協議)，它是客戶機和主機之間的請求/回應，一般來說，網頁的HTTP請求越多，加載就越慢，有很多方法可以減少請求的數量，如:
行內JavaScript——將所有腳本合并到一個腳本中，類似地將所有CSS合并到一個樣式表中，(只在非常小的情況下)
使用CSS精靈——將你的背景影像組合成一個影像，并使用CSS和屬性來顯示所需的影像片段減少第三方插件等產生大量外部請求的資產，
影像映射將多個影像合并成單個影像，總的大小是相同的，但是減少HTTP請求的數量可以提高頁面的速度，(如導航欄)
使用sessionStorage API和localStorage API將資料存盤到瀏覽器中，參考——Web存盤api
3. 使用內容分發網路 (CDN)
內容交付網路是一組分布在不同地理位置的web服務器，它們根據終端用戶的位置向其提供web內容，
當您將網站托管在單個服務器上時，所有用戶請求都被發送到相同的硬體，由于這個原因，處理每個請求所需的時間增加了，最重要的是，當用戶在物理上遠離服務器時，加載時間會增加，
使用CDN，用戶請求被重定向到最近的服務器，因此，內容可以更快地傳遞給用戶，網站運行速度也會更快，這是一種相當昂貴但非常有效的優化加載時間的方法，
4. 第一個位元組的時間 (TTFB)
TTFB是對web服務器回應性的測量，基本上，它是瀏覽器從服務器請求資訊后開始接收資訊所花費的時間，
當用戶訪問您的站點時，他們的瀏覽器向承載該站點的服務器發送一個HTTP請求，在初始請求和資料的第一個位元組之間需要執行三個步驟:DNS查找、服務器處理和回應，一個網站的TTFB計算為:HTTP請求時間+處理請求時間+ HTTP回應時間，
通過使用CDN、快速web主機和可靠的DNS提供商，您可以大大減少整體TTFB，
谷歌建議TTFB小于200毫秒，
5. 關鍵渲染路徑
關鍵渲染路徑是瀏覽器將HTML、CSS和JavaScript轉換為螢屏上的像素所經歷的步驟序列，
關鍵的渲染路徑包括檔案物件模型(DOM)、CSS物件模型(CSSOM)、渲染樹、布局和繪制，
在決議HTML時創建檔案物件模型，HTML可以請求JavaScript，而JavaScript又可以反過來改變DOM，HTML包含或發出樣式請求，樣式反過來構建CSS物件模型，瀏覽器引擎將兩者結合起來創建渲染樹，布局決定了頁面上所有內容的大小和位置，一旦確定了布局，像素就會被繪制到螢屏上，
優化關鍵渲染路徑提高渲染性能，性能技巧包括:
- 通過延遲它們的下載(defer屬性)、將它們標記為異步(async屬性)或完全消除它們來最小化關鍵資源的數量，
- 優化所需的請求數量以及每個請求的檔案大小，
- 通過對下載的關鍵資源進行優先級排序，優化關鍵資源的加載順序，縮短關鍵路徑長度，
6. PRPL模式
PRPL是一個縮略詞，描述了一種用于使網頁加載和互動性更快的模式，
推送 (或預加載) 最重要的資源:
Preload是一個宣告式fetch請求，它告訴瀏覽器盡快請求資源，通過在HTML檔案的開頭添加標簽來預加載關鍵資源: rel = “Preload”
<link rel=”preload” as=”style” href=https://www.cnblogs.com/qingmiaokeji/p/”css/style.css”>
盡快呈現初始路線
為了改進First Paint, Lighthouse建議行內關鍵的JavaScript，并使用異步延遲其余部分，以及行內關鍵的CSS，通過消除與服務器獲取呈現阻塞資源的往返，這提高了性能，然而，從開發的角度來看，行內代碼更難維護，并且不能由瀏覽器單獨快取，
改進First Paint的另一種方法是在服務器端呈現頁面的初始HTML，這將在腳本仍在獲取、決議和執行時立即向用戶顯示內容，然而，這可能會顯著增加HTML檔案的有效負載，這可能會損害到Time to Interactive，或者您的應用程式變得具有互動性并能夠回應用戶輸入所需的時間，
預快取剩余資源
通過充當代理，service worker可以在重復訪問時直接從快取而不是服務器獲取資源，這不僅允許用戶在離線時使用您的應用程式，而且還會在重復訪問時頁面加載時間更短，
使用第三方庫來簡化生成service worker的程序，除非您有比庫所能提供的更復雜的快取需求，例如，Workbox提供了一組工具，允許您創建和維護service worker來快取資源，
延遲加載其他路由和非關鍵資源
要發送一個更小的JavaScript有效負載(僅包含用戶最初加載應用程式時所需的代碼)，可以根據需要拆分整個bundle和惰性加載塊，
一旦你成功地分割了你的包，預加載更重要的部分，預加載可以確保瀏覽器更快地獲取和下載更重要的資源，
7. 減少網路字體的使用
網路字體在網站設計中已經變得非常流行，不幸的是，網頁字體的使用對頁面渲染速度有負面影響，谷歌字體等Web字體向外部資源添加額外的HTTP請求，Web字體也會呈現阻塞，以下措施將幫助您減少網頁字體流量的大小:
- 在現代瀏覽器中使用現代格式WOFF2
- 只包含網站上使用的字符集
- 只選擇需要的樣式
- 主機字體在本地或預取
- 使用Base64編碼存盤在LocalStorage中
8. 啟用瀏覽器快取
對于很少發生變化的資源，利用瀏覽器快取是至關重要的，在這種情況下，建議最大年齡為7天，有不同型別的HTTP頭，如:Cache-Control, Pragma和Expires，
最重要的HTTP快取頭之一可能是由一組指令組成的頭，允許您定義回應何時、如何快取以及快取多長時間，當瀏覽器為了更快地訪問而存盤資源副本時，就會發生HTTP快取，客戶端在HTTP請求中可以使用的標準指令如下，
Cache-Control: max-age=
Cache-Control: max-stale[=]
Cache-Control: min-fresh=
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: only-if-cached
no-cache:回應可以被任何快取存盤，即使回應通常是不可快取的，但是，存盤的回應在使用之前必須首先經過源服務器的驗證，
no-store:回應可能不存盤在任何快取中，注意，這不會阻止回傳一個有效的預先存在的快取回應，客戶端也可以設定為清除現有的快取回應，因為這將迫使快取使用server.max-age=0重新驗證，
max-age=:資源最大存活時間，與此不同的是，這個指令是相對于請求的時間的，
must-revalidate:指示一旦資源變得陳舊，在原始服務器上沒有成功驗證的情況下，快取不能使用陳舊的副本，
public:回應可以被任何快取存盤，即使回應通常是不可快取的，
Expires——此頭指定快取資源的過期日期/時間，例如，表示快取資源在2017年5月13日格林尼治標準時間上午7點到期，當包含max-age指令的cache-control報頭出現時，expires報頭被忽略，
ETag——回應報頭，根據一個令牌(引號中的字串，例如，)標識所服務內容的版本，該令牌在資源被修改后會發生變化，如果一個令牌在發出請求之前沒有改變，瀏覽器將繼續使用它的本地版本，
Vary——確定必須與快取資源匹配的回應才能被認為有效的報頭，例如，頭檔案指定每個用戶代理和語言組合必須存在一個快取版本，Vary: Accept-Language, User-Agent
9. 啟用Gzip壓縮
Gzip是一種壓縮形式，它在將網頁、CSS和JavaScript發送到瀏覽器之前，在服務器層對它們進行壓縮，
在用戶端，瀏覽器解壓縮檔案并顯示內容，這種方法可以用于網站上的所有檔案，這樣的網站性能優化容易實作，可以起到很大的作用，
根據雅虎的說法，這可以減少大約70%的下載時間，由于現在90%的互聯網流量都是通過支持Gzip的瀏覽器傳輸的，所以它是提高網站速度的一個很好的選擇，
10. 減少重定向
當您移動和洗掉頁面時，重定向通常是必要的，并且是消除斷開鏈接問題的最好方法，
但是如果有太多的HTTP請求，就會產生額外的HTTP請求，這會對速度造成負面影響，特別是在移動設備上，
這意味著最好將它們控制在最低限度，事實上，谷歌說，理想情況下，網站所有者應該完全消除它們，
你可以開始使用尖叫青蛙快速識別當前在你的網站上的所有重定向，然后你必須檢查他們是否有必要的目的，只留下關鍵的，
11. 將您的網站移動到更好的主機上
有三種可能的托管型別:
共享主機
全世界使用的最受歡迎的托管型別是共享托管，這是在短時間內以低廉的費用讓你的網站上線的最便宜的方式，選擇一個快速的網路主機以確保更好的優化是至關重要的，
通過共享托管，您可以與也使用此服務器的其他站點共享CPU、磁盤空間和RAM，這是共享托管不如VPS或專用服務器快的主要原因，
虛擬專用服務器 (VPS) 托管
VPS要快得多，它使用多個服務器進行內容分發，使用VPS，您可以與其其他用戶共享服務器，并擁有自己的虛擬服務器部分，您的配置不會影響其他客戶端，
如果您的網站擁有平均流量，或者您的電子商務網站在某些時期流量激增，VPS將是您的最佳解決方案，
專用服務器
最昂貴的托管選項是使用專用服務器，它可以是您自己的物理服務器，在這種情況下，您需要支付服務器租金并聘請系統管理員對其進行維護，
另一種方法是從AWS、Microsoft Azure、Google或其他公共云提供商租用專用云資源，這兩種方法也可以組合成混合云，使用專用服務器，所有資源僅屬于您，您可以完全控制它們，云基礎設施還可以在多個包下增加無限和按需可擴展性，
Serverless architecture是完全洗掉維護和服務器設定程序的另一個選項，
12. 優化網站上圖片的大小
每個人都喜歡引人注目的圖片，在成功的電子商務網站中，影像是至關重要的一部分，在你的產品頁面上添加大量的照片、影像和圖形可以提高用戶粘性，使用圖片的負面影響是，它們通常是大檔案，會減慢網站的速度，
在不影響影像質量的情況下減小影像大小的最佳方法是使用ImageOptim、JPEGmini或Kraken等工具壓縮影像，這個程序可能會花費一些時間，但很值得，
另一種減小影像大小的方法是使用HTML回應影像和屬性，根據用戶顯示屬性調整影像大小，
13. 使用Debouncing and Throttling
Debouncing and Throttling是兩種廣泛使用的技術，可提高在一段時間內重復執行的代碼的性能，
結論
我們已經介紹了大多數加快和優化網站性能的技術，我希望你發現這很有用，
文末彩蛋
最近和沉默王二同學合作開展了開源專案：為了給小白學習 Java 提供一些幫助，我們創建了 LearnJava 在線學習網站，與此同時，我們把網站的原始碼也開放了——名字就叫編程入門網，為的就是讓大家在學習 Java 的時候，能多一個練手專案，
地址：https://github.com/itwanger/JavaLearnSource
歡迎各位star！愛你們！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/294089.html
標籤：Html/Css