网站速度优化,从Google Page Speed Insights开始

作者:码迷
作者:码迷SEO
发布时间:2019-10-30 14:02:30阅读:42点赞:6

网站速度优化,从Google Page Speed Insights开始/

网页速度是影响SEO的许多因素中,很重要的一个项目。因为网站的速度所影响的层面不仅仅是SEO排名、曝光的机会,也包含了用户体验。若网站速度过慢,容易造成用户因等待太久,关闭网站,而错失更多商业目标达成的可能。因此不论是对于电商、内容型或其他类型的网站,速度优化都是相当重要的一环。今天就带大家认识网站速度对于SEO的影响,并了解Google Page Speed Insights,以及如何进行网站速度优化。

网站速度与SEO的关系

搜索引擎是透过机器人(爬虫程序),造访世界各地的网页,将网页采集回去,并「收录」在搜索引擎中,提供人们查阅。我们可以将搜索引擎,理解成像是一座图书馆,而网页则像是书本,书本必须被图书馆索引编目,出现在「书架」上,才能被浏览图书馆的人查找找到。因此,让网页能顺利地被机器人爬取,被搜索引擎「采集」到,顺利的出现在「书架」上,才会能替网站带来曝光和排名。而在谈网站速度以及SEO的关系,必须先认识这个重要的概念。

什么是爬取预算(crawl budget)?

用比较平易、口语的解释就是,机器人爬取网页时,在网站上停留的时间,是有扣打(quota)的,而不是无上限地停留在同一个网站,将特定网站的页面一次爬取完毕。

为什么机器人不将网站的所有页面一次爬取完毕呢?一切都是为了爱!对于大型网站来说,例如大型电商网站,有类型众多、数量庞大的商品项目,或是大型论坛,有大量用户发布生成的页面,页面数量能多至数十万、甚至数百万,若在短时间内对于网站主机发出大量的网页文档请求,会造成主机负担。而许多网站为了避免机器人对网站发出大量的请求对主机造成负担,也会限制机器人的抓取频率,甚至封锁特定IP位置所发出的造访请求。因此机器人造访网站、停留抓取的时间是有限的。

若能提高网站的反应速度,除了让用户感到顺畅的体验,也能提高机器人抓取页面的速度,换句话说,如何让爬虫在「有限的时间内,抓到更多的内容」,是SEO在速度优化上的重要议题。越短时间抓取越多页面,就能让你的页面更快速得出现在搜索结果页这个「书架」上!尤其是新闻媒体类型的网站,由于新闻本身有时效性,若新闻媒体型网站能在更短的时间被搜索引擎收录,对于竞争同一则新闻的搜索流量会更加有利。反之若收录的速度慢,则会错失许多在书架上曝光机会。

(补充:除了网站本身的速度外,提交网站地图(sitemap)也能为机器人爬取网站时,节省许多任务作流程,帮助页面内容更快速被搜索引擎收录,关于提交网站地图的操作可参阅sitemap.xml网站地图是什么?从工具/产生器/程序制作到进行提交教学 一文)

透过Google Page Speed Insights找出网站问题

是最常用的网站测速工具之一,以下简称为PSI。这次的第五版的PSI将Google Chrome的网页速度分析扩展「Lighthouse」的数据集成进来,解决了过去PSI与Lighthouse数据不一致的问题。

而这次第五版PSI最大的特色,不只着重于TTFB(time to first byte),而是针对用户体验,增设了以往所没有的指针,来衡量网站的表现及性能。其中以FCP (首次显示内容所需时间)、以及FID(首次输入延迟)为衡量网站用户体验最大的两项指针。

FCP与FID指针

FCP (首次显示内容所需时间):

浏览器渲染(render)出第一个显示内容所需的时间,也可以解释成用户看见第一个内容所需的时间。

示意图如下:

FCP首次内容绘制图片出处:

许多网站测速工具,着重在后端主机回传数据所需的时间(TTFB),然而Google认为,前端浏览器加载、渲染的这段期间,用户其实也仍在等待,有许多时刻会影响用户体验,或是速度快慢的直接感受。而FCP是用户能看见渲染内容的实际时间,因此这项衡量指针的优化重点,不像以往仅止于后端主机回应的速度、文档传输的时间,更包含前端浏览器加载CSS、Javascript、渲染,一直到用户看见网页呈现内容的这段时间。

FID(首次输入延迟):

从浏览器开始渲染,一直到能「即时反馈」跟用户交互行为的延迟时间。指出,FID直接表示用户的痛苦指数,FID是用户必须等待浏览器反馈聆听事件所需的延迟时间。当等待时间越长,用户经常会感到不耐烦并离开网站。下图是典型的页面加载的流程图:

FID首次输入延迟图中红色的FID所代表的是浏览器忙碌时,网页无法即时正常交互的状况。输入延迟的原因,通常是因为浏览器的主线程(main thread)壅塞,忙于运行其他操作,例如主线程正在解析、渲染大型的JavaScript脚本,而没有运行任何聆听事件,造成用户与网页虽有实际交互的行为,浏览器却无法即时反馈的状况。用户必须等到主线程忙完,浏览器才能立即性的反馈用户的聆听事件,与用户产生顺畅的交互。

(补充:为鼓励提升网页速度UX,Google为此开发了,提供大家免费使用!而追踪到的FID事件,也能使用追踪码发送到Google Analytics来方便大家查看和分析!)

从上述说明我们可以了解,此次Google第五版PSI的检测,UX优化重点除了过去后端主机速度的优化,前端浏览器渲染速度、能快速与用户交互也成为了检测的重要项目,接下来就来介绍优化网页速度UX的常见方法。

如何优化网页速度?

1.优化FCP/FID

・将重要功能优先嵌入、减少CSS、JS文档数量

为了避免过多的CSS、Javascript脚本阻塞浏览器渲染的过程,可以将优先呈现的内容,内嵌至HTML内,重要性较高、优先呈现通常会是视觉版型、文本、交互功能,可以于文档<head>中,所有优先级CSS文档都将使用  <style> 标记,所有优先级的JS文档都将使用 <script> 标记。

除了将重要的视觉版面、交互事件优先嵌入外,对于重要性较低的Javascript脚本,使用async或defer属性。async或defer属性能让同一个页面中的脚本异步加载,在页面解析完后才运行重要性较低的脚本,避免浏览器解析时主线程的壅塞。

(补充:关于异步加载的使用,可以参考W3Sschool的,以及的用法说明)

除了利用HTML属性来优化加载的优先级外,用户加载的文档应精简。尽可能只加载UI所需的视觉、交互功能的相关事件,避免用户加载、渲染他们不需要的Javascript脚本。

・使用HTTP/2通信协定

从上面所述我们已了解「浏览器渲染的延迟,主要是服务器回应(response)用户时,加载的主线程(main thread)壅塞所导致」。而HTTP/2最大的特色在于,能够为用户的单一个请求(request),发出多个回应(response)。

HTTP2线程加载示意图图片出处:

从上图我们可以看到,使用HTTP/2,能让加载网站所需的资源,在同一时间内、同步并行加载,大幅缩短用户等待的延迟时间,加快网页速度!而HTTP/2另一项特色优点,是使用HPACK压缩格式,压缩请求和回应的metadata,大幅减少header的数据传输量,来提高网站速度!而HTTP/2的设置及安装步骤,可参考

此外,若你的网站主机不支持HTTP/2,可使用这类的CDN服务,只需修改DNS指向CDN的主机位置,就能透过CDN与用户进行HTTP/2的传输!

(关于CDN的介绍,可参阅这篇文章)

2.利用浏览器缓存(cache)

而加快页面加载的时间,除了上述HTTP/2同步加载的作法外,使用浏览器缓存(cache)会是一个更简易有效的方法。在HTTP Header中,设置暂存资源的使用期限,暂存的资源通常包含重要的HTML、CSS、Javascript、图片等。让曾经造访过网站的用户,可从用户自己的磁盘加载先前下载过的资源,这样就不需要再透过网络重新下载一次,有效的替用户减少等待加载的时间!

而设置缓存的常见方法如下,以Apache的主机为例,我们可以在.htamless文档里使用下列范例语法,来设置各项资源暂存的使用期限。

而IIS的主机,我们能从web.config文档,<system.webServer>的区块中,使用下列范例语法来设置缓存。

3.优化图片加快网页速度

.Caesium图片压缩器

,可以单次批量压缩多张图片,达到图片最佳化,操作步骤简单直觉,同时也有调整图片大小、转换格式等功能,能有效地帮用户节省下许多操作的步骤和时间!

.TinyPNG  / TinyJPG

如果不想下载或是安装软件,也可以使用免费的在线图片压缩工具,来进行压缩优化图片,和,是常见方便的简易在线工具。大家可以依照图片格式png、jpg来选择自己要使用TinyPNG或TinyJPG。它们同样可以单次批量压缩多张图片,一次最多能上传20张图片,图片文档大小容许在 5 MB 内,因此适合需求较简易的用户们。

4.为大型文档激活Gzip压缩

大型网站常会有许多大型的JavaScript、HTML、CSS文档,需要更长的时间才能从主机传输到浏览器,激活Gzip压缩后,能有效地加快文档传输效率,以下为Apache主机的Gzip语法范例,只需将下列语法添加到.htamless文档中就可以哦!

5.精简不必要的原代码

许多网站的文档经常伴随着多余的原代码,增加了文档的传输量,常见的原因如下:

.共用网页版型

为了增加网站开发的效率,以及便于维护管理,许多不同的网页会共用页面版型,因此会发生,页面虽然带有原代码,但部分原代码却没有实际上功能的情况,若能去除用不到的原代码,或是将网页版型做更细的分类,就能有效减少文档的传输量!

.关闭不必要的插件

6.主机回应的理想时间

以上就是加快主机回应速度的方法,除了上述的常见方法外,牵涉的主机回应速度的因素事实上还非常多,常见的原因也包含(不限于)后端代码的逻辑进程、数据库指令的性能,甚至是主机硬件等等。而Google官方表示,主机回应的速度,最好在200ms(毫秒)之内,而这200ms,正好也是大部分人类大脑的反应时间。

人类大脑反应时间图片出处:

结语

速度优化所带来的效益,不仅仅能让网页用更短的时间在搜索引擎曝光,改善SEO排名表现,也同时对搜索引擎的爬虫更加友善(机器人的用户体验),并且提升UX(人类的用户体验)!而优化用户体验,也能将回应速度200ms视为一项达成的理想目标,为用户们打造更棒的网络世界!

做 SEO你绝对不可以忽略的【网站速度优化】,关于速度优化的三两事

本文网址:https://www.mamioo.com/seo-advanced/4eaw71967m62

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。
评论
相关文章
  • SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    或许各位对长尾关键字已经不陌生了,但你知道它之于 SEO 与 SEM 扮演什么角色、又能如何运用在节省成本、挖掘商机吗?本篇从「长尾关键字」的基本概念到营销策略的应用一次搞懂,让他成为你的得力助手!继续阅读>>

    30浏览8赞2019-11-09 13:40:01
  • AMP能提高网站SEO?完整AMP信息告诉你

    AMP能提高网站SEO?完整AMP信息告诉你

    AMP为Google所推出的计划,目的是为了加速手机版的浏览体验。AMP主要适用在产出内容为主的网页,例如新闻媒体、美食评论、电影评论。AMP的架设方式可以透过埋设代码或者透过wordpress的插件来安装。而AMP对于SEO而言,是一个可间接帮助网站的工具,awoo非常鼓励大家安装。继续阅读>>

    2浏览1赞2019-12-11 11:20:02
  • RWD 响应式网站设计是什么?对 SEO 的好处有哪些?

    RWD 响应式网站设计是什么?对 SEO 的好处有哪些?

    手机版网页与 RWD经常被同时提及。究竟什么是 RWD 呢?RWD,也就是响应式网站设计Responsive Web Design。响应式代表网页排版会随屏幕宽度变化。一般提到「创建手机版网页」,有三种做法,分别是:RWD、AWD、手机桌机独立网站。设置上需要注意什么?哪一种对SEO比较好?阅读本文马上了解!继续阅读>>

    9浏览0赞2019-12-04 13:00:01
  • 黑帽SEO是什么?不可不知的黑帽介绍与风险!

    黑帽SEO是什么?不可不知的黑帽介绍与风险!

    不论你是企业老板、营销人、或者工程师,都可能有机会听到黑帽SEO或者白帽SEO,究竟什么是黑帽SEO跟白帽SEO呢?我们透过这次的文章来说明让你了解SEO的路上可能会有的陷阱以及风险! 搜索引擎是用户与内容的桥梁,而SEO就是要加强、拓宽这座桥梁,所以SEO应当是配合搜索引擎的政策,让用户可以顺利找到对他们有帮助的内容。正确的SEO,是可以达到用户、搜索引擎、网站三者皆赢的结果。 黑帽SEO是用欺瞒争取排名的方式,在黑帽SEO运行的过程几乎不会对用户体验有任何加分,例如在无关网站购买外连来诱骗用户进站、在网站内容安插一些用户不可见的关键字(透过使字体极小化、与背景同色等方式)。黑帽SEO基本上就是在与搜索引擎抗衡,搜索引擎的目标是将好的内容送到用户面前,而黑帽SEO就是不优化内容却硬将网站塞给用户。 搜索引擎会透过网站的链接结构、内容是否正确符合消费者需求、网站是否安全可信等诸多理由来排序每个网站在每个不同关键字的排名,但搜索引擎不可能无所不知,算法有结构有逻辑,能被拆解,比如说PageRank,比如说EAT,比如说内容品质。这也就造就了他有可能被人为不当操作排名。 听起来很棒,对吧?继续阅读>>

    28浏览2赞2019-11-15 11:00:01
  • Mobile SEO必学!行动版网站健检Search Console帮你做

    Mobile SEO必学!行动版网站健检Search Console帮你做

    「手机端可用性」报表随着 Search Console 的版本更新,也重新推出了新的接口来继续提供服务,这次就让我们来了解新版的「手机端可用性」有什么功能、该如何使用吧!继续阅读>>

    14浏览3赞2019-11-24 09:40:01
  • International SEO:前进国际市场,多语系网站SEO一定要做的4件事

    International SEO:前进国际市场,多语系网站SEO一定要做的4件事

    当企业有意将商品、服务推广至国际市场,除了传统的方式如参展、贸易商合作、当地设点以外,也有人以在Amazon、eBay等平台架站作为第一步,但是考察使用上的弹性与长期的品牌经营,经营网站则是一种不可错过的做法。经营网站能随时调整以符合市场需求、并且能够透过数据随时掌握成效,而网站要能有效导入访客,SEO优化依然必须要做的功课,即使原本就有一个成效良好的网站,当目标市场改变时,并不是仅仅将原有的内容翻译过后就能在不同市场获得相对应的成效。 经营网站瞄准国外市场,追求好成效最重要的原则就是让访客有「宾至如归」的感受,他们进到网站时不能有走错地方的感觉,除了必须使用目标市场的惯用语言、文本叙述自然流畅外(不要以为Google翻译是你的好朋友啊,他不是!),以下还有4大地雷是千万不能踩的: 虽然如今在全球高达92.86%,但是并非所有的地区都以Google为最主流的搜索引擎,如中国家里是以百度为主,俄罗斯则是流行Yandex。所以在策略制定前的调查千万别忘了确认当地最主流的搜索引擎,作为日后的主战场,并追踪网站在该搜索引擎的表现如何。 在选定针对不同市场应锁定的关键字时,我们要做的远远不只是翻继续阅读>>

    5浏览1赞2019-12-08 09:00:02