如何大幅提升網(wǎng)站建設(shè)完成后打開的速度

2022-07-03    分類： 網(wǎng)站建設(shè)

如何大幅提升網(wǎng)站建設(shè)完成后打開的速度  Web性能：11個(gè)必讀技巧，可幫助您加快網(wǎng)站速度

我們可以向我們的網(wǎng)站添加更多功能，并擁有比以往更多的工具和技術(shù)。但是，不利的一面是，我們的選擇可能會(huì)極大地降低網(wǎng)站的速度，從而使客戶感到沮喪（在2018年的一項(xiàng)調(diào)查中，有80％的用戶表示加載緩慢的網(wǎng)站比暫時(shí)關(guān)閉的網(wǎng)站更令人沮喪）。如果在緩慢的網(wǎng)絡(luò)條件或低端設(shè)備上無法訪問站點(diǎn)或無法響應(yīng)站點(diǎn)，則它甚至可以完全排除潛在客戶。

網(wǎng)站性能優(yōu)化對(duì)業(yè)務(wù)的影響已得到充分證明。例如，時(shí)尚零售商Missguided  將頁面加載時(shí)間中位數(shù)減少了4秒，收入增加了26％。在下面觀看有關(guān)此內(nèi)容的演講：


其中很多是關(guān)于提高知名度的，所以我們邀請(qǐng)了七位專家來提出一些技巧，以幫助提高您的網(wǎng)站的性能。 

模板圖標(biāo)
培養(yǎng)技能的資源

獲得免費(fèi)的項(xiàng)目計(jì)劃模板副本，直接發(fā)送到您的收件箱。

電子郵件

輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營銷電子郵件。您可以隨時(shí)取消訂閱。

我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。
請(qǐng)注意，
我們的電子郵件最多可能需要15分鐘
才能到達(dá)您的收件箱。
1.首先為手機(jī)打造
客戶越來越多地移動(dòng)，僅移動(dòng)客戶的比例正在上升。但是，移動(dòng)設(shè)備上的轉(zhuǎn)化率往往較低。在上述時(shí)尚零售商網(wǎng)站上工作的獨(dú)立網(wǎng)絡(luò)性能顧問Andy Davies表示，現(xiàn)在應(yīng)該改變這一點(diǎn)，并最終將移動(dòng)設(shè)備視為一流公民。

他解釋說：“響應(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的訪問者而言，他們的設(shè)備通常無法應(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)，以通過功能更強(qiáng)大的設(shè)備和更大的屏幕為訪問者提供更豐富的體驗(yàn)。

您可能還會(huì)喜歡： 為下一個(gè)十億用戶設(shè)計(jì)。

2.停止使用轉(zhuǎn)盤和滑塊
旋轉(zhuǎn)木馬，幻燈片和滑塊聽起來像在紙上一個(gè)偉大的想法，但Shopify速度優(yōu)化專家亞歷山大·林，首席執(zhí)行官Rvere，這背后是Shopify應(yīng)用Hyperspeed警告說，他們有兩個(gè)重大缺陷，我們需要讓我們的客戶知道的。 

他警告說：“他們不會(huì)將訪問者轉(zhuǎn)化為客戶，并且會(huì)降低您的網(wǎng)站速度。” “ 尼爾森·諾曼集團(tuán)（Nielsen Norman Group）進(jìn)行的可用性測試發(fā)現(xiàn)，訪客實(shí)際上忽略了輪播。更可惡的是，在圣母大學(xué)網(wǎng)站上進(jìn)行的一項(xiàng)測試發(fā)現(xiàn)，只有百分之一的訪客點(diǎn)擊了第一張幻燈片。其余幻燈片的點(diǎn)擊次數(shù)甚至更少。”

輪播不僅吸引轉(zhuǎn)化，還使網(wǎng)站陷入困境。亞歷山大警告說，精美的滑塊需要額外的JavaScript，并且通常由幾張大圖像組成。 

他建議說：“擺脫圓盤傳送帶，可以使頁面加載快得多，因?yàn)榭傢撁娲笮⒋蟠鬁p少。” “考慮一個(gè)擺放位置很好的英雄形象，用引人注目的號(hào)召性用語而不是輪播。它的加載速度更快，并且您將吸引更多的訪問者點(diǎn)擊您希望他們點(diǎn)擊的內(nèi)容。”

網(wǎng)站性能：靜態(tài)主頁英雄
靜態(tài)首頁英雄圖片，帶有清晰的號(hào)召性用語。
3.優(yōu)化圖像
圖像是任何電子商務(wù)商店中必不可少的一部分，它們通常構(gòu)成了其中的大部分。但是，大圖片可能會(huì)使網(wǎng)站慢下來，因?yàn)榇箜撁娴募虞d時(shí)間更長。

如果您或您的客戶希望保留所有圖像，Alexander Lam建議至少壓縮它們。

他建議：“在將任何圖像上傳到商店之前，請(qǐng)先通過tinyjpg.com或shortpixel.com之類的免費(fèi)圖像壓縮器運(yùn)行該圖像。” 這些服務(wù)將使您的圖像在數(shù)據(jù)大小方面變小，而不會(huì)犧牲質(zhì)量或更改其實(shí)際尺寸。原始圖像通常可以縮小70％以上，而不會(huì)出現(xiàn)明顯的質(zhì)量變化。”

確保您使用正確的文件格式也很重要。如果您想要圖片中的透明像素，PNG圖像確實(shí)很有用，但是它們通常比JPEG占用更多的空間。 

“如果您的PNG沒有透明像素，請(qǐng)?jiān)谏蟼髦翱紤]將其轉(zhuǎn)換為JPEG，” Alexander建議。“使用Photoshop或PNG2JPG之類的服務(wù)來更改文件格式。”

Web性能：原始文件，帶壓縮的JPEG，gif
將原始JPEG與壓縮版本進(jìn)行比較，質(zhì)量損失為70％。
4.延遲加載圖像
幫助企業(yè)保持客戶在線帳戶安全的創(chuàng)業(yè)公司Castle的會(huì)議發(fā)言人和軟件工程師Anna Migas同意，圖像是網(wǎng)絡(luò)性能的大罪魁禍?zhǔn)字弧?nbsp;

她警告說：“一張圖片可以說一千多個(gè)單詞，但加載可能還需要一千毫秒或更長的時(shí)間，更糟糕的是，延遲加載其他內(nèi)容。” “想象一下，如果您的網(wǎng)站上有20張圖片并且它們都爭相下載，那會(huì)發(fā)生什么！”

Anna解釋說，做法是默認(rèn)情況下不下載頁面上的所有圖像，而是使用一種稱為延遲加載的技術(shù)。這意味著最初只從頁面頂部提供圖像，然后在用戶向下滾動(dòng)并靠近頁面上可以找到更多圖像的位置時(shí)開始獲取其余圖像。

“ 惰性加載通常是使用JavaScript完成的，您可以找到許多小型庫來幫助您達(dá)到這種效果，”安娜建議。“我個(gè)人最喜歡的是LazyLoad和yall.js。在Chrome瀏覽器中，可以通過將loading=“lazy”屬性添加到標(biāo)簽來使用本地函數(shù)來延遲加載所選圖像，但是對(duì)于其他瀏覽器來說，這不能解決問題。”

您可能還會(huì)喜歡： 延遲加載如何優(yōu)化Shopify主題圖像。

5.通過字體交換加載網(wǎng)絡(luò)字體
不可否認(rèn)，圖像是電子商務(wù)網(wǎng)站上銷售計(jì)劃的重要組成部分，但用戶也希望快速查看價(jià)格和產(chǎn)品說明。這就是為什么使文本盡可能快地可見至關(guān)重要的原因，但是由于Web字體的原因，它的加載速度并不總是足夠快。

“用戶看不到文本的一個(gè)原因是使用了默認(rèn)情況下用戶計(jì)算機(jī)不支持的外部字體，”安娜·米加斯（Anna Migas）解釋說。“在那種情況下，網(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è)沒有（左）和有（右）字體交換的字體加載示例（來源：www.zachleat.com/foitfout/）。
6.創(chuàng)建流暢的動(dòng)畫
只要做得好，動(dòng)畫就可以無縫，巧妙地改善網(wǎng)站上的用戶體驗(yàn)。但是，如果做錯(cuò)了，他們可能會(huì)使您的訪客感到困惑和分散注意力。 

目前在Netflix任職的高級(jí)軟件工程師Tyler Childs建議了一些技巧，以改善使用CSS或JavaScript創(chuàng)建的網(wǎng)絡(luò)動(dòng)畫。

的CSS 
泰勒解釋說：“固定平滑的CSS動(dòng)畫有一個(gè)小秘密，那就是使用不會(huì)強(qiáng)制更改布局或重新繪制像素的屬性。” “經(jīng)驗(yàn)法則是只使用opacityand transform，但是如果您想更深入一點(diǎn)，請(qǐng)查看CSS觸發(fā)器。”

不透明度和變換都只會(huì)影響其樣式的內(nèi)容。樣式化的內(nèi)容可以有效地保留在頁面其余部分的適當(dāng)位置，但是正如Tyler所展示的，對(duì)用戶而言，魔術(shù)將會(huì)發(fā)生：


其它屬性，如padding，margin，width，height，top，bottom，left，和right將迫使你的布局變化，這淌下來的所有內(nèi)容，并可能導(dǎo)致顛簸或回流。

所有CSS屬性都可以用于布局，但是在設(shè)置內(nèi)容動(dòng)畫時(shí)要小心。

的JavaScript 
泰勒（Tyler）警告說，JavaScript動(dòng)畫非常棘手，因?yàn)樗鼈兣c您網(wǎng)頁上的所有其他JavaScript共享相同的資源集。

requestAnimationFrame他建議：“ 使用JavaScript平滑動(dòng)畫的秘訣是一種稱為的方法。” “如果正確完成，采用這種方法的動(dòng)畫可以達(dá)到60 FPS！”

實(shí)際的用例requestAnimationFrame包括限制用戶交互，例如滾動(dòng)或拖動(dòng)事件。這些事件每秒可能觸發(fā)多次，這就是為什么對(duì)它們進(jìn)行反彈以控制觸發(fā)次數(shù)是一種非常常見的方法。

許多去抖動(dòng)實(shí)現(xiàn)的缺點(diǎn)是，它們沒有針對(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)頁時(shí)，通過暫?；卣{(diào)，將使用更少的系統(tǒng)資源。”

您可能還會(huì)喜歡： 具有CSS變量的UI動(dòng)畫。

7.最小化第三方影響
隨著電子商務(wù)創(chuàng)新步伐的不斷提高，企業(yè)根本無法內(nèi)部構(gòu)建所有內(nèi)容，因此自然而然地，我們依靠越來越多的第三方服務(wù)來支持我們。

網(wǎng)絡(luò)性能專家Ryan Townsend警告說，這些服務(wù)中的許多服務(wù)都集中在使用戶更容易上手，而不是實(shí)現(xiàn)的質(zhì)量上，因此，性能通常因此受到損害。 

他建議：“我的第一個(gè)建議是盡可能避免使用關(guān)鍵渲染路徑。” “確保您的網(wǎng)站快速繪制可以大程度地減少那些來之不易的訪問者的跳出率，因此請(qǐng)注意標(biāo)記中從第三方加載的任何同步腳本，樣式表或字體。即使您只進(jìn)行了很小的更改，也可能會(huì)產(chǎn)生巨大的影響-我的一位客戶只需將單個(gè)腳本標(biāo)簽更改為異步即可將其在3G連接上的首次有意義的繪制時(shí)間減少了三分之一！”

解決涂裝時(shí)間只是解決性能問題的第一步。另一個(gè)是JavaScript執(zhí)行，Ryan稱這是當(dāng)今網(wǎng)絡(luò)的巨大瓶頸。他建議：

“我的提示是考慮何時(shí)需要第三方腳本來下載和執(zhí)行。” “我的另一位客戶通過在訪問者擴(kuò)展產(chǎn)品頁面上的評(píng)論選項(xiàng)卡時(shí)加載其顧客評(píng)論服務(wù)，而不是在每個(gè)頁面上均加載，從而在阻止低端移動(dòng)設(shè)備上執(zhí)行CPU方面節(jié)省了40％的費(fèi)用。”

Ryan建議，這種技術(shù)通常適用于實(shí)時(shí)聊天，而不是在每個(gè)頁面上都彈出它，而是考慮在產(chǎn)品說明或常見問題解答中提供一個(gè)按鈕，以在訪問者表示愿意聊天時(shí)加載該按鈕。

Web性能：單個(gè)腳本加載的積極影響
將單個(gè)腳本從頁面加載期間的加載移動(dòng)到用戶操作的積極影響。
8.預(yù)連接到關(guān)鍵的第三方域
獨(dú)立的網(wǎng)絡(luò)性能顧問Andy Davies指出，瀏覽器在發(fā)現(xiàn)和下載內(nèi)容方面做得很出色，其順序使我們的頁面更??快，但是有時(shí)它們需要一點(diǎn)幫助。 

他解釋說：“有些資源發(fā)現(xiàn)得較晚。” “字體和背景圖片僅在瀏覽器開始將樣式應(yīng)用于頁面時(shí)才發(fā)現(xiàn)，其他資源可能依賴腳本來插入它們，例如Google Analytics（分析）或標(biāo)簽管理器。如果這些資源來自第三方域，則在建立和保護(hù)新連接時(shí)會(huì)存在延遲。”

Andy建議使用Preconnect Resource Hint，它可以通過建議瀏覽器預(yù)熱到第三方域的新連接來幫助克服此延遲。

例如，如果資源托管在example.com上：


crossorigin如果要從example.com提取字體，則需要添加該屬性：


單個(gè)預(yù)連接有時(shí)可能會(huì)有很大的不同，但是Andy建議您可能需要嘗試一下，看看哪種方法最適合您的站點(diǎn)。

您可能還會(huì)喜歡： 通過縮小來提高商店加載時(shí)間的5種方法。

9.糾纏您的應(yīng)用
使用Shopify主題時(shí)，第三方應(yīng)用程序也會(huì)產(chǎn)生重大影響。Shopify Plus合作伙伴機(jī)構(gòu)Disco的創(chuàng)始人兼首席執(zhí)行官Gavin Ballard提醒說，無論您花費(fèi)多少時(shí)間和精力來優(yōu)化主題，都可以在Shopify App Store上的五分鐘內(nèi)完成所有操作。

他解釋說：“可用的各種第三方應(yīng)用程序是Shopify的優(yōu)勢(shì)之一，但許多應(yīng)用程序開發(fā)人員并沒有想到主題性能，甚至那些必須構(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ù)來優(yōu)化代碼的交付。瀏覽器。”

該應(yīng)用程序可以控制您嗎？
其次，如果您確定確實(shí)需要支持其所需功能的應(yīng)用程序，請(qǐng)調(diào)查該應(yīng)用程序是否可以控制它與主題的交互方式。

“ 例如，流行的Back in Stock應(yīng)用程序使客戶能夠在產(chǎn)品重新入庫時(shí)通過電子郵件和SMS注冊(cè)通知通知的功能，而僅靠主題一個(gè)主題是無法實(shí)現(xiàn)的，” Gavin解釋道。“但是，它為前端開發(fā)人員提供了一系列選擇，包括如何將其功能集成到Shopify主題中-通過自動(dòng)安裝程序，通過復(fù)制和粘貼的Liquid代碼段，或者通過使用JavaScript構(gòu)建完全自定義的集成API。”

Web性能：Javascript文檔
Back in Stock應(yīng)用程序的Javascript API文檔。
在一些實(shí)際案例中，Gavin能夠?qū)ack In Stock應(yīng)用程序集成到主題的產(chǎn)品頁面中，而對(duì)初始頁面大小或客戶加載時(shí)間沒有明顯影響。如果變體缺貨，他只是在產(chǎn)品頁面上渲染了一個(gè)“通知我”按鈕，而不是一個(gè)“添加到購物車”按鈕，然后，一旦頁面變了，就異步地將Back in Stock JavaScript庫和一些粘合代碼一起加載了。呈現(xiàn)給用戶。

“如果應(yīng)用程序的開發(fā)人員不提供這類集成選項(xiàng)，可能值得與他們聯(lián)系，看看他們是否可以做任何事情，” Gavin建議。“至少，它將幫助提醒應(yīng)用程序開發(fā)人員性能是其客戶商店的重要組成部分！”

您可能還會(huì)喜歡： 業(yè)內(nèi)人士對(duì)Shopify所采用技術(shù)的關(guān)注。

10.監(jiān)視每個(gè)子域的請(qǐng)求數(shù)
自Honeycomb.io工程總監(jiān)Emily Nakashima于2000年代初開始為網(wǎng)絡(luò)編寫代碼以來，瀏覽器的發(fā)展便突飛猛進(jìn)，但是對(duì)于我們?nèi)匀恍枰С諬TTP 1.1的我們來說，一件事并沒有已更改-瀏覽器對(duì)任何一個(gè)子域（通常是六個(gè)）發(fā)出的并發(fā)請(qǐng)求數(shù)量仍然存在限制。 

“這個(gè)限制的目的是防止當(dāng)您嘗試一次加載整個(gè)圖像目錄頁面或其他資源時(shí)，意外地在某個(gè)小型Web服務(wù)器上發(fā)起DOS攻擊，” Emily解釋說。“但是在當(dāng)今的網(wǎng)絡(luò)上，我們?cè)S多人使用高度可擴(kuò)展的云服務(wù)并通過CDN提供圖像，因此限制可能不必要地減慢了您的體驗(yàn)。”

要解決此問題，Emily建議使用一種稱為域分片的技術(shù)，該技術(shù)從多個(gè)域或子域中加載一組資源，以增加并發(fā)請(qǐng)求的數(shù)量。例如，您可能將多個(gè)子域（cdn1.example.com，cdn2.example.com等）與同一個(gè)CDN一起使用，以便能夠一次加載更多圖像。但是使用多個(gè)域會(huì)產(chǎn)生一些開銷，您需要為每個(gè)新域提出另一個(gè)DNS請(qǐng)求，然后才能開始下載我們的資源。

如果您想知道是否配置了我們的域分片，或者是否應(yīng)該添加更多內(nèi)容，請(qǐng)分析每個(gè)域的并發(fā)請(qǐng)求數(shù)。 

“當(dāng)您在瀏覽器開發(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ā)生此類問題時(shí)獲得自動(dòng)警報(bào)，” Emily解釋說，“因此，我們使用Resource Timing API來收集加載在特定頁面上的子資源的列表，并在總數(shù)達(dá)到請(qǐng)求或?qū)μ囟ㄗ佑虻恼?qǐng)求超過了一定數(shù)量。”

11.使用績效預(yù)算
對(duì)于許多開發(fā)人員來說，性能優(yōu)化是目前最有趣的工程工作類型之一，因此很容易陷入困境，花幾天時(shí)間優(yōu)化緩慢的東西，即使這對(duì)他們的客戶來說可能并不那么重要。因此，艾米莉·中島（Emily Nakashima）建議確保您正在優(yōu)化真正重要的事情。 

她透露：“在Honeycomb，我們非常樂于采用“服務(wù)水平目標(biāo)（SLO）”方法來防止兔眼優(yōu)化。” “使用SLO時(shí)，您會(huì)根據(jù)客戶的期望和容忍度提前設(shè)置目標(biāo)，以提高網(wǎng)站的性能和可靠性（例如，'我的客戶整天使用我們的網(wǎng)站，因此他們需要它感覺敏捷-主頁請(qǐng)求應(yīng)在一秒鐘內(nèi)完成”）。

“您還為超出目標(biāo)的頻率設(shè)置了預(yù)算（例如，'主頁請(qǐng)求的第95個(gè)百分位延遲應(yīng)少于一秒鐘，即99.9％的時(shí)間”）。當(dāng)您的預(yù)算超出預(yù)算時(shí)，這就是您要花時(shí)間優(yōu)化使預(yù)算不足的事情的信號(hào)，因此您可以確保自己正在研究客戶最關(guān)心的問題。在剩下的時(shí)間里，您會(huì)對(duì)進(jìn)行非性能工作感到滿意，例如投資新功能或清理技術(shù)債務(wù)。”

Emily指出，在網(wǎng)絡(luò)性能世界中，性能預(yù)算是一種特殊的SLO類型，旨在確保您的網(wǎng)站快速加載。有很多很棒的工具使跟蹤性能預(yù)算比跟蹤平均SLO更容易。 

在Honeycomb，Emily使用實(shí)時(shí)開發(fā)人員工具幫助軟件工程師了解生產(chǎn)系統(tǒng)中發(fā)生的事情，該團(tuán)隊(duì)通過跟蹤生產(chǎn)中的頁面加載時(shí)間來衡量其性能預(yù)算。但是，對(duì)于不大量使用實(shí)時(shí)用戶監(jiān)控（RUM）數(shù)據(jù)的團(tuán)隊(duì)，Emily說，跟蹤和執(zhí)行性能預(yù)算的最簡單方法是將其內(nèi)置到其構(gòu)建工具（例如webpack）中并確保HTML，CSS和JavaScript限于一定的文件大小和文件數(shù)。 

查看Google的Lighthouse審核工具和MDN網(wǎng)絡(luò)文檔，它們都對(duì)如何設(shè)置自己的效果預(yù)算有很好的建議。

通過Shopify合作伙伴計(jì)劃發(fā)展您的業(yè)務(wù)

無論您提供市場營銷，定制服務(wù)還是網(wǎng)站設(shè)計(jì)和開發(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)生重大影響。此外，拋開輪播并優(yōu)化字體和動(dòng)畫，您將節(jié)省更多的時(shí)間。

將其與移動(dòng)優(yōu)先方法和性能預(yù)算相結(jié)合，您將擁有一個(gè)可靠的Web性能策略，其結(jié)果將使您的客戶和他們的客戶都滿意?，F(xiàn)在加快該網(wǎng)站的速度！

網(wǎng)站欄目：如何大幅提升網(wǎng)站建設(shè)完成后打開的速度
文章源于：http://www.muchs.cn/news43/174093.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、域名注冊(cè)、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司