現代互聯網時代，打開壹個Web平臺，是留下還是離開，只需要1分鐘，因此前端的性能優化至關重要。
由於前端優化不佳，大多數網站無法提供令人滿意的用戶體驗，最常見的情況是數據加載和圖像優化不佳，本文分享幾個優化策略。
資源最小化資源（靜態資源）壓縮是指從HTML、CSS和JavaScript中刪除不需要加載的不必要的冗余數據的過程。這包括刪除代碼註釋和格式、空白字符、未使用的代碼、換行符等。
縮小HTML、CSS和JavaScript將加快前端加載時間，因為它減少了需要從服務器請求的代碼量。
生成HTML、CSS和JavaScript代碼的優化版本可以借助工具，如下：
HTML:PageSpeedInsights、HTMLMinifier。
CSS：cssmin.js、ChromeDevTools中的Coverage工具、YUICompressor。
JavaScript：JSMin、ChromeDevTools中的Coverage工具。
壓縮文件對於WEB項目，文件越大，加載所需的時間就越長，現代WEB平臺通常有大量的HTML、CSS和JavaScript包。
通過使用合適的方法壓縮文件，可以輕松地對前端的加載時間產生重大影響。以下是可以遵循的兩個不錯的文件壓縮選項：
Gzip：最流行的數據壓縮和解壓縮方法，所有現代瀏覽器都支持，Gzip在將站點的HTML、CSS和JavaScript包發送到瀏覽器之前先在服務器端對其進行壓縮，然後在客戶端解壓縮文件並傳送內容。Brotli：與當前可用的壓縮方法相比，它提供了最佳的壓縮率，根據CertSimple的研究，Brotli壓縮JavaScript文件比Gzip小14%，而HTML和CSS壓縮率比Gzip好21%和17%。
圖片優化說到網站，圖像是重要的組成部分，互聯網上93.7%的網站至少使用壹種圖像文件格式，因為它們有助於提高用戶參與度，更加吸引用戶眼球。
但是，使用圖像的負面影響是會對前端加載時間產生不利影響。但是，現在有多種方式可以優化圖像：
使用webp或avif使用webp和avif等新圖像格式比jpg和png等舊格式具有更好的性能。
webp比png小26%，比jpg小25-35%。avif比jpg小50%，比webp小20%。
但是，缺點是瀏覽器支持還不夠普遍。webp最近獲得了瀏覽器支持的普遍支持，可能存在舊版本不支持它。另壹方面，avif僅在Chrome和Opera中得到了支持。
提供正確尺寸的圖像減少圖像加載時間和提高網站性能的另壹種方法是使用響應式圖像。超過50%的流量來自智能手機和平板電腦，將圖像縮放到主流設備尺寸並使用。
除了選擇合適的格式和尺寸外，還有其他幾種方法，通過圖像優化來減少前端加載時間，以下是可以使用的壹些其他方法：
圖像壓縮
使用漸進式JPEG
為連接速度較慢的用戶提供較小的圖像
使用HTTP/2、HTTP/3而不是HTTP/1.1
使用圖像集
減少服務器調用次數通常，前端向服務器發出的請求越多，加載的時間就越長。因為在呈現頁面之前，向服務器發送任何請求都需要完全通信。可以通過多種方式來減少加載頁面所需的服務器請求數量。
CSSSprites：這是減少服務器調用次數的最簡單方法之壹，主要是減少UI相關的圖片資源。實現原理不是加載10個獨立的圖像到網站，而是使用圖像集合拼接成壹個圖像文件，然後通過使用CSS中的background-image和background-position屬性來顯示所需的圖像區域。這樣做可以減少了所需的服務器請求數量。
減少第三方插件的大量外部請求。
防止鏈接到不存在的文件。
此外，還可以查看服務器端渲染以加快應用程序的初始加載速度。
刪除不必要的字體自定義字體已經變得非常流行，因為它有助於為網站添加個性化展示，但這些是以犧牲性能為代價。
自定義字體的大小可能非常大，特別是中文字體，而網絡字體（例如Google字體）會將HTTP請求添加到外部資源，這會影響頁面渲染的速度。
以下是在網站中使用字體時可以采取的優化措施：
將字體轉換為最有效的格式：加載像WOFF2這樣的現代格式可以使字體文件大小比其他格式減少約30%。
子集字體以刪除未使用的字符：綜合字體文件包含許多可能永遠不會使用的語言的字符。通過子集字體，可以從字體中刪除不需要的字符，只保留需要在網站上編寫內容的內容。
預加載頁面明確用到的字體。
延遲加載延遲加載有助於進壹步縮短前端加載時間。使用延遲加載，網頁首先只加載需要的內容，並在用戶需要時加載剩余的內容。
除了延遲占位符加載之外，還有其他幾個選項，例如，原生延遲加載和模糊圖像效果。
緩存如果不加緩存，用戶每次訪問都需要重新下載所有的資源，避免類似現象的最佳方法是使用緩存技術。如果配置適當，瀏覽器會將文件存儲在其本地緩存中，並避免為來自服務器的後續頁面訪問加載相同的資源。
緩存服務器：用戶請求從緩存服務器集合發送到最近的緩存服務器，即CDN。
內存緩存：通過將數據的某些部分（例如：JavaScript變量）存儲在內存中，無需為路由更改重新加載它們。
磁盤緩存：類似於內存緩存，不同之處在於它使用通常由瀏覽器處理的傳統文件存儲。
使用預取資源預取是另壹種可用於優化前端數據加載性能的增強技術。作為開發人員，比瀏覽器更了解應用程序。因此，預取使用此信息來提示瀏覽器即將可能需要的資源。
預取加載資源以預期它們需要減少資源的等待時間。主要有三種類型的預取。雖然鏈接預取是最流行和最廣泛使用的方法，但DNS預取和預渲染也是有用的選項。
鏈接預取鏈接預取使瀏覽器能夠收集用戶可能在最近的將來請求的資源。因此，開發人員可以假設用戶可能訪問特定網頁的位置。
但是，鏈接預取僅適用於圖像和JavaScript等可緩存資源。
DNS預取每當用戶請求托管在特定IP地址中的資產時，就會執行DNS查找以查找IP地址所屬的域名。
DNS預取允許瀏覽器在後臺對網頁中的鏈接執行DNS查找，同時用戶瀏覽當前頁面，以最大限度地減少用戶在啟用DNS預取的情況下單擊鏈接時的延遲。
CDN前端內容（包括HTML頁面、樣式表、JavaScript文件和圖像）的加載速度可以使用CDN進行優化，效果也是最明顯的。CDN是壹組分布在多個地理位置的服務器，用於存儲內容的緩存版本以快速響應給最終用戶。
還有壹種特定類型的CDN，稱為圖像CDN，它非常擅長優化圖像。有了這些，可以節省40-80%的圖像文件大小。鑒於圖像通常占據頁面重量的壹半以上，為圖像集成CDN可以顯著提高加載速度。
總結性能黃金法則：80-90%的最終用戶響應時間用於下載前端組件，例如圖像、樣式表、腳本等。
因此，優化前端數據加載對於降低跳出率和增加用戶在網站上的停留時間至關重要。
作者：天行無忌