6種簡單且有效的設計方式以提高網頁載入速度

CCMO資訊團隊

譯者：李振喃、審校：袁帥

你可能在想，網站速度有什麼大驚小怪？平均網頁載入速度有什麼重要？據Aberdeen Group介紹，頁面載入時間延遲1秒，結果如下：

? 頁面瀏覽量減少11％

? 客戶滿意度下降16％

? 轉化次數減少7％

亞馬遜報告，網站速度每100毫秒改善,而沃爾瑪則增加了1％的收益，同時發現每一個頁面速度每增加一秒就會增加2％的轉化。

您的網站的速度還會影響您的自然搜索排名，因為Google 自2010年以來已將網站速度作為其排名演算法的信號。基本上，您的網頁載入速度非常重要，並確定您是否將在SERP中排名。

以下是通過修改您的網站設計立即提高網頁速度的 6種簡單但非常有效的方式：

＃1優化圖像和延遲載入的所有內容

網路上的一些最常見的占帶寬的便是圖像。根據HTTP存檔，圖像現在占頁面權重的63％。「截至2015年5月，平均網頁超過了2 MB的標記。這幾乎是三年前平均頁面大小的兩倍。

「圖表顯示了消耗最多千位元組的細目。實際上所有的資產類型都在增長，最顯著的是圖像。

當創建內容時，有些人會使用大圖像，然後使用CSS來縮放它們。然而，他們不知道，瀏覽器仍然以全尺寸載入它們。例如，如果將800 x 800的圖像縮小到80 x 80，瀏覽器將載入十倍以上。

優化圖像的最佳方法是將其壓縮成更小的尺寸，同時保持質量。使用諸如TinyJPG和Compressor.io之類的工具，或諸如WP Smush It（WordPress）和Imgen（Joomla）之類的CMS插件來壓縮圖像將保證您的網站載入速度更快，從而為網站訪問者提供更好的體驗並提高轉化率。

另一種選擇是「延遲載入」圖像和網頁內容。實質上，您可以使用一些JavaScript來查找哪些圖像位於或靠近視口，並且僅下載用戶可能會看到的圖像。

根據Stackpath總結的延遲載入的好處包括：

延遲載入在優化內容交付和簡化最終用戶體驗之間取得平衡。

用戶更快地連接到內容，因為只有一部分網站需要在用戶首次打開時下載。

隨著內容持續供給用戶，企業看到更高的客戶保留率，減少了用戶離開網站的機會。

企業看到資源成本在降低，因為內容只有在用戶需要的時候才能傳遞，而不是一次性的傳遞。

＃2使用瀏覽器緩存

設置瀏覽器緩存可以讓你暫時的數據存儲在網站訪問者的計算機上。這確保了他們每次訪問您的網站時不必等待您的網頁（標誌，CSS文件和其他資源）載入。

您的伺服器端緩存及其瀏覽配置可確定存儲數據的時間。在您的伺服器上設置瀏覽器緩存可以通過聯繫您的託管公司或通過查看以下資源來完成：

? Apache緩存

? IIS緩存

? Nginx緩存

利用瀏覽器緩存來指定Web瀏覽器保存CSS，JS和圖像存儲的時間。對於回訪客戶讓您的網頁載入速度更快，導致了流暢的體驗，同時在導航和在搜索結果頁面（SERP）上更好的排名。

另外，安裝緩存插件會對您的頁面載入時間產生巨大的影響。緩存插件通過生成內容的靜態副本並將其傳遞給站點訪問者來處理此問題。這可以大大減少您的頁面載入時間。

緩存插件可以幫助你看到你的網站的整體性能10倍左右的改善。緩存插件的示例包括W3 Total Cache。

＃3壓縮網頁內容

Google將壓縮定義為使用較少位編碼信息的過程。儘管最新的網路瀏覽器都支持內容壓縮功能，許多網站仍然沒有釋放壓縮內容。

訪問這些網站的訪問者與網頁的互動速度緩慢。 這些不利的網站行為的主要原因包括舊的或錯誤的瀏覽器，網路代理，配置錯誤的主機伺服器和防病毒軟體。

未壓縮的內容使得對於具有有限帶寬的用戶，接收到Web內容和頁面載入時間非常慢。為了有效的壓縮策略提供高效的網站內容，Google建議如下：

1）Minify，HTML，CSS和JavaScript

2）在CSS和HTML中使用一致的代碼，方法如下：

? 使用一致的規格 - 大多是小寫的。

? 確保引用HTML標籤屬性。

? 以相同的順序顯示HTML屬性。

3）啟用Gzip壓縮

Gzip找到類似的字元串和代碼實例，並用較短的字元臨時替換它們。根據Google說法：「啟用Gzip壓縮可以將傳輸響應的大小減少高達90％，這可以顯著減少下載資源的時間量，減少客戶端的數據使用量，並改善首次渲染頁面的時間」

＃4優化CSS代碼和傳遞

CSS的引入是一個關鍵的改進，幾乎沒有任何缺點。 但是，必須考慮CSS腳本對頁面速度的影響，特別是它涉及到一個網頁的表現時。

當CSS交付不當時，導致瀏覽器在下載和處理樣式數據時延遲，在它可以徹底完成呈現，以顯示給你網頁的訪問者之前。這就是為什麼至關重要的是優化CSS交付，並確定可能減慢您的網頁的陷阱。

CSS可以通過網頁以多種方式使用，並且仍然可以工作。鑒於有各種方法可以使用它，有幾種不同的CSS設置。無論您如何在網頁上進行設置，您的CSS應該幫助您的網頁呈現更快的速度，而不會減慢速度。

您可以利用不同的在線工具來壓縮，優化和清理CSS交付。另外，您可以參考Google關於優化CSS交付的建議。

＃5使用非常快的伺服器託管公司

有一段時間，我更換了我的託管公司，我的網站的平均速度在其他任何不改變情況下顯著增加。當時我意識到，當涉及到網站的載入速度託管公司並不都是平等的。

在瀏覽網站或打開網頁時，您將從遠程計算機（即託管公司的Web伺服器）打開文件。遠程計算機越快，您的網頁可以打開的速度越快。

有各種各樣的託管公司在那裡供您使用。只要確保您進行適當的研究，並閱讀足夠的評論，然後再決定用任何一個主辦來託管您的網站。

＃6停用不使用的插件

插件通常是減慢WordPress託管網站速度的主要原因。刪除您不再使用或不是必需的插件。您可以通過選擇性地禁用插件和衡量伺服器性能來識別可能損害您速度的插件。

另外，為了加快您的WordPress網站在手機上的體驗，請查看我們的指南，儘快在您的WordPress網站上實施Google AMP。

結論

用戶將繼續要求更豐富的在線體驗，並且會有更快更清晰的JavaScript，更多的CSS竅門和其他第三方分析工具，以增加您的網頁的大小和衡量您的網站。

作為一個在線營銷人員，你不能讓這個讓你迷惑。 您必須定期努力擴展您的網頁設計，以提高您的網頁載入速度。一點點持續關注你的網站載入速度會走很長的路。記住：只需在您的網站載入速度一秒鐘的延遲就是失去領先。

【譯者簡介】

李振喃，工作6年一來一直從事海外SEO，自己比較喜歡谷歌SEO這一塊，所以喜歡研究相關的知識，包括ASO，Social，html，伺服器等方面，我的工作經歷主要在海外遊戲，機械重工方面。希望加入一個能一起繼續成長的團隊，把SEO興趣繼續燃燒下去。

【審校簡介】

袁帥，網路營銷，搜索引擎營銷運營出身，CEAC國家信息化計算機教育認證：網路營銷師，SEM搜索引擎營銷師，SEO工程師，專註互聯網數據分析運營，現為會點網事業合伙人，運營負責人，貿促會—今日會展會員聯盟VIP個人會員，周五咖啡媒體人俱樂部發起合伙人，互聯網數據官iCDO原創作者，互聯網營銷官CMO原創作者。

【關於互聯網營銷官CMO】

互聯網營銷官CMO是一個公益性組織，致力於打造國內領先的互聯網營銷領域人才交流討論的平台，定位於助力互聯網營銷領域的人才互幫互助，共同成長為首席互聯網營銷官（Chief Marketing Officer）。

為未來的互聯網營銷官CMO們提供互聯網營銷行業最新最前沿的營銷乾貨和行業資訊、涵蓋互聯網營銷領域的SEO、SEM、PPC、網盟營銷、EDM營銷、紅人營銷、大數據營銷、場景營銷、O2O營銷、事件營銷、病毒營銷、口碑營銷等眾多互聯網營銷方法和手段。

iOS 用戶專享讚賞二維碼：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！