【伯樂線上提示】:① 5月6日,谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後,已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職,都是在工作之餘參與,每位的翻譯進度會不一樣(請理解),所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整,請不要轉載,謝謝合作。
【導讀】:最快和最好地優化了的資源,是不需要載入的資源。你最近經審查過你的資源嗎?你應該這麼做,而且你應該定期這麼做,以確保每個資源都在幫你提供更好的使用者體驗。
在本課中:
學習重點
- 將所有頁面所需的資源以及第三方資源加入庫存
- 測量各資源的表現:它們提供的價值,以及其技術效能
- 決定此資源是否提供了足夠的價值
最快和最好地優化了的資源,是無需載入的資源。當然,這作為建議看起來像是句廢話,但在實踐中卻往往被忽視:作為一個優化工程師,你的職責就是時刻保持批判的眼光,抓住一切機會,來翦除應用程式中任何的非必須資源。跟你的團隊一起,對有關必須資源的隱式和顯式假設進行定期的質疑和重檢,就是一個很好的做法。舉幾個例子:
- 在我們的網頁中我們總是包含了資源X,但下載和顯示它的成本真的與它給使用者提供的價值成正比嗎?我們能夠測量並證明它的價值嗎?
- 某一資源——特別是當它是一個第三方資源時——所提供的效能始終如一嗎?該資源處於整個應用的關鍵路徑中、或需要處於其中嗎?如果它處於關鍵路徑中,它會成為造成我們網站失敗的一個單點故障嗎?—— 也就是說,如果該資源不可用,它會影響我們整個網站的效能和使用者體驗嗎?
- 這個資源需要或已擁有一個服務級別協議(SLA)嗎?它遵循提高效能的最佳做法嗎(壓縮、快取,其他等等)?
往往我們的網頁裡包含了一些不必要的資源,或者更糟,包含了阻礙頁面效能、且未給使用者和整個網站帶來多大價值的資源。這一可能性既適用於我們自己的、也適用於第三方的資源和小工具上:
- 站點A決定在其首頁上放一個照片迴圈播放器,讓訪問者可以點選預覽多張照片 —— 所有照片都在頁面載入時被載入,使用者通過點選檢視播放器中的下一張照片。
- 問題:你統計過有多少使用者在此迴圈播放器裡檢視了多張照片嗎?你可能給絕大部分使用者造成了不必要的昂貴下載開銷,讓他們下載了很多他們永遠不需要觀看的資源。
- 站點B決定安裝一個第三方外掛來顯示相關內容,提高社交媒體的參與度,或提供一些其他的服務。
- 問題:你有沒有跟蹤過有多少訪問者使用此外掛、或點選過此外掛提供的內容?此外掛帶來的社交媒體的有利影響,是否能抵消下載它所需額外開銷的不利影響?
你看,消除不必要的下載看起來似乎微不足道,實際上卻正相反。要做好往往需要大量周密的思考和測量。事實上,針對你網頁上的每一個資源,為了獲得最佳效果,你應該定期清查和重新考慮上面提出的問題。