對于技術人而言，性能優化是一個亙古不變的話題。而隨著框架、語言、庫等工具的不斷演進，傳統的優化手段是否仍然適用？在創新的環境之下，又有哪些較為捷徑的優化手段？在本文中，作者將以一年前的網站為測試對象，嘗試了最新的三種手段，有效地將網站性能提高了 24%，接下來，我們將一探究竟。
作者 | SwissGreg
譯者 | 彎月，責編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
上周末，我們提升了一年以前構建的一個網站的性能。
我們的這個網站是為瑞士的軟件開發人員提供的求職平臺，該網站的性能非常重要，原因有如下兩個：
-
良好的用戶體驗：既包括網站的加載時間（以及與用戶交互時間），也包括使用該網站時的快捷感。
-
seo：在很大程度上，我們的流量依賴于google搜索，而且眾所周知Google更加偏向性能出眾的網站（Google甚至在搜索控制臺中顯示了速度報告）。
如果你在網上搜索“網站性能基礎”，就會發現很多小技巧，例如：
-
使用CDN（內容交付網絡）提供能夠緩存一段時間的靜態文件。
-
優化圖像尺寸和格式。
-
使用GZIP或Brotli壓縮。
-
減少非關鍵JS和css代碼的大小。
我們實現了很多容易達成的目標。
另外，由于我們的主頁基本上是一個可過濾的列表（用React編寫），所以我們引入了react-window，可以一次只渲染10個列表項（而不是250個）。
上述技巧幫助我們極大地提高了性能，然而在查看了速度報告后，感覺我們還有進步的空間。
因此，我們開始研究更多不尋常的方式來提升網站的速度，最終我們取得了巨大的成功！這是本周的報告：
這份報告顯示，網站的整體加載時間減少了24%！
那么，為了取得這樣的成果，我們究竟做了哪些努力呢？
1. 針對JSON數據采用rel ="preload"
index.html文件中加入的這一行代碼可以指示瀏覽器：在JAVAScript調用AJAX/fetch請求JSON數據前，就應該獲取這些數據。
當實際需要使用數據時，就可以從瀏覽器緩存中讀取，而不必再次獲取數據。這個技巧幫助我們節省了大約0.5秒的加載時間。
本來我們可以早點實現這個技巧，但是Chrome瀏覽器中曾經有一些問題導致重復下載。不過如今看來已經改好了。
2. 在服務器端實現超級簡單的緩存
在實現JSON預加載后，我們發現下載職位列表仍然是瓶頸（從服務器獲取響應大約需要0.8秒）。因此，我們決定研究服務器端的緩存。首先，我們嘗試了節點緩存，但是令人驚訝的是，獲取時間并沒有縮短。
值得一提的是/api/jobs端點是一個簡單的getAll端點，因此沒有改進的余地。
但是，我們決定更進一步，通過一個JS變量簡單地構建自己的緩存。如下所示：
此處唯一沒有列出的是POST /jobs端點，它會刪除緩存（cachedJobs =undefined）。
如此簡單的一段代碼，就削減掉了0.4秒的加載時間！
3. 削減CSS和JS包的大小
最后我們查看了網頁需要加載的CSS和JS包的大小。我們注意到"font-awesome"這個包的大小超過了70kb。
然而，我們僅使用了其中大約20%的圖標。
我們是如何處理的？我們通過icomoon.io選擇了需要使用的圖標，并創建了自定義的精簡圖標包。
因此，節省了50kb！
以上三種不尋常的技巧幫助我們將網站的加載時間縮短了24%。甚至有報告顯示，網站的加載時間降低了43％（降低至1-2秒）。
目前我們對這些提升感到非常滿意。但是，我們相信我們可以做得更好！
如果你知道其他不尋常的技巧可以提供幫助，那么敬請在下方的評論中留言！
原文：https://dev.to/swissgreg/how-we-improved-website-performance-by-24-with-3-unusual-changes-9ei
本文為 CSDN 翻譯，轉載請注明來源出處。
