网页速度是影响SEO的许多因素中，很重要的一个项目。因为网站的速度所影响的层面不仅仅是SEO排名、曝光的机会，也包含了使用者体验。若网站速度过慢，容易造成使用者因等待太久，关闭网站，而错失更多商业目标达成的可能。因此不论是对于电商、内容型或其他类型的网站，速度优化都是相当重要的一环。今天就带大家认识网站速度对于SEO的影响，并了解Google Page Speed Insights，以及如何进行网站速度优化。
网站速度与SEO的关系
搜寻引擎是透过机器人(爬虫程式)，造访世界各地的网页，将网页采集回去，并「收录」在搜寻引擎中，提供人们查阅。我们可以将搜寻引擎，理解成像是一座图书馆，而网页则像是书本，书本必须被图书馆索引编目，出现在「书架」上，才能被浏览图书馆的人查询找到。因此，让网页能顺利地被机器人爬取，被搜寻引擎「采集」到，顺利的出现在「书架」上，才会能替网站带来曝光和排名。而在谈网站速度以及SEO的关系，必须先认识 爬取预算(crawl budget)这个重要的概念。
什么是爬取预算(crawl budget)？
用比较平易、口语的解释就是，机器人爬取网页时，在网站上停留的时间，是有扣打(quota)的，而不是无上限地停留在同一个网站，将特定网站的页面一次爬取完毕。
为什么机器人不将网站的所有页面一次爬取完毕呢？一切都是为了爱！对于大型网站来说，例如大型电商网站，有类型众多、数量庞大的商品项目，或是大型论坛，有大量使用者发布生成的页面，页面数量能多至数十万、甚至数百万，若在短时间内对于网站主机发出大量的网页档案请求，会造成主机负担。而许多网站为了避免机器人对网站发出大量的请求对主机造成负担，也会限制机器人的抓取频率，甚至封锁特定IP位置所发出的造访请求。因此机器人造访网站、停留抓取的时间是有限的。
若能提高网站的反应速度，除了让使用者感到顺畅的体验，也能提高机器人抓取页面的速度，换句话说，如何让爬虫在「有限的时间内，抓到更多的内容」，是SEO在速度优化上的重要议题。越短时间抓取越多页面，就能让你的页面更快速得出现在搜寻结果页这个「书架」上！尤其是新闻媒体类型的网站，由于新闻本身有时效性，若新闻媒体型网站能在更短的时间被搜寻引擎收录，对于竞争同一则新闻的搜寻流量会更加有利。反之若收录的速度慢，则会错失许多在书架上曝光机会。
(补充：除了网站本身的速度外，提交网站地图(sitemap)也能为机器人爬取网站时，节省许多工作流程，帮助页面内容更快速被搜寻引擎收录
透过Google Page Speed Insights找出网站问题
Page Speed Insights是最常用的网站测速工具之一，以下简称为PSI。这次的第五版的PSI将Google Chrome的网页速度分析扩充套件「Lighthouse」的数据整合进来，解决了过去PSI与Lighthouse数据不一致的问题。
而这次第五版PSI最大的特色，不只着重于TTFB（time to first byte），而是针对使用者体验，增设了以往所没有的指标，来衡量网站的表现及性能。其中以FCP (首次显示内容所需时间)、以及FID(首次输入延迟)为衡量网站使用者体验最大的两项指标。
FCP (首次显示内容所需时间)：
浏览器渲染(render)出第一个显示内容所需的时间，也可以解释成使用者看见第一个内容所需的时间。
示意图如下：
许多网站测速工具，着重在后端主机回传资料所需的时间(TTFB)，然而Google认为，前端浏览器加载、渲染的这段期间，使用者其实也仍在等待，有许多时刻会影响用户体验，或是速度快慢的直接感受。而FCP是使用者能看见渲染内容的实际时间，因此这项衡量指标的优化重点，不像以往仅止于后端主机回应的速度、档案传输的时间，更包含前端浏览器载入CSS、Javascript 、渲染，一直到使用者看见网页呈现内容的这段时间。
FID(首次输入延迟)：
从浏览器开始渲染，一直到能「即时反馈」跟用户互动行为的延迟时间。Google官方文件对于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)。
从上图我们可以看到，使用HTTP/2，能让载入网站所需的资源，在同一时间内、同步并行载入，大幅缩短用户等待的延迟时间，加快网页速度！而HTTP/2另一项特色优点，是使用HPACK压缩格式，压缩请求和回应的metadata，大幅减少header的资料传输量，来提高网站速度！而HTTP/2的设定及安装步骤，可参考 你的网站升级到HTTP/2了吗？
此外，若你的网站主机不支援HTTP/2，可使用 CloudFlare这类的CDN服务，只需修改DNS指向CDN的主机位置，就能透过CDN与用户进行HTTP/2的传输！
2.利用浏览器快取(cache)
而加快页面载入的时间，除了上述HTTP/2同步载入的作法外，使用浏览器快取(cache)会是一个更简易有效的方法。在HTTP Header中，设定暂存资源的使用期限，暂存的资源通常包含重要的重要的HTML、CSS、Javascript、图片等。让曾经造访过网站的使用者，可从用户自己的磁碟载入先前下载过的资源，这样就不需要再透过网路重新下载一次，有效的替用户减少等待载入的时间！
而设置快取的常见方法如下，以Apache的主机为例，我们可以在.htaccess档案里使用下列范例语法，来设置各项资源暂存的使用期限。
而IIS的主机，我们能从web.config档案，<system.webServer>的区块中，使用下列范例语法来设置快取。
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档案中就可以啰！
5.精简不必要的原始码
许多网站的档案经常伴随着多余的原始码，增加了档案的传输量，常见的原因如下：
共用网页版型
为了增加网站开发的效率，以及便于维护管理，许多不同的网页会共用页面版型，因此会发生，页面虽然带有原始码，但部分原始码却没有实际上功能的情况，若能去除用不到的原始码，或是将网页版型做更细的分类，就能有效减少档案的传输量！
关闭不必要的外挂
许多网站常会采用WordPress或是Joomla这类的CMS(内容管理系统)，除了方便编辑内容、管理维护、节省开发成本等优点，拥有大量的功能扩充外挂支援，也是吸引众多用户的主因。而这种类型的 CMS网站，常会有挂载过多外挂，导致拖慢网站效能的情形，将用不到的外挂关闭、换成新外挂时，将旧有不会再用到的外挂删除，来达到精简原始码，优化网站速度。
6.主机回应的理想时间
以上就是加快主机回应速度的方法，除了上述的常见方法外，牵涉的主机回应速度的因素事实上还非常多，常见的原因也包含(不限于)后端程式码的逻辑程序、资料库指令的效能，甚至是主机硬体等等。而Google官方表示，主机回应的速度，最好在200ms(毫秒)之内，而这200ms，正好也是大部分人类大脑的反应时间。
速度优化所带来的效益，不仅仅能让网页用更短的时间在搜寻引擎曝光，改善SEO排名表现，也同时对搜寻引擎的爬虫更加友善(机器人的使用者体验)，并且提升UX(人类的使用者体验)！而优化使用者体验，也能将回应速度200ms视为一项达成的理想目标，为使用者们打造更棒的网路世界！
