聲明：原文版權(quán)屬于 google，原文以 CC BY 3.0 協(xié)議發(fā)布，原文中的代碼部分以 Apache 2.0 協(xié)議發(fā)布。中文翻譯部分并非官方文檔，僅供參考。

PageSpeed Insights analyzes a page to see if it follows our recommendations for making a page render in under a second on a mobile network. Research has shown that any delay longer than a second will cause the user to interrupt their flow of thought, creating a poor experience. Our goal is to keep the user engaged with the page and deliver the optimal experience, regardless of device or type of network.

一個(gè)網(wǎng)頁(yè)是否可以在移動(dòng)環(huán)境下用不到一秒的時(shí)間完成渲染，是一項(xiàng)非常重要的性能指標(biāo)。研究顯示，任何超過(guò)一秒鐘的延遲都將打斷用戶的思維順流狀態(tài)，帶來(lái)較差的體驗(yàn)。我們的目標(biāo)是不論在任何設(shè)備或網(wǎng)絡(luò)條件下，都要維持用戶在網(wǎng)頁(yè)中的沉浸狀態(tài)，提供更好的體驗(yàn)。

It is not easy to meet the one second time budget. Luckily for us, the whole page doesn’t have to render within this budget, instead, we must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible. Then, while the user is interpreting the first page of content, the rest of the page can be delivered progressively in the background.

想要達(dá)到這個(gè)標(biāo)準(zhǔn)并不是那么容易。不過(guò)幸運(yùn)的是，我們并不需要在這個(gè)時(shí)間指標(biāo)內(nèi)渲染出整個(gè)頁(yè)面，而是要在一秒以內(nèi)傳輸并渲染出“首屏內(nèi)容”（ATF），讓用戶盡快與頁(yè)面交互。接下來(lái)，當(dāng)用戶與首屏內(nèi)容進(jìn)行交互的同時(shí)，頁(yè)面的剩余部分可以在后臺(tái)持續(xù)加載完成。

（譯注：原文中的“ATF”一詞源自傳統(tǒng)出版業(yè)，指的是報(bào)紙頭版的中折線以上區(qū)域，這塊黃金區(qū)域往往用來(lái)刊登最有吸引力的新聞。延伸到互聯(lián)網(wǎng)領(lǐng)域，ATF 指的是頁(yè)面中不需要滾動(dòng)就可以看到的首屏內(nèi)容。）

Adapting to high latency mobile networks

適應(yīng)高延遲的移動(dòng)網(wǎng)絡(luò)

Meeting the one second ATF criteria on mobile devices poses unique challenges which are not present on other networks. Users may be accessing your site through a variety of different 2G, 3G, and 4G networks. Network latencies are significantly higher than a wired connection, and consume a significant portion of our 1000 ms budget to render the ATF content:

在移動(dòng)設(shè)備上達(dá)到“首屏秒開”的準(zhǔn)則，需要面對(duì)其它網(wǎng)絡(luò)所遇不到的獨(dú)特挑戰(zhàn)。用戶可能正通過(guò) 2G、3G 或 4G 等各種各樣的網(wǎng)絡(luò)來(lái)訪問(wèn)你的網(wǎng)站。移動(dòng)網(wǎng)絡(luò)的延遲要明顯高于有線連接，并且將消耗我們“首屏秒開”預(yù)算中的一大部分：

• 200-300 ms roundtrip times for 3G networks
• 50-100 ms roundtrip times for 4G networks
• 3G 網(wǎng)絡(luò)的往返時(shí)間將消耗 200-300 ms
• 4G 網(wǎng)絡(luò)的往返時(shí)間將消耗 50-100 ms

3G is the dominant network type around the world, and while 4G deployments are in progress around the world, you should still expect that the majority of users will be accessing your page on a 3G network. For this reason, we have to assume that each network request will take, on average, 200 milliseconds.

3G 是全球范圍內(nèi)占據(jù)統(tǒng)治地位的移動(dòng)網(wǎng)絡(luò)，而 4G 網(wǎng)絡(luò)正在普及之中，你需要明白你的主流用戶仍然在使用 3G 網(wǎng)絡(luò)來(lái)訪問(wèn)你的頁(yè)面。基于這個(gè)原因，我們不得不假設(shè)平均每次網(wǎng)絡(luò)請(qǐng)求將消耗 200 ms。

With that in mind, let’s now work backwards. If we look at a typical sequence of communication between a browser and a server, 600 ms of that time has already been used up by network overhead: a DNS lookup to resolve the hostname (e.g. google.com) to an IP address, a network roundtrip to perform the TCP handshake, and finally a full network roundtrip to send the HTTP request. This leaves us with just 400 ms!

明白了這一點(diǎn)之后，我們來(lái)倒推一下時(shí)間。如果我們來(lái)分析一下瀏覽器與服務(wù)器之間一次典型的通信過(guò)程，會(huì)發(fā)現(xiàn) 600 ms 的時(shí)間就已經(jīng)被網(wǎng)絡(luò)本身消耗掉了：一次 DNS 查詢用于將主機(jī)名（比如 google.com）解析為 IP 地址，一次網(wǎng)絡(luò)往返用于發(fā)起 TCP 握手，以及最后一次完整的網(wǎng)絡(luò)往返用于發(fā)送 HTTP 請(qǐng)求。我們就只剩下 400 ms 了！

[Figure%201]%20Render%20a%20mobile%20page%20in%201%20second

[圖%201]%20一秒渲染一個(gè)移動(dòng)頁(yè)面

• DNS%20Lookup%20(200%20ms)
• TCP%20Connection%20(200%20ms)
• HTTP%20Request%20and%20Response%20(200%20ms)
• DNS%20查詢%20(200%20ms)
• TCP%20連接%20(200%20ms)
• HTTP%20請(qǐng)求與響應(yīng)%20(200%20ms)

600%20ms%20mandatory%203G%20network%20overhead%20which%20you%20cannot%20do%20anything%20about

這%20600%20ms%20是不可避免的%203G%20網(wǎng)絡(luò)消耗，你對(duì)此無(wú)能為力。

• Server%20Response%20Time%20(200%20ms)
• Client-Side%20Rendering%20(200%20ms)
• 服務(wù)器響應(yīng)時(shí)間%20(200%20ms)
• 客戶端渲染%20(200%20ms)

400%20ms%20which%20you%20can%20optimize%20by%20updating%20your%20server%20and%20structuring%20your%20page%20Appropriately%20(what%20the%20tool%20tries%20to%20help%20you%20with)

這%20400%20ms%20是你可以優(yōu)化的，只要你合理地更新你的服務(wù)器，并以適當(dāng)?shù)姆绞綐?gòu)建你的頁(yè)面（這正是%20PageSpeed%20Insights%20這個(gè)工具可以幫到你的）。

Delivering%20the%20sub%20one%20second%20rendering%20experience

實(shí)現(xiàn)半秒渲染的體驗(yàn)

After%20subtracting%20the%20network%20latency,%20we%20are%20left%20with%20just%20400%20milliseconds%20in%20our%20budget,%20and%20there%20is%20still%20a%20lot%20of%20work%20to%20do:%20server%20must%20render%20the%20response,%20client-side%20application%20code%20must%20execute,%20and%20the%20browser%20must%20layout%20and%20render%20the%20content.%20With%20that%20in%20mind,%20the%20following%20criteria%20should%20help%20us%20stay%20within%20the%20budget:

在除去網(wǎng)絡(luò)延遲之后，我們的預(yù)算只剩下區(qū)區(qū)%20400%20ms%20了，但我們?nèi)匀贿€有大量的工作要做：服務(wù)器必須渲染出響應(yīng)內(nèi)容，客戶端應(yīng)用程序代碼必須執(zhí)行，而且瀏覽器必須完成內(nèi)容的布局和渲染。了解了這些之后，下面這些準(zhǔn)則將幫助我們控制住預(yù)算：

(1)%20Server%20must%20render%20the%20response%20(<%20200%20ms)

(1)%20服務(wù)器必須在%20200%20ms%20以內(nèi)渲染出響應(yīng)內(nèi)容

Server%20response%20time%20is%20the%20time%20it%20takes%20for%20a%20server%20to%20return%20the%20initial%20html,%20factoring%20out%20the%20network%20transport%20time.%20Because%20we%20only%20have%20so%20little%20time,%20this%20time%20should%20be%20kept%20at%20a%20minimum%20-%20ideally%20within%20200%20milliseconds,%20and%20preferably%20even%20less!

服務(wù)器響應(yīng)時(shí)間就是在除去網(wǎng)絡(luò)傳輸時(shí)間之后，一臺(tái)服務(wù)器首先返回%20HTML%20所花費(fèi)的時(shí)間。因?yàn)槲覀兪Ｏ碌臅r(shí)間實(shí)在太少了，這個(gè)時(shí)間應(yīng)該控制在最低限度——理想情況下應(yīng)該低于%20200%20ms，而且越少越好！

(2)%20Number%20of%20redirects%20should%20be%20minimized

(2)%20重定向的次數(shù)應(yīng)該減至最少

Additional%20HTTP%20redirects%20can%20add%20one%20or%20two%20extra%20network%20roundtrips%20(two%20if%20an%20extra%20DNS%20lookup%20is%20required),%20incurring%20hundreds%20of%20milliseconds%20of%20extra%20latency%20on%203G%20networks.%20For%20this%20reason,%20we%20strongly%20encourage%20webmasters%20to%20minimize%20the%20number,%20and%20ideally%20eliminate%20redirects%20entirely%20-%20this%20is%20especially%20important%20for%20the%20HTML%20document%20(avoid%20“m%20dot”%20redirects%20when%20possible).

額外的%20HTTP%20重定向會(huì)增加一次或兩次額外的網(wǎng)絡(luò)往返（如果需要再次查詢%20DNS%20的話就是兩次），這在%203G%20網(wǎng)絡(luò)上將導(dǎo)致幾百毫秒的額外延遲。因此，我們強(qiáng)烈建議網(wǎng)站管理員們減少重定向的次數(shù)，而且最好完全消除重定向——這對(duì)%20HTML%20文檔來(lái)說(shuō)尤其重要（盡可能避免重定向到%20“m.”%20二級(jí)域名的行為）。

(3)%20Number%20of%20roundtrips%20to%20first%20render%20should%20be%20minimized

(3)%20首次渲染所需的網(wǎng)絡(luò)往返次數(shù)應(yīng)該減至最少

Due%20to%20how%20TCP%20estimates%20the%20capacity%20of%20a%20connection%20(i.e.%20TCP%20Slow%20Start),%20a%20new%20TCP%20connection%20cannot%20immediately%20use%20the%20full%20available%20bandwidth%20between%20the%20client%20and%20the%20server.%20Because%20of%20this,%20the%20server%20can%20send%20up%20to%2010%20TCP%20packets%20on%20a%20new%20connection%20(~14KB)%20in%20first%20roundtrip,%20and%20then%20it%20must%20wait%20for%20client%20to%20acknowledge%20this%20data%20before%20it%20can%20grow%20its%20congestion%20window%20and%20proceed%20to%20deliver%20more%20data.

由于%20TCP%20在評(píng)估連接狀況方面采用了一套特殊機(jī)制（參見%20TCP%20慢啟動(dòng)），一次全新的%20TCP%20連接無(wú)法立即用滿客戶端和服務(wù)器之間的全部有效帶寬。在這種情況下，服務(wù)器在首次網(wǎng)絡(luò)往返中，通過(guò)一個(gè)新連接（約%2014kB）只能發(fā)送最多%2010%20個(gè)%20TCP%20包，接下來(lái)它必須等待客戶端應(yīng)答這些數(shù)據(jù)，然后才能增加它的擁塞窗口并繼續(xù)發(fā)送更多數(shù)據(jù)。

Due%20to%20this%20TCP%20behavior,%20it%20is%20important%20to%20optimize%20your%20content%20to%20minimize%20the%20number%20of%20roundtrips%20required%20to%20deliver%20the%20necessary%20data%20to%20perform%20the%20first%20render%20of%20the%20page.%20Ideally,%20the%20ATF%20content%20should%20fit%20under%2014KB%20-%20this%20allows%20the%20browser%20to%20paint%20the%20page%20after%20just%20one%20roundtrip.%20Also,%20it%20is%20important%20to%20note%20that%20the%2010%20packet%20(IW10)%20limit%20is%20a%20recent%20update%20to%20the%20TCP%20standard:%20you%20should%20ensure%20that%20your%20server%20is%20upgraded%20to%20latest%20version%20to%20take%20advantage%20of%20this%20change.%20Otherwise,%20the%20limit%20will%20likely%20be%203-4%20packets!

考慮到%20TCP%20的這種行為，優(yōu)化你的內(nèi)容就顯得十分重要。傳輸必要數(shù)據(jù)、完成頁(yè)面首次渲染所需的網(wǎng)絡(luò)往返次數(shù)應(yīng)該減至最少。理想情況下，首屏內(nèi)容應(yīng)該小于%2014KB——這樣瀏覽器才能在一次網(wǎng)絡(luò)往返之后就可以繪制頁(yè)面。同時(shí)，還有一個(gè)關(guān)鍵點(diǎn)需要留意，10%20個(gè)數(shù)據(jù)包上限（IW10）源自%20TCP%20標(biāo)準(zhǔn)的最近一次更新：你應(yīng)該確保你的服務(wù)器軟件已經(jīng)升級(jí)到最新版本，以便從這次更新中獲益。否則，這個(gè)上限將可能降到%203～4%20個(gè)數(shù)據(jù)包。

(4)%20Avoid%20external%20blocking%20JAVAScript%20and%20css%20in%20above-the-fold%20content

(4)%20避免在首屏內(nèi)容中出現(xiàn)外鏈的阻塞式%20JavaScript%20和%20CSS

Before%20a%20browser%20can%20render%20a%20page%20to%20the%20user,%20it%20has%20to%20parse%20the%20page.%20If%20it%20encounters%20a%20non-async%20or%20blocking%20external%20script%20during%20parsing,%20it%20has%20to%20stop%20and%20download%20that%20resource.%20Each%20time%20it%20does%20that,%20it%20is%20adding%20a%20network%20round%20trip,%20which%20will%20delay%20the%20time%20to%20first%20render%20of%20the%20page.

瀏覽器必須先解析頁(yè)面，然后才能向用戶渲染這個(gè)頁(yè)面。如果它在解析期間遇到一個(gè)非異步的或具有阻塞作用的外部腳本的話，它就不得不停下來(lái)，然后去下載這個(gè)資源。每次遇到這種情況，都會(huì)增加一次網(wǎng)絡(luò)往返，這將延后頁(yè)面的首次渲染時(shí)間。

As%20a%20result,%20the%20JavaScript%20and%20CSS%20needed%20to%20render%20the%20above%20the%20fold%20region%20should%20be%20inlined,%20and%20JavaScript%20or%20CSS%20needed%20to%20add%20additional%20functionality%20to%20the%20page%20should%20be%20loaded%20after%20the%20ATF%20content%20has%20been%20delivered.

結(jié)論就是，首屏渲染所需的%20JavaScript%20和%20CSS%20應(yīng)該內(nèi)嵌到頁(yè)面中，而用于提供附加功能的%20JavaScript%20和%20CSS%20應(yīng)該在首屏內(nèi)容已經(jīng)傳輸完成之后再加載。

(5)%20Reserve%20time%20for%20browser%20layout%20and%20rendering%20(200%20ms)

(5)%20為瀏覽器的布局和渲染工作預(yù)留時(shí)間%20(200%20ms)

The%20process%20of%20parsing%20the%20HTML,%20CSS,%20and%20executing%20JavaScript%20takes%20time%20and%20client%20resources!%20Depending%20on%20the%20speed%20of%20the%20mobile%20device,%20and%20the%20complexity%20of%20the%20page,%20this%20process%20can%20take%20hundreds%20of%20milliseconds.%20Our%20recommendation%20is%20to%20reserve%20200%20milliseconds%20for%20browser%20overhead.

解析%20HTML%20和%20CSS、執(zhí)行%20JavaScript%20的過(guò)程也將消耗時(shí)間和客戶端資源！取決于移動(dòng)設(shè)備的速度和頁(yè)面的復(fù)雜度，這個(gè)過(guò)程將占用幾百毫秒。我們的建議是預(yù)留%20200%20ms%20作為瀏覽器的時(shí)間消耗。

(6)%20Optimize%20JavaScript%20execution%20and%20rendering%20time

(6)%20優(yōu)化%20JavaScript%20執(zhí)行和渲染耗時(shí)

Complicated%20scripts%20and%20inefficient%20code%20can%20take%20tens%20and%20hundreds%20of%20milliseconds%20to%20execute%20-%20use%20built-in%20developer%20tools%20in%20the%20browser%20to%20profile%20and%20optimize%20your%20code.%20For%20a%20great%20introduction,%20take%20a%20look%20at%20our%20interactive%20course%20for%20Chrome%20Developer%20Tools.

執(zhí)行復(fù)雜的腳本和低效的代碼可能會(huì)耗費(fèi)幾十或上百毫秒——可以使用瀏覽器內(nèi)建的開發(fā)者工具來(lái)收集概況、優(yōu)化代碼。如果你想深入這個(gè)話題，不妨看看我們的《Chrome%20開發(fā)者工具交互教程》。

Note:%20The%20above%20is%20also%20not%20the%20complete%20list%20of%20all%20possible%20optimizations%20-%20it%20is%20a%20list%20of%20top%20mobile%20criteria%20to%20deliver%20a%20sub%20one%20second%20rendering%20time%20-%20and%20all%20other%20web%20performance%20best%20practicesshould%20be%20applied.%20Check%20out%20PageSpeed%20Insights%20for%20further%20advice%20and%20recommendations.

請(qǐng)注意：以上并未列舉出所有可能的優(yōu)化方案——只列出了一些移動(dòng)端達(dá)成半秒渲染時(shí)間的基本準(zhǔn)則——其它所有的網(wǎng)頁(yè)性能最佳實(shí)踐也應(yīng)該運(yùn)用起來(lái)。到%20PageSpeed%20Insights%20來(lái)看看，獲取進(jìn)一步的建議和推薦方案。

For%20a%20deep-dive%20on%20the%20above%20mobile%20criteria,%20also%20check%20out

如果需要深入探索上述移動(dòng)端準(zhǔn)則，請(qǐng)參閱：

• Optimizing%20the%20Critical%20Rendering%20Path%20for%20Instant%20Mobile%20Websites%20(slides,%20video).
• Instant%20Mobile%20Websites:%20Techniques%20and%20Best%20Practices%20(slides,%20video)
• 為極速移動(dòng)網(wǎng)站優(yōu)化渲染的關(guān)鍵路徑%20(幻燈片、視頻).
• 極速移動(dòng)網(wǎng)站：技巧與最佳實(shí)踐%20(幻燈片,%20視頻)

FAQ

常見問(wèn)題

How%20do%204G%20networks%20impact%20above%20mobile%20criteria?

4G%20網(wǎng)絡(luò)對(duì)上述移動(dòng)端準(zhǔn)則有何影響？

Lower%20roundtrip%20latencies%20are%20one%20of%20the%20key%20improvements%20in%204G%20networks.%20This%20will%20help%20enormously,%20by%20reducing%20the%20total%20network%20overhead%20time,%20which%20is%20currently%20over%2050%%20of%20our%20one%20second%20budget%20on%203G%20networks.%20However,%203G%20is%20the%20dominant%20network%20type%20around%20the%20world,%20and%20will%20be%20for%20years%20to%20come%20-%20you%20have%20to%20optimize%20pages%20with%203G%20users%20in%20mind.

較低的網(wǎng)絡(luò)往返延遲是%204G%20網(wǎng)絡(luò)的一處關(guān)鍵改良。減少所有的網(wǎng)絡(luò)損耗時(shí)間對(duì)網(wǎng)頁(yè)性能將有巨大幫助，而目前在%203G%20網(wǎng)絡(luò)上這些損耗就占用了我們一秒預(yù)算中的大半時(shí)間。不管怎樣，3G%20仍然是全球最主流的移動(dòng)網(wǎng)絡(luò)，并且在今后幾年都將如此——我們?cè)趦?yōu)化網(wǎng)頁(yè)時(shí)不得不把%203G%20用戶放在心上。

I%20am%20using%20a%20JavaScript%20library,%20such%20as%20JQuery,%20any%20advice?

我正在使用一個(gè)%20JavaScript%20類庫(kù)，比如%20jQuery，有什么建議嗎？

Many%20JavaScript%20libraries,%20such%20as%20JQuery,%20are%20used%20to%20enhance%20the%20page%20to%20add%20additional%20interactivity,%20animations,%20and%20other%20effects.%20However,%20many%20of%20these%20behaviors%20can%20be%20safely%20added%20after%20the%20ATF%20content%20is%20rendered.%20Investigate%20moving%20the%20execution%20and%20loading%20of%20such%20JavaScript%20until%20after%20the%20page%20is%20loaded.

大多數(shù)%20JavaScript%20類庫(kù)，比如%20jQuery，通常用來(lái)增強(qiáng)頁(yè)面、提供附加的交互、動(dòng)畫和其它效果。但是，大多數(shù)這些行為可以安全地在首屏渲染之后再加入進(jìn)來(lái)。研究一下是否可以把這些%20JavaScript%20的加載和執(zhí)行推遲到頁(yè)面加載之后。

I%20am%20using%20a%20JavaScript%20framework,%20to%20construct%20the%20page,%20any%20advice?

我在正使用一個(gè)%20JavaScript%20框架來(lái)渲染整個(gè)頁(yè)面，有什么建議嗎？

If%20the%20content%20of%20the%20page%20is%20constructed%20by%20client-side%20JavaScript,%20then%20you%20should%20investigate%20inlining%20the%20relevant%20JavaScript%20modules%20to%20avoid%20extra%20network%20roundtrips.%20Similarly,%20leveraging%20server-side%20rendering%20can%20significantly%20improve%20first%20page%20load%20performance:%20render%20JS%20templates%20on%20the%20server,%20inline%20the%20results%20into%20HTML,%20and%20then%20use%20client-side%20templating%20once%20the%20application%20is%20loaded.

如果頁(yè)面內(nèi)容是由客戶端%20JavaScript%20來(lái)渲染的，那么你應(yīng)該研究一下是否可以把相關(guān)的%20JavaScript%20模塊都內(nèi)嵌進(jìn)來(lái)，以免產(chǎn)生額外的網(wǎng)絡(luò)往返開銷。同樣，利用服務(wù)器端渲染可以顯著地改善首次頁(yè)面加載的性能：在服務(wù)器端渲染%20JS%20模板，并內(nèi)嵌到%20HTML%20中，然后一旦應(yīng)用程序加載完成就立即在客戶端渲染模板。

How%20will%20SPDY%20and%20HTTP%202.0%20help?

SPDY%20和%20HTTP%202.0%20協(xié)議會(huì)有什么幫助？

SPDY%20and%20HTTP%202.0%20both%20aim%20to%20reduce%20latency%20of%20page%20loads%20by%20making%20more%20efficient%20use%20of%20the%20underlying%20TCP%20connection%20(multiplexing,%20header%20compression,%20prioritization).%20Further,%20server%20push%20can%20further%20help%20improve%20performance%20by%20eliminating%20extra%20network%20latency.%20We%20encourage%20you%20to%20investigate%20adding%20SPDY%20support%20on%20your%20servers,%20and%20switching%20to%20HTTP%202.0%20once%20the%20standard%20is%20ready.

SPDY%20和%20HTTP%202.0%20協(xié)議的目標(biāo)都是通過(guò)更有效地利用底層的%20TCP%20連接（多路復(fù)用、頭壓縮、優(yōu)先化處理），來(lái)減少頁(yè)面的加載延遲。而且服務(wù)器%20push%20通過(guò)消除額外的網(wǎng)絡(luò)延遲，可以進(jìn)一步促進(jìn)性能的改善。我們建議你為服務(wù)器增加對(duì)%20SPDY%20協(xié)議的支持，并且當(dāng)%20HTTP%202.0%20標(biāo)準(zhǔn)就緒之后就立即切換過(guò)去。

How%20do%20I%20identify%20critical%20CSS%20on%20my%20page?

如何判斷頁(yè)面中的哪些%20CSS%20是%20critical%20CSS？

（譯注：“Critical%20CSS”%20是指首屏渲染所必需的最小化的%20CSS%20代碼集合。）

In%20Chrome%20Developer%20Tools,%20open%20the%20Audits%20panel,%20and%20run%20a%20Web%20Page%20Performance%20report,%20in%20the%20generated%20report,%20look%20for%20Remove%20unused%20CSS%20rules.%20Or%20use%20any%20other%20third%20party%20tool,%20or%20script,%20to%20identify%20which%20CSS%20selectors%20are%20applied%20on%20each%20page.

在%20Chrome%20開發(fā)者工具中，打開審計(jì)（Audits）面板，然后運(yùn)行一次網(wǎng)頁(yè)性能（Web%20Page%20Performance）報(bào)告。在生成的報(bào)告中，試一下“刪除未使用的%20CSS%20規(guī)則（Remove%20unused%20CSS%20rules）”。也可以使用其它第三方工具或腳本，來(lái)識(shí)別每個(gè)頁(yè)面分別應(yīng)用了哪些%20CSS%20選擇符。

Can%20these%20best%20practices%20be%20automated?

這些最佳實(shí)踐可以自動(dòng)化嗎？

Absolutely.%20There%20are%20many%20commercial%20and%20open-source%20web%20performance%20optimization%20(WPO)%20products%20which%20can%20help%20you%20meet%20some%20or%20all%20of%20the%20criteria%20above.%20For%20open-source%20solutions,%20take%20a%20look%20at%20the%20PageSpeed%20optimization%20tools.

當(dāng)然可以。有很多商業(yè)的或開源的網(wǎng)頁(yè)性能優(yōu)化（WPO）產(chǎn)品都可以幫你達(dá)成上述部分或全部準(zhǔn)則。對(duì)于開源解決方案，不妨看看%20PageSpeed%20優(yōu)化工具。

How%20do%20I%20tune%20my%20server%20to%20meet%20these%20criteria?

我怎樣調(diào)整我的服務(wù)器來(lái)符合這些準(zhǔn)則？

First,%20ensure%20that%20your%20server%20is%20running%20an%20up-to-date%20version%20of%20the%20operating%20system.%20In%20order%20to%20benefit%20from%20the%20increased%20initial%20TCP%20congestion%20window%20size%20(IW10),%20you%20will%20need%20linux%20kernel%202.6.39+.%20For%20other%20operating%20systems,%20consult%20the%20documentation.

首先，確保你的服務(wù)器正在運(yùn)行最新版的操作系統(tǒng)。為了從%20TCP%20初始擁塞窗口數(shù)量的增加（IW10）中獲益，你需要%202.6.39+%20版本的%20Linux%20內(nèi)核。對(duì)于其它操作系統(tǒng)，請(qǐng)查閱相關(guān)文檔。

To%20optimize%20server%20response%20time,%20instrument%20your%20code,%20or%20use%20an%20application%20monitoring%20solution%20to%20identify%20your%20bottleneck%20-%20e.g.,%20scripting%20runtime,%20database%20calls,%20RPC%20requests,%20rendering,%20etc.%20The%20goal%20is%20to%20render%20the%20HTML%20response%20within%20200%20milliseconds.

為了優(yōu)化服務(wù)器的響應(yīng)時(shí)間，請(qǐng)測(cè)評(píng)你的代碼性能，或使用監(jiān)控程序來(lái)發(fā)現(xiàn)性能瓶頸——比如腳本運(yùn)行時(shí)、數(shù)據(jù)庫(kù)調(diào)用、RPC%20請(qǐng)求、渲染等等。最終目標(biāo)就是在%20200%20ms%20內(nèi)渲染出%20HTML%20響應(yīng)內(nèi)容。

What%20about%20Content%20Security%20Policy?

內(nèi)容安全策略（Content%20Security%20Policy）怎么辦？

If%20you%20are%20using%20CSP,%20then%20you%20may%20need%20to%20update%20your%20default%20policy.

如果你正在使用%20CSP，那么你可能需要更新你的默認(rèn)策略。（譯注：CSP%20是一項(xiàng)用于防范%20XSS%20的安全性規(guī)范，具體參見%20Content%20Security%20Policy%20-%20維基百科。）

First,%20inline%20CSS%20attributes%20on%20HTML%20elements(e.g.,%20<p%20style=...>)%20should%20be%20avoided%20where%20possible,%20as%20they%20often%20lead%20to%20unnecessary%20code%20duplication,%20and%20are%20blocked%20by%20default%20with%20CSP%20(disabled%20via%20“unsafe%20inline”%20on%20“style-src”).%20If%20you%20have%20inline%20JavaScript,%20then%20you%20will%20need%20to%20update%20the%20CSP%20policy%20with%20“unsafe-inline”%20to%20enable%20its%20execution.%20By%20default,%20CSP%20will%20block%20all%20inline%20script%20tags.

首先，盡可能避免在%20HTML%20元素中內(nèi)聯(lián)%20CSS%20屬性（比如這樣%20<p%20style=...>），因?yàn)樗鼈兂３?dǎo)致不必要的重復(fù)代碼，而且默認(rèn)會(huì)被%20CSP%20攔截（對(duì)%20style-src%20字段使用%20unsafe-inline%20指令可以禁用此類攔截）。如果你使用了內(nèi)聯(lián)的%20JavaScript，那么你需要在%20CSP%20策略中使用%20unsafe-inline%20指令來(lái)令其執(zhí)行。默認(rèn)情況下，CSP%20將攔截所有內(nèi)聯(lián)腳本標(biāo)簽。（譯注：這里的“內(nèi)聯(lián)%20JavaScript”包括多種形態(tài)的%20HTML%20內(nèi)部的腳本代碼，包括類似%20<script>foo();</script>%20這樣的內(nèi)嵌腳本標(biāo)簽、<a%20href="javascript:foo();">%20這樣的偽協(xié)議%20URL、以及%20<a%20href="#"%20onclick="foo();">%20這樣的事件處理屬性。）

希望本文能幫助到您！

點(diǎn)贊+轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）

關(guān)注%20｛我｝，享受文章首發(fā)體驗(yàn)！

每周重點(diǎn)攻克一個(gè)前端技術(shù)難點(diǎn)。更多精彩前端內(nèi)容私信%20我%20回復(fù)“教程”

原文鏈接：https://github.com/cssmagic/blog/issues/20