優(yōu)化Web性能的七條專家建議

2021-08-17    分類: 網(wǎng)站建設(shè)

平衡酷炫視覺效果與流暢體驗(yàn)是設(shè)計(jì)師和開發(fā)人員一直以來所面臨的挑戰(zhàn)。那么專家對(duì)此有什么建議呢?

要搞明白Web性能可不是件簡(jiǎn)單的事情。通常情況下,設(shè)計(jì)師希望網(wǎng)站能夠包括最新的技巧和最好看的外觀,而開發(fā)人員則專注于保持網(wǎng)站運(yùn)行流暢。要在兩者之中尋找一個(gè)好的折中方案是很難的。



我們邀請(qǐng)了幾位專家來分享一下他們?cè)趦?yōu)化Web性能方面有哪些實(shí)用建議。
01. 打造一種性能文化
Brad Frost:我會(huì)幫助個(gè)人和機(jī)構(gòu)理解這個(gè)觀點(diǎn):性能不僅僅是技術(shù)上的好,還是一個(gè)基本的設(shè)計(jì)原則。工作流程中每個(gè)人都應(yīng)該優(yōu)先考慮心梗,包括企業(yè)主、經(jīng)理人、設(shè)計(jì)師和開發(fā)等等。當(dāng)然,建立一種性能文化遠(yuǎn)比應(yīng)用開發(fā)技巧困難,但長遠(yuǎn)來看這種付出是值得的。
02.設(shè)置一個(gè)性能基準(zhǔn)
Guy Podjarny:無法衡量的內(nèi)容是無法優(yōu)化的。在你的關(guān)鍵頁面上做一個(gè)WebPagetest測(cè)試,記錄下你最喜歡的速度和權(quán)值作為基準(zhǔn)。然后在構(gòu)建系統(tǒng)中重復(fù)測(cè)試,如果偏離基準(zhǔn)太多,那么就打破構(gòu)建。有了這幾個(gè)基準(zhǔn)線,你就可以逐步地優(yōu)化系統(tǒng),更上一層樓。
03. 建立性能預(yù)算
來自Vox Product的Katie Kovalcin:Web性能是所有團(tuán)隊(duì)成員從最初的與客戶對(duì)話階段就應(yīng)該重視的內(nèi)容。作為設(shè)計(jì)師,我喜歡在設(shè)計(jì)工作開始之前就與開發(fā)人員一起做一個(gè)性能預(yù)算,先熟悉一下自己在設(shè)計(jì)中會(huì)受到哪些限制。
我們會(huì)先設(shè)置一個(gè)數(shù)字,然后在設(shè)計(jì)時(shí)經(jīng)常進(jìn)行內(nèi)部檢查,確保我做出的選擇都符合項(xiàng)目的整體目標(biāo)。如果有某個(gè)樣式損害了這些目標(biāo),我們會(huì)集體討論并提出其他解決方案,能夠做到反應(yīng)更快而且仍然能夠?qū)崿F(xiàn)之前的美觀要求。
04. 內(nèi)嵌關(guān)鍵CSS
Fastly的Web性能工程師Patrick Hamann:我們?cè)陧?xiàng)目開始時(shí)為核心性能指標(biāo)比如Start Render和Speed Index設(shè)置了預(yù)算,并使用諸如speedcurve.com、WebPagetest等這樣的工具來保證我們每次部署的時(shí)候都不會(huì)違反他們。我們做過的大的改進(jìn)是將我們的關(guān)鍵CSS嵌入到我們網(wǎng)頁的中,從而將開始渲染時(shí)間縮短了兩秒鐘。
05. 平衡美學(xué)與速度
Etsy團(tuán)隊(duì)把Web性能看做是整體用戶體驗(yàn)的重要部分。高級(jí)工程經(jīng)理Lara Hogan:我們認(rèn)為平衡美學(xué)和速度非常重要,為了盡可能地了解兩者的影響,我們會(huì)進(jìn)行A / B測(cè)試來衡量設(shè)計(jì)更改和性能變化,來確保我們能夠提供最優(yōu)秀的用戶體驗(yàn)。我們?cè)谡麄€(gè)設(shè)計(jì)過程中始終謹(jǐn)記性能要求,測(cè)試和測(cè)量會(huì)變得容易一些。
06. 鎖定幀速率
Chrome開發(fā)人員關(guān)系倡導(dǎo)者Paul Lewis:大多數(shù)人只重視加載性能,但你還需要測(cè)量網(wǎng)站對(duì)用戶輸入的相應(yīng)速度,以及它是否達(dá)到了穩(wěn)定的60fps滿足滾動(dòng)和其他動(dòng)畫的需求。
了解每秒鐘的幀數(shù)以及在JavaScript、樣式、布局、畫筆、組件所花費(fèi)的時(shí)間是非常重要的,因?yàn)橛脩魰?huì)在幀數(shù)下降或者事件被鎖時(shí)注意到這些問題。熟悉開發(fā)工具,并在開發(fā)期間定期對(duì)項(xiàng)目進(jìn)行存檔。
07. 讓每個(gè)人都參與進(jìn)來
前端開發(fā)人員Harry Roberts:我認(rèn)為Web性能是一項(xiàng)團(tuán)隊(duì)任務(wù)。性能是每個(gè)人的責(zé)任,而不應(yīng)該是某一個(gè)小組的責(zé)任。我通常會(huì)盡量早地介入關(guān)鍵產(chǎn)品和設(shè)計(jì)決策,以確保每件事情都是為了項(xiàng)目的好利益,確保設(shè)計(jì)處理、功能要求和代碼本身都有助于產(chǎn)品的性能。這是基本原則。

新聞標(biāo)題:優(yōu)化Web性能的七條專家建議
文章位置:http://www.muchs.cn/news27/122527.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google面包屑導(dǎo)航、App開發(fā)、微信小程序虛擬主機(jī)、云服務(wù)器

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)