世界頂級Web性能專家?guī)銉?yōu)化出高性能網(wǎng)站（中）

時(shí)間：2023-07-08 21:45:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-08 21:45:02 來源：網(wǎng)站運(yùn)營

世界頂級Web性能專家?guī)銉?yōu)化出高性能網(wǎng)站（中）：昨天我們給大家?guī)砹?span >http://keycdn.com網(wǎng)站上六位分別就職于IBM、微軟等互聯(lián)網(wǎng)巨頭的Web性能磚家精彩觀點(diǎn)，而對于網(wǎng)站優(yōu)化和運(yùn)維人員來說，這只是網(wǎng)站優(yōu)化的冰山一角，今天我們再來看看其他磚家怎么說。

這次調(diào)查，http://keycdn.com邀請歪果磚家團(tuán)回答了下面兩個(gè)問題：

1. 如果只能選擇一個(gè)方面進(jìn)行Web優(yōu)化，您會(huì)選擇哪個(gè)方面？

2. 就Web性能而言，您看到哪些錯(cuò)誤最常見？


專家說

Harry Roberts

@csswizardry / http://csswizardry.com

服務(wù)于Google、UN、BBC和Kickstarter的前端架構(gòu)師和顧問

答案1——優(yōu)化建議

就我個(gè)人而言，我要說CSS，希望大家能更多的重視CSS對性能的影響，因?yàn)閷Υ蟛糠志W(wǎng)站開發(fā)和運(yùn)維來說，CSS是網(wǎng)頁渲染的關(guān)鍵，但也是個(gè)巨大的性能瓶頸：不要隨意揮霍資源或CDN，刪除無用規(guī)則，內(nèi)聯(lián)關(guān)鍵CSS，避免@imports和Base64，啟用高性價(jià)比屬性（如opacity over rgba()），避免重復(fù)性工作，甚至要避免更換開發(fā)人員。

CSS是一把雙刃劍，既可以大幅度提升性能，又可以對性能造成較大的影響，這取決于你如何使用它，CSS真的是很有用的東西，我希望大家認(rèn)真重視CSS的性能影響。

答案2——常見錯(cuò)誤

說到常見錯(cuò)誤，真是太多了，比如只追求數(shù)值指標(biāo)（頁面大小，請求數(shù)量等），未關(guān)注APP的用戶感知性能等。性能最關(guān)鍵一點(diǎn)是網(wǎng)站給人的感覺有多快、用戶與頁面和APP交互的速度有多快，而不僅僅是網(wǎng)頁加載速度快就行了。1.5秒內(nèi)可以打開且能夠接受100個(gè)請求的網(wǎng)站，肯定大大優(yōu)于7秒內(nèi)才能打開且只能接受32個(gè)請求的網(wǎng)站，所以，少關(guān)注技術(shù)指標(biāo)，多關(guān)注用戶體驗(yàn)指標(biāo)。


Sergey Chernyshev

@sergeyche / http://sergeychernyshev.com

Web技術(shù)專家，對Web物理性能和開放源碼很有興趣。Meetup: NY Web Performance和WebPerfDays NY的組織者。

答案1——優(yōu)化建議

嘗試一下在完成頁面的Layout布局和CSS開發(fā)工作之前，不在加載任何JavaScript，這會(huì)幫助工程師更好的進(jìn)行網(wǎng)頁編碼，同時(shí)正常加載異步代碼。

答案2——常見錯(cuò)誤

最常見的錯(cuò)誤就是圖片尺寸過大，其實(shí)使用較小的文件大小獲得滿意的圖片效果非常容易，但不注意的話頁面就會(huì)很臃腫。另外頁面上會(huì)有許多腳本和代碼（如JS和CSS）導(dǎo)致渲染延遲，我最喜歡在一切展現(xiàn)出來后再加載這些內(nèi)容。



Patrick Meenan

@patmeenan / http://webpagetest.org

WebPageTest工具制作者， Chrome工程師@Google。

答案1——優(yōu)化建議

先交付能滿足用戶體驗(yàn)的最簡單功能，這可能存在效果欺騙，但從技術(shù)上囊括了圖片優(yōu)化、壓縮、async js、延遲加載圖片以及最典型的Web優(yōu)化方法，而從整個(gè)網(wǎng)站來看并不會(huì)影響用戶的感知，還能幫助網(wǎng)站和APP進(jìn)行深度優(yōu)化。很多科技網(wǎng)站現(xiàn)在都喜歡用到的瀑布流頁面展現(xiàn)方式（尤其是幻燈片與頁面同步加載時(shí)）就是個(gè)典型例子，你可以根據(jù)每個(gè)請求的必要性，決定頁面的加載程度，如果與后面的功能重疊了，就盡可能地優(yōu)化它。這有助于我們專注用戶體驗(yàn)，帶來更好的優(yōu)化結(jié)果。

答案2——常見錯(cuò)誤

在大多數(shù)情況下，我看到的問題仍然以經(jīng)典優(yōu)化問題（即便是大型網(wǎng)站）為主。

廉價(jià)虛機(jī)的糟糕性能，大中型網(wǎng)站通常沒有這個(gè)問題，但國內(nèi)大部分個(gè)人站長和初創(chuàng)公司的網(wǎng)站都托管在廉價(jià)的虛擬主機(jī)或云主機(jī)平臺上，糟糕的系統(tǒng)性能導(dǎo)致超過5秒鐘才讀取到后端數(shù)據(jù)庫內(nèi)容的情況比比皆是。而糟糕的圖像壓縮功能影響范圍更廣，從高分辨率的24位PNG圖片，到高分辨率的JPEG（非合理畫面質(zhì)量的JPEG）。根據(jù)瀏覽器要求使用指定格式的圖片當(dāng)然最好，但即使常規(guī)圖片的壓縮也是個(gè)不小的挑戰(zhàn)，特別是對需要編輯上傳文章圖片的內(nèi)容網(wǎng)站而言。

網(wǎng)站和應(yīng)用越來越多地依賴第三方服務(wù)或插件提供一些基礎(chǔ)服務(wù)，如聊天功能、網(wǎng)站分析、廣告、社交、登錄、支付、定位等等。如今，調(diào)用第三方服務(wù)的網(wǎng)站和APP數(shù)量激增，抵消了HTTP/2帶來的很多性能提升。

很多網(wǎng)站在Head頭部加載外部腳本和CSS，標(biāo)簽管理器同時(shí)加載進(jìn)來，這些“無用內(nèi)容”過渡消耗了瀏覽器的預(yù)加載器資源，甚至對頁面核心內(nèi)容的展示造成了嚴(yán)重的阻塞延遲。


Sara Soueidan

@SaraSoueidan / http://sarasoueidan.com

前端開發(fā)人員和SVG可縮放矢量圖形倡導(dǎo)者

答案1——優(yōu)化建議

圖片優(yōu)化，優(yōu)化和使用響應(yīng)式圖片（<image> 和srcset屬性），因?yàn)榇蠖鄶?shù)網(wǎng)站加載圖片太耗時(shí)間了，讓用戶幾乎總是處于緩慢連接中，這太沒人性了。

答案2——常見錯(cuò)誤

未優(yōu)化圖片和為了追求差異化使用不常用的字體，是在我瀏覽大多數(shù)有問題網(wǎng)站中，導(dǎo)致頁面加載時(shí)間較長的兩個(gè)最常見的原因。


Anselm Hannemann

@helloanselm / http://helloanselm.com

前端開發(fā)人員，熱衷于穩(wěn)定而可擴(kuò)展的代碼架構(gòu)。 WDRL Newsletter的管理者。

答案1——優(yōu)化建議

開始一個(gè)項(xiàng)目之前，最重要的事情就是對此項(xiàng)目的Web性能核心指標(biāo)有一個(gè)準(zhǔn)確的技術(shù)定義，比如支付類網(wǎng)站首要穩(wěn)定，而電商促銷網(wǎng)站更注重高并發(fā)。同時(shí)要時(shí)刻謹(jǐn)記Web和瀏覽器的一些基本原則，比如資源的獲取、解析和加載順序，就可以對Web性能進(jìn)行最大的改善，這比縮小圖片尺寸等優(yōu)化方法更有效。要將資源盡快在瀏覽器里加載出來，就要減少JavaScript的使用，除非你有很充足的理由一定要這么做。

答案2——常見錯(cuò)誤

人們通常傾向于進(jìn)行一些微優(yōu)化工作，但我們有太多東西需要優(yōu)化了，如果因?yàn)槲?yōu)化而錯(cuò)過真正重要的性能優(yōu)化方法，就會(huì)舍本逐末、事倍功半。


Patrick Sexton

@PatrickSexton / http://varvy.com

http://GetListed.org創(chuàng)始人，現(xiàn)負(fù)責(zé)免費(fèi)SEO/Web性能工具Varvy的開發(fā)。

答案1——優(yōu)化建議

優(yōu)化和推遲圖片加載，是以最小損失獲得Web性能的最佳辦法。

答案2——常見錯(cuò)誤

我認(rèn)為最常見的錯(cuò)誤是亂用框架，明明不需要框架就可以完成的工作為何要加上框架呢？我見過有人因?yàn)橐恍┳屓朔浅Ｗタ竦脑蚨撁嫔咸砑觠Query ，比如將圖片向上移幾個(gè)像素或完成其它很簡單的任務(wù)，CSS框架問題也很常見。我們似乎忘了是為用戶制作Web網(wǎng)頁，而不是為設(shè)計(jì)師或程序員提供方便?？蚣艿摹氨憷敝帲褪窃斐蒞eb網(wǎng)頁越來越臃腫的罪魁禍?zhǔn)住?br>

Christian Heilmann

@codepo8 / http://christianheilmann.com

技術(shù)布道者，Microsoft Edge瀏覽器開發(fā)者。

答案1——優(yōu)化建議

圖片是目前為止我們在Web性能方面遇到的最大問題，學(xué)習(xí)如何使用不同的圖片格式進(jìn)行Web優(yōu)化，讓CMS支持響應(yīng)式圖片，別再讓一張圖片占領(lǐng)不同終端的瀏覽器。

答案2——常見錯(cuò)誤

很多人在優(yōu)化自家產(chǎn)品方面做得很棒，但卻被第三方腳本、內(nèi)容和服務(wù)的性能優(yōu)化束手束腳。其實(shí)我們不需要為每個(gè)社交網(wǎng)站都設(shè)置展示按鈕，只需要停止調(diào)用這些內(nèi)容就可以了。視差滾動(dòng)(Parallax Scrolling)網(wǎng)站設(shè)計(jì)非常流行，但我們常常忘記告訴瀏覽器，為固定部分內(nèi)容生成一個(gè)單獨(dú)的層，這就非常影響網(wǎng)站的性能。在網(wǎng)站制作和測試過程中，我們會(huì)用高性能的硬件上測試自己的網(wǎng)站有多牛，卻不愿意在中低端設(shè)備上進(jìn)行性能測試，難道你不知道屌絲才是互聯(lián)網(wǎng)最主要的用戶群體么？！你的硬件配置很大程度上不是你的用戶的選擇。


Peter Cooper

@peterc / http://peterc.org

CooperPress發(fā)行人，出版了《Web Operations Weekly》，同時(shí)也是軟件開發(fā)者和代碼實(shí)踐派。

答案1——優(yōu)化建議

對用戶體驗(yàn)來說，盡管數(shù)字是衡量優(yōu)化效果的重要方式，但最終還是取決于真實(shí)用戶體驗(yàn)的感知（專門給搜索引擎爬蟲制作的網(wǎng)站除外），所以他們的看法和體驗(yàn)才最重要。如果加入一個(gè)額外元素能夠幫助他們更快地加載頁面，即使數(shù)字上沒有多少增長，恕我直言，這個(gè)元素仍舊是受用戶歡迎的。

答案2——常見錯(cuò)誤

當(dāng)一種趨勢開始流行時(shí)，大家往往容易走極端，現(xiàn)在人們將焦點(diǎn)集中于網(wǎng)絡(luò)性能的優(yōu)化，但這只是暫時(shí)的問題，其代價(jià)卻是我們減少對網(wǎng)絡(luò)架構(gòu)和網(wǎng)站整體設(shè)計(jì)的考慮。一個(gè)網(wǎng)頁可以通過優(yōu)化加載得很快，但用戶希望看到的是一個(gè)聯(lián)系緊密的網(wǎng)站整體，忘掉這個(gè)初衷，再快的網(wǎng)頁速度也不會(huì)讓用戶體驗(yàn)更爽。

同樣，當(dāng)人們專注于主頁加載速度優(yōu)化，卻沒有在其它方面投入同樣多的精力，所幸社交媒體的流行降低了網(wǎng)站主頁的重要性，用戶通過社交平臺可以直接看到內(nèi)容或產(chǎn)品頁。所以我們要注重用戶進(jìn)入你的網(wǎng)站的渠道并進(jìn)行針對性優(yōu)化，而不是某些CXO們所憂心的“標(biāo)題”的位置。

小結(jié)

今天的歪果磚家團(tuán)觀點(diǎn)再度強(qiáng)調(diào)了圖片優(yōu)化的重要性，同時(shí)他們的經(jīng)驗(yàn)告訴我們，網(wǎng)站優(yōu)化不能拘泥于一個(gè)頁面的性能指標(biāo)優(yōu)化，而應(yīng)該以真實(shí)用戶的視角，從整個(gè)網(wǎng)站的業(yè)務(wù)邏輯、業(yè)務(wù)流程出發(fā)，制定有針對性的整體優(yōu)化方案。