web性能優化指南

一、精簡你的資源

構建高性能應用程序的有效方法是審覈發送給用戶的資源。雖然Chrome開發人員工具中的網絡面板能夠很好地總結給定頁面上使用的全部資源，但若是您到目前爲止還沒有考慮性能，那麼知道從哪裏開始是很重要的。如下是一些建議：

• 若是您使用Bootstrap或Foundation來構建UI，請問本身是否有必要。這些資源添加了瀏覽器必須下載，解析和應用於頁面的大量CSS，全部這些都是在特定於站點的CSS進入圖片以前。 Flexbox和Grid在使用相對較少的代碼建立簡單和複雜佈局方面很是出色。因爲CSS是一種渲染阻塞資源，所以CSS框架的開銷可能會顯着延遲渲染。您應該經過消除沒必要要的開銷來加速渲染，儘量依賴於瀏覽器中的工具。
• JavaScript庫很方便，但並不老是必要的。以jQuery爲例：因爲querySelector 和 querySelectorAll等方法，元素選擇獲得了極大的簡化。使用addEventListener能夠輕鬆進行事件綁定。 addEventListener. classList, setAttribute, 和getAttribute提供了使用類和元素屬性的簡便方法。若是你必須使用圖書館，研究更精簡的替代品。例如，Zepto是一個較小的jQuery替代品，Preact是React的一個小得多的替代品。
• 並不是全部網站都須要是單頁面應用程序（SPA），由於它們常常普遍使用JavaScript。 JavaScript在web是一種重消耗的資源，由於它不只必須下載，還必須解析，編譯和執行。例如，具備優化前端架構的新聞和博客站點能夠像傳統的多頁體驗同樣表現良好。特別是若是正確配置了HTTP緩存，而且可選地，若是使用了service worker。

二、如何發送資源

當您知道須要爲您的應用發送哪些資源以使其成爲您想要的美觀和功能時，請考慮下一步如何發送它們。如何發送資源對於構建快速用戶體驗相當重要。

• 遷移到HTTP / 2。 HTTP / 2解決了HTTP / 1.1中固有的許多性能問題，例如併發請求限制和缺乏頭壓縮。
• 使用資源提示加快資源交付。 rel = preload是一個這樣的資源提示，它容許在瀏覽器發現它們以前提早獲取關鍵資源。這能夠對頁面呈現產生明顯的積極影響，並在明智地使用時下降交互時間。 rel = preconnect是另外一個資源提示，能夠掩蓋爲第三方域上託管的資源打開新鏈接的延遲。

三、優化數據大小

有了一些關於哪些資源適合發送的想法以及_how_你應該發送它們，咱們將介紹一些限制你發送的_how much_數據的建議：

• 縮小文本資源。縮小是在基於文本的資源中刪除沒必要要的空格，註釋和其餘內容。它能夠顯着減小您發送給用戶的數據量，而不會影響功能。在JavaScript中使用uglification以經過縮短變量和方法名稱來進一步節省成本。因爲SVG是基於文本的圖像格式，所以可使用SVGO進行優化。
• 配置服務器以壓縮資源。壓縮資源會大大減小您發送給用戶的數據量，尤爲是在涉及文本資產的狀況下。 GZIP在這個領域是一種使人尊敬的格式，但Brotli.壓縮能夠更進一步。可是，要理解壓縮並非性能問題的所有：一些隱式壓縮的文件格式（例如，JPEG，PNG，GIF，WOFF等）不響應壓縮，由於它們已經被壓縮。
• 優化圖像 以確保您的網站儘量少地發送圖像數據。因爲圖像構成消耗了大部分的性能，所以圖像優化表明了提高性能的獨特機會。
• 若是您有時間，請考慮提供其餘圖像格式。 WebP享有至關普遍的瀏覽器支持，而且能夠在保持相似視覺質量的同時削弱文件大小的既定格式。 JPEG XR是IE和Edge支持的另外一種替代格式，可提供相似的節省。
• 響應地傳送圖像。各類各樣的設備及其屏幕提供了一個巨大的機會，經過發送最適合查看它們的屏幕的圖像來提升性能。在最簡單的用例中，您能夠向元素添加srcset屬性 ，以指定瀏覽器能夠選擇的圖像數組。在更復雜的方面，您可使用幫助瀏覽器選擇最佳格式（例如，WebP over JPEG或PNG），或者爲不一樣的屏幕尺寸提供不一樣的圖像處理。
• 使用視頻而不是動畫GIF。動畫GIF很是龐大，但質量相近的視頻要小得多，一般大約80％左右。若是您的網站大量使用動畫GIF，這多是您能夠作的最有效的事情，以提升加載性能。
• 客戶端提示 可用於根據當前網絡條件和設備特徵定製資源交付。 DPR，Width和Viewport-Width標頭能夠幫助您使用服務器端代碼爲設備提供最佳圖像，並提供更少的標記。 Save-Data標頭能夠幫助您爲明確要求您的用戶提供更輕鬆的應用程序體驗。
• NetworkInformation API公開有關用戶網絡鏈接的信息。此信息可用於修改較慢網絡上的用戶的應用程序體驗。