你有沒(méi)有設(shè)置Brotli或Zopfli壓縮，OCSP裝訂和HPACK壓縮？此外，如何對(duì)資源的提示，提示客戶(hù)和CSS遏制-更不用說(shuō)IPv6的HTTP / 2及服務(wù)工作？早在一天，業(yè)績(jī)往往是一個(gè)單純的事后。經(jīng)常推遲，直到該項(xiàng)目的最后，它會(huì)歸結(jié)為微小，串聯(lián)，資產(chǎn)優(yōu)化和潛在的一些微調(diào)，在服務(wù)器上的con…
你有沒(méi)有設(shè)置Brotli或Zopfli壓縮，OCSP裝訂和HPACK壓縮？此外，如何對(duì)資源的提示，提示客戶(hù)和CSS遏制-更不用說(shuō)IPv6的HTTP / 2及服務(wù)工作？
早在一天，業(yè)績(jī)往往是一個(gè)單純的事后。經(jīng)常推遲，直到該項(xiàng)目的最后，它會(huì)歸結(jié)為微小，串聯(lián)，資產(chǎn)優(yōu)化和潛在的一些微調(diào)，在服務(wù)器上的config文件?，F(xiàn)在回過(guò)頭來(lái)看，事情似乎已經(jīng)相當(dāng)顯著的變化。
性能不僅僅是一個(gè)技術(shù)的關(guān)注：它很重要，并烘烤到工作流程時(shí)，設(shè)計(jì)決策必須根據(jù)其性能問(wèn)題的通知。性能被測(cè)量，監(jiān)控和不斷細(xì)化，和網(wǎng)絡(luò)的日益復(fù)雜構(gòu)成，使得它難以跟蹤的度量的新的挑戰(zhàn)，因?yàn)橹笜?biāo)會(huì)取決于設(shè)備，瀏覽器，協(xié)議，網(wǎng)絡(luò)類(lèi)型和等待時(shí)間顯著變化（的CDN，互聯(lián)網(wǎng)服務(wù)供應(yīng)商，高速緩存，代理服務(wù)器，防火墻，負(fù)載均衡和服務(wù)器都發(fā)揮性能的作用）。
所以，如果我們創(chuàng)造了我們所提高性能時(shí)要記住的事情的概況-從過(guò)程的一開(kāi)始，直到該網(wǎng)站的最終版本-將這個(gè)列表是什么樣子？下面你會(huì)發(fā)現(xiàn)一個(gè)（希望偏見(jiàn)和客觀的）前端性能檢查表2017年 -你可能需要考慮的問(wèn)題的概述，以確保您的響應(yīng)時(shí)間快和你的網(wǎng)站順利。
（你也可以下載PDF格式的清單（0.129 MB）或蘋(píng)果下載頁(yè)面清單（0.236 MB）?？鞓?lè)優(yōu)化?。?
前端性能清單2017年鏈接
微優(yōu)化是為保持對(duì)軌道的表現(xiàn)，但它的關(guān)鍵心里有明確的目標(biāo) – 這將影響到整個(gè)過(guò)程中所做的任何決定可衡量的目標(biāo)。有幾個(gè)不同的模式，并在下面討論的那些都相當(dāng)自以為是 – 只要確保在初期設(shè)定自己的優(yōu)先級(jí)。
準(zhǔn)備和設(shè)置的目標(biāo)鏈接
比你的競(jìng)爭(zhēng)對(duì)手的最快速度快20％。
根據(jù)心理學(xué)的研究，如果你希望用戶(hù)覺(jué)得你的網(wǎng)站比其他任何網(wǎng)站更快，你需要更快至少20％。全頁(yè)面加載時(shí)間并不如指標(biāo)，如開(kāi)始渲染時(shí)間有關(guān)，在第一個(gè)有意義的涂料（即一個(gè)頁(yè)面來(lái)顯示其主要內(nèi)容所需的時(shí)間）和時(shí)間互動(dòng)（時(shí)間在哪個(gè)頁(yè)面-和主要是一個(gè)單頁(yè)的應(yīng)用-似乎是足夠準(zhǔn)備用戶(hù)可與其交互）。測(cè)量開(kāi)始渲染（帶WebPagetest）和第一個(gè)有意義的油漆倍（與燈塔上的摩托G，）中檔三星的設(shè)備和良好的中間的路線(xiàn)的設(shè)備，如一個(gè)的Nexus 4，最好在打開(kāi)設(shè)備的實(shí)驗(yàn)室 -定期3G，4G和Wi-Fi連接。
燈塔，由谷歌新的績(jī)效審計(jì)工具。
看看你的分析，看看你的用戶(hù)是什么。然后，您可以模仿90個(gè)百分點(diǎn)的測(cè)試經(jīng)驗(yàn)。收集數(shù)據(jù)，建立了一個(gè)電子表格，剃掉20％，并成立了自己的目標(biāo)（即績(jī)效預(yù)算）這種方式。現(xiàn)在，你有什么可衡量的測(cè)試反對(duì)。如果你牢記預(yù)算，并試圖出貨僅下跌最小的腳本來(lái)得到一個(gè)快速的時(shí)間到交互的價(jià)值，那么你是一個(gè)合理的路徑上。
谷歌的燈塔工具
績(jī)效預(yù)算建設(shè)者由布拉德·弗羅斯特。
分享與同事的清單。確保清單是熟悉你的團(tuán)隊(duì)的每一個(gè)成員，以避免誤解的路線(xiàn)。每一個(gè)決定會(huì)對(duì)性能產(chǎn)生影響，該項(xiàng)目會(huì)從巨大的時(shí)候概念，UX和視覺(jué)設(shè)計(jì)都決定了前端開(kāi)發(fā)人員正在積極參與中受益。地圖設(shè)計(jì)決策對(duì)績(jī)效預(yù)算，并在核對(duì)表確定的優(yōu)先事項(xiàng)。
100毫秒的響應(yīng)時(shí)間，每秒60幀。
在軌性能模型給你健康的目標(biāo)：盡最大努力在初始輸入后不到100毫秒提供反饋。要允許<100毫秒的響應(yīng)，該頁(yè)面必須在每次<50毫秒后產(chǎn)生控制權(quán)返回給主線(xiàn)程在最新的。對(duì)于高壓力點(diǎn)喜歡動(dòng)漫，最好什么都不要做，在這里你可以和絕對(duì)最低，你不能。此外，動(dòng)畫(huà)的每一幀應(yīng)小于16毫秒內(nèi)完成，從而實(shí)現(xiàn)每秒（1秒÷60 = 16.6毫秒），60幀-最好是在10毫秒。因?yàn)闉g覽器需要時(shí)間來(lái)繪制新的幀到屏幕上的代碼要完成擊球16.6毫秒大關(guān)之前執(zhí)行。樂(lè)觀和明智地利用空閑時(shí)間。顯然，這些指標(biāo)適用于運(yùn)行時(shí)的性能，而不是加載性能。
下1.25秒第一個(gè)有意義的油漆，SpeedIndex 1000下
雖然它可能是很難實(shí)現(xiàn)的，你的最終目標(biāo)應(yīng)該是小于1秒開(kāi)始渲染時(shí)間和SpeedIndex 1000下的值（快速連接）。對(duì)于第一個(gè)有意義的油漆，頂多指望1250毫秒。對(duì)于移動(dòng)，在3秒3G開(kāi)始渲染時(shí)間在移動(dòng)設(shè)備上是可以接受的。依據(jù)略高于是好的，但推獲得盡可能低這些值。
定義環(huán)境鏈接
選擇并設(shè)置您的構(gòu)建工具。
不要太注意什么所謂冷卻這些天。堅(jiān)持你的環(huán)境，用于構(gòu)建，無(wú)論是獸人，咕嘟咕嘟，WebPACK中，PostCSS或工具的組合。只要你是快速得到結(jié)果，你有沒(méi)有問(wèn)題，維護(hù)您的構(gòu)建過(guò)程中，你做的很好。
逐步增強(qiáng)。
保持漸進(jìn)增強(qiáng)作為前端的架構(gòu)和部署的指導(dǎo)原則是一個(gè)安全的賭注。設(shè)計(jì)首先打造核心經(jīng)驗(yàn)，然后加強(qiáng)與高級(jí)功能兼容的瀏覽器體驗(yàn)，創(chuàng)造彈性的經(jīng)驗(yàn)。如果您的網(wǎng)站運(yùn)行速度快一慢的機(jī)器上，在次優(yōu)網(wǎng)絡(luò)上的瀏覽器差一個(gè)貧窮的屏幕，那么它只會(huì)一個(gè)體面的網(wǎng)絡(luò)上的一個(gè)很好的瀏覽器上運(yùn)行一個(gè)快速的機(jī)器上更快。
角，反應(yīng)過(guò)來(lái)，灰燼和合作。
贊成框架，使服務(wù)器端渲染。確保安定在一個(gè)框架之前測(cè)量在移動(dòng)設(shè)備上的服務(wù)器端和客戶(hù)端渲染模式的啟動(dòng)時(shí)間（因?yàn)楦淖冞@事后，由于性能問(wèn)題，可能會(huì)非常硬）。如果你使用一個(gè)JavaScript框架，請(qǐng)確保您的選擇通知和深思熟慮。不同的框架會(huì)對(duì)性能有不同的影響，并且需要優(yōu)化不同的策略，所以你必須要了解清楚所有你可以依靠框架的螺母和螺栓。當(dāng)建立一個(gè)Web應(yīng)用程序，看看到PRPL模式和應(yīng)用殼結(jié)構(gòu)的。
谷歌的燈塔工具
PRPL主張推進(jìn)關(guān)鍵資源，渲染需求初始路徑，預(yù)緩存剩下的路線(xiàn)和延遲加載其余路線(xiàn)。
谷歌的燈塔工具
一個(gè)應(yīng)用殼是最小HTML，CSS和JavaScript供電的用戶(hù)界面。
AMP或Instant文章？
根據(jù)不同的優(yōu)先級(jí)和您的組織的策略，你可能要考慮使用谷歌的AMP或Facebook的即時(shí)文章。您可以取得良好的業(yè)績(jī)沒(méi)有他們，但AMP確實(shí)提供了免費(fèi)的內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）表現(xiàn)穩(wěn)健框架，同時(shí)即時(shí)文章將提升Facebook上的性能。你可以建立漸進(jìn)的網(wǎng)絡(luò)抗菌肽了。
選擇你的CDN明智。
這取決于你有多少的動(dòng)態(tài)數(shù)據(jù)有，你也許可以“外包”的內(nèi)容的一些部分對(duì)靜態(tài)站點(diǎn)生成器，它推到一個(gè)CDN，并從它提供靜態(tài)版本，從而避免數(shù)據(jù)庫(kù)請(qǐng)求。你甚至可以選擇靜態(tài)主機(jī)平臺(tái)基于CDN的，交互式組件增強(qiáng)（豐富你的網(wǎng)頁(yè)JAMStack）。注意的CDN服務(wù)可以（和卸載）動(dòng)態(tài)內(nèi)容呢？因此，限制你的CDN靜態(tài)資產(chǎn)，是沒(méi)有必要的。仔細(xì)檢查您的CDN是否執(zhí)行內(nèi)容壓縮和轉(zhuǎn)換，智能HTTP / 2，配送，邊端包含，其組裝的在CDN的邊緣頁(yè)面靜態(tài)和動(dòng)態(tài)的部分（即最靠近用戶(hù)服務(wù)器）和其他任務(wù)。
構(gòu)建優(yōu)化鏈接
設(shè)置你的優(yōu)先級(jí)平直。
它知道你是在處理第一個(gè)好主意。運(yùn)行所有的資產(chǎn)（JavaScript，圖片，字體，第三方腳本和頁(yè)面上的“貴”的模塊，如旋轉(zhuǎn)木馬，復(fù)雜的信息圖形和多媒體內(nèi)容）的清單，并打破他們成群。設(shè)置一個(gè)電子表格。定義的基本核心的傳統(tǒng)瀏覽器的體驗(yàn)（即完全無(wú)障礙的核心內(nèi)容）時(shí)，增強(qiáng)了功能的瀏覽器體驗(yàn)（即豐富，充分的經(jīng)驗(yàn)）和額外那些不是絕對(duì)必需的，可以是延遲加載，如（資產(chǎn)網(wǎng)頁(yè)字體，風(fēng)格不必要的，旋轉(zhuǎn)木馬腳本，視頻播放器，社交媒體按鍵，大圖像）。我們發(fā)表了“的文章提高碎雜志的性能 ”，它詳細(xì)描述了這種方法。
使用“切割的芥末”技術(shù)。
使用切割的芥末技術(shù)派的核心體驗(yàn)到傳統(tǒng)瀏覽器和增強(qiáng)的體驗(yàn)到現(xiàn)代的瀏覽器。在加載您的資產(chǎn)嚴(yán)格：立即加載的核心經(jīng)驗(yàn)，對(duì)增強(qiáng)DomContentLoaded和對(duì)群眾演員load的事件。需要注意的是該技術(shù)的瀏覽器版本，而不再是我們可以做的這些日子演繹設(shè)備能力。例如，便宜的Android手機(jī)在發(fā)展中國(guó)家大多是運(yùn)行Chrome和將削減榨菜盡管他們有限的內(nèi)存和CPU能力。要注意的是，雖然我們真的沒(méi)有替代方案，該技術(shù)的使用已經(jīng)成為最近的限制。
考慮微的優(yōu)化和進(jìn)步的引導(dǎo)。
在某些應(yīng)用程序，可能需要一些時(shí)間來(lái)初始化應(yīng)用程序可以渲染頁(yè)面之前。顯示骨架的屏幕，而不是裝載的指標(biāo)。查找模塊和技術(shù)，以加快初始呈現(xiàn)時(shí)間（例如，樹(shù)搖動(dòng)和代碼分割），因?yàn)榇蟛糠值男阅軉?wèn)題來(lái)自初始解析時(shí)間來(lái)引導(dǎo)該應(yīng)用。此外，使用一個(gè)超前-的即時(shí)編譯器以卸載一些客戶(hù)端呈現(xiàn)的給服務(wù)器很快，因此，輸出可用的結(jié)果。最后，可以考慮使用Optimize.js更快的初始加載通過(guò)包裝熱切調(diào)用的函數(shù)（它可能沒(méi)有必要再，雖然）。
谷歌的燈塔工具
漸進(jìn)引導(dǎo)裝置使用服務(wù)器端呈現(xiàn)得到快第一有意義的涂料，而且還包括一些最小的JavaScript來(lái)保持時(shí)間到交互的靠近第一有意義油漆。
客戶(hù)端呈現(xiàn)或服務(wù)器端渲染？在這兩種情況下，我們的目標(biāo)應(yīng)該是建立逐步啟動(dòng)：使用服務(wù)器端渲染得到一個(gè)快速的第一個(gè)有意義的漆，但也包括一些最起碼的JavaScript保持時(shí)間到交互的接近第一個(gè)有意義的油漆。然后，我們可以，按需或時(shí)間允許，應(yīng)用程序啟動(dòng)的非必要部分。不幸的是，保羅·劉易斯注意到，框架通常沒(méi)有優(yōu)先的概念，可浮出水面給開(kāi)發(fā)商，從而逐步引導(dǎo)，很難與大多數(shù)庫(kù)和框架來(lái)實(shí)現(xiàn)。如果你有時(shí)間和資源，使用這種策略，最終提高性能。
包括HTTP緩存頭設(shè)置是否正確？
仔細(xì)檢查expires，cache-control，max-age和其他HTTP緩存頭已正確設(shè)置。在一般情況下，資源應(yīng)該是很短的時(shí)間緩存或者（如果它們可能會(huì)改變）或無(wú)限期地（如果它們是靜態(tài)的） -在需要時(shí)可以改變其版本中的URL。如果可能的話(huà)，使用Cache-control: immutable，專(zhuān)為指紋的靜態(tài)資源，避免再確認(rèn)（截至2016年12月，僅支持在Firefox上https://交易）。您可以使用Heroku的引物對(duì)HTTP緩存頭，杰克阿奇博爾德的“ 緩存最佳實(shí)踐 ”和伊利亞Grigorik的HTTP緩存底漆作為指導(dǎo)。
限制第三方庫(kù)，以及異步加載的JavaScript。
當(dāng)用戶(hù)請(qǐng)求一網(wǎng)頁(yè)時(shí)，瀏覽器取出的HTML和構(gòu)建DOM中，然后取CSS和構(gòu)造CSSOM，然后由DOM和CSSOM匹配生成渲染樹(shù)。如果任何JavaScript需要解決，直到它得到解決，從而延緩渲染的瀏覽器將無(wú)法啟動(dòng)渲染頁(yè)面。作為開(kāi)發(fā)人員，我們必須明確地告訴瀏覽器不要等待，并開(kāi)始渲染頁(yè)面。為腳本做到這一點(diǎn)的方法是使用defer和async在HTML屬性。在實(shí)踐中，事實(shí)證明，我們應(yīng)該更喜歡defer到async（以成本的Internet Explorer的用戶(hù)直至并包括版本9，因?yàn)槟愫芸赡軙?huì)打破腳本它們）。此外，限制第三方庫(kù)和腳本的影響，特別是社交分享按鈕和<iframe>嵌入功能（如地圖）。您可以使用靜態(tài)的社會(huì)化分享按鈕（如SSBG）和靜態(tài)鏈接到交互式地圖來(lái)代替。
圖像被適當(dāng)優(yōu)化？
盡可能使用響應(yīng)圖像與srcset，sizes和<picture>元素。當(dāng)你在它，你也可以利用的的WebP格式由在職的WebP與圖像<picture>元素和JPEG回退（見(jiàn)安德烈亞斯Bovens’ 的代碼片段）或使用內(nèi)容協(xié)商（使用Accept頭）。素描本身支持的WebP和的WebP圖像可以從Photoshop中使用導(dǎo)出為Photoshop的WebP插件。其他選項(xiàng)了。
谷歌的燈塔工具
響應(yīng)圖像斷點(diǎn)發(fā)電機(jī)自動(dòng)圖像和標(biāo)記生成。
您也可以使用客戶(hù)端提示，目前已獲得瀏覽器的支持。沒(méi)有足夠的資源在復(fù)雜的標(biāo)記為響應(yīng)圖像烤？使用響應(yīng)圖像斷點(diǎn)發(fā)生器或服務(wù)，如Cloudinary自動(dòng)圖像優(yōu)化。此外，在許多情況下，使用并獨(dú)自將獲得顯著的好處。在碎雜志，我們使用后綴為圖像名稱(chēng)-例如，; 每當(dāng)映像包含后綴，每個(gè)人都對(duì)球隊(duì)都知道，它已經(jīng)進(jìn)行了優(yōu)化。srcsetsizes-optbrotli-compression-opt.png
以圖像優(yōu)化到一個(gè)新的水平。
當(dāng)你是一個(gè)目標(biāo)網(wǎng)頁(yè)上工作，它是至關(guān)重要的特定圖像加載速度極快，確保JPEG文件是進(jìn)步和壓縮mozJPEG（其中通過(guò)操縱掃描的水平提高了開(kāi)始渲染時(shí)間），Pingo的為PNG，有損GIF為GIF和SVGOMG為SVG。從模糊圖像的不需要的部分（通過(guò)應(yīng)用高斯模糊濾鏡給他們），以減少文件大小，最終你甚至可以開(kāi)始刪除顏色或使圖片黑色和白色，以進(jìn)一步減小尺寸。對(duì)于背景圖片，從Photoshop用0?10％的質(zhì)量導(dǎo)出照片可以絕對(duì)可以接受的為好。還不夠好？好了，你也可以提高與圖像感知性能多個(gè)背景圖像的技術(shù)。
是Web字體進(jìn)行了優(yōu)化？
機(jī)會(huì)是很高，你所服務(wù)的網(wǎng)頁(yè)字體字形包括和未使用額外的功能。你可以問(wèn)你的類(lèi)型代工子集網(wǎng)頁(yè)字體或自己子集他們，如果你使用的是開(kāi)源字體（例如，只包括拉美一些特殊的口音字形），以盡量減少他們的文件大小。WOFF2支持是偉大的，你可以使用WOFF和OTF作為回退為不支持它的瀏覽器。此外，從扎克萊特曼的策略之一“ 綜合指南字體，加載策略 ”，并使用服務(wù)工作者緩存來(lái)持續(xù)緩存字體。需要一個(gè)快速的勝利？像素Ambacht有一個(gè)快速教程和案例分析，讓您的字體秩序。
扎克萊特曼的綜合指南字體，加載策略
扎克萊特曼的綜合指南字體，加載策略提供了對(duì)bettern Web字體交付選項(xiàng)一打。
如果不能滿(mǎn)足您的服務(wù)器的字體和依靠第三方主機(jī)，確保使用的Web字體裝載機(jī)。FOUT比FOIT更好 ; 開(kāi)始渲染中的后備文字向右走，和異步加載的字體-你也可以使用loadCSS了點(diǎn)。你也許能逃脫本地安裝的操作系統(tǒng)的字體為好。
迅速推向關(guān)鍵的CSS。
若要確保瀏覽器開(kāi)始盡可能快地渲染你的網(wǎng)頁(yè)，它已經(jīng)成為一個(gè)普遍的做法，收集所有開(kāi)始渲染頁(yè)面（第一個(gè)可見(jiàn)的部分被稱(chēng)為“關(guān)鍵的CSS”或“需要的CSS以上的倍CSS “）和內(nèi)嵌添加的<head>頁(yè)面，從而減少往返次數(shù)。由于在慢啟動(dòng)階段交換包的大小限制，您的預(yù)算用于關(guān)鍵CSS大約是14 KB。如果點(diǎn)到為止，瀏覽器將需要另外往返獲取更多的風(fēng)格。CriticalCSS和關(guān)鍵使您能夠做到這一點(diǎn)。您可能需要為你做它正在使用的每個(gè)模板。如果可能的話(huà)，請(qǐng)考慮使用條件內(nèi)聯(lián)的方式由長(zhǎng)絲組使用。使用HTTP / 2，臨界的CSS可以存儲(chǔ)在一個(gè)單獨(dú)的CSS文件和經(jīng)由服務(wù)器推而不腹脹在HTML交付。美中不足的是，服務(wù)器推不一貫支持并具有一定的緩存問(wèn)題（見(jiàn)幻燈片114起的Hooman貝赫什提的介紹）。效果可以，實(shí)際上是負(fù)的和膨脹的網(wǎng)絡(luò)緩沖區(qū)，防止真正幀在文件中被遞送。服務(wù)器推得多更有效的在溫暖的連接，由于TCP慢啟動(dòng)。所以，你可能需要?jiǎng)?chuàng)建一個(gè)緩存意識(shí)HTTP / 2服務(wù)器推送機(jī)制。請(qǐng)記住，雖然，新的cache-digest規(guī)范將否定需要手動(dòng)構(gòu)建這些“緩存意識(shí)”的服務(wù)器。
使用樹(shù)搖晃和代碼分裂，以減少有效載荷。
樹(shù)晃動(dòng)是僅包括實(shí)際生產(chǎn)中使用的代碼來(lái)清理你的構(gòu)建過(guò)程中的一種方式。您可以使用WebPACK中2刪除未使用的出口，并UnCSS或氦氣從CSS中刪除未使用的樣式。此外，你可能要考慮學(xué)習(xí)如何寫(xiě)出高效的CSS選擇器以及如何避免臃腫和昂貴的風(fēng)格。代碼分裂是另一個(gè)WebPACK中的功能，將您的代碼庫(kù)成按需加載“塊”。一旦你在你的代碼中定義的分割點(diǎn)，WebPACK中需要照顧的依賴(lài)關(guān)系和輸出文件?；旧?，它使你保持最初的下載小，按需索取代碼，當(dāng)應(yīng)用程序請(qǐng)求。請(qǐng)注意，匯總顯示出比Browserify出口顯著更好的結(jié)果。雖然我們?cè)谶@，你可能想看看Rollupify，其中的ECMAScript 2015模塊轉(zhuǎn)換成一個(gè)大CommonJS的模塊-因?yàn)樾∧K可以有一個(gè)令人驚訝的高性能成本取決于您選擇的打捆和模塊系統(tǒng)。
提高渲染性能。
隔離昂貴的組件與CSS遏制 -例如，以限制關(guān)斷帆布導(dǎo)航，或第三方部件布局和油漆工作的瀏覽器的樣式的范圍。確保不存在滯后滾動(dòng)時(shí)的頁(yè)面或當(dāng)元素的動(dòng)畫(huà)，并且您持續(xù)達(dá)到每秒60幀。如果這是不可能的，那么至少使每秒一致的框架最好到15.使用CSS混合范圍內(nèi)的60“ 通知，其中的元素和屬性將改變?yōu)g覽器。will-change此外，測(cè)量的運(yùn)行時(shí)的渲染性能（例如，在DevTools）。要開(kāi)始使用，請(qǐng)保羅·劉易斯的“免費(fèi)瀏覽器的渲染優(yōu)化Udacity課程。我們也有由謝爾蓋·Chikuyonok如何律“的文章讓GPU的動(dòng)畫(huà)權(quán)。
預(yù)熱加快交貨的連接。
使用骨架屏幕，延遲加載所有昂貴的組件，如字體，JavaScript的，旋轉(zhuǎn)木馬，視頻和iframe中。利用資源的提示，以節(jié)省時(shí)間（其在后臺(tái)執(zhí)行DNS查找）， （其詢(xún)問(wèn)瀏覽器開(kāi)始在后臺(tái)連接握手（DNS，TCP TLS））， （其中詢(xún)問(wèn)瀏覽器來(lái)請(qǐng)求資源） ，（它要求的瀏覽器來(lái)呈現(xiàn)在背景指定頁(yè)）和（其中預(yù)取資源，而無(wú)需執(zhí)行它們，除其他事項(xiàng)外）。需要注意的是在實(shí)踐中，根據(jù)瀏覽器的支持，你會(huì)更喜歡到，你會(huì)用謹(jǐn)慎和-如果你是在哪里，用戶(hù)將在下一個(gè)去（比如非常有信心，后者只應(yīng)使用，在購(gòu)買(mǎi)渠道）。dns-prefetchpreconnectprefetchprerenderpreloadpreconnectdns-prefetchprefetchprerender
HTTP / 2 鏈接
準(zhǔn)備好HTTP / 2。
隨著谷歌向更加安全的網(wǎng)絡(luò)移動(dòng) Chrome瀏覽器的所有HTTP網(wǎng)頁(yè)和最終處理為“不安全”，你需要對(duì)是否繼續(xù)投注HTTP / 1.1或設(shè)置一個(gè)決定HTTP / 2的環(huán)境。HTTP / 2 支持的非常好 ; 它不會(huì)去任何地方; 在大多數(shù)情況下，你用它更好。這項(xiàng)投資將是相當(dāng)顯著，但你需要移動(dòng)到HTTP / 2遲早的事。最重要的是，你可以得到一個(gè)重大的性能提升與服務(wù)工作及服務(wù)器推送（至少長(zhǎng)期）。
HTTP / 2
最終，谷歌計(jì)劃將所有標(biāo)簽頁(yè)的HTTP作為非安全，并更改HTTP安全指示燈到Chrome瀏覽器使用了HTTPS破碎的紅色三角形。（圖片來(lái)源）
的缺點(diǎn)是，你必須遷移到HTTPS，并根據(jù)您的HTTP / 1.1的用戶(hù)群有多大（即在舊版操作系統(tǒng)或?qū)εf版瀏覽器的用戶(hù)），你必須發(fā)送不同的版本，其中需要你去適應(yīng)一個(gè)不同的構(gòu)建過(guò)程。當(dāng)心：設(shè)置遷移和新的構(gòu)建過(guò)程可能會(huì)非常棘手和耗時(shí)。對(duì)于本文的其余部分，我假設(shè)你要么切換到或已經(jīng)切換到HTTP / 2。
正確部署HTTP / 2。
再次，通過(guò)HTTP / 2服務(wù)資產(chǎn)需要如何到目前為止一直在服務(wù)資產(chǎn)大修。你需要找到打包模塊和并行裝載許多小模塊之間的平衡。在一方面，你可能要完全避免串聯(lián)的資產(chǎn)，而不是打破你的整個(gè)界面分成許多小模塊，壓縮它們作為構(gòu)建過(guò)程的一部分，通過(guò)引用它們的“偵察兵”的做法，并在并行加載它們。在一個(gè)文件中的變化不會(huì)要求整個(gè)樣式表或JavaScript被重新下載。在另一方面，包裝仍然重要，因?yàn)橛信c發(fā)送許多小的JavaScript文件到瀏覽器的問(wèn)題。首先，壓縮將受到影響。一大包的壓縮將受益于字典重用，而小單獨(dú)的包不會(huì)。還有，以解決該標(biāo)準(zhǔn)的工作，但它遠(yuǎn)現(xiàn)在。其次，瀏覽器都尚未得到優(yōu)化這種工作流程。例如，Chrome將觸發(fā)進(jìn)程間通信（IPC的）線(xiàn)性資源的數(shù)量，因此包括數(shù)百資源將有瀏覽器的運(yùn)行成本。
逐行加載CSS
為了實(shí)現(xiàn)與HTTP / 2最好的結(jié)果，考慮加載CSS逐步由Chrome的杰克阿奇博爾德的建議。
不過(guò)，你可以嘗試逐步加載CSS。顯然，這樣做，你都在積極懲罰HTTP / 1.1的用戶(hù)，所以你可能需要生成并服務(wù)于不同的構(gòu)建，以不同的瀏覽器為您的部署過(guò)程，這就是事情變得稍微復(fù)雜的一部分。你可以擺脫HTTP / 2連接凝聚，它允許您使用域分片而來(lái)自HTTP / 2中受益，但實(shí)現(xiàn)這在實(shí)踐中是困難的。
該怎么辦？如果你正在運(yùn)行在HTTP / 2，發(fā)送關(guān)于10包似乎是一個(gè)體面的妥協(xié)（及是不是太糟糕了傳統(tǒng)瀏覽器）。實(shí)驗(yàn)并測(cè)量找到您的網(wǎng)站的正確的平衡。
確保你的服務(wù)器上的安全性是防彈。
HTTP / 2碾過(guò)TLS的所有瀏覽器實(shí)現(xiàn)，所以你可能會(huì)希望避免安全警告或某些元素在頁(yè)面上不工作。仔細(xì)檢查您的安全頭被正確設(shè)置，消除已知的漏洞，并檢查您的證書(shū)。有沒(méi)有遷移到HTTPS了嗎？檢查的HTTPS的唯一標(biāo)準(zhǔn)了深入講解。此外，確保所有外部插件和跟蹤腳本是通過(guò)HTTPS加載，跨站點(diǎn)腳本是不可能的，這兩個(gè)HTTP嚴(yán)格傳輸安全標(biāo)題和內(nèi)容安全策略的頭設(shè)置正確。
難道你的服務(wù)器和的CDN支持HTTP / 2？
不同的服務(wù)器和的CDN可能會(huì)支持HTTP / 2是不同的。使用是TLS快尚？檢查你的選項(xiàng)，或者快速查找你的服務(wù)器是如何執(zhí)行的功能，以及你可以期望得到支持。
是TLS快尚？
是TLS快尚？允許你切換到HTTP / 2時(shí)，請(qǐng)檢查您的選擇服務(wù)器和的CDN。
是Brotli或Zopfli壓縮用？
去年，谷歌推出了Brotli，一個(gè)新的開(kāi)源無(wú)損數(shù)據(jù)格式，這是目前廣泛的支持在Chrome，F(xiàn)irefox和Opera。在實(shí)踐中，Brotli似乎是更有效的比gzip和deflate。它可能是緩慢的，以壓縮，取決于設(shè)置，并慢壓縮最終將導(dǎo)致更高的壓縮率。盡管如此，它解壓縮速度快。因?yàn)樗惴▉?lái)自谷歌，這并不奇怪，瀏覽器將接受它只有當(dāng)用戶(hù)訪(fǎng)問(wèn)一個(gè)網(wǎng)站通過(guò)HTTPS -是的，也有對(duì)技術(shù)方面的原因，以及。美中不足的是，Brotli不會(huì)預(yù)裝在大多數(shù)服務(wù)器都過(guò)來(lái)了，這是不容易建立無(wú)自NGINX編譯或Ubuntu。但是，您可以甚至在不支持它的CDN使Brotli（有服務(wù)人員）還沒(méi)有?；蛘?，您可以考慮使用Zopfli的壓縮算法，編碼數(shù)據(jù)放氣，gzip和zlib的格式。任何常規(guī)gzip壓縮的資源將受益于Zopfli的提高deflate編碼，因?yàn)檫@些文件會(huì)比的Zlib的最大壓縮小3到8％。美中不足的是，文件將花費(fèi)大約80倍的時(shí)間來(lái)壓縮。這就是為什么它是在不發(fā)生大的變化的資源，也被設(shè)計(jì)為一次壓縮，下載多少次文件使用Zopfli一個(gè)好主意。
是否啟用OCSP裝訂？
通過(guò)使您的服務(wù)器上OCSP裝訂，可以加快你的TLS握手。在線(xiàn)證書(shū)狀態(tài)協(xié)議（OCSP）被作為替代證書(shū)吊銷(xiāo)列表（CRL）協(xié)議創(chuàng)建。這兩個(gè)協(xié)議都用來(lái)檢查SSL證書(shū)是否已被吊銷(xiāo)。然而，在OCSP協(xié)議不需要瀏覽器要花費(fèi)時(shí)間下載，然后證書(shū)信息搜索的列表，因此減少了握手所需的時(shí)間。
你有沒(méi)有采用IPv6的了嗎？
因?yàn)槲覀冇猛炅嗽贗Pv4空間和主要移動(dòng)網(wǎng)絡(luò)正在迅速采用IPv6的（美國(guó)已經(jīng)達(dá)到 50％的采用IPv6閾值），這是一個(gè)好主意，更新DNS到IPv6留防彈的未來(lái)。只要確保雙棧支持通過(guò)網(wǎng)絡(luò)提供的-它允許IPv6和IPv4到對(duì)方一起同時(shí)運(yùn)行。畢竟IPv6是不向后兼容。此外，研究表明 IPv6的提出這些網(wǎng)站10?15％的速度，由于鄰居發(fā)現(xiàn)（NDP）和路由優(yōu)化。
是HPACK壓縮在使用？
如果您使用HTTP / 2，仔細(xì)檢查你的服務(wù)器實(shí)現(xiàn)HPACK壓縮的HTTP響應(yīng)頭，以減少不必要的開(kāi)銷(xiāo)。由于HTTP / 2服務(wù)器是比較新的，他們可能不完全支持的規(guī)范，具有HPACK就是一個(gè)例子。H2spec是一個(gè)偉大的（如果非常詳細(xì)的技術(shù)）工具來(lái)檢查。HPACK工作。
h2spec
H2spec（查看大版）（圖片來(lái)源）
用于高速緩存和網(wǎng)絡(luò)回退勞務(wù)工？
在網(wǎng)絡(luò)上沒(méi)有性能優(yōu)化可能比用戶(hù)的計(jì)算機(jī)上本地存儲(chǔ)的緩存速度更快。如果你的網(wǎng)站是運(yùn)行在HTTPS，用“ 實(shí)用主義指南服務(wù)工作者 ”，在服務(wù)工作者緩存到緩存靜態(tài)資產(chǎn)和存儲(chǔ)離線(xiàn)回退（甚至脫機(jī)頁(yè)），并從用戶(hù)的計(jì)算機(jī)進(jìn)行檢索，而不是去網(wǎng)絡(luò)。此外，檢查杰克的脫機(jī)食譜和自由Udacity課程“ 離線(xiàn)Web應(yīng)用程序?！睘g覽器的支持？它到達(dá)那里，和回退是網(wǎng)絡(luò)呢。
測(cè)試和監(jiān)控鏈接
監(jiān)控混合內(nèi)容的警告。
如果您最近從HTTP遷移到HTTPS，確保監(jiān)測(cè)主動(dòng)和被動(dòng)混合內(nèi)容的警告，用工具如Report-URI.io。您還可以使用混合內(nèi)容掃描到掃描啟用HTTPS的網(wǎng)站為混合內(nèi)容。
在DevTools您的開(kāi)發(fā)工作流程進(jìn)行了優(yōu)化？
選擇一個(gè)調(diào)試工具，點(diǎn)擊每一個(gè)按鈕。請(qǐng)確保您了解如何分析渲染性能和控制臺(tái)輸出，以及如何調(diào)試JavaScript和編輯CSS樣式。奧馬爾漢莎最近準(zhǔn)備一個(gè)（巨大）slidedeck和談話(huà)涉及幾十個(gè)不起眼的技巧和技術(shù)要知道調(diào)試和測(cè)試DevTools時(shí)。
您在代理的瀏覽器和傳統(tǒng)的瀏覽器測(cè)試？在Chrome和Firefox測(cè)試是不夠的。看看你的網(wǎng)站以代理的瀏覽器和舊版瀏覽器是如何工作的。UC瀏覽器和Opera Mini的，例如，有一個(gè)在亞洲顯著的市場(chǎng)份額（在亞洲高達(dá)35％）。測(cè)量平均上網(wǎng)速度在你感興趣的國(guó)家，以避免大的意外的道路。與網(wǎng)絡(luò)限制測(cè)試和模擬高DPI設(shè)備。BrowserStack是太棒了，但在實(shí)際設(shè)備上測(cè)試也是如此。
被連續(xù)監(jiān)測(cè)設(shè)置？
具有私有實(shí)例WebPagetest始終是快速和無(wú)限的測(cè)試是有益的。設(shè)置具有自動(dòng)提醒性能預(yù)算連續(xù)監(jiān)測(cè)。設(shè)置自己的用戶(hù)正時(shí)標(biāo)記來(lái)衡量和監(jiān)測(cè)具體業(yè)務(wù)指標(biāo)?？紤]使用SpeedCurve監(jiān)視性能隨時(shí)間的變化，和/或New Relic的得到的見(jiàn)解，WebPagetest無(wú)法提供。此外，考慮SpeedTracker，燈塔和口徑。
速贏鏈接
這份名單是相當(dāng)全面的，并完成所有的優(yōu)化可能需要相當(dāng)長(zhǎng)一段時(shí)間。所以，如果你有僅1小時(shí)就搞定顯著的改善，你會(huì)怎么做？讓我們熬一切歸因于10唾手可得的果實(shí)。顯然，然后再開(kāi)始，一旦你完成，評(píng)估結(jié)果，包括在3G和電纜連接的開(kāi)始渲染時(shí)間和SpeedIndex。
你的目標(biāo)是一個(gè)開(kāi)始下電纜1秒，下3G3秒渲染時(shí)間，并且在1000優(yōu)化一個(gè)SpeedIndex值開(kāi)始渲染時(shí)間和時(shí)間到交互。
準(zhǔn)備關(guān)鍵的CSS你的主模板，并將其包含在<head>頁(yè)面的。（您的預(yù)算是14 KB）。
延遲和延遲加載盡可能多的腳本越好，您自己和第三方腳本 – 尤其是社會(huì)媒體按鈕，視頻播放器和昂貴的JavaScript。
添加資源的提示，以加快交付速度更快dns-lookup，preconnect，prefetch，preload和prerender。
子網(wǎng)頁(yè)字體并加載它們異步（或只需切換到系統(tǒng)的字體代替）。
優(yōu)化的圖像，并考慮使用的WebP關(guān)鍵頁(yè)面（如登陸頁(yè)面）。
檢查HTTP緩存頭和保安頭設(shè)置正確。
在服務(wù)器上啟用Brotli或Zopfli壓縮。（如果那是不可能的，不要忘了啟用Gzip壓縮。）
如果HTTP / 2是可用的，使HPACK壓縮和開(kāi)始監(jiān)測(cè)混合內(nèi)容的警告。如果你正在運(yùn)行在LTS，也使OCSP裝訂。
如果可能的話(huà)，緩存的資產(chǎn)，如字體，樣式，JavaScript和圖像 – 實(shí)際上，盡可能地！ – 在服務(wù)工人緩存。
咨詢(xún)電話(huà)
15050695302
13771112364
咨詢(xún)QQ
1309844028