越来越重要的SEO优化项目：「网站速度」优化

　　如果你有长期看我的部落格文章，应该会知道我强调很多次，Google非常的重视用户体验，只以用户为最优先考量、重视用户体验的网站主，才能够真的理解SEO该怎么做，而『网站速度』自然在网站优化上是一个很重要的项目，对于SEO以及网站的体验都有很大的影响。尤其自从Google发布了网页体验讯号（PageExperience）之后，网站速度显然只会越来越重要，我想我应该要特别更新一下速度优化的文章，来提供更多的观点以及分享。

　　这篇文章我会完整分享『网站速度』对于网站的影响，以及你该怎么做。

　　通常我在承接顾问专案时，『网站速度』会是我们评估『网站健康程度』的重要指标之一，因为速度是一个非常综观的指标，他影响的层面非常多，我们也先来初步了解一下，究竟对于『网站速度优化』这件事过于怠慢的话，影响层面有哪些：

　　直接性影响你的网站SEO排名

　　Google在2010年时就发过官方声明，网站的速度、效能将正式影响搜寻排名，Google在评估一个网站是否值得得到好的排序时，网站速度已被列入为排名因素。

　　不过Google的所谓的『排名讯号』是有分强度的，每一个优化项目的『排名讯号』强度都不同，简单来说，Google在判断你的网站是否值得被排序到搜寻结果页的前面时，有着非常复杂的演算法并且参考了非常多的讯号，这些讯号有强弱之分，若我们针对讯号强度较高的项目进行优化的话，你在SEO的成效上会较容易看到成效，反之若是讯号强度较弱的排名讯号，则是优化了也未必会看到成效。

　　举例来说，网站整体的内容是否够丰富、够优质就是属于高强度讯号。你网页的网址里面有没有提到关键字，就是属于极度低强度的讯号，通常网址里面没有塞关键字，也能得到好的排序。

　　那么我们这篇文章正在谈的『网站速度』是属于多高强度的排名讯号呢？如果我们优化了网站速度，对于SEO的成效有多大的影响呢？

　　答案是：『网站速度』属于中至高强度的讯号，而且讯号强度只会被设定得越来越强。

　　多年前，Google刚开始宣布『网站速度』会影响排名的年代，当时在很多专案上，我们优化网站速度后，都未必会观察到网站的排名、SEO表现、SEO流量会提升，还是要依靠反向连结、内容、On-Page的调整，才会看到显著的成效。但这两年在优化的实务经验以及数据观察之下，我开始发现『网站速度』的讯号强度越来越高，优化后的效果大多都很显著，同时，Google在2018年时有公开声明『网站速度』的讯号强度会提高到影响手机排名，2020年时又宣布了PageExperience（网页体验讯号）这个与网站速度有关联性的排名讯号，我只能说，结论很显而易见：

　　这两年Google越来越重视『网站速度』，他对SEO的影响是逐年在提升，明年、后年、大后年也肯定会越来越重要，是现在做SEO一定会优化的超级重要项目之一。

　　除了排名，还会影响Google的爬取额度（CrawlBudget）

　　先前我有写一篇文章谈论过，Google有所谓的爬取额度（CrawlBudget），如果你的网站速度太慢，会影响爬虫来爬你网页的健康程度，如果速度慢到爬虫爬不动你的网页、或爬起来的效率很差，那整体SEO的成效也会不好。

　　从『排名讯号』的角度以及从SEO技术优化的『爬取』角度来看，网站速度都是至关重要的。

　　影响使用者体验以及转换率

　　根据Google的研究报告指出，网站速度对于跳出率的影响是非常显著的，你的网站载入速度若是1~3秒以内，客户跳出网站的可能性会增加32%，但只要慢到5秒，客户跳出网页的可能性就会增加到90%（其实这是非常惊人的数据），客户跳出率高，那么当然就会影响你的转换率、订单成交率等各项商业表现数据。

　　网站速度的优化影响的层面很多，从跳出率、使用者体验、影响爬虫的爬取效能、甚至影响SEO的排名。因此网站速度优化，是一个对整体网站都非常有帮助的优化工作。

　　在优化时我们不能用公司、家里的电脑来＂体感＂网站的速度有多快，我们的用户可能位于网路环境较差的地方、或是他的手机正连上某个速度较差的wifi网路。同时，＂你感觉网站速度很快＂并不代表Google认同你的网站速度很快，若今天我们是要为了SEO而优化网站速度，最终目的还是＂Google是否评断你的网站速度良好＂，因此不论是为了用户还是为了SEO而去优化速度，我建议还是避免用自己体感的方式来判断网站速度是否良好，而是应该要使用一些网站速度分析工具来做分析以及检测：

　　推荐工具1：GooglePageSpeedInsight

　　GooglePageSpeedInsight是Google官方所开发的工具，如果你希望了解＂Google如何看待你网站的速度＂，用Google的工具就可以达到目的，Google开发的这套PageSpeedInsight算是操作起来比较容易上手，介面也不会太复杂的工具之一，故一开始做速度优化时，我都推荐先以Google的工具为主。

　　使用上只要点开GooglePageSpeedInsight的工具，在工具上方输入网址，工具就会给予你的网站一个1~100的分数，除了分数之外，你可以在下图底部的地方看到FirstInputDelay（FID）、LargestContentfulPaint（LCP）、CumulativeLayoutShift（CLS）等三个指标，这三个指标是PageExperience（网页体验讯号）的三大重要指标（若还不知道FID、LCP、CLS这些指标是什么的话，建议你先阅读网页体验讯号这篇文章，再回头来阅读网站速度优化的文章），这三个指标也是你1~100分能得到多少分数的重要依据（也请特别注意，行动版的网站速度表现以及电脑版的网站速度表现是分开的，有可能你的电脑版网页速度很快，但手机版却有许多优化空间）。

　　值得一提的是，GooglePageSpeedInsigt这套工具有一个其他工具无法取代的地方，那就是＂Chrome用户体验报告＂，FID、LCP、CLS等指标都有一个绿橙红所构成的长条图，这个长条图所显示的是真实的、真正有造访过你网页的使用者们所产生的资料，以下图来说，有62%的使用者在LCP上体验良好、24%有待改善、15%为不良。

　　再把检测报告往下卷动，我们会看到许多的速度优化项目，这边是Google的工具提出的速度优化建议，直接建议你该如何进行优化（这些项目我们会在文章的后段来进行说明），实务上我们会根据报告检测出来的问题，与网站的PM、网页技术人员来讨论该如何改善这些项目。

　　推荐工具2：WebPageTest

　　WebPageTest虽然不是Google所开发的工具，但仍是Google官方推荐的可用工具之一，打开工具后，同样只要输入网址就可以开始做测试，WebPageTest比较不同的是，你可以选择速度测试的国家以及浏览器，如果你是国际品牌，网站的目标族群来自于各种不同的国家地区，则可以用此工具来检测不同的地区造访你网站时的速度表现。

　　当WebPageTest帮你跑出报告之后，你可以点开＂Detail报表＂就会看到下图的瀑布流资料报表，我们可以从这个报表中找出最耗费你网页资源的档案是哪些，行销人（非技术人员）可以从报告中的副档名辨识出拖累网站效能的是图片还是程式档案，jpg/png是图片的档案格式，js/css则是程式档案，若是特定程式档案花费太多效能的话可以找技术人员讨论该如何优化，若是图片档案拖累效能的话，则可以将图片透过Photoshop进行压缩或图片压缩工具，调整图片后再重新上传图片。

　　大多的时候我们其实都可以用Google的PageSpeedInsight来解决问题。若感受到网站速度很慢，但透过PageSpeedInsight来检测却检测不出问题时，就可以改用WebPageTest来交叉分析，找出是网页上的那些档案在拖累网站的速度。

　　推荐工具3：GoogleAnalytics的网页操作时间报表

　　实务上我们要优化的网页很多，因此会把每一个网页的版型都用速度检测工具来检测一遍并进行优化（比方说：以电商网站来说至少会有三个重要版型，包括『首页』、『商品列表页』、『商品详细页』），但实务上如果你的网页数量太多，不知道该从哪些网页开始优化，你可以打开Goog?leAnalytics的『网页操作时间』报表，这张报表会呈现出哪些网页速度最慢，你可以先找出最多使用者浏览、但网站速度较慢的网页，优先对这些网页进行优化。

　　上面我们看完了工具，现在来谈，那么工具跑出数据之后，要怎么着手优化网站速度呢？网站速度优化的项目与要顾的事情非常多，在你开始优化之前，我希望你先注意几件事情：

　　#1有技术人员协助：网站速度有很多优化项目都是需要技术人员协助的，请先确保你身旁边有愿意陪你讨论、规划、执行的技术人员提供协助。

　　以我来说，我的本质以及专长仍然是在『行销人』，通常在速度优化上还是要依赖网页技术人员的协助以及支援，这都是很正常的。

　　#2如果你是使用架站平台：如果你是使用电商平台，那你很可能没办法优化网站速度，若你感到网站速度太慢且已经影响了SEO、转换率、跳出率等多项商业表现，最直接的解决方案还是跟平台的厂商联系并请他们协助，但若厂商没办法协助，那很遗憾，若希望速度更好，可能要考虑更换一个平台。

　　#3如果你是使用架站系统：如果你是使用开源架站系统（像是Wordpress），那么你如何使用架站系统很可能会影响你的网站速度（像是你使用的主题、插件、功能…等），在优化时最好有很熟悉系统的人从旁协助。如果是像WordPress这种很流行的系统，网路上的文章跟资源也很多，也可以一边爬文一边自己优化。

　　那么，我们再来就要开始介绍速度优化上常见的优化项目，以下条列出来的项目我以本文提到的GooglePageSpeedInsight这个检测工具会条列出来的优化项目为主，这些也是Google官方建议我们优化的项目，至于你是否需要优化这些项目，跑一次GooglePageSpeed的速度检测工具，工具就会条列出来：

　　使用合适的图片大小

　　图片的大小太大、解析度太高、品质太高是我们在速度优化上最为普遍的项目，很多人在上传图片（不论是商品图片还是文章图片）时都没有特别压缩的习惯，事实上就算你上传的图片解析度为4,000x4,000还是800x800，你的使用者实际看到的图很可能根本是没有太多差别的，但4,000x4,000与800x800的图片容量大小可能可以差到数倍以上。

　　通常我会建议你找到一个＂解析度不会失真的最低限度＂为多少，并以此为标准即可，以我的文章来说，我也是从400x400、500x500、600x600来逐一尝试，最后我选择图片尽可能最大不要超过600，宽度600在我的网页上是清晰且容量不会太大的大小。你可以透过Photoshop调整图片的品质、解析度、大小，也可以使用Google官方的免费图片压缩工具『Squoosh』来压缩自己的图片。

　　上述的情况是＂如果你的网页是你可以自己上传图片＂的前提，你可以用Photoshop或是用压缩工具先将图片压缩到一定尺寸大小再上传。但如果你是电商网站可能就会遇到下图的情况，很多电商网站的商品列表页（下图左侧）以及商品详细页（下图右侧）是使用同样一张商品详细页的图片，使用者看起来大小不同，是因为网页上的CSS将图片在网页上进行大小的缩放调整（下图仅是示意图，ebay其实是有做好图片的压缩，如果想看一下压缩后的样子也可参考ebay的商品列表页）。

　　举例来说，以网页介面来说，你的商品列表页的图片区块为400x400解析度的小图，而商品详细页的图片为了让消费者可以看得清楚，是使用较大张的800x800。

　　你的商品列表页在网页介面上其实只要400x400尺寸的图片即可，这时如果你将商品列表页的图片压缩到400x400，档案容量可以控制到一定的大小以内，但很多网页在运作上是＂商品列表页的图是直接抓取商品详细页的图＂，就会导致商品列表页的载入了解析度较高、容量较大的图片，尤其商品列表页通常会有大量的图片，如果每一张图的大小都是载入太大解析度的图，这会让整体速度表现很差。

　　如何确定你的网页是否有这样的情况呢？你可以透过我的文章中介绍到的分析工具来检测，或是透过下图的方式，在你的商品列表页的图片上按右键来开启图片，看图片是否太大张。

　　这个问题的最佳解决方案，其实是透过图片压缩套件来解决，当我们把图片上传时，我们网站会在后台压缩好几张不同尺寸大小的图片，根据网站的需求来使用，举例来说，网站侧栏的板位较小，只需要200x200、商品列表页只需要400x400，就让压缩程式来压缩出不同尺寸的图片。不论是Wordpress还是自家网站都有类似的套件可以使用，但网站若要安装此类的套件，同样也是需要技术人员提供协助才能做。

　　移除未使用的JavaScript/移除未使用的CSS

　　JavaScript以及CSS都是网页上的程式档案，如果GooglePageSpeedInsight针对你的网站抛出这项建议，代表工具侦测你的网页上有些程式档案是没有使用到的，这些程式档案等于既没有在使用、但使用者的浏览器却需要去载入这些程式档，理所当然的网站速度就会被拖累。若看到这个项目还请跟技术人员确认一下，是否这些确实是用不到且可以移除掉的程式档案。

　　这个项目是属于需要技术人员协助做修正/检查的项目。

　　排除禁止转译的资源

　　这同样是需要技术人员提供协助的优化项目，白话一点来说，就是网页上有JavaScript/CSS干扰到了首次画面的绘制，实务上我们会建议延迟较不重要的JavaScript/CSS的执行时间。

　　『排除禁止转译的资源』以及『移除未使用的JavaScript/移除未使用的CSS』都算是对程式档案的清整以及大扫除。

　　启用gzip或类似的压缩技术

　　这是Google官方推荐的优化项目之一，透过gzip压缩技术我们可以有效的压缩网站上的档案大小（包括HTML、CSS、JavaScript），进而优化网站速度，也同样需要技术人员提供协助来帮你安装gzip。

　　Reduceinitialserverresponsetime（降低主机回应时间）

　　如果你的速度检测报告显示出这个项目Reduceinitialserverresponsetime，代表你的主机回应时间太慢，这时会需要重新清整主机的环境、或升级主机的环境/硬体。

　　提供next-gen格式的图片

　　Next-gen其实指的是新世代（NextGeneration）的意思，过去我们使用的图片格式大多为JPG以及PNG居多，但Google现在特别提倡使用新世代的JPEG2000、JPEGXR、WebP这些图片格式，因为这些格式的图片档案容量更小、图片失真不严重、对于整体速度体验更好。但由于目前并不是所有的浏览器都支援这些格式，所以这些格式还尚未普及，目前Google也还没有强制要大家采用这样的格式，仅是在一个推广的阶段。

　　以我的网站来说，我是使用WebP的图片格式，并且透过判断式来进行优化（当使用者的浏览器支援时，网站就会提供WebP图片，若遇到使用者的浏览器不支援WebP时，我的网站就会改为提供PNG图片），由于大多版本的Chrome还是支援WebP的，所以我最近决定采用了这个图片格式，在更换到WebP之后，平均我的每一张图片的大小缩小了60~70%左右。

　　Google判断网站排名的讯号有很多，即便我们把GooglePageSpeed做到90分、确保网站速度的优化工作很确实，但毕竟网站速度只是搜寻引擎演算法中的其中一环，虽然他的讯号强度偏高，但也不要期待只做好网站速度优化，排名就能上升。从网站内容、关键字布局、反向连结…等很多讯号都跟排名有关，网站速度只是其中一环。

　　同时，网站速度优化很多项目都是需要技术人员协助的，像是『排除禁止转译的资源』、『排除禁止转译的资源移除未使用的JavaScript/移除未使用的CSS』都算是对程式档案进行清整、整理、优化的工作，如果你是使用较难更动的架站平台、或公司没有技术人员可以提供协助，那么就会很难进行下去。