SEO網站速度重要關鍵 -Page Experience

Author: 路卡斯特
1989f69de4afd9c7fb5ecf104da36a61


Google已經在官方網站正式說明「網站速度影響SEO排名」,並在2020/5/28提出最新的SEO網站速度重要關鍵-Page Experience(頁面體驗),相關資訊文章後面會詳細說明。網站速度快不快不是用感覺的,Google測速工具測下去就知道了,網站速度慢除了影響SEO之外,網站的使用者體驗(UX)也會變差,這次改版Page Experience(頁面體驗)的主軸就是很重要的使用者體驗(UX),畢竟沒有多少人可以忍受一個慢吞吞的網站,龜速網站被關掉的機率太高了(跳出率),可能會失去大量潛在客戶,Google這次改版將於2021年正式導入網站的評比,還沒調整的網站要快,以免影響SEO排名。


網站速度別憑感覺

網站快或慢不是憑感覺,一定要用精密的測試工具,Google提供的測速工具輸入網址就有速度分數,趕快輸入您的網站網址或是競爭對手的的網址,去測試看看吧。
【Google測速工具: Google PageSpeed Insights 

網站測試結果
達文西的網站速度測試


為什麼網站會慢呢?

圖片檔案過大

很多人上架網站圖片都不裁切直接把原圖放上去,原圖太大了,當然會慢,還有圖片裁完之後應該要壓縮後再上,或是透過主機壓縮技術去縮減圖片的大小,讓網站載入速度變快,壓縮有很多方式,我都是用熊貓網站(TinyPng)進行壓縮,TinyPng免費版本可以一次壓縮20張,對於微調網站很夠用了,如果要每次都自動壓縮,TinyPng也有API版本,但就要付費囉。

介紹壓縮方式,只要選定一個檔案,上傳到TinyPng,然後再下載就完成壓縮了,這張圖壓了68%減少169KB,變成78K是我們需要的大小(約100KB)。
【熊貓壓縮圖檔: TinyPng

TinyPng圖片壓縮


動畫過多

很多網頁設計公司做了很炫的動畫造成網站慢吞吞,網站是要服務瀏覽者不是用來耍炫技的,網站慢就被關了有機會看到動畫? 過多的動畫效果真的很煩人,讓人搞不懂是內容重要還是動畫重要。


外掛程式過多

很多後端工程師不懂JS程式所以採用過多套件但是又不會改,因此常常載入過多的累贅外掛程式,或有人是採用Wordpress之類的免費套版,然後外掛很多模組造成網站變得又龐大又慢,去用工具測試看看就知道您的網站速度是快或慢了,不用多說。
<延伸閱讀: 企業用Wordpress網頁設計好嗎?>
<延伸閱讀: 具備SEO架構的網站,SEO成功率才會高>


網站結構問題

很多工程師採用了Bootstrap架構但是又不會改,因此會產生多餘的程式碼,還有RWD以同架構用於桌機、平板、手機,三者都是一樣的圖,手機載入桌機一樣的大圖會比較慢,這是所有RWD的共同問題需做一些調整才能改善,AWD則在手機速度表現上會好一點,另外就是用軟體去切版也會有產生過多HTML碼的狀況,以上都是因為結構不佳造成網站速度慢的原因。
<延伸閱讀: 網頁設計為什麼需要前端工程師?>


主機環境差

放網站的主機效能太差或是頻寬不足都會影響網站的速度,如果是購物網站更要注意網站速度品質,別因為省錢而造成客戶流失,得不償失。

<延伸閱讀: 您知道買哪一家雲主機最划算嗎?>

 

Google 網站速度因素:Page Experience(頁面體驗)

Google在2020年5月提出最新的速度效能因素Page Experience(頁面體驗)第6版,這次更新的主軸會落在「使用者體驗」上,頁面體驗(Page Experience)不佳的網站,都會得到比較差的SEO分數,每次Google提出新的規則,網頁設計與SEO公司都會忙得人仰馬翻,忙著看Google新的文件並進行網站調教,這次最主要的指標是 Largest Contentful Paint(LCP)最大內容繪製、Cumulative Layout Shift (CLS)累計版面配置轉移、First Input Delay(FID)首次輸入延遲、Total Blocking Time(TBT) 封鎖時間總計,下面會再介紹這幾個數據代表的意思,想知道目前的數據分數可以用Google PageSpeed Insights 進行測試,就會得到這幾個數據其中以LCP、TBT占了最大的比例50%(各25%)。
Google測速工具: Google PageSpeed Insights 



SEO指標V5版、V6版差異

Page Experience(頁面體驗)第6版
 

Google PSI 測試後結果
Google測速工具新的3項數據


V5、V6 新舊標準的差異

SEO新標準與舊標準-Google PSI

 


SEO網站指標名詞解釋

秒速換算分數,可以到Google的 Web.dev 試算數據分數,網站也有說明分數佔比。
【Google速度換算分數: Web.dev


FCP (First Contentful Paint) 首次內容繪製

當瀏覽者到達網站之後,首次顯示網站內容需要的時間,也是指瀏覽器第一次顯示文字或圖片的時間,測試第一次顯示原因是第二次再顯示網站的時候,網站瀏覽器已經有暫存檔案了,這樣測速就不準了。這個標準原本V5版本就有了,V6發表也延續了FCP的分數,表示網站的整體圖文的「顯示速度」是很重要的,網站過慢就會造成使用者「跳出率」提高。


SI (Speed Index) 速度指數

速度指數會以「網頁可見內容填入速度」計算,甚麼意思? 就是以眼睛可以看到的圖像去計算分數,速度越快得分越高,PSI 測試結果來看以顏色來說,綠色最快,橘色中等,紅色最慢,這時候圖片的檔案大小、是否壓縮就大大影響了速度分數。
 

TTI (Time to Interactive) 可互動時間

互動準備時間意思是「網頁進入完整互動狀態前」花費的時間,簡單來說網站要全部載入才能開始閱讀、互動,這時候不只是載入HTML、圖片,還要載入JavaScript,如果有過多花俏的JavaScript效果,那肯定會大大影響網站的速度,要提升速度就要移除沒有用或者效能不好的JavaScript。
 

SEO指標V.6,「很可能」會影響2021年SEO優化
 

LCP (Largest Contentful Paint) 最大內容繪製

甚麼是 LCP 呢? LCP翻譯是「最大內容繪製」,簡單來說就是網站最大的文字、圖片或是影片呈現到眼前所需要的時間,越快越好,Google只測試網站最大的那個內容,以一般網站首頁來說,第一個被掃到的很可能就是形象大圖,或是首頁形象影片,這些內容的優化就變得非常重要。


CLS (Cumulative Layout Shift) 累計版面配置轉移

「累計版面配置轉移」指標是用於測量可見元素在可視區域內的移動情形,意思就是網站原本可以點的按鈕或是連結,但是因為網站讀取過慢,正要點的時候按鈕(物件)忽然跑掉造成點錯位置的情形。
 

TBT (Total Blocking Time) 封鎖時間總計

當工作長度超過 50 毫秒時,從 FCP 到互動準備時間的時間範圍總計 (以毫秒為單位),TBT的意思是從FCP、TTI的時間,工作延遲(封鎖的)的總時間超過50ms,延遲越久分數越低,要改善TBT其實就是改善FCP、TTI、SI,網站圖文、HTML優化、減少JS程式碼都會是改善TBT的元素。


FID (First Input Delay首次輸入延遲

測量互動性的速度,為了提供良好的用戶體驗,網頁的FID應當小於100毫秒,像是點擊(Click),無論是點擊連結、影片、圖片,只要點下去反應很慢的,慢到以為網站故障、無作用,就是「首次輸入的延遲」。

LCP-FID-CLS


如何改善網站速度

經過Google測速工具PSI測速之後不但可以知道網站速度快慢,也能得到一個改善的建議清單,您可以針對這些建議請網頁設計公司進行改善,從架構到內容進行調整以提高網站速度,專業的網頁設計公司可以幫助網站完成更具價值的「SEO架構的網站」
<延伸閱讀:網頁設計是什麼? 設計公司不會告訴你的5個真相
<延伸閱讀:網頁設計為什麼需要前端工程師?>  


結論

網站存在的目的是其實是「提供有用的資料給有需要的人」,企業形象視覺並不需要用一堆無謂效果與動畫去呈現網站,不如把時間專注在網站友善介面與動線上,去創造「有用的內容」,以SEO優化的角度去進行「內容行銷」這才是「好看又有用」的現代網站。
<延伸閱讀:SEO收費行情?該怎麼選擇SEO公司?>
<延伸閱讀: 該如何找到適合的SEO顧問呢?

(本文為達文西數位科技所有,轉載文圖請註明出處)

 

馬上諮詢SEO
喜歡探索,常常埋首於新奇的事物裡,總是希望給您最適切的解決方案。

超值套版網站,優惠特價 $ NT 62,000

請與我們聯繫
線上客服 TOP