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

作者: 用户投稿 2019-10-30 14:02:30 阅读：117 点赞：271

网页速度是影响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)出第一个显示内容所需的时间，也可以解释成用户看见第一个内容所需的时间。

示意图如下：

图片出处：

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

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)。

图片出处：

从上图我们可以看到，使用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 内，因此适合需求较简易的用户们。