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

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.

一個網頁是否可以在移動環境下用不到一秒的時間完成渲染，是一項非常重要的性能指標。研究顯示，任何超過一秒鐘的延遲都將打斷用戶的思維順流狀態，帶來較差的體驗。我們的目標是不論在任何設備或網絡條件下，都要維持用戶在網頁中的沉浸狀態，提供更好的體驗。

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.

想要達到這個標準并不是那么容易。不過幸運的是，我們并不需要在這個時間指標內渲染出整個頁面，而是要在一秒以內傳輸并渲染出“首屏內容”（ATF），讓用戶盡快與頁面交互。接下來，當用戶與首屏內容進行交互的同時，頁面的剩余部分可以在后臺持續加載完成。

（譯注：原文中的“ATF”一詞源自傳統出版業，指的是報紙頭版的中折線以上區域，這塊黃金區域往往用來刊登最有吸引力的新聞。延伸到互聯網領域，ATF 指的是頁面中不需要滾動就可以看到的首屏內容。）

Adapting to high latency mobile networks

適應高延遲的移動網絡

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:

在移動設備上達到“首屏秒開”的準則，需要面對其它網絡所遇不到的獨特挑戰。用戶可能正通過 2G、3G 或 4G 等各種各樣的網絡來訪問你的網站。移動網絡的延遲要明顯高于有線連接，并且將消耗我們“首屏秒開”預算中的一大部分：

• 200-300 ms roundtrip times for 3G networks
• 50-100 ms roundtrip times for 4G networks
• 3G 網絡的往返時間將消耗 200-300 ms
• 4G 網絡的往返時間將消耗 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 是全球范圍內占據統治地位的移動網絡，而 4G 網絡正在普及之中，你需要明白你的主流用戶仍然在使用 3G 網絡來訪問你的頁面。基于這個原因，我們不得不假設平均每次網絡請求將消耗 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!

明白了這一點之后，我們來倒推一下時間。如果我們來分析一下瀏覽器與服務器之間一次典型的通信過程，會發現 600 ms 的時間就已經被網絡本身消耗掉了：一次 DNS 查詢用于將主機名（比如 google.com）解析為 IP 地址，一次網絡往返用于發起 TCP 握手，以及最后一次完整的網絡往返用于發送 HTTP 請求。我們就只剩下 400 ms 了！

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

[圖%201]%20一秒渲染一個移動頁面

• 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請求與響應%20(200%20ms)

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

這%20600%20ms%20是不可避免的%203G%20網絡消耗，你對此無能為力。

• Server%20Response%20Time%20(200%20ms)
• Client-Side%20Rendering%20(200%20ms)
• 服務器響應時間%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是你可以優化的，只要你合理地更新你的服務器，并以適當的方式構建你的頁面（這正是%20PageSpeed%20Insights%20這個工具可以幫到你的）。

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

實現半秒渲染的體驗

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:

在除去網絡延遲之后，我們的預算只剩下區區%20400%20ms%20了，但我們仍然還有大量的工作要做：服務器必須渲染出響應內容，客戶端應用程序代碼必須執行，而且瀏覽器必須完成內容的布局和渲染。了解了這些之后，下面這些準則將幫助我們控制住預算：

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

(1)%20服務器必須在%20200%20ms%20以內渲染出響應內容

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!

服務器響應時間就是在除去網絡傳輸時間之后，一臺服務器首先返回%20HTML%20所花費的時間。因為我們剩下的時間實在太少了，這個時間應該控制在最低限度——理想情況下應該低于%20200%20ms，而且越少越好！

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

(2)%20重定向的次數應該減至最少

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重定向會增加一次或兩次額外的網絡往返（如果需要再次查詢%20DNS%20的話就是兩次），這在%203G%20網絡上將導致幾百毫秒的額外延遲。因此，我們強烈建議網站管理員們減少重定向的次數，而且最好完全消除重定向——這對%20HTML%20文檔來說尤其重要（盡可能避免重定向到%20“m.”%20二級域名的行為）。

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

(3)%20首次渲染所需的網絡往返次數應該減至最少

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在評估連接狀況方面采用了一套特殊機制（參見%20TCP%20慢啟動），一次全新的%20TCP%20連接無法立即用滿客戶端和服務器之間的全部有效帶寬。在這種情況下，服務器在首次網絡往返中，通過一個新連接（約%2014kB）只能發送最多%2010%20個%20TCP%20包，接下來它必須等待客戶端應答這些數據，然后才能增加它的擁塞窗口并繼續發送更多數據。

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的這種行為，優化你的內容就顯得十分重要。傳輸必要數據、完成頁面首次渲染所需的網絡往返次數應該減至最少。理想情況下，首屏內容應該小于%2014KB——這樣瀏覽器才能在一次網絡往返之后就可以繪制頁面。同時，還有一個關鍵點需要留意，10%20個數據包上限（IW10）源自%20TCP%20標準的最近一次更新：你應該確保你的服務器軟件已經升級到最新版本，以便從這次更新中獲益。否則，這個上限將可能降到%203～4%20個數據包。

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

(4)%20避免在首屏內容中出現外鏈的阻塞式%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.

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

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.

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

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

(5)%20為瀏覽器的布局和渲染工作預留時間%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、執行%20JavaScript%20的過程也將消耗時間和客戶端資源！取決于移動設備的速度和頁面的復雜度，這個過程將占用幾百毫秒。我們的建議是預留%20200%20ms%20作為瀏覽器的時間消耗。

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

(6)%20優化%20JavaScript%20執行和渲染耗時

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.

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

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.

請注意：以上并未列舉出所有可能的優化方案——只列出了一些移動端達成半秒渲染時間的基本準則——其它所有的網頁性能最佳實踐也應該運用起來。到%20PageSpeed%20Insights%20來看看，獲取進一步的建議和推薦方案。

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

如果需要深入探索上述移動端準則，請參閱：

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

FAQ

常見問題

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

4G%20網絡對上述移動端準則有何影響？

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.

較低的網絡往返延遲是%204G%20網絡的一處關鍵改良。減少所有的網絡損耗時間對網頁性能將有巨大幫助，而目前在%203G%20網絡上這些損耗就占用了我們一秒預算中的大半時間。不管怎樣，3G%20仍然是全球最主流的移動網絡，并且在今后幾年都將如此——我們在優化網頁時不得不把%203G%20用戶放在心上。

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

我正在使用一個%20JavaScript%20類庫，比如%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.

大多數%20JavaScript%20類庫，比如%20jQuery，通常用來增強頁面、提供附加的交互、動畫和其它效果。但是，大多數這些行為可以安全地在首屏渲染之后再加入進來。研究一下是否可以把這些%20JavaScript%20的加載和執行推遲到頁面加載之后。

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

我在正使用一個%20JavaScript%20框架來渲染整個頁面，有什么建議嗎？

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.

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

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

SPDY%20和%20HTTP%202.0%20協議會有什么幫助？

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協議的目標都是通過更有效地利用底層的%20TCP%20連接（多路復用、頭壓縮、優先化處理），來減少頁面的加載延遲。而且服務器%20push%20通過消除額外的網絡延遲，可以進一步促進性能的改善。我們建議你為服務器增加對%20SPDY%20協議的支持，并且當%20HTTP%202.0%20標準就緒之后就立即切換過去。

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

如何判斷頁面中的哪些%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開發者工具中，打開審計（Audits）面板，然后運行一次網頁性能（Web%20Page%20Performance）報告。在生成的報告中，試一下“刪除未使用的%20CSS%20規則（Remove%20unused%20CSS%20rules）”。也可以使用其它第三方工具或腳本，來識別每個頁面分別應用了哪些%20CSS%20選擇符。

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

這些最佳實踐可以自動化嗎？

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.

當然可以。有很多商業的或開源的網頁性能優化（WPO）產品都可以幫你達成上述部分或全部準則。對于開源解決方案，不妨看看%20PageSpeed%20優化工具。

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

我怎樣調整我的服務器來符合這些準則？

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.

首先，確保你的服務器正在運行最新版的操作系統。為了從%20TCP%20初始擁塞窗口數量的增加（IW10）中獲益，你需要%202.6.39+%20版本的%20Linux%20內核。對于其它操作系統，請查閱相關文檔。

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.

為了優化服務器的響應時間，請測評你的代碼性能，或使用監控程序來發現性能瓶頸——比如腳本運行時、數據庫調用、RPC%20請求、渲染等等。最終目標就是在%20200%20ms%20內渲染出%20HTML%20響應內容。

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

內容安全策略（Content%20Security%20Policy）怎么辦？

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

如果你正在使用%20CSP，那么你可能需要更新你的默認策略。（譯注：CSP%20是一項用于防范%20XSS%20的安全性規范，具體參見%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元素中內聯%20CSS%20屬性（比如這樣%20<p%20style=...>），因為它們常常導致不必要的重復代碼，而且默認會被%20CSP%20攔截（對%20style-src%20字段使用%20unsafe-inline%20指令可以禁用此類攔截）。如果你使用了內聯的%20JavaScript，那么你需要在%20CSP%20策略中使用%20unsafe-inline%20指令來令其執行。默認情況下，CSP%20將攔截所有內聯腳本標簽。（譯注：這里的“內聯%20JavaScript”包括多種形態的%20HTML%20內部的腳本代碼，包括類似%20<script>foo();</script>%20這樣的內嵌腳本標簽、<a%20href="javascript:foo();">%20這樣的偽協議%20URL、以及%20<a%20href="#"%20onclick="foo();">%20這樣的事件處理屬性。）

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注%20｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信%20我%20回復“教程”

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