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

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

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

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

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


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

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

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

電子郵件

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

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

他解釋說：“響應(yīng)式Web設(shè)計使我們能夠構(gòu)建理論上可以在臺式機和移動臺上均能正常工作的網(wǎng)站。” “不幸的是，我們似乎經(jīng)常經(jīng)常先為臺式機設(shè)計和構(gòu)建，然后嘗試縮小網(wǎng)站規(guī)模以適應(yīng)移動設(shè)備的限制。這會導致緩慢，緩慢的移動體驗，尤其是對于使用Android的訪問者而言，他們的設(shè)備通常無法應(yīng)付桌面上的JavaScript以及我們向他們提供的其他內(nèi)容，因此使用它們的用戶尤其如此。

為了創(chuàng)建快速的移動優(yōu)先體驗，Andy建議構(gòu)建可在低成本Android手機（例如Alcatel 1x）上使用的網(wǎng)站，然后在運行時對其進行增強，以通過功能更強大的設(shè)備和更大的屏幕為訪問者提供更豐富的體驗。

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

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

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

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

他建議說：“擺脫圓盤傳送帶，可以使頁面加載快得多，因為總頁面大小將大大減少。” “考慮一個擺放位置很好的英雄形象，用引人注目的號召性用語而不是輪播。它的加載速度更快，并且您將吸引更多的訪問者點擊您希望他們點擊的內(nèi)容。”

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

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

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

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

“如果您的PNG沒有透明像素，請在上傳之前考慮將其轉(zhuǎn)換為JPEG，” Alexander建議。“使用Photoshop或PNG2JPG之類的服務(wù)來更改文件格式。”

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

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

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

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

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

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

“用戶看不到文本的一個原因是使用了默認情況下用戶計算機不支持的外部字體，”安娜·米加斯（Anna Migas）解釋說。“在那種情況下，網(wǎng)站需要先下載字體，然后才能在屏幕上顯示它們。有時可能要花一些時間，最好提供一種備用字體，該字體將立即顯示，然后換成所需的字體。”

為此，安娜建議，您可以font-display: swap在@ font-face聲明中添加屬性，或者，如果使用的是Google字體，則可以添加&display=swapURL參數(shù)（例如：)。

可以在Chris Coyier的CSS-Tricks文章中找到更多詳細信息（請注意，它是在可能使用URL參數(shù)選項之前編寫的）。

Web性能：加載和不加載字體交換
一個沒有（左）和有（右）字體交換的字體加載示例（來源：www.zachleat.com/foitfout/）。
6.創(chuàng)建流暢的動畫
只要做得好，動畫就可以無縫，巧妙地改善網(wǎng)站上的用戶體驗。但是，如果做錯了，他們可能會使您的訪客感到困惑和分散注意力。 

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

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

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


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

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

的JavaScript 
泰勒（Tyler）警告說，JavaScript動畫非常棘手，因為它們與您網(wǎng)頁上的所有其他JavaScript共享相同的資源集。

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

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

許多去抖動實現(xiàn)的缺點是，它們沒有針對動畫或?qū)OM的任何更改進行優(yōu)化。requestAnimationFrame最好使用的瀏覽器作為去抖動功能，因為它已針對動畫進行了優(yōu)化。

requestAnimationFrame泰勒建議：“下一次您要限制某個事件時，請考慮嘗試一下防抖功能。” “最后一個好處是，requestAnimationFrame當不使用網(wǎng)頁時，通過暫?；卣{(diào)，將使用更少的系統(tǒng)資源。”

您可能還會喜歡： 具有CSS變量的UI動畫。

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

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

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

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

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

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

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

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

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

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


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


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

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

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

他解釋說：“可用的各種第三方應(yīng)用程序是Shopify的優(yōu)勢之一，但許多應(yīng)用程序開發(fā)人員并沒有想到主題性能，甚至那些必須構(gòu)建其應(yīng)用程序才能與1,000,000 +跨Shopify平臺的電子商務(wù)商店，而不僅僅是您客戶的商店。”

為了大限度地降低對Shopify商店的性能影響，Gavin建議采取幾個步驟。

您需要一個應(yīng)用程序嗎？
首先，首先考慮您是否真正需要一個應(yīng)用程序。 

加文指出：“許多Shopify應(yīng)用商店應(yīng)用程序都是為那些不具備HTML / CSS / JavaScript技能的商人而設(shè)計的，他們只需要一鍵安裝即可解決他們的需求。” “倒數(shù)計時器，公告欄或退出意圖彈出窗口之類的東西都可以僅使用少量Liquid，CSS和JavaScript 內(nèi)置到主題中。直接在主題中構(gòu)建這些功能可以使您更好地控制性能影響（例如，避免加載jQuery的 30個版本），并允許您應(yīng)用此處和Web上其他地方討論的其他技術(shù)來優(yōu)化代碼的交付。瀏覽器。”

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

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

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

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

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

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

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

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

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

“當您在瀏覽器開發(fā)人員工具中查看客戶端分布式跟蹤或瀏覽器的網(wǎng)絡(luò)瀑布時，請查看請求的模式，” Emily建議。“如果瀑布相對狹窄，并且請求大多同時發(fā)生，那么您可能有足夠的碎片。如果您以階梯狀模式看到到同一域的順序請求塊，則可能應(yīng)該配置更多的分片。”

下圖中的圖1顯示了一個向單個域發(fā)出請求的網(wǎng)站-您可以看到許多階梯式的順序請求。另一方面，圖2演示了在向許多不同的域發(fā)出請求時，可以實現(xiàn)更高的并發(fā)性（在這種情況下，x軸被放大，因此各個跨度顯得更寬）。

Web性能：對單個域還是多個域的請求

“我們希望能夠在發(fā)生此類問題時獲得自動警報，” Emily解釋說，“因此，我們使用Resource Timing API來收集加載在特定頁面上的子資源的列表，并在總數(shù)達到請求或?qū)μ囟ㄗ佑虻恼埱蟪^了一定數(shù)量。”

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

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

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

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

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

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

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

無論您提供市場營銷，定制服務(wù)還是網(wǎng)站設(shè)計和開發(fā)服務(wù)，Shopify合作伙伴計劃都將助您成功。免費加入并獲得收益共享的機會，發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。

放在一起
正如我們專家的提示所顯示，圖像和第三方服務(wù)仍然是網(wǎng)站運行緩慢的主要原因之一。在圖像優(yōu)化上投入時間和資源，并大程度地減少第三方影響，并且很有可能對正在工作的網(wǎng)站的性能產(chǎn)生重大影響。此外，拋開輪播并優(yōu)化字體和動畫，您將節(jié)省更多的時間。

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

分享題目：如何大幅提升網(wǎng)站建設(shè)完成后打開的速度
轉(zhuǎn)載注明：http://www.muchs.cn/news/174093.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、App設(shè)計、服務(wù)器托管、云服務(wù)器、外貿(mào)建站

廣告

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

成都seo排名網(wǎng)站優(yōu)化