優化Web性能的七條專家建議
2017.09.25
平衡酷炫視覺效果與流暢體驗是設計師和開發人員一直以來所麵臨的挑戰。那麼專家對此有什麼建議呢？
要搞明白Webxingnengkebushijianjiandandeshiqing。tongchangqingkuangxia，shejishixiwangwangzhannenggoubaokuozuixindejiqiaohezuihaokandewaiguan，erkaifarenyuanzezhuanzhuyubaochiwangzhanyunxingliuchang。yaozailiangzhezhizhongxunzhaoyigewanmeidezhezhongfanganshihennande。
我們邀請了幾位專家來分享一下他們在優化Web性能方麵有哪些實用建議。
01. 打造一種性能文化
Brad Frost：我會幫助個人和機構理解這個觀點：性能不僅僅是技術上的最佳，還是一個基本的設計原則。工作流程中每個人都應該優先考慮心梗，包括企業主、經理人、設計師和開發等等。當然，建立一種性能文化遠比應用開發技巧困難，但長遠來看這種付出是值得的。
02.設置一個性能基準
Guy Podjarny：無法衡量的內容是無法優化的。在你的關鍵頁麵上做一個WebPagetest測(ce)試(shi)，記(ji)錄(lu)下(xia)你(ni)最(zui)喜(xi)歡(huan)的(de)速(su)度(du)和(he)權(quan)值(zhi)作(zuo)為(wei)基(ji)準(zhun)。然(ran)後(hou)在(zai)構(gou)建(jian)係(xi)統(tong)中(zhong)重(zhong)複(fu)測(ce)試(shi)，如(ru)果(guo)偏(pian)離(li)基(ji)準(zhun)太(tai)多(duo)，那(na)麼(me)就(jiu)打(da)破(po)構(gou)建(jian)。有(you)了(le)這(zhe)幾(ji)個(ge)基(ji)準(zhun)線(xian)，你(ni)就(jiu)可(ke)以(yi)逐(zhu)步(bu)地(di)優(you)化(hua)係(xi)統(tong)，更(geng)上(shang)一(yi)層(ceng)樓(lou)。
03. 建立性能預算
來自Vox Product的Katie Kovalcin：Webxingnengshisuoyoutuanduichengyuancongzuichudeyukehuduihuajieduanjiuyinggaizhongshideneirong。zuoweishejishi，woxihuanzaishejigongzuokaishizhiqianjiuyukaifarenyuanyiqizuoyigexingnengyusuan，xianshuxiyixiazijizaishejizhonghuishoudaonaxiexianzhi。
womenhuixianshezhiyigeshuzi，ranhouzaishejishijingchangjinxingneibujianzha，quebaowozuochudexuanzedoufuhexiangmudezhengtimubiao。ruguoyoumougeyangshisunhailezhexiemubiao，womenhuijititaolunbingtichuqitajiejuefangan，nenggouzuodaofanyinggengkuaierqierengrannenggoushixianzhiqiandemeiguanyaoqiu。
04. 內嵌關鍵CSS
Fastly的Web性能工程師Patrick Hamann：我們在項目開始時為核心性能指標比如Start Render和Speed Index設置了預算，並使用諸如speedcurve.com、WebPagetest等這樣的工具來保證我們每次部署的時候都不會違反他們。我們做過的最大的改進是將我們的關鍵CSS嵌入到我們網頁的<head>中，從而將開始渲染時間縮短了兩秒鍾。
05. 平衡美學與速度
Etsy團隊把Web性能看做是整體用戶體驗的重要部分。高級工程經理Lara Hogan：我們認為平衡美學和速度非常重要，為了盡可能地了解兩者的影響，我們會進行A / B測(ce)試(shi)來(lai)衡(heng)量(liang)設(she)計(ji)更(geng)改(gai)和(he)性(xing)能(neng)變(bian)化(hua)，來(lai)確(que)保(bao)我(wo)們(men)能(neng)夠(gou)提(ti)供(gong)最(zui)優(you)秀(xiu)的(de)用(yong)戶(hu)體(ti)驗(yan)。我(wo)們(men)在(zai)整(zheng)個(ge)設(she)計(ji)過(guo)程(cheng)中(zhong)始(shi)終(zhong)謹(jin)記(ji)性(xing)能(neng)要(yao)求(qiu)，測(ce)試(shi)和(he)測(ce)量(liang)會(hui)變(bian)得(de)容(rong)易(yi)一(yi)些(xie)。
06. 鎖定幀速率
Chrome開發人員關係倡導者Paul Lewis：大多數人隻重視加載性能，但你還需要測量網站對用戶輸入的相應速度，以及它是否達到了穩定的60fps滿足滾動和其他動畫的需求。
了解每秒鍾的幀數以及在JavaScript、樣式、布局、畫筆、組(zu)件(jian)所(suo)花(hua)費(fei)的(de)時(shi)間(jian)是(shi)非(fei)常(chang)重(zhong)要(yao)的(de)，因(yin)為(wei)用(yong)戶(hu)會(hui)在(zai)幀(zhen)數(shu)下(xia)降(jiang)或(huo)者(zhe)事(shi)件(jian)被(bei)鎖(suo)時(shi)注(zhu)意(yi)到(dao)這(zhe)些(xie)問(wen)題(ti)。熟(shu)悉(xi)開(kai)發(fa)工(gong)具(ju)，並(bing)在(zai)開(kai)發(fa)期(qi)間(jian)定(ding)期(qi)對(dui)項(xiang)目(mu)進(jin)行(xing)存(cun)檔(dang)。
07. 讓每個人都參與進來
前端開發人員Harry Roberts：我認為Web性xing能neng是shi一yi項xiang團tuan隊dui任ren務wu。性xing能neng是shi每mei個ge人ren的de責ze任ren，而er不bu應ying該gai是shi某mou一yi個ge小xiao組zu的de責ze任ren。我wo通tong常chang會hui盡jin量liang早zao地di介jie入ru關guan鍵jian產chan品pin和he設she計ji決jue策ce，以yi確que保bao每mei件jian事shi情qing都dou是shi為wei了le項xiang目mu的de最zui佳jia利li益yi，確que保bao設she計ji處chu理li、功能要求和代碼本身都有助於產品的性能。這是基本原則。
