如何针对移动流量优化WordPress布局

已发表: 2020-12-16

移动设备和使用它们的人数在不断增加。 毫不奇怪,超过一半的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也是一个问题。 因此,在使用广告时,需要确保您没有违反广告展示位置指南。

Google Devrix评估移动网站布局因素

从一些测试开始

您需要做的第一件事是检查您当前的站点是否充分响应了移动Web流量。 为此,您可以使用Google的移动友好测试工具。

Google移动友好测试页示例

Google的“移动设备友好测试”是检查网站的移动设备响应式布局的最佳工具之一。

只需输入站点URL并选择“测试URL” 。 分析时间不会超过几秒钟。 如果您的网站在移动设备上可以正常运行,则该工具会通过屏幕截图告知您该网站在智能手机上的外观。 或者,如果您的网站不适合移动设备使用,则该工具会指出您需要调整的内容。

您还可以使用一些其他有用的工具来测试移动设备的友好性,例如:

  • Varvy Mobile SEO
  • W3C移动验证器
  • 响应式设计检查器

工具很棒,但没有什么能比第一手经验更出色。 我们始终建议您遍历整个网站,执行您认为对用户而言优先的操作(例如,将产品添加到购物车,提交表单,导航到页面,分享信息)。 在整个过程中要注意潜在的问题。 这是UX测试的最简单形式。

测试性能

速度比以往任何时候都更重要。 Google认为速度是最重要的排名因素之一,多达85%的用户期望移动网站的加载速度快于台式机版本。

以下是一些可用来测试网站速度的工具:

  • PageSpeed见解
  • GTMetrix
  • 平度

如果您想加快移动设备上的内容的速度,CDN可以通过从多个位置进行缓存和分发来帮助您更快地提供内容。

例如,假设您的托管服务器位于加利福尼亚的旧金山,而您的移动网络访问者来自巴黎。 该距离会减慢内容的横向移动速度。 CDN可以将您网站的版本存储在巴黎附近的法国服务器上,从而更快地提供您的内容。

此外,您需要为WordPress网站选择功能强大的托管托管服务提供商。 共享主机可以同时运行数百个网站,如果其中一个站点的流量超过正常流量高峰,则会降低其他站点的速度。

升级到Pagely之类的WordPress托管可以显着提高性能。 Pagely使用服务器基础结构,可立即加速您的网站。 它们还利用最新的PHP 7版本,并包含一个CDN,它可使您的网站资产激增。

保持简单

由于智能手机的屏幕要比桌面布局小得多,因此可以显示给用户的元素数量更少。 因此,如果您要显示大量的内容,只会阻碍用户体验。

例如,让我们看一下丰田汽车巴西分公司的网站。 在笔记本电脑上看起来确实很坚固。

丰田巴西桌面WordPress网站布局

美观的台式机网站并不意味着移动版式也会效仿。 图片来源:丰田巴西

但是,如果您想在智能手机上浏览他们的车辆怎么办。

丰田巴西未优化移动WordPress布局

混乱的移动Web布局会导致流量减少和转换率降低。 图片来源:丰田巴西

并不是那么糟糕,但同样,顶部栏和主菜单有点太多,使整个体验过时且混乱。

通过设计使事情保持简单可以改善移动UI,并且用户可以更有效地浏览页面。 此外,简单的布局可提高您的移动页面速度得分,因为浏览器必须加载的元素越少,页面速度就越快。

膨胀瓶手机截图

Swell提供的用于移动设备的简单WordPress布局

设计移动版式时,最好将重点放在一个单列页面上,以促进页面上的更多滚动。 想想–为什么Facebook和Instagram如此成功,如移动平台?

在手机GIF上滚动

用户自然可以垂直滑动。 图片来源:Giphy

此外,您需要考虑其他简单移动Web设计可接受的功能,例如“汉堡菜单”。

AMC网站包含汉堡菜单的屏幕截图

左上方的“汉堡菜单”按钮。 图片来源:AMC

现在,它已成为移动Web设计中的标准组件,当用户要浏览另一个页面时,他们将搜索页面布局的顶部。 不要使用大量的下拉菜单。 他们很难在智能手机上导航,有时甚至会阻碍桌面网站的可用性。

排除不必要的内容

除了通过删除不必要的元素来简化页面到移动设备的过渡,您还可以删除多余的内容。 当然,您永远不应删除可提高转换率的内容。 但是,只有一些内容对于网站的移动版本不是必需的。

查看页面上应显示哪些内容时,请问自己以下几点:

  • 此内容与页面的相关性如何?
  • 内容对用户的旅程至关重要吗?
  • 如果我们需要包括这部分内容,我们如何简化它的移动内容?
  • 如果我们可以在移动设备上将其删除,那么在台式机上仍需要它吗?

消除不必要的内容将提高用户体验和转换率。 仅为您的移动网络访问者保存最重要的内容。 尽可能简化您的内容,但不要消除任何可能说服用户选择您产品的关键内容。

简单的BuildFire网站截图

BuildFire移动网站上的简单用户界面。

限制可点击区域

人们在移动设备上访问网站时,他们不想单击太多选项。 这可能是压倒性的,并且您将无法交付可操作的移动用户体验。 相反,您需要突出显示页面上最重要的号召性用语和可点击区域。

Todoist号召性用语按钮

Todoist只有号召性用语和精美的图形。

请记住,在智能手机上浏览网站包括用手指而不是用箭头指向并单击触摸屏。 因此,包括有限数量的链接并正确隔开它们将确保您拥有移动设备用户可以浏览的可访问页面。

Quicksprout移动网站大按钮

Quicksprout移动网站的可点击区域很大。

这很关键,因为如果可点击区域在移动屏幕上关闭,人们可以单击错误的链接。 此外,Google会将您的网站标记为对移动用户不友好,因此您会错过很多潜在的自然搜索流量。

线束响应设计

如果要在台式机和移动设备上正确显示网站,则必须使其具有响应能力。 自适应网站对台式机和移动版使用相同的页面元素。 根据设备,设计会重塑形状以适合屏幕。

Devrix响应式设计的好处

除了为移动设备上的Web访问者提供改进的用户体验外,响应式设计还为您的网站带来以下好处:

  • 灵活性:使用响应式设计,您无需考虑在两个网站上更改设计。 您只需修复或添加元素一次,即可在移动版和台式机版中进行。
  • 成本效益:运行台式机和移动网站可能会很昂贵。 通过使用响应式设计,您可以消除那些不必要的成本。
  • SEO的好处:响应式设计对您的搜索排名很有帮助,因为如本文开头所述,Google在SERP中优先考虑了适合移动设备访问的网站。

但是,您必须小心。 大多数响应式网站只是将三列桌面内容转换为一列。

响应式站点是适合每个屏幕的站点。 它将相同的数据从台式机加载到移动版。 例如,如果要在300像素的移动屏幕上显示1200像素的桌面照片,则将加载整个1200像素,但只会缩小。

响应式设计Gif

图片来源:Giphy

关于图像,WordPress在改善用户体验方面已经取得了重大进展。 从4.4版开始,CMS会通过srcset HTML属性自动缩放最大的图像。

PNG和JPEG是最常见的图像文件格式。 但是,随着最新技术和数字图像的发展,WebP和SVG格式正越来越多地出现。

SVG是矢量图像,可以缩放以适合任何屏幕尺寸。 通常,SVG比PNG小得多,因此可以节省加载时的宝贵时间。

但是,您仍然应该小心。 诸如视频,照片和图形之类的视觉元素可能是影响网站性能的重要因素之一。 即使没有严格定义媒体文件大小的规则,较小的文件也可以缩短加载时间。

请记住,与WordPress网站的桌面版本相同的视觉元素可能并不总是在移动设计上起作用。 因此,消除大背景图像并将其替换为不妨碍移动UX的图像是一个更好的选择。

让我们以HubSpot的主页为例。 英雄部分中的图形完美地描绘了CRM如何推动事情发展。 想象一下一个办公大楼的逼真的图像,每个窗口中有那么多人。 它不会像这样好。

Hubspot截图

资料来源:HubSpot

优化表格

在智能手机上填写表格可能是一个挑战,特别是如果用户必须提交太多数据并浏览太多字段时。 因此,您需要确保简化移动表单并仅收集最重要的信息。

Copyblogger表单屏幕截图

保持移动页面的表单尽可能简单。 资料来源:Copyblogger

在WordPress中,您可以安装WPForms之类的插件并快速轻松地构建响应式表单,以帮助您转换移动Web访问者。

从开发人员的角度来看,我们使用Contact Form 7,因为它提供了最大的灵活性。 尽管应该注意的是,它的UI对于希望为其表单自定义设计的非技术用户而言并不友好。

联系Form 7表单优化过程

从开发人员的角度来看,Contact Form 7是更好的表单优化工具。

包起来

如今,拥有适合移动设备的WordPress布局至关重要。 目标用户和搜索引擎必须接受您的网站。

一个适合移动设备的WordPress网站可以带来更多的自然流量,吸引新的潜在客户和客户。

现在,您可以更好地掌握要测试的内容,如何查找移动UI问题并确定其他问题。 您可以按照上面列出的建议来确保WordPress网站的移动UX始终可用。

最好的CMS背后的人们也在朝着增强的本地移动用户体验方面取得巨大进步。 从在移动浏览器上缩放图像到改进的后端,您可以放心,您领先于使用其他CMS的网站所有者。

如果您还有其他问题,或者需要有关移动UX问题和在设备上创建现代Web体验的帮助,请随时与我们联系。