如何針對移動流量優化WordPress佈局

移動設備和使用它們的人數在不斷增加。 毫不奇怪，超過一半的Internet流量是移動的，並且完成的大多數搜索引擎查詢都在移動設備上。 此外，Google會對未針對移動設備進行優化的網站進行處罰。

要針對移動流量優化WordPress佈局，您要做的不只是安裝主題。 您不僅必須從UX的角度，而且必須從SEO，CRO，廣告和性能的角度，對網站的移動版本進行投資。

因此，在本文中，我們將解釋您需要在WordPress網站上解決的內容，以使其適用於移動流量，並確保用戶在移動設備上訪問網站時獲得最佳體驗。

為什麼移動流量很重要

2016年，移動互聯網流量首次超過台式機。 為此，您必須準備好WordPress網站以容納從任何類型的設備傳入的流量。

優化不僅意味著在智能手機上看起來很棒，還意味著擁有功能正常的網站。 擁有可移動的網站可以提高用戶體驗，並提高轉化率，這對於以廣告收入為基礎的網站至關重要。

除了增強的UX外，適合移動設備的佈局也會對您的SEO產生積極影響。 從2015年Google更新開始，搜索引擎算法已進行了重大修訂。 現在，移動設備友好性是提高搜索排名和增加網絡流量的重要因素之一。

正如Statista的這張圖所示，移動網絡流量持續增長。

因此，如果您的網站在移動設備上呈現出色的效果，那麼它在SERP中的排名將會更高，並且將通過移動設備帶來更多的銷售。 即使是大型零售商，例如加拿大沃爾瑪，也從移動網絡佈局優化中進一步受益，移動銷售增長了98％！

當公司發現他們的目標客戶中有將近50％是使用平板電腦的媽媽時，他們意識到必須對移動體驗做出一些貢獻。 為了成功解決其移動佈局問題，他們實施了以下解決方案：

• 建立移動優先計劃：團隊做出決定，他們需要採用以觸摸為中心的設計方法，並使其在平板電腦和智能手機上看起來確實不錯。
• 實施移動設計優化：響應式設計方法使他們的網站在每種屏幕尺寸上均呈現出色的效果。 此外，他們還針對移動網絡流量優化了其產品頁面。

結果是，如上所述，他們的整體轉化率提高了20％ ，移動銷售增長了98％ 。

Google如何評估移動網站的佈局？

在評估網站從移動搜索接收流量的能力時，Google考慮以下因素：

• 頁面佈局： Google檢查您的頁面是否在移動屏幕上正確顯示。
• 輔助功能：檢查按鈕，媒體和文本是否足夠大，以使用戶無需放大即可輕鬆訪問。
• 性能：頁面速度對於桌面和移動Web體驗至關重要，並且Google在SERP中將移動頁面的性能放在桌面之上。
• 廣告位置：充滿廣告的頁面對許多人來說都是侵入性的，對Google也是一個問題。 因此，在使用廣告時，需要確保您沒有違反廣告展示位置指南。

從一些測試開始

您需要做的第一件事是檢查您當前的站點是否充分響應了移動Web流量。 為此，您可以使用Google的移動友好測試工具。

Google的“移動設備友好測試”是檢查網站的移動設備響應式佈局的最佳工具之一。

只需輸入站點URL並選擇“測試URL” 。 分析時間不會超過幾秒鐘。 如果您的網站在移動設備上可以正常運行，則該工具會通過屏幕截圖告知您該網站在智能手機上的外觀。 或者，如果您的網站不適合移動設備使用，則該工具會指出您需要調整的內容。

您還可以使用一些其他有用的工具來測試移動設備的友好性，例如：

• Varvy Mobile SEO
• W3C移動驗證器
• 響應式設計檢查器

工具很棒，但沒有什麼能比第一手經驗更出色。 我們始終建議您遍歷整個網站，執行您認為對用戶而言優先的操作（例如，將產品添加到購物車，提交表單，導航到頁面，分享信息）。 在整個過程中要注意潛在的問題。 這是UX測試的最簡單形式。

測試性能

速度比以往任何時候都更重要。 Google認為速度是最重要的排名因素之一，多達85％的用戶期望移動網站的加載速度快於台式機版本。

以下是一些可用來測試網站速度的工具：

• PageSpeed見解
• GTMetrix
• 平度

如果您想加快移動設備上的內容的速度，CDN可以通過從多個位置進行緩存和分發來幫助您更快地提供內容。

例如，假設您的託管服務器位於加利福尼亞的舊金山，而您的移動網絡訪問者來自巴黎。 該距離會減慢內容的橫向移動速度。 CDN可以將您網站的版本存儲在巴黎附近的法國服務器上，從而更快地提供您的內容。

此外，您需要為WordPress網站選擇功能強大的託管託管服務提供商。 共享主機可同時運行數百個網站，如果其中一個站點的流量超過正常流量高峰，則會降低其他站點的速度。

升級到Pagely之類的WordPress託管可以顯著提高性能。 Pagely使用服務器基礎結構，可立即加速您的網站。 它們還利用最新的PHP 7版本，並包含一個CDN，它可使您的網站資產激增。

保持簡單

由於智能手機的屏幕要比桌面佈局小得多，因此可以顯示給用戶的元素數量更少。 因此，如果您要顯示大量的內容，只會阻礙用戶體驗。

例如，讓我們看一下豐田汽車巴西分公司的網站。 在筆記本電腦上看起來確實很堅固。

美觀的台式機網站並不意味著移動版式也會效仿。 圖片來源：豐田巴西

但是，如果您想在智能手機上瀏覽他們的車輛怎麼辦。

混亂的移動Web佈局會導致流量減少和轉換率降低。 圖片來源：豐田巴西

並不是那麼糟糕，但同樣，頂部欄和主菜單有點太多，使整個體驗過時且混亂。

通過設計使事情保持簡單可以改善移動UI，並且用戶可以更有效地瀏覽頁面。 此外，簡單的佈局可提高您的移動頁面速度得分，因為瀏覽器必須加載的元素越少，頁面速度就越快。

Swell提供的用於移動設備的簡單WordPress佈局

設計移動版式時，最好將重點放在一個單列頁面上，以促進頁面上的更多滾動。 想想–為什麼Facebook和Instagram如此成功，如移動平台？

用戶自然可以垂直滑動。 圖片來源：Giphy

此外，您需要考慮其他簡單移動Web設計可接受的功能，例如“漢堡菜單”。

左上方的“漢堡菜單”按鈕。 圖片來源：AMC

現在，它已成為移動Web設計中的標準組件，當用戶要瀏覽另一個頁面時，他們將搜索頁面佈局的頂部。 不要使用大量的下拉菜單。 他們很難在智能手機上導航，有時甚至會阻礙桌面網站的可用性。

排除不必要的內容

除了通過刪除不必要的元素來簡化頁面到移動設備的過渡，您還可以刪除多餘的內容。 當然，您永遠不應刪除可提高轉換率的內容。 但是，只有一些內容對於網站的移動版本不是必需的。

查看頁面上應顯示哪些內容時，請問自己以下幾點：

• 此內容與頁面的相關性如何？
• 內容對用戶的旅程至關重要嗎？
• 如果我們需要包括這部分內容，我們如何簡化它的移動內容？
• 如果我們可以在移動設備上將其刪除，那麼仍需要在台式機上刪除它嗎？

消除不必要的內容將提高用戶體驗和轉換率。 僅為您的移動網絡訪問者保存最重要的內容。 盡可能簡化您的內容，但不要消除任何可能說服用戶選擇您產品的關鍵內容。

BuildFire移動網站上的簡單用戶界面。

限制可點擊區域

人們在移動設備上訪問網站時，他們不想單擊太多選項。 這可能是壓倒性的，並且您將無法交付可操作的移動用戶體驗。 相反，您需要突出顯示頁面上最重要的號召性用語和可點擊區域。

Todoist只有號召性用語和精美的圖形。

請記住，在智能手機上瀏覽網站包括用手指而不是用箭頭指向並單擊觸摸屏。 因此，包括有限數量的鏈接並正確隔開它們將確保您擁有移動設備用戶可以瀏覽的可訪問頁面。

Quicksprout移動網站的可點擊區域很大。

這很關鍵，因為如果可點擊區域在移動屏幕上關閉，人們可以單擊錯誤的鏈接。 此外，Google會將您的網站標記為對移動用戶不友好，因此您會錯過很多潛在的自然搜索流量。

線束響應設計

如果要在台式機和移動設備上正確顯示網站，則必須使其具有響應能力。 自適應網站對台式機和移動版使用相同的頁面元素。 根據設備，設計會重塑形狀以適合屏幕。

除了為移動設備上的Web訪問者提供改進的用戶體驗外，響應式設計還為您的網站帶來以下好處：

• 靈活性：使用響應式設計，您無需考慮在兩個網站上更改設計。 您只需修復或添加元素一次，即可在移動版和台式機版中進行。
• 成本效益：運行台式機和移動網站可能會很昂貴。 通過使用響應式設計，您可以消除那些不必要的成本。
• SEO的好處：響應式設計對您的搜索排名很有幫助，因為如本文開頭所述，Google在SERP中優先考慮了適合移動設備訪問的網站。

但是，您必須小心。 大多數響應式網站只是將三列桌面內容轉換為一列。

響應式站點是適合每個屏幕的站點。 它將相同的數據從台式機加載到移動版。 例如，如果要在300像素的移動屏幕上顯示1200像素的桌面照片，則將加載整個1200像素，但只會縮小。

圖片來源：Giphy

關於圖像，WordPress在改善用戶體驗方面已經取得了重大進展。 從4.4版開始，CMS會通過srcset HTML屬性自動縮放最大的圖像。

PNG和JPEG是最常見的圖像文件格式。 但是，隨著最新技術和數字圖像的發展，WebP和SVG格式正越來越多地出現。

SVG是矢量圖像，可以縮放以適合任何屏幕尺寸。 通常，SVG比PNG小得多，因此可以節省加載時的寶貴時間。

但是，您仍然應該小心。 諸如視頻，照片和圖形之類的視覺元素可能是影響網站性能的重要因素之一。 即使沒有嚴格定義媒體文件大小的規則，較小的文件也可以縮短加載時間。

請記住，與WordPress網站的桌面版本相同的視覺元素可能並不總是在移動設計上起作用。 因此，消除大背景圖像並將其替換為不妨礙移動UX的圖像是一個更好的選擇。

讓我們以HubSpot的主頁為例。 英雄部分中的圖形完美地描繪了CRM如何推動事情發展。 想像一下一個辦公大樓的逼真的圖像，每個窗口中有那麼多人。 它不會像這樣好。

資料來源：HubSpot

優化表格

在智能手機上填寫表格可能是一個挑戰，特別是如果用戶必須提交太多數據並瀏覽太多字段時。 因此，您需要確保簡化移動表單並僅收集最重要的信息。

保持移動頁面的表單盡可能簡單。 資料來源：Copyblogger

在WordPress中，您可以安裝WPForms之類的插件并快速輕鬆地構建響應式表單，以幫助您轉換移動Web訪問者。

從開發人員的角度來看，我們使用Contact Form 7，因為它提供了最大的靈活性。 儘管應該注意的是，它的UI對於希望為其表單自定義設計的非技術用戶而言並不友好。

從開發人員的角度來看，Contact Form 7是更好的表單優化工具。

包起來

如今，擁有適合移動設備的WordPress佈局至關重要。 目標用戶和搜索引擎必須接受您的網站。

一個適合移動設備的WordPress網站可以帶來更多的自然流量，吸引新的潛在客戶和客戶。

現在，您可以更好地掌握要測試的內容，如何查找移動UI問題並確定其他問題。 您可以按照上面列出的建議來確保WordPress網站的移動用戶體驗始終處於最佳狀態。

最好的CMS背後的人們也在朝著增強的本地移動用戶體驗方面取得巨大進步。 從在移動瀏覽器上縮放圖像到改進的後端，您可以放心，您領先於使用其他CMS的網站所有者。

如果您還有其他問題，或者需要有關移動UX問題以及在設備上創建現代Web體驗的幫助，請隨時與我們聯繫。