移动端流量占比超过70%的今天,SEO战场早已从PC端转向了拇指大小的屏幕。龚先生SEO团队近期操盘的母婴类目案例中,仅通过移动端专项优化,30天内自然搜索流量就从日均800飙升至2100+。但现实中,大量站长还在用PC思维做移动适配,导致跳出率居高不下。下面这3个被验证过的技巧,或许能帮你避开80%的竞品踩过的坑。
基于对比了我们与各大厂商的试驾数据来看,其实我们相对于竞争对手的优势并不大,一般也就只有一二秒的差距,但这也就意味着我们所说的“速度优化”就是从1.5秒的“生死线”上提到了1秒的“生死线”,可谓是将竞争的劣势转化为了我们的优势
某宠物用品站曾因首屏加载3.2秒(行业平均2.4秒),流失了62%的潜在客户。通过龚先生团队的三步改造方案:
依托于对TinyPNG的高效的图片压缩外加对图片的WebP的格式的转换,使得一张原本平均的380KB的图片,轻松的压缩到了45KB的体积,极大的降低了网页的加载时间,对用户的体验也起到了不小的作用
基于将首屏的文字和关键的CSS都优先加载了,结合了商品的懒加载的策略,使得Lighthouse的首屏的评分从原来的32直接提到了90+的高分.78
凭借对Vue项目的Nuxt.js的切换就将TTFB的时间从1.8秒降至了0.4秒,实实的感受了服务器端渲染(SSR)的强大之处.
工具推荐:WebPageTest测速、Cloudflare的Polish自动图片优化、Chrome的Lighthouse诊断
二、内容布局:拇指热区里的点击魔法
服装独立站「轻芒」的改版数据证明:符合F型浏览习惯的内容结构,CTA按钮点击率能提升3倍。具体操作:
根据设计的最佳实践,尤其是针对 iOS 的用户,我们也发现了一个不错的首屏的黄金区域大约在6cm的位置就足以将重要的CTA(调用到 action的按钮)都放入了用户的拇指的自然弧度的范围之内
基于对段落的呼吸感的设计如将每段的文字控制在不超过3行,设置1.5倍的行距等,就可以明显的将用户的停留时间延长40%
采用对京东的测试我们不难发现:相比之下手段,底部的固定栏的转化率高出了27%的同时也完全不会对我们的SEO权重造成任何的影响
三、结构化数据:被90%站长忽略的富媒体红利
本地家政服务站点「58到家」通过Schema标记,搜索结果展现电话直达按钮后,通话量暴涨210%。必须部署的3类标记:
通过对“如何除螨”这一长尾的移动搜索的直接对应的FAQPage的标记,将其直接的折叠的展示问答的形式出来,相比之前的直接展示的形式就能让用户更快的找到想要的信息,实测其点击率也能提升了65%
Product标记:价格/库存状态实时同步,避免用户点击后发现缺货(某3C站点因此降低跳出率18%)
凭借对LocalBusiness的精细的标记优化,不仅能直接在搜索结果的地图上将其标明出门店的具体位置,还能将其与“营业时间”和“高的评分”等一并直接展示在搜索结果的上方,使得餐饮类的客户一眼就能看到店的位置、营业时间以及其它的基本信息,从而极大的提升了对该店的到店率达到了33%以上
工具推荐:Google的富媒体结果测试工具、Schema.org代码生成器、Merchant Center后台
四、移动适配的隐形杀手:CSS阻塞渲染
某旅游博客改用Critical CSS技术后,首屏渲染时间从2.9秒降至1.1秒。关键步骤:
用Penthouse工具提取首屏关键CSS
异步加载非关键CSS文件
采用将繁杂的@import声明给予最大的程度的去掉(甚至会使得页面的渲染延迟1-2个RTT的周期)手段,我们就能大大地提高了页面的加载速度
五、AMP的替代方案:渐进式Web应用(PWA)
虽然Google逐步弱化AMP,但「什么值得买」的PWA改造案例显示:
依托于对比了初次的访问加载速度的1.5秒与二次的0.3秒,我们不难发现了较大的差别
借助将重点的用户添加到主屏的主页中,我们的月活留存率也相应的提升了58%
通过对商品的列表信息的本地化的缓存使得用户即使在无网络的状态下也能浏览商品的列表信息
六、语音搜索的伏击战
基于移动搜索的不断发展,令人惊讶的数据也在不断的涌现,如今我们已经可以看到,近27%的移动搜索都已通过语音的方式来完成了,这一数据也为语音的移动搜索的未来发展指出了方向。优化策略:
内容中加入自然对话句式(如「XX多少钱一斤」)
借助对“near me”类的本地搜索的重点优化,我们就能为某些品牌带来意想不到的新客流,比如就某一款奶茶的品牌而言,其就从此获得了32%的新客流
在AnswerThePublic抓取长尾问题