建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
本文針對(duì) SwissDev Jobs 網(wǎng)站的優(yōu)化實(shí)踐，介紹我們是如何把網(wǎng)站加載時(shí)間減少24% 的。
皮山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
上周，我們有機(jī)會(huì)對(duì) SwissDev Jobs 網(wǎng)站性能進(jìn)行了微調(diào)。
之所以要提升 SwissDevJobs.ch 網(wǎng)站性能，主要是有兩方面原因：
良好的用戶(hù)體驗(yàn)——即加載時(shí)間更短（且互動(dòng)性更好）和使用時(shí)的愉悅感 ;
SEO—— 我們的流量嚴(yán)重依賴(lài)谷歌搜索，而且你也許知道谷歌比較青睞性能良好的網(wǎng)站（谷歌甚至在搜索控制臺(tái)中引入了速度報(bào)告）。
當(dāng)搜索“website performance basics”時(shí)，你會(huì)得到許多操作建議，例如：
- 靜態(tài)資源使用 CDN 并配置合理的緩存時(shí)間；
- 優(yōu)化圖片尺寸和格式；
- 使用 Gzip 或 Brotli 壓縮；
- 減少非關(guān)鍵的 JS 和 CSS 代碼的大小。
針對(duì)以上這些建議，我們進(jìn)行了部分改進(jìn)。另外，由于我們的主頁(yè)面基本上是一個(gè)可過(guò)濾的列表（用 React 編寫(xiě)的），我們引入了react-window 來(lái)每次渲染 10 個(gè)列表項(xiàng)，而不是 250 個(gè)。
所有這些都幫助我們極大地提升了網(wǎng)站性能，但從速度報(bào)告來(lái)看，我們還可以做得更好。
因此我們開(kāi)始深挖更多不尋常的方法來(lái)讓網(wǎng)站變得更快... 現(xiàn)在看來(lái)，我們非常成功！下面是這周的報(bào)告：
這個(gè)報(bào)告顯示，完整的加載時(shí)間減少了 24%！
我們是如何做到這一點(diǎn)的呢？
1. 針對(duì) JSON 數(shù)據(jù)使用 rel="preload"
這條在 index.html 文件中的簡(jiǎn)單代碼向?yàn)g覽器表明：它應(yīng)該在這個(gè)資源被來(lái)自 JavaScript 的 AJAX 或 Fetch 調(diào)用實(shí)際請(qǐng)求前獲取。
當(dāng)需要獲取數(shù)據(jù)時(shí)，它會(huì)從瀏覽器緩存中讀取而不是重新獲取。這幫助我們減少了大約 0.5s 的加載時(shí)間。
我們很早就想實(shí)現(xiàn)這一點(diǎn)了，但是過(guò)去在 Chrome 瀏覽器中一直有問(wèn)題而導(dǎo)致重復(fù)下載兩次。而現(xiàn)在它可以正常生效了。
2. 在服務(wù)端實(shí)現(xiàn)超簡(jiǎn)單的緩存
在實(shí)現(xiàn)了 JSON 預(yù)加載后，我們發(fā)現(xiàn)職位列表的下載仍然是瓶頸所在（等待 0.8s 從服務(wù)器獲得響應(yīng)）。因此，我們決定從服務(wù)端緩存入手。
首先，我們嘗試了 node-cache，但令人吃驚的是，它并沒(méi)有優(yōu)化獲取時(shí)間。
值得一提的是，/api/jobs 接口是一個(gè)簡(jiǎn)單的 GetAll 接口，因此沒(méi)有太多的優(yōu)化空間。
于是，我們決定使用一個(gè) JS 變量來(lái)構(gòu)建自己的簡(jiǎn)易緩存。它看起來(lái)如下：
這里唯一沒(méi)有顯示的是 post /jobs 接口，這個(gè)接口刪除了所有的緩存（cachedJobs = undefined）。
就這么簡(jiǎn)單！又減少了 0.4s 的加載時(shí)間！
3. 移除不必要的字體
最后動(dòng)手的是我們加載的 CSS 和 JS 打包文件的大小。我們注意到，非必要的 font-awesome 文件超過(guò) 70KB。
同時(shí)，我們可能只使用其中 20% 的圖標(biāo)。
如何解決這個(gè)問(wèn)題的呢？我們使用 icomoon.io 來(lái)選擇使用的圖標(biāo)，然后創(chuàng)建我們瘦身過(guò)的圖標(biāo)包。
結(jié)果呢？節(jié)省了 50KB！
這 3 項(xiàng)不尋常的改動(dòng)幫助我們將網(wǎng)站的加載時(shí)間加速了24%?；蛘?，如其它一些報(bào)告顯示的，加速了 43%（達(dá)到了 1.2s）。
我們對(duì)這些改動(dòng)很滿(mǎn)意。但是，我們相信仍然有優(yōu)化的空間。
如果你有不尋常的技術(shù)可以幫助我們——請(qǐng)告知我們！
4. 加分點(diǎn)
在應(yīng)用上述優(yōu)化之后，我們注意到瓶頸仍然是獲取 /api/jobs 接口以及下載初始 HTML 的時(shí)間。其原因是，初始 HTML 以及這個(gè) API 是由位于歐洲的一個(gè)單點(diǎn)服務(wù)器提供的。
我們尋找可行的解決方案，然后決定采用將一切都緩存在服務(wù)器層級(jí)的方案。
使用 Cloudflare，默認(rèn)只有靜態(tài)資源會(huì)被緩存。但是，通過(guò)增加一個(gè)簡(jiǎn)單的頁(yè)面規(guī)則，就可以啟用緩存任何頁(yè)面或資源的功能：
這使得我們的網(wǎng)站可以直接由 Cloudflare 的 CDN 提供服務(wù)，甚至不需要訪(fǎng)問(wèn)服務(wù)器。
結(jié)果呢？
在世界各地的加載時(shí)間減少了 50%！
現(xiàn)在，你可能對(duì)緩存初始 HTML 和動(dòng)態(tài) API 的想法將信將疑，但請(qǐng)考慮：首先，我們的接口不會(huì)頻繁改動(dòng)——每天批量添加一次新的職位；其次，我們?cè)诟膭?dòng)發(fā)生時(shí)，在程序中清除了緩存。
這使得我們可以在不到 1 秒的時(shí)間內(nèi)將 SwissDev Jobs 服務(wù)到世界各地！
5. 作者介紹
SwissGreg，白天是程序員，晚上是獨(dú)立黑客——SwissDevJobs.ch。
網(wǎng)頁(yè)題目：我們是怎樣將網(wǎng)站加載時(shí)間減少24%的？
文章路徑：http://www.5511xx.com/article/dpidoeo.html
