首页 SEO资讯 SEO产品 SEO客户 网站类型 实体行业SEO 服务行业SEO SEO实战 专家实操专栏

老谭SEO专栏

旗下栏目: 全网专家专栏 网站实操专栏 老谭SEO专栏

老谭SEO:万事做好排名流量差,你的网站速度够快吗?

来源:SEO技术官网 作者:老谭SEO 人气: 发布时间:2021-07-14
摘要:如果你有長期看我的部落格文章,應該會知道我強調很多次,Google 非常的重視用戶體驗,只以用戶為最優先考量、重視用戶體驗的網站主,才能夠真的理解 SEO該怎麼做,而『網站速度』自然在網站優化上是一個很重要的項目,對於SEO以及網站的體驗都有很大的影響。

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

先談『網站速度』究竟會怎麼影響你的網站

通常我在承接顧問專案時,『網站速度』會是我們評估『網站健康程度』的重要指標之一,因為速度是一個非常綜觀的指標,他影響的層面非常多,我們也先來初步了解一下,究竟對於『網站速度優化』這件事過於怠慢的話,影響層面有哪些:

Google 在2010年時就發過官方聲明 ,網站的速度、效能將正式影響搜尋排名,Google在評估一個網站是否值得得到好的排序時,網站速度已被列入為排名因素。

不过Google的所谓的『排名讯号』是有分强度的,每一个优化项目的『排名讯号』强度都不同,简单来说,Google在判断你的网站是否值得被排序到搜寻结果页的前面时,有著非常复杂的演算法并且参考了非常多的讯号,这些讯号有强弱之分,若我们针对讯号强度较高的项目进行优化的话,你在SEO的成效上会较容易看到成效,反之若是讯号强度较弱的排名讯号,则是优化了也未必会看到成效。
 
举例来说,网站整体的内容是否够丰富、够优质就是属於高强度讯号。你网页的网址裡面有没有提到关键字,就是属於极度低强度的讯号,通常网址裡面没有塞关键字,也能得到好的排序。
 
 
 
那麼我们这篇文章正在谈的『网站速度』是属於多高强度的排名讯号呢?如果我们优化了网站速度,对於SEO的成效有多大的影响呢?
 
答案是:『网站速度』属於中至高强度的讯号,而且讯号强度只会被设定的越来越强。
 
多年前,Google刚开始宣布『网站速度』会影响排名的年代,当时在很多专案上,我们优化网站速度后,都未必会观察到网站的排名、SEO表现、SEO流量会提升,还是要依靠反向连结、内容、On-Page的调整,才会看到显著的成效。但这两年在优化的实务经验以及数据观察之下,我开始发现『网站速度』的讯号强度越来越高,优化后的效果大多都很显著,同时,Google在2018年时有公开声明『网站速度』的讯号强度会提高到影响手机排名,2020年时又宣布了Page Experience(网页体验讯号)这个与网站速度有关联性的排名讯号,我只能说,结论很显而易见:
 
这两年Google越来越重视『网站速度』,他对SEO的影响是逐年在提升,明年、后年、大后年也肯定会越来越重要,是现在做SEO一定会优化的超级重要项目之一。

 

  • 除了排名,還會影響Google的爬取額度(Crawl Budget)
先前我有写一篇文章谈论过,Google有所谓的爬取额度(Crawl Budget),如果你的网站速度太慢,会影响爬虫来爬你网页的健康程度,如果速度慢到爬虫爬不动你的网页、或爬起来的效率很差,那整体SEO的成效也会不好。
 
从『排名讯号』的角度以及从SEO技术优化的『爬取』角度来看,网站速度都是至关重要的。
  • 影響使用者體驗以及轉換率

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

 

一個重要的觀念:對於網站速度,千萬不要自我感覺良好

網站速度的優化影響的層面很多,從跳出率、使用者體驗、影響爬蟲的爬取效能、甚至影響SEO的排名。因此網站速度優化,是一個對整體網站都非常有幫助的優化工作。

在優化時我們不能用公司、家裡的電腦來"體感"網站的速度有多快,我們的用戶可能位於網路環境較差的地方、或是他的手機正連上某個速度較差的 wifi 網路。同時,"你感覺網站速度很快"並不代表Google認同你的網站速度很快,若今天我們是要為了 SEO而優化網站速度,最終目的還是"Google是否評斷你的網站速度良好",因此不論是為了用戶還是為了SEO而去優化速度,我建議還是避免用自己體感的方式來判斷網站速度是否良好,而是應該要使用一些網站速度分析工具來做分析以及檢測:

  • 推薦工具1:Google Page Speed Insight
Google Page Speed Insight 是Google官方所开发的工具,如果你希望了解"Google如何看待你网站的速度",用Google的工具就可以达到目的,Google开发的这套Page Speed Insight算是操作起来比较容易上手,介面也不会太复杂的工具之一,故一开始做速度优化时,我都推荐先以Google的工具為主。
 
使用上只要点开Google Page Speed Insight 的工具,在工具上方输入网址,工具就会给予你的网站一个1~100的分数,除了分数之外,你可以在下图底部的地方看到 First Input Delay(FID)、Largest Contentful Paint(LCP)、Cumulative Layout Shift(CLS)等三个指标,这三个指标是Page Experience(网页体验讯号)的三大重要指标(若还不知道FID、LCP、CLS这些指标是甚麼的话,建议你先阅读网页体验讯号这篇文章,再回头来阅读网站速度优化的文章),这三个指标也是你 1~ 100分能得到多少分数的重要依据(也请特别注意,行动版的网站速度表现以及电脑版的网站速度表现是分开的,有可能你的电脑版网页速度很快,但手机版却有许多优化空间)。

 

值得一提的是,Google Page Speed Insigt這套工具有一個其他工具無法取代的地方,那就是"Chrome用戶體驗報告",FID、LCP、CLS等指標都有一個所構成的長條圖,這個長條圖所顯示的是真實的、真正有造訪過你網頁的使用者們所產生的資料,以下圖來說,有62%的使用者在LCP上體驗良好、24%有待改善、15%為不良。

 

再把檢測報告往下捲動,我們會看到許多的速度優化項目,這邊是Google的工具提出的速度優化建議,直接建議你該如何進行優化(這些項目我們會在文章的後段來進行說明),實務上我們會根據報告檢測出來的問題,與網站的PM、網頁技術人員來討論該如何改善這些項目。

 

 

 

  • 推薦工具2:WebPage Test

WebPageTest 雖然不是Google所開發的工具,但仍是Google官方推薦的可用工具之一,打開工具後,同樣只要輸入網址就可以開始做測試,WebPageTest比較不同的是,你可以選擇速度測試的國家以及瀏覽器,如果你是國際品牌,網站的目標族群來自於各種不同的國家地區,則可以用此工具來檢測不同的地區造訪你網站時的速度表現。

當 WebPageTest 幫你跑出報告之後,你可以點開"Detail報表" 就會看到下圖的瀑布流資料報表,我們可以從這個報表中找出最耗費你網頁資源的檔案是哪些,行銷人(非技術人員)可以從報告中的副檔名辨識出拖累網站效能的是圖片還是程式檔案,jpg/png是圖片的檔案格式,js/css則是程式檔案,若是特定程式檔案花費太多效能的話可以找技術人員討論該如何優化,若是圖片檔案拖累效能的話,則可以將圖片透過Photoshop進行壓縮或圖片壓縮工具,調整圖片後再重新上傳圖片。

大多的時候我們其實都可以用Google的Page Speed Insight來解決問題。若感受到網站速度很慢,但透過Page Speed Insight來檢測卻檢測不出問題時,就可以改用WebPageTest來交叉分析,找出是網頁上的那些檔案在拖累網站的速度。

  • 推薦工具3:Google Analytics的網頁操作時間報表

實務上我們要優化的網頁很多,因此會把每一個網頁的版型都用速度檢測工具來檢測一遍並進行優化(比方說:以電商網站來說至少會有三個重要版型,包括『首頁』、『商品列表頁』、『商品詳細頁』),但實務上如果你的網頁數量太多,不知道該從哪些網頁開始優化,你可以打開Google Analytics的『網頁操作時間』報表,這張報表會呈現出哪些網頁速度最慢,你可以先找出最多使用者瀏覽、但網站速度較慢的網頁,優先對這些網頁進行優化。

網站速度優化有哪些項目?要怎麼做?

上面我们看完了工具,现在来谈,那麼工具跑出数据之后,要怎麼著手优化网站速度呢?网站速度优化的项目与要顾的事情非常多,在你开始优化之前,我希望你先注意几件事情:
 
#1 有技术人员协助:网站速度有很多优化项目都是需要技术人员协助的,请先确保你身旁边有愿意陪你讨论、规划、执行的技术人员提供协助。
 
以我来说,我的本质以及专长仍然是在『行销人』,通常在速度优化上还是要倚赖网页技术人员的协助以及支援,这都是很正常的。
 
#2 如果你是使用架站平台:如果你是使用电商平台,那你很可能没办法优化网站速度,若你感到网站速度太慢且已经影响了SEO、转换率、跳出率等多项商业表现,最直接的解决方案还是跟平台的厂商联繫并请他们协助,但若厂商没办法协助,那很遗憾,若希望速度更好,可能要考虑更换一个平台。
 
#3 如果你是使用架站系统:如果你是使用开源架站系统(像是Wordpress),那麼你如何使用架站系统很可能会影响你的网站速度(像是你使用的主题、插件、功能…等),在优化时最好有很熟悉系统的人从旁协助。如果是像 WordPress这种很流行的系统,网路上的文章跟资源也很多,也可以一边爬文一边自己优化。
 
那麼,我们再来就要开始介绍速度优化上常见的优化项目,以下条列出来的项目我以本文提到的 Google Page Speed Insight 这个检测工具会条列出来的优化项目為主,这些也是Google官方建议我们优化的项目,至於你是否需要优化这些项目,跑一次 Google Page Speed的速度检测工具,工具就会条列出来:
  • 使用合適的圖片大小

图片的大小太大、解析度太高、品质太高是我们在速度优化上最為普遍的项目,很多人在上传图片(不论是商品图片还是文章图片)时都没有特别压缩的习惯,事实上就算你上传的图片解析度為4,000 x 4,000 还是 800 x 800,你的使用者实际看到的图很可能根本是没有太多差别的,但4,000 x 4,000 与 800 x 800的图片容量大小可能可以差到数倍以上。
 
通常我会建议你找到一个"解析度不会失真的最低限度"為多少,并以此為标準即可,以我的文章来说,我也是从400 x 400、 500 x 500、 600 x 600来逐一尝试,最后我选择图片尽可能最大不要超过600,宽度600在我的网页上是清晰且容量不会太大的大小。你可以透过 Photoshop调整图片的品质、解析度、大小,也可以使用Google官方的免费图片压缩工具『Squoosh』来压缩自己的图片。
 
上述的情况是"如果你的网页是你可以自己上传图片"的前提,你可以用Photoshop或是用压缩工具先将图片压缩到一定尺寸大小再上传。但如果你是电商网站可能就会遇到下图的情况,很多电商网站的商品列表页(下图左侧)以及商品详细页(下图右侧)是使用同样一张商品详细页的图片,使用者看起来大小不同,是因為网页上的CSS将图片在网页上进行大小的缩放调整(下图仅是示意图,ebay其实是有做好图片的压缩,如果想看一下压缩后的样子也可参考ebay的商品列表页)。

举例来说,以网页介面来说,你的商品列表页的图片区块為 400 x 400 解析度的小图,而商品详细页的图片為了让消费者可以看得清楚,是使用较大张的 800 x 800。
 
你的商品列表页在网页介面上其实只要 400 x 400 尺寸的图片即可,这时如果你将商品列表页的图片压缩到400 x 400,档案容量可以控制到一定的大小以内,但很多网页在运作上是"商品列表页的图是直接抓取商品详细页的图",就会导致商品列表页的载入了解析度较高、容量较大的图片,尤其商品列表页通常会有大量的图片,如果每一张图的大小都是载入太大解析度的图,这会让整体速度表现很差。
 
如何确定你的网页是否有这样的情况呢?你可以透过我的文章中介绍到的分析工具来检测,或是透过下图的方式,在你的商品列表页的图片上按右键来开啟图片,看图片是否太大张。

 

這個問題的最佳解決方案,其實是透過圖片壓縮套件來解決,當我們把圖片上傳時,我們網站會在後台壓縮好幾張不同尺寸大小的圖片,根據網站的需求來使用,舉例來說,網站側欄的板位較小,只需要200 x 200、商品列表頁只需要 400 x 400,就讓壓縮程式來壓縮出不同尺寸的圖片。不論是Wordpress還是自架網站都有類似的套件可以使用,但網站若要安裝此類的套件,同樣也是需要技術人員提供協助才能做。

 

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

JavaScript以及CSS都是網頁上的程式檔案,如果Google Page Speed Insight針對你的網站跑出這項建議,代表工具偵測你的網頁上有些程式檔案是沒有使用到的,這些程式檔案等於既沒有在使用、但使用者的瀏覽器卻需要去載入這些程式檔,理所當然的網站速度就會被拖累。若看到這個項目還請跟技術人員確認一下,是否這些確實是用不到且可以移除掉的程式檔案。

這個項目是屬於需要技術人員協助做修正/檢查的項目。

  • 排除禁止轉譯的資源

這同樣是需要技術人員提供協助的優化項目,白話一點來說,就是網頁上有 JavaScript/CSS 干擾到了首次畫面的繪製,實務上我們會建議延遲較不重要的JavaScript/CSS的執行時間。

『排除禁止轉譯的資源』以及『移除未使用的 JavaScript / 移除未使用的 CSS』都算是對程式檔案的清整以及大掃除。

  • 啟用 gzip或類似的壓縮技術

這是Google官方推薦的優化項目之一,透過gzip壓縮技術我們可以有效的壓縮網站上的檔案大小(包括HTML、CSS、JavaScript),進而優化網站速度,也同樣需要技術人員提供協助來幫你安裝gzip。

  • Reduce initial server response time(降低主機回應時間)

如果你的速度檢測報告顯示出這個項目Reduce initial server response time,代表你的主機回應時間太慢,這時會需要重新清整主機的環境、或升級主機的環境/硬體。

  • 提供 next-gen 格式的圖片

Next-gen 其实指的是新世代(Next Generation)的意思,过去我们使用的图片格式大多為 JPG以及 PNG 居多,但Google现在特别提倡使用新世代的 JPEG 2000、JPEG XR 、WebP这些图片格式,因為这些格式的图片档案容量更小、图片失真不严重、对於整体速度体验更好。但由於目前并不是所有的瀏览器都支援这些格式,所以这些格式还尚未普及,目前Google也还没有强制要大家採用这样的格式,仅是在一个推广的阶段。
 
以我的网站来说,我是使用WebP的图片格式,并且透过判断式来进行优化(当使用者的瀏览器支援时,网站就会提供WebP图片,若遇到使用者的瀏览器不支援WebP时,我的网站就会改為提供PNG图片),由於大多版本的Chrome还是支援WebP的,所以我最近决定採用了这个图片格式,在更换到WebP之后,平均我的每一张图片的大小缩小了60~70%左右。

關於速度優化,稍微總結一下

Google判断网站排名的讯号有很多,即便我们把 Google Page Speed 做到90分、确保网站速度的优化工作很确实,但毕竟网站速度只是搜寻引擎演算法中的其中一环,虽然他的讯号强度偏高,但也不要期待只做好网站速度优化,排名就能上升。从网站内容、关键字布局、反向连结…等很多讯号都跟排名有关,网站速度只是其中一环。
 
同时,网站速度优化很多项目都是需要技术人员协助的,像是『排除禁止转译的资源』、『排除禁止转译的资源移除未使用的 JavaScript / 移除未使用的 CSS』都算是对程式档案进行清整、整理、优化的工作,如果你是使用较难更动的架站平台、或公司没有技术人员可以提供协助,那麼就会很难进行下去。
 
我很常说:行销人其实应该要常常请技术人员喝咖啡的,因為真的满多工作需要他们的协助以及支持,这真的是有原因的 : )
责任编辑:老谭SEO