移動網站速度優化終極指南

已發表: 2016-03-09

mobile-speed

我們都被推向移動優先的消費市場，而中小企業在移動優化網站方面仍然落後。 以閃電般的速度測試互聯網連接和 4G 標準已經到位，移動用戶增長的時機從未如此美好。 根據ComScores 最近的全球移動報告，只有不到一半 (49%) 的前 100 家數字媒體資產的流量和訪問者是移動的。 這是一個了不起的統計數據，它認為不適合移動設備的網站可能會失去一半的受眾。

對於移動用戶來說，唯一最重要的是速度（下圖提供了桌面和移動設備的平均加載時間）。

加載時間

本移動網站速度優化指南中討論的步驟和方法將列出在所有類型的移動設備上優化網站速度所需的所有必要修復。

如何在移動設備上檢查您的網站性能？

為了使您的網站對移動設備友好，您需要做的第一件事就是檢查其在移動設備上的性能。 您可以使用多種工具來完成此任務：

谷歌移動友好測試- 此工具分析 URL 並報告頁面是否具有移動友好設計。 它提供了有關 Googlebot 如何在移動設備上正確查看網頁的文檔，並提供了有關如何使網頁適合移動設備的分步建議。

谷歌頁面速度洞察- 此工具分析您的網頁並提供建議以使其更快。 此工具提供 3 個優先級指標，即紅色（需要修復）、黃色（考慮修復）和綠色（未檢測到問題），如下面的屏幕截圖所示。

頁面速度指標

GTMetrix - 此工具通過從 Google Page Speed Insights 和 Yahoo Slow 獲取數據來提供性能報告。 它還提供了一個瀑布圖，可用於發現諸如 404 之類的簡單問題或更複雜的問題，例如外部資源阻塞頁面呈現。

一旦您確定了問題並進行了初步修復，現在是時候通過實施以下建議來進一步加快網站速度了。

如何在移動設備上加速您的網站 - 減少加載時間和提高性能的 8 種方法

以下提示已經過嘗試和測試，以提高您的網站在移動設備上的速度。 讓我們一一了解這些。

1- 有一個正確配置的 CDN

速度和可訪問性是優化搜索的首要考慮因素之一。 通過內容交付網絡 (CDN) 利用全球內容緩存是促進 SEO 工作的好方法。 基本上，CDN 是分佈在世界不同位置的服務器集合，它們動態緩存網站內容。 它是一項附加服務，可以在現有云託管服務之外使用。 它與包括 WordPress 網站在內的各種服務兼容。

CDN 緩存有助於通過離客戶端最近的服務器傳送緩存的內容。 反過來，這些通過更短距離的優勢最小化延遲並因此加載時間（請參閱下圖以了解擁有 CDN 如何顯著減少加載時間）。 功能強大的 CDN 還附帶基礎架構優化，例如 DDoS 攻擊保護和 Web 應用防火牆等。

cdn緩存

如何配置 CDN？

  • 向您首選的 CDN 提供商註冊並添加您的網站。
  • 更改 DNS 設置以通過 CDN 網絡路由流量。 更新A 記錄並創建或更新CNAME 記錄。 （下面提供了 Incapsula 的屏幕截圖。您可以選擇任何您喜歡的 CDN 提供商並在 DNS 設置中進行所需的更改）。

dns 指令

  • 就是這樣！ 記錄更新完成後，CDN 將開始將流量路由到您的網站。

擁有 CDN 將有助於縮短網站加載時間並努力改善用戶體驗。

2-利用加速的移動頁面

10 月，Google 推出了 Accelerated Mobile Pages，以實現更快、更開放的移動網絡。 Accelerated Mobile Pages 是特殊格式的網頁，它使搜索引擎能夠極快地顯示內容，同時確保發布者控制其內容的外觀和感覺方式。 據估計，使用開源 AMP HTML 代碼可以更快地加載移動網站，並通過有效抑制搜索引擎加載時間來最大限度地降低跳出率。

如何在您的網站上實施 AMP？

要在您的網站上實施 AMP，請按照以下步驟操作：

A- 使用 AMP HTML（也稱為主頁的 AMP 版本）創建主頁的單獨版本。 下面提供了用於設計您的第一個 AMP HTML 頁面的基本代碼：

  • <!doctype html>
  • <html amp lang="zh" >
  • <頭部>
  • <meta charset="utf-8" >
  • <title> AMP 頁面的標題將顯示在此處</title>
  • <link rel="canonical" href="此處為非 AMP 版本的 URL" />
  • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" >
  • <腳本類型="應用程序/ld+json" >
  • {
  • "@context": "http://schema.org",
  • "@type": "新聞文章",
  • "headline": "發佈內容的開源框架",
  • "發布日期": "2015-10-07T12:02:41Z",
  • “圖片”： [
  • “標誌.jpg”
  • ]
  • }
  • </腳本>
  • <style amp-boilerplate >body {-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both; -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{ from {visibility:hidden}到{visibility:visible}}@-moz-keyframes -amp-start{從{visibility:hidden}到{visibility:visible}}@-ms-keyframes -amp-start{從{visibility:hidden }到{visibility:visible}}@-o-keyframes -amp-start{從{visibility:hidden}到{visibility:visible}}@keyframes -amp-start{從{visibility:hidden}到{visibility:visible} }</ style >< noscript >< style amp-boilerplate > body {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript>
  • <script async src="https://cdn.ampproject.org/v0.js" ></script>
  • </head>
  • <正文>
  • <h1>歡迎使用 AMP </h1>
  • </正文>
  • </html>

B-為了插入圖像，請使用以下代碼：

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800" ></amp-img>

C- 使用通用 CSS 屬性修改頁面的顯示和佈局。 下面提供了一個示例樣式代碼：

<style amp-custom > /* 任何自定義樣式都放在這裡 */ body { background-color: white; } amp-img { 背景顏色：灰色； 邊框：1px純黑色； } </style>

D- 預覽、驗證和發布 AMP 頁面。

E- 在頁面的非 AMP 版本中添加 amphtmltag，以幫助搜索引擎機器人識別您網頁的 AMP 版本：

<link rel="amphtml" href="你的網頁的AMP版本在這裡" />

AMP 頁面的實時示例

這是一個 AMP 頁面的實際示例這是正常頁面. 您可以簡單地查看每個頁面的源代碼，並註意速度和編碼方面的差異。

AMP 學習資源

如需查找學習 AMP HTML 的代碼，請參閱以下資源了解更多詳情：

  • AMPProject.org
  • Github AMP 項目

3- 改善網站結構、內容並增強用戶體驗

在網站設計方面，網站架構是一個經常被忽視的領域，但它不應該是。 谷歌算法使用來自搜索者的信息，因此良好的用戶體驗意味著更高的排名。 如果您的網站結構不正確，則頁面將需要更多時間來加載，並且用戶將離開該網站。 這提供了糟糕的用戶體驗。

如何改善網站結構？

良好的搜索體驗最重要的方面之一是擁有良好的網站結構，因為它有助於優化網站以實現更好的抓取。

為了增強您的網站結構，您必須遵循以下 8 個步驟：

  • 規劃您的站點層次結構並保持其邏輯性。 此外，平衡類別和子類別的數量。 下面提供了一個改進的站點結構的示例：

精緻的_figure2-1

  • 在命名您的類別和子類別時使用可搜索的關鍵字。 選擇正確的名稱將對優化您的網站大有幫助。
  • 具有用戶友好的 URL 結構，並確保用戶只需點擊三下或更少的點擊即可到達每個頁面。
  • 盡可能多地添加附加鏈接。 除了增加網站的可導航性外，附加鏈接還有助於提高品牌聲譽、提高點擊率並縮短轉化渠道。
  • 添加盡可能多的內部鏈接，但要確保它們都是相關的。 如果您正在尋找有關如何創建可靠內部鏈接的絕佳示例，請關注 Wikipedia。 增強的和 SEO 友好的內部鏈接結構將允許鏈接汁在所有內部頁面中平等地傳遞，並允許每個頁面在 Google 上排名良好，從而增加流量和轉換。
  • 避免冗餘類別和標籤的問題。 Yoast 標籤優化工具是解決 WordPress 網站上冗餘標籤問題的好方法。
  • 更頻繁地鏈接到您最重要的頁面並在首屏。 為了增加利潤，您將最大鍊接汁傳遞給您的主要創收頁面非常重要。
  • 遵循 2 點擊規則，即只需點擊 2 次即可從您的主頁訪問您的創收頁面。

如何改善網站內容？

谷歌的排名算法非常重視內容質量。 熊貓更新專門旨在降低其網站上用戶友好性較低或不太友好的網站的排名。 您在網站上呈現內容的方式與網站速度有很大關係。

以下是通過提高網站內容的質量和呈現方式來提高網站速度的 5 種方法：

  • 有一個博客。 搜索引擎喜歡獨特而新鮮的內容，而擁有一個博客就是為了這個目的。 我建議將您的博客放在 WordPress 上，因為它提供了一些非常有用的插件，旨在減少整體加載時間。 在 WordPress 中創建博客非常簡單。 有關分步說明，您可以下載有關如何創建博客的免費初學者指南. 一些可用於優化圖像和緩存的插件是：EWWW Image Optimizer ,谷歌圖書館,WP優化和 WP SuperCache .
  • 使用 CSS Sprites來優化圖像，因為它有助於將您的圖像組合成 1 個一次加載的大圖像。

CSS精靈

  • 使用響應式主題，因為響應式主題會考慮速度並加快加載速度。
  • 安裝 Google Page Speed 和 MemeCached 在您的服務器上。 這將通過更改該網頁上的資源以實施 Web 性能最佳實踐來改善網頁延遲和帶寬使用。
  • 允許用戶在您的網站上留下他們的評論。 真正的正面評論和評論是提高網站可信度的重要因素。 Getreviwed.org 是一個與數百名潛在博主攜手合作的絕佳平台，他們希望分享他們對您的產品和服務的真實見解。 Disquss 和 Facebook 評論插件加載速度快，並幫助用戶添加真實的評論和評論，從而優化您網站的整體內容質量，因為評論是可索引的。 因此，在不影響速度的情況下，您可以在您的網站上添加一些有價值的內容。
  • 使用瀏覽器緩存並實現 HTML5 Web 存儲 API .

4-利用響應式設計

根據 Google 的移動 SEO 指南，響應式設計是 Google 推薦的設計模式。 谷歌還表示，它在移動搜索中將針對移動設備優化的網站排名更高。 此外，響應式設計還具有以下主要優勢：

  • 鏈接指向單個域，從而提高搜索引擎排名。
  • 控制高跳出率，谷歌通常會使用它來降低排名。
  • 用戶體驗方面的增強，這是一個加分項，尤其是對於真正的受眾，而不僅僅是機器人。

響應式設計

加快響應式網站的方法

為了加快您的響應式網站，請使用以下策略：

  • 使用條件加載，用於停止加載各種內容，包括社交小部件、圖像、地圖等，並且僅加載與特定條件匹配的內容。
  • 使用像Bootstrap這樣的框架和基金會提供快速的移動功能和速度。
  • 使用根據可用屏幕尺寸自動調整自身大小的自適應圖像。 這減少了加載完整圖像文件的必要性。 相反，可以在不更改標記的情況下加載縮減和嵌入的 HTML 圖像。
  • 減少 m-dot 重定向，並為您的網頁選擇單個 URL。
  • 使用FitText 之類的插件這使得字體大小靈活，以適應父元素提供的寬度。

5- 使用站點地圖和 GWT 以獲得更好的可抓取性

您的網站排名通常取決於小型機器人連續工作並爬過您的網站，根據搜索引擎優化因素對您的內容進行排名和分析。 通過允許爬蟲有效地爬取您的網站並最大限度地減少停機時間，以下步驟有助於加快您的網站速度：

  • 創建站點地圖並確保避免重複內容。 站點地圖非常有用，因為它們為 Google 提供了有關您網頁上特定類型內容的元數據，包括視頻、圖像和移動內容。 例如，站點地圖視頻條目可以指定視頻運行時間、類別和年齡適當性評級，而站點地圖圖像條目可以包括圖像主題、類型和許可。
  • 通過 Google WebMasters 工具優化 Google 抓取速度。 更多幫助，請參考：Google guide on how to change crawl rate .
  • 不斷更新內容，因為 Google 漫遊器對新鮮內容很著迷。
  • 使用可靠的服務器，並在需要時始終提供 HTTPS 安全站點。

6- 使用 Ajax 和触摸事件代替點擊事件

移動用戶討厭點擊一個資源然後等待另一個資源加載。 相反，更簡單的解決方案是使用支持在觸摸表面的不同位置同時觸摸的 TouchEvents。 應用在按鈕上的此類觸摸事件可以大大減少加載時間並增加用戶體驗。

下圖提供了用戶在與移動設備交互時可能生成的一系列觸摸事件。

觸摸事件

此外，建議使用 AJAX，因為它允許從 Web 服務器獲取數據，而無需刷新運行代碼的頁面。

7-優化客戶端處理

在移動設備的情況下，由於較慢的 CPU 和較少的內存，客戶端處理大大減少。 為了提高頁面處理的效率，建議延遲加載圖像和腳本等首屏內容。 下載和解析這些腳本可以安全地推遲到onload事件之後。 某些腳本僅在用戶啟動任何操作（如拖放）後才需要調用，因此，除非用戶到達屏幕以便他準備好採取任何操作，否則不應加載此類腳本。

通過這些指導方針和網站基礎設施的變化，您可以加快網站速度並獲得更高的排名。 您是否實施了任何其他技術來幫助您大大減少網站的加載時間？ 請在下面的評論中告訴我。

精選相關文章：

  • 5 種工具來測試您的網站是否真的適合移動設備
  • 提高網頁速度：優化您的 JavaScript
  • 問：我的移動網站應該使用什麼 URL？ A：響應式設計

* 主圖改編自 Eole . 保留部分權利.