我們可以向我們的網(wǎng)站添加更多功能，并擁有比以往更多的工具和技術(shù)。但是，不利的一面是，我們的選擇可能會(huì)極大地降低網(wǎng)站的速度，從而使客戶感到沮喪（在2018年的一項(xiàng)調(diào)查中，有80％的用戶表示加載緩慢的網(wǎng)站比暫時(shí)關(guān)閉的網(wǎng)站更令人沮喪）。如果在緩慢的網(wǎng)絡(luò)條件或低端設(shè)備上無(wú)法訪問(wèn)站點(diǎn)或無(wú)法響應(yīng)站點(diǎn)，則它甚至可以完全排除潛在客戶。
網(wǎng)站性能優(yōu)化對(duì)業(yè)務(wù)的影響已得到充分證明。例如，時(shí)尚零售商Missguided 將頁(yè)面加載時(shí)間中位數(shù)減少了4秒，收入增加了26％。在下面觀看有關(guān)此內(nèi)容的演講：
其中很多是關(guān)于提高知名度的，所以我們邀請(qǐng)了七位專家來(lái)提出一些技巧，以幫助提高您的網(wǎng)站的性能。
模板圖標(biāo)
培養(yǎng)技能的資源
獲得免費(fèi)的項(xiàng)目計(jì)劃模板副本，直接發(fā)送到您的收件箱。
電子郵件
輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營(yíng)銷電子郵件。您可以隨時(shí)取消訂閱。
我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。
請(qǐng)注意，
我們的電子郵件最多可能需要15分鐘
才能到達(dá)您的收件箱。
1.首先為手機(jī)打造
客戶越來(lái)越多地移動(dòng)，僅移動(dòng)客戶的比例正在上升。但是，移動(dòng)設(shè)備上的轉(zhuǎn)化率往往較低。在上述時(shí)尚零售商網(wǎng)站上工作的獨(dú)立網(wǎng)絡(luò)性能顧問(wèn)Andy Davies表示，現(xiàn)在應(yīng)該改變這一點(diǎn)，并最終將移動(dòng)設(shè)備視為一流公民。
他解釋說(shuō)：“響應(yīng)式Web設(shè)計(jì)使我們能夠構(gòu)建理論上可以在臺(tái)式機(jī)和移動(dòng)臺(tái)上均能正常工作的網(wǎng)站。” “不幸的是，我們似乎經(jīng)常經(jīng)常先為臺(tái)式機(jī)設(shè)計(jì)和構(gòu)建，然后嘗試縮小網(wǎng)站規(guī)模以適應(yīng)移動(dòng)設(shè)備的限制。這會(huì)導(dǎo)致緩慢，緩慢的移動(dòng)體驗(yàn)，尤其是對(duì)于使用Android的訪問(wèn)者而言，他們的設(shè)備通常無(wú)法應(yīng)付桌面上的JavaScript以及我們向他們提供的其他內(nèi)容，因此使用它們的用戶尤其如此。
為了創(chuàng)建快速的移動(dòng)優(yōu)先體驗(yàn)，Andy建議構(gòu)建可在低成本Android手機(jī)（例如Alcatel 1x）上使用的網(wǎng)站，然后在運(yùn)行時(shí)對(duì)其進(jìn)行增強(qiáng)，以通過(guò)功能更強(qiáng)大的設(shè)備和更大的屏幕為訪問(wèn)者提供更豐富的體驗(yàn)。
您可能還會(huì)喜歡： 為下一個(gè)十億用戶設(shè)計(jì)。
2.停止使用轉(zhuǎn)盤和滑塊
旋轉(zhuǎn)木馬，幻燈片和滑塊聽(tīng)起來(lái)像在紙上一個(gè)偉大的想法，但Shopify速度優(yōu)化專家亞歷山大·林，首席執(zhí)行官Rvere，這背后是Shopify應(yīng)用Hyperspeed警告說(shuō)，他們有兩個(gè)重大缺陷，我們需要讓我們的客戶知道的。
他警告說(shuō)：“他們不會(huì)將訪問(wèn)者轉(zhuǎn)化為客戶，并且會(huì)降低您的網(wǎng)站速度。” “ 尼爾森·諾曼集團(tuán)（Nielsen Norman Group）進(jìn)行的可用性測(cè)試發(fā)現(xiàn)，訪客實(shí)際上忽略了輪播。更可惡的是，在圣母大學(xué)網(wǎng)站上進(jìn)行的一項(xiàng)測(cè)試發(fā)現(xiàn)，只有百分之一的訪客點(diǎn)擊了第一張幻燈片。其余幻燈片的點(diǎn)擊次數(shù)甚至更少。”
輪播不僅吸引轉(zhuǎn)化，還使網(wǎng)站陷入困境。亞歷山大警告說(shuō)，精美的滑塊需要額外的JavaScript，并且通常由幾張大圖像組成。
他建議說(shuō)：“擺脫圓盤傳送帶，可以使頁(yè)面加載快得多，因?yàn)榭傢?yè)面大小將大大減少。” “考慮一個(gè)擺放位置很好的英雄形象，用引人注目的號(hào)召性用語(yǔ)而不是輪播。它的加載速度更快，并且您將吸引更多的訪問(wèn)者點(diǎn)擊您希望他們點(diǎn)擊的內(nèi)容。”
網(wǎng)站性能：靜態(tài)主頁(yè)英雄
靜態(tài)首頁(yè)英雄圖片，帶有清晰的號(hào)召性用語(yǔ)。
3.優(yōu)化圖像
圖像是任何電子商務(wù)商店中必不可少的一部分，它們通常構(gòu)成了其中的最大部分。但是，大圖片可能會(huì)使網(wǎng)站慢下來(lái)，因?yàn)榇箜?yè)面的加載時(shí)間更長(zhǎng)。
如果您或您的客戶希望保留所有圖像，Alexander Lam建議至少壓縮它們。
他建議：“在將任何圖像上傳到商店之前，請(qǐng)先通過(guò)tinyjpg.com或shortpixel.com之類的免費(fèi)圖像壓縮器運(yùn)行該圖像。” 這些服務(wù)將使您的圖像在數(shù)據(jù)大小方面變小，而不會(huì)犧牲質(zhì)量或更改其實(shí)際尺寸。原始圖像通常可以縮小70％以上，而不會(huì)出現(xiàn)明顯的質(zhì)量變化。”
確保您使用正確的文件格式也很重要。如果您想要圖片中的透明像素，PNG圖像確實(shí)很有用，但是它們通常比JPEG占用更多的空間。
“如果您的PNG沒(méi)有透明像素，請(qǐng)?jiān)谏蟼髦翱紤]將其轉(zhuǎn)換為JPEG，” Alexander建議。“使用Photoshop或PNG2JPG之類的服務(wù)來(lái)更改文件格式。”
Web性能：原始文件，帶壓縮的JPEG，gif
將原始JPEG與壓縮版本進(jìn)行比較，質(zhì)量損失為70％。
4.延遲加載圖像
幫助企業(yè)保持客戶在線帳戶安全的創(chuàng)業(yè)公司Castle的會(huì)議發(fā)言人和軟件工程師Anna Migas同意，圖像是網(wǎng)絡(luò)性能的最大罪魁禍?zhǔn)字弧?nbsp;
她警告說(shuō)：“一張圖片可以說(shuō)一千多個(gè)單詞，但加載可能還需要一千毫秒或更長(zhǎng)的時(shí)間，更糟糕的是，延遲加載其他內(nèi)容。” “想象一下，如果您的網(wǎng)站上有20張圖片并且它們都爭(zhēng)相下載，那會(huì)發(fā)生什么！”
Anna解釋說(shuō)，最佳做法是默認(rèn)情況下不下載頁(yè)面上的所有圖像，而是使用一種稱為延遲加載的技術(shù)。這意味著最初只從頁(yè)面頂部提供圖像，然后在用戶向下滾動(dòng)并靠近頁(yè)面上可以找到更多圖像的位置時(shí)開(kāi)始獲取其余圖像。
“ 惰性加載通常是使用JavaScript完成的，您可以找到許多小型庫(kù)來(lái)幫助您達(dá)到這種效果，”安娜建議。“我個(gè)人最喜歡的是LazyLoad和yall.js。在Chrome瀏覽器中，可以通過(guò)將loading=“lazy”屬性添加到
標(biāo)簽來(lái)使用本地函數(shù)來(lái)延遲加載所選圖像，但是對(duì)于其他瀏覽器來(lái)說(shuō)，這不能解決問(wèn)題。”
您可能還會(huì)喜歡： 延遲加載如何優(yōu)化Shopify主題圖像。
5.通過(guò)字體交換加載網(wǎng)絡(luò)字體
不可否認(rèn)，圖像是電子商務(wù)網(wǎng)站上銷售計(jì)劃的重要組成部分，但用戶也希望快速查看價(jià)格和產(chǎn)品說(shuō)明。這就是為什么使文本盡可能快地可見(jiàn)至關(guān)重要的原因，但是由于Web字體的原因，它的加載速度并不總是足夠快。
“用戶看不到文本的一個(gè)原因是使用了默認(rèn)情況下用戶計(jì)算機(jī)不支持的外部字體，”安娜·米加斯（Anna Migas）解釋說(shuō)。“在那種情況下，網(wǎng)站需要先下載字體，然后才能在屏幕上顯示它們。有時(shí)可能要花一些時(shí)間，最好提供一種備用字體，該字體將立即顯示，然后換成所需的字體。”
為此，安娜建議，您可以font-display: swap在@ font-face聲明中添加屬性，或者，如果使用的是Google字體，則可以添加&display=swapURL參數(shù)（例如：
可以在Chris Coyier的CSS-Tricks文章中找到更多詳細(xì)信息（請(qǐng)注意，它是在可能使用URL參數(shù)選項(xiàng)之前編寫的）。
Web性能：加載和不加載字體交換
一個(gè)沒(méi)有（左）和有（右）字體交換的字體加載示例（來(lái)源：www.zachleat.com/foitfout/）。
6.創(chuàng)建流暢的動(dòng)畫
只要做得好，動(dòng)畫就可以無(wú)縫，巧妙地改善網(wǎng)站上的用戶體驗(yàn)。但是，如果做錯(cuò)了，他們可能會(huì)使您的訪客感到困惑和分散注意力。
目前在Netflix任職的高級(jí)軟件工程師Tyler Childs建議了一些技巧，以改善使用CSS或JavaScript創(chuàng)建的網(wǎng)絡(luò)動(dòng)畫。
的CSS
泰勒解釋說(shuō)：“固定平滑的CSS動(dòng)畫有一個(gè)小秘密，那就是使用不會(huì)強(qiáng)制更改布局或重新繪制像素的屬性。” “經(jīng)驗(yàn)法則是只使用opacityand transform，但是如果您想更深入一點(diǎn)，請(qǐng)查看CSS觸發(fā)器。”
不透明度和變換都只會(huì)影響其樣式的內(nèi)容。樣式化的內(nèi)容可以有效地保留在頁(yè)面其余部分的適當(dāng)位置，但是正如Tyler所展示的，對(duì)用戶而言，魔術(shù)將會(huì)發(fā)生：
其它屬性，如padding，margin，width，height，top，bottom，left，和right將迫使你的布局變化，這淌下來(lái)的所有內(nèi)容，并可能導(dǎo)致顛簸或回流。
所有CSS屬性都可以用于布局，但是在設(shè)置內(nèi)容動(dòng)畫時(shí)要小心。
的JavaScript
泰勒（Tyler）警告說(shuō)，JavaScript動(dòng)畫非常棘手，因?yàn)樗鼈兣c您網(wǎng)頁(yè)上的所有其他JavaScript共享相同的資源集。
requestAnimationFrame他建議：“ 使用JavaScript平滑動(dòng)畫的秘訣是一種稱為的方法。” “如果正確完成，采用這種方法的動(dòng)畫可以達(dá)到60 FPS！”
實(shí)際的用例requestAnimationFrame包括限制用戶交互，例如滾動(dòng)或拖動(dòng)事件。這些事件每秒可能觸發(fā)多次，這就是為什么對(duì)它們進(jìn)行反彈以控制觸發(fā)次數(shù)是一種非常常見(jiàn)的方法。
許多去抖動(dòng)實(shí)現(xiàn)的缺點(diǎn)是，它們沒(méi)有針對(duì)動(dòng)畫或?qū)OM的任何更改進(jìn)行優(yōu)化。requestAnimationFrame最好使用的瀏覽器作為去抖動(dòng)功能，因?yàn)樗厌槍?duì)動(dòng)畫進(jìn)行了優(yōu)化。
requestAnimationFrame泰勒建議：“下一次您要限制某個(gè)事件時(shí)，請(qǐng)考慮嘗試一下防抖功能。” “最后一個(gè)好處是，requestAnimationFrame當(dāng)不使用網(wǎng)頁(yè)時(shí)，通過(guò)暫?；卣{(diào)，將使用更少的系統(tǒng)資源。”
您可能還會(huì)喜歡： 具有CSS變量的UI動(dòng)畫。
7.最小化第三方影響
隨著電子商務(wù)創(chuàng)新步伐的不斷提高，企業(yè)根本無(wú)法內(nèi)部構(gòu)建所有內(nèi)容，因此自然而然地，我們依靠越來(lái)越多的第三方服務(wù)來(lái)支持我們。
網(wǎng)絡(luò)性能專家Ryan Townsend警告說(shuō)，這些服務(wù)中的許多服務(wù)都集中在使用戶更容易上手，而不是實(shí)現(xiàn)的質(zhì)量上，因此，性能通常因此受到損害。
他建議：“我的第一個(gè)建議是盡可能避免使用關(guān)鍵渲染路徑。” “確保您的網(wǎng)站快速繪制可以最大程度地減少那些來(lái)之不易的訪問(wèn)者的跳出率，因此請(qǐng)注意標(biāo)記中從第三方加載的任何同步腳本，樣式表或字體。即使您只進(jìn)行了很小的更改，也可能會(huì)產(chǎn)生巨大的影響-我的一位客戶只需將單個(gè)腳本標(biāo)簽更改為異步即可將其在3G連接上的首次有意義的繪制時(shí)間減少了三分之一！”
解決涂裝時(shí)間只是解決性能問(wèn)題的第一步。另一個(gè)是JavaScript執(zhí)行，Ryan稱這是當(dāng)今網(wǎng)絡(luò)的巨大瓶頸。他建議：
“我的提示是考慮何時(shí)需要第三方腳本來(lái)下載和執(zhí)行。” “我的另一位客戶通過(guò)在訪問(wèn)者擴(kuò)展產(chǎn)品頁(yè)面上的評(píng)論選項(xiàng)卡時(shí)加載其顧客評(píng)論服務(wù)，而不是在每個(gè)頁(yè)面上均加載，從而在阻止低端移動(dòng)設(shè)備上執(zhí)行CPU方面節(jié)省了40％的費(fèi)用。”
Ryan建議，這種技術(shù)通常適用于實(shí)時(shí)聊天，而不是在每個(gè)頁(yè)面上都彈出它，而是考慮在產(chǎn)品說(shuō)明或常見(jiàn)問(wèn)題解答中提供一個(gè)按鈕，以在訪問(wèn)者表示愿意聊天時(shí)加載該按鈕。
Web性能：?jiǎn)蝹€(gè)腳本加載的積極影響
將單個(gè)腳本從頁(yè)面加載期間的加載移動(dòng)到用戶操作的積極影響。
8.預(yù)連接到關(guān)鍵的第三方域
獨(dú)立的網(wǎng)絡(luò)性能顧問(wèn)Andy Davies指出，瀏覽器在發(fā)現(xiàn)和下載內(nèi)容方面做得很出色，其順序使我們的頁(yè)面更??快，但是有時(shí)它們需要一點(diǎn)幫助。
他解釋說(shuō)：“有些資源發(fā)現(xiàn)得較晚。” “字體和背景圖片僅在瀏覽器開(kāi)始將樣式應(yīng)用于頁(yè)面時(shí)才發(fā)現(xiàn)，其他資源可能依賴腳本來(lái)插入它們，例如Google Analytics（分析）或標(biāo)簽管理器。如果這些資源來(lái)自第三方域，則在建立和保護(hù)新連接時(shí)會(huì)存在延遲。”
Andy建議使用Preconnect Resource Hint，它可以通過(guò)建議瀏覽器預(yù)熱到第三方域的新連接來(lái)幫助克服此延遲。
例如，如果資源托管在example.com上：
crossorigin如果要從example.com提取字體，則需要添加該屬性：
單個(gè)預(yù)連接有時(shí)可能會(huì)有很大的不同，但是Andy建議您可能需要嘗試一下，看看哪種方法最適合您的站點(diǎn)。
您可能還會(huì)喜歡： 通過(guò)縮小來(lái)提高商店加載時(shí)間的5種方法。
9.糾纏您的應(yīng)用
使用Shopify主題時(shí)，第三方應(yīng)用程序也會(huì)產(chǎn)生重大影響。Shopify Plus合作伙伴機(jī)構(gòu)Disco的創(chuàng)始人兼首席執(zhí)行官Gavin Ballard提醒說(shuō)，無(wú)論您花費(fèi)多少時(shí)間和精力來(lái)優(yōu)化主題，都可以在Shopify App Store上的五分鐘內(nèi)完成所有操作。
他解釋說(shuō)：“可用的各種第三方應(yīng)用程序是Shopify的優(yōu)勢(shì)之一，但許多應(yīng)用程序開(kāi)發(fā)人員并沒(méi)有想到主題性能，甚至那些必須構(gòu)建其應(yīng)用程序才能與1,000,000 +跨Shopify平臺(tái)的電子商務(wù)商店，而不僅僅是您客戶的商店。”
為了最大限度地降低對(duì)Shopify商店的性能影響，Gavin建議采取幾個(gè)步驟。
您需要一個(gè)應(yīng)用程序嗎？
首先，首先考慮您是否真正需要一個(gè)應(yīng)用程序。
加文指出：“許多Shopify應(yīng)用商店應(yīng)用程序都是為那些不具備HTML / CSS / JavaScript技能的商人而設(shè)計(jì)的，他們只需要一鍵安裝即可解決他們的需求。” “倒數(shù)計(jì)時(shí)器，公告欄或退出意圖彈出窗口之類的東西都可以僅使用少量Liquid，CSS和JavaScript 內(nèi)置到主題中。直接在主題中構(gòu)建這些功能可以使您更好地控制性能影響（例如，避免加載jQuery的 30個(gè)版本），并允許您應(yīng)用此處和Web上其他地方討論的其他技術(shù)來(lái)優(yōu)化代碼的交付。瀏覽器。”
該應(yīng)用程序可以控制您嗎？
其次，如果您確定確實(shí)需要支持其所需功能的應(yīng)用程序，請(qǐng)調(diào)查該應(yīng)用程序是否可以控制它與主題的交互方式。
“ 例如，流行的Back in Stock應(yīng)用程序使客戶能夠在產(chǎn)品重新入庫(kù)時(shí)通過(guò)電子郵件和SMS注冊(cè)通知通知的功能，而僅靠主題一個(gè)主題是無(wú)法實(shí)現(xiàn)的，” Gavin解釋道。“但是，它為前端開(kāi)發(fā)人員提供了一系列選擇，包括如何將其功能集成到Shopify主題中-通過(guò)自動(dòng)安裝程序，通過(guò)復(fù)制和粘貼的Liquid代碼段，或者通過(guò)使用JavaScript構(gòu)建完全自定義的集成API。”
Web性能：Javascript文檔
Back in Stock應(yīng)用程序的Javascript API文檔。
在一些實(shí)際案例中，Gavin能夠?qū)ack In Stock應(yīng)用程序集成到主題的產(chǎn)品頁(yè)面中，而對(duì)初始頁(yè)面大小或客戶加載時(shí)間沒(méi)有明顯影響。如果變體缺貨，他只是在產(chǎn)品頁(yè)面上渲染了一個(gè)“通知我”按鈕，而不是一個(gè)“添加到購(gòu)物車”按鈕，然后，一旦頁(yè)面變了，就異步地將Back in Stock JavaScript庫(kù)和一些粘合代碼一起加載了。呈現(xiàn)給用戶。
“如果應(yīng)用程序的開(kāi)發(fā)人員不提供這類集成選項(xiàng)，可能值得與他們聯(lián)系，看看他們是否可以做任何事情，” Gavin建議。“至少，它將幫助提醒應(yīng)用程序開(kāi)發(fā)人員性能是其客戶商店的重要組成部分！”
您可能還會(huì)喜歡： 業(yè)內(nèi)人士對(duì)Shopify所采用技術(shù)的關(guān)注。
10.監(jiān)視每個(gè)子域的請(qǐng)求數(shù)
自Honeycomb.io工程總監(jiān)Emily Nakashima于2000年代初開(kāi)始為網(wǎng)絡(luò)編寫代碼以來(lái)，瀏覽器的發(fā)展便突飛猛進(jìn)，但是對(duì)于我們?nèi)匀恍枰С諬TTP 1.1的我們來(lái)說(shuō)，一件事并沒(méi)有已更改-瀏覽器對(duì)任何一個(gè)子域（通常是六個(gè)）發(fā)出的并發(fā)請(qǐng)求數(shù)量仍然存在限制。
“這個(gè)限制的目的是防止當(dāng)您嘗試一次加載整個(gè)圖像目錄頁(yè)面或其他資源時(shí)，意外地在某個(gè)小型Web服務(wù)器上發(fā)起DOS攻擊，” Emily解釋說(shuō)。“但是在當(dāng)今的網(wǎng)絡(luò)上，我們?cè)S多人使用高度可擴(kuò)展的云服務(wù)并通過(guò)CDN提供圖像，因此限制可能不必要地減慢了您的體驗(yàn)。”
要解決此問(wèn)題，Emily建議使用一種稱為域分片的技術(shù)，該技術(shù)從多個(gè)域或子域中加載一組資源，以增加并發(fā)請(qǐng)求的數(shù)量。例如，您可能將多個(gè)子域（cdn1.example.com，cdn2.example.com等）與同一個(gè)CDN一起使用，以便能夠一次加載更多圖像。但是使用多個(gè)域會(huì)產(chǎn)生一些開(kāi)銷，您需要為每個(gè)新域提出另一個(gè)DNS請(qǐng)求，然后才能開(kāi)始下載我們的資源。
如果您想知道是否最佳配置了我們的域分片，或者是否應(yīng)該添加更多內(nèi)容，請(qǐng)分析每個(gè)域的并發(fā)請(qǐng)求數(shù)。
“當(dāng)您在瀏覽器開(kāi)發(fā)人員工具中查看客戶端分布式跟蹤或?yàn)g覽器的網(wǎng)絡(luò)瀑布時(shí)，請(qǐng)查看請(qǐng)求的模式，” Emily建議。“如果瀑布相對(duì)狹窄，并且請(qǐng)求大多同時(shí)發(fā)生，那么您可能有足夠的碎片。如果您以階梯狀模式看到到同一域的順序請(qǐng)求塊，則可能應(yīng)該配置更多的分片。”
下圖中的圖1顯示了一個(gè)向單個(gè)域發(fā)出請(qǐng)求的網(wǎng)站-您可以看到許多階梯式的順序請(qǐng)求。另一方面，圖2演示了在向許多不同的域發(fā)出請(qǐng)求時(shí)，可以實(shí)現(xiàn)更高的并發(fā)性（在這種情況下，x軸被放大，因此各個(gè)跨度顯得更寬）。
Web性能：對(duì)單個(gè)域還是多個(gè)域的請(qǐng)求
“我們希望能夠在發(fā)生此類問(wèn)題時(shí)獲得自動(dòng)警報(bào)，” Emily解釋說(shuō)，“因此，我們使用Resource Timing API來(lái)收集加載在特定頁(yè)面上的子資源的列表，并在總數(shù)達(dá)到請(qǐng)求或?qū)μ囟ㄗ佑虻恼?qǐng)求超過(guò)了一定數(shù)量。”
11.使用績(jī)效預(yù)算
對(duì)于許多開(kāi)發(fā)人員來(lái)說(shuō)，性能優(yōu)化是目前最有趣的工程工作類型之一，因此很容易陷入困境，花幾天時(shí)間優(yōu)化緩慢的東西，即使這對(duì)他們的客戶來(lái)說(shuō)可能并不那么重要。因此，艾米莉·中島（Emily Nakashima）建議確保您正在優(yōu)化真正重要的事情。
她透露：“在Honeycomb，我們非常樂(lè)于采用“服務(wù)水平目標(biāo)（SLO）”方法來(lái)防止兔眼優(yōu)化。” “使用SLO時(shí)，您會(huì)根據(jù)客戶的期望和容忍度提前設(shè)置目標(biāo)，以提高網(wǎng)站的性能和可靠性（例如，'我的客戶整天使用我們的網(wǎng)站，因此他們需要它感覺(jué)敏捷-主頁(yè)請(qǐng)求應(yīng)在一秒鐘內(nèi)完成”）。
“您還為超出目標(biāo)的頻率設(shè)置了預(yù)算（例如，'主頁(yè)請(qǐng)求的第95個(gè)百分位延遲應(yīng)少于一秒鐘，即99.9％的時(shí)間”）。當(dāng)您的預(yù)算超出預(yù)算時(shí)，這就是您要花時(shí)間優(yōu)化使預(yù)算不足的事情的信號(hào)，因此您可以確保自己正在研究客戶最關(guān)心的問(wèn)題。在剩下的時(shí)間里，您會(huì)對(duì)進(jìn)行非性能工作感到滿意，例如投資新功能或清理技術(shù)債務(wù)。”
Emily指出，在網(wǎng)絡(luò)性能世界中，性能預(yù)算是一種特殊的SLO類型，旨在確保您的網(wǎng)站快速加載。有很多很棒的工具使跟蹤性能預(yù)算比跟蹤平均SLO更容易。
在Honeycomb，Emily使用實(shí)時(shí)開(kāi)發(fā)人員工具幫助軟件工程師了解生產(chǎn)系統(tǒng)中發(fā)生的事情，該團(tuán)隊(duì)通過(guò)跟蹤生產(chǎn)中的頁(yè)面加載時(shí)間來(lái)衡量其性能預(yù)算。但是，對(duì)于不大量使用實(shí)時(shí)用戶監(jiān)控（RUM）數(shù)據(jù)的團(tuán)隊(duì)，Emily說(shuō)，跟蹤和執(zhí)行性能預(yù)算的最簡(jiǎn)單方法是將其內(nèi)置到其構(gòu)建工具（例如webpack）中并確保HTML，CSS和JavaScript限于一定的文件大小和文件數(shù)。
查看Google的Lighthouse審核工具和MDN網(wǎng)絡(luò)文檔，它們都對(duì)如何設(shè)置自己的效果預(yù)算有很好的建議。
通過(guò)Shopify合作伙伴計(jì)劃發(fā)展您的業(yè)務(wù)
無(wú)論您提供市場(chǎng)營(yíng)銷，定制服務(wù)還是網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)服務(wù)，Shopify合作伙伴計(jì)劃都將助您成功。免費(fèi)加入并獲得收益共享的機(jī)會(huì)，發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。
放在一起
正如我們專家的提示所顯示，圖像和第三方服務(wù)仍然是網(wǎng)站運(yùn)行緩慢的主要原因之一。在圖像優(yōu)化上投入時(shí)間和資源，并最大程度地減少第三方影響，并且很有可能對(duì)正在工作的網(wǎng)站的性能產(chǎn)生重大影響。此外，拋開(kāi)輪播并優(yōu)化字體和動(dòng)畫，您將節(jié)省更多的時(shí)間。
將其與移動(dòng)優(yōu)先方法和性能預(yù)算相結(jié)合，您將擁有一個(gè)可靠的Web性能策略，其結(jié)果將使您的客戶和他們的客戶都滿意?，F(xiàn)在加快該網(wǎng)站的速度！
