主页 > 优化心得 > 营销·优化 > 营销·优化

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

admin2020-08-29

简介网页速度是影响 SEO 的许多因素中,很重要的一个项目。因为网站的速度所影响的层面,不仅仅是 SEO 排名、曝光的机会,也包含了使用者体验。若网站速度过慢,容易造成使用者因等待

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

目录

网站速度与SEO的关係

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

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

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

为什么机器人不将网站的所有页面一次爬取完毕呢?一切都是为了爱!对于大型网站来说,例如大型电商网站,有类型众多、数量庞大的商品项目,或是大型论坛,有大量使用者发布生成的页面,页面数量能多至数十万、甚至数百万,如果在短时间内对于网站主机发出大量的网页档案请求,会造成主机负担。

许多网站为了避免机器人对网站发出大量请求对主机造成负担,也会限制机器人的抓取频率,甚至封锁特定 IP 位置所发出的造访请求。所以机器人造访网站、停留抓取的时间是有限的。

网站速度与SEO之间的关係

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

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

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

Page Speed Insights 是最常用的网站测速工具之一,以下简称为 PSI。PSI 将 Google Chrome 的网页速度分析扩充套件「Lighthouse」的数据整合进来,解决了过去 PSI 与 Lighthouse 数据不一致的问题。

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

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

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

示意图如下:
FCP首次内容绘製图片出处:https://gtmetrix.com/blog/first-contentful-paint-explained/

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

首次输入延迟 (FID)

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

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

(补充:为鼓励提升网页速度 UX,Google 为此开发了追蹤FID的Javascript函式库,提供大家免费使用!而追蹤到的 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 的 async属性,以及 defer属性的用法说明)

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

・使用 HTTP/2 通讯协定

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

图片出处:https://medium.baqend.com/hosting-lessons-learned-6010992eb257

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

此外,若你的网站主机不支援 HTTP/2,可使用 CloudFlare 这类的 CDN 服务,只需修改 DNS 指向 CDN 的主机位置,就能透过 CDN 与用户进行 HTTP/2 的传输!
(关于 CDN 的介绍,可参阅 How to Get CDNs to Play Nice with SEO 这篇文章)

2. 利用浏览器快取(cache)

加快页面载入的时间,除了上述 HTTP/2 同步载入的作法外,使用浏览器快取 (cache) 会是一个更简易有效的方法。在 HTTP Header 中,设定暂存资源的使用期限,暂存的资源通常包含重要的 HTML、CSS、Javascript、图片等。

让曾经造访过网站的使用者,可从用户自己的磁碟载入先前下载过的资源,这样就不需要再透过网路重新下载一次,有效的替用户减少等待载入的时间!设置快取的常见方法如下,以 Apache 的主机为例,我们可以在 .htaccess 档案里使用下列範例语法,来设置各项资源暂存的使用期限。

12345678910111213141516 #暂存资源的预设使用期限为1个月ExpiresActive On ExpiresDefault "access plus 1 months" #针对html格式的文字档,有效期限为两週 ExpiresByType text/html "access 2 weeks" #针对不同格式的图片,设置不同的有效期限 ExpiresByType image/jpg "access 2 months" ExpiresByType image/png "access 2 months" ExpiresByType image/ico "access 6 months"  #针对CSS格式的文字档,有效期限为一个月ExpiresByType text/css "access 1 months"  #JS格式的文字档有效期限为两个月ExpiresByType text/js "access 2 months"

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

1234 &lt;!--网站静态资源有3週的暂存时间--&gt;&lt;staticContent&gt;   &lt;clientCache cacheControlMaxAge ="30.00:00:00" cacheControlMode="UseMaxAge" /&gt;&lt;/staticContent&gt;

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

完成上述的快取项目后,就能大量减少用户重新载入网页档案的次数。而页面载入的档案当中,所佔空间最大的就是图片。特别是对于婚纱业者、商业摄影工作者,由于摄影的专业取向,影像档案会比其他产业的大上许多,藉由优化图片大量地减少主机传输的资料量,也是加快网页载入最简单、效果显着的方法!谈到压缩图片、影像处理的工具,Photoshop 无疑是功能强大又普及的付费工具,除了强大的 Photoshop 外,这里也为读者推荐其他免费好用的工具。

.Caesium 图片压缩器

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

.TinyPNG  / TinyJPG

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

4. 为大型档案启用 Gzip 压缩

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

12345678910 &lt;ifModule mod_gzip.c&gt;mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_gzip_item_include mime ^text/.*mod_gzip_item_include mime ^application/x-javascript.*mod_gzip_item_exclude mime ^image/.*mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*&lt;/ifModule&gt;

5. 精简不必要的原始码

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

.共用网页版型

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

.关闭不必要的外挂

许多网站常会採用 WordPress 或是 Joomla 这类的 CMS (内容管理系统),除了方便编辑内容、管理维护、节省开发成本等优点,拥有大量的功能扩充外挂支援,也是吸引众多用户的主因。然而这种类型的 CMS 网站,常会有挂载过多外挂,导致拖慢网站效能的情形,将用不到的外挂关闭、换成新外挂,可以达到精简原始码,优化网站速度。

6. 主机回应的理想时间

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

图片出处:https://www.pubnub.com/blog/how-fast-is-realtime-human-perception-and-technology/

优化网站速度,提供更好的使用者体验

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

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

很赞哦! (135)

文章评论

标签云