網站速度優化

如何做好網站速度優化?

不懂程式的部落客,你可以這樣做

前言

歡迎回到《SEO急診室》,這次要帶來的是在 SEO 中重要程度佔有一席之地的「網站速度」。

在 2010 年,Google 就有發佈官方聲明,表示網站速度與網站效能,將列入排名的因素之一。

當然,網站速度對於一般部落客來說,可能會覺得那是很技術的東西,得要外包給專業工程師才能夠處理。

但其實就算你不是工程師,對於網站速度,也是能夠在一些點上進行調整,這篇就讓我來分享究竟如何做好網站速度優化吧!

人人都在說網站速度,但那到底是什麼?

人人都在說網站速度很重要,但到底網站速度是什麼東西?有辦法用比較具體的方式說明嗎?

當然可以,以下我會用比較簡單的方式說明,如果名詞不懂沒關係,能夠對於網站速度有個具體的概念就好。

首先讓我們簡單來了解一下,我們網頁是如何顯示的:

  • 分別會有「伺服器端 (server)」跟「客戶端 (client)」。
  • 我們在客戶端做的事情,都會呼叫伺服器,而伺服器端再傳回資料給客戶端。
  • 我們主要要縮短的就是就是這整個呼叫、抓資料、傳遞數據間速度。
server client

再來讓我們來知道一下幾個在網站速度中比較常見的名詞:

  • TTFB (Time to First Byte):首次請求回應時間,使用者點擊你網站的那一刻,一直到接收到伺服器端傳回第一個數據的時間,就是那個「白畫面等待時間
  • FCP (First Contentful Paint):首次內容繪製,也就是客戶看見第一個內容需要花費的時間,又稱為「痛苦時間」,就是平常我們網頁載入的等待時間
  • FID (First Input Delay):首次輸入延遲時間,你對於畫面進行任何行為,如點擊連結或按鈕,伺服器給予你回應的時間,白話就是「行為被回應的等待時間」。

不知道你有沒有發現到,這幾個時間,都是會對人體觀感造成影響的時間,因為人最不喜歡「覺得自己在等待」,所以這幾個時間如果沒有做好,那麼使用者很有可能就此離開。

對於工程師們來說,他們要想辦法調整也就是以上這幾個等待時間,盡量把它們的時間縮到越短越好。

網站速度如何影響SEO?

前面講到,如果網站速度太慢,使用者等不及,可能就會跳離你的網站,在這方面可能會間接影響到 SEO,這部份比較是針對「使用者」的角度。

而針對「搜尋引擎」的角度來看,網站速度更是會直接影響到 SEO,在 2017 年發佈的 Google 官方文件中,很詳細地說明了這件事,以下我用簡單一點的方式來說明。

如果大家還有印象,我在《SEO急診室#6》中,關於連結的部分,有提到「爬取預算 (Crawl Budget)」這回事,可能那時候大家看不太懂,我就在這邊一次解釋清楚。

網路爬蟲

Google 有一個機器人,可以叫牠「網路爬蟲」,牠的任務就是到各個網站中抓取資訊,但不會一次就把所有資料抓完,每次爬取都會有固定的時間以及固定的量。

所以意思就是,我們必須「用最短的時間,讓牠們抓取最多的資料」,而會影響抓取速率的因素有很多,其中「網站速度」就是一個很重要的原因。

如果你的網站速度太慢,那麼爬蟲每次來都只能抓到一些些資料;當你加快網站速度,牠們才能在你網站上抓更多資料。

網站速度測試工具推薦給你

#1 Page Speed Insight

我相信大家最熟知的,也是最多部落客會使用的,應該就是 Google 自己的測速工具「Page Speed Insight」。

它最大的優點就是「容易操作」,而且會很明確把你需要調整的哪些問題列出來,還可以同時測試「電腦版」跟「行動版」。

不過大多都還是偏技術類的數據,如果有需要的話再交給技術人員做就行了。

網站速度
Page Speed Insight 測速結果

#2 ​Google Analytics

我們熟知的 Google Analytics 其實也是能夠查看網頁速度的,只是蠻多人不知道的就是了。

可以到「行為」→「網站速度」,你就會看到不同的報表。

像在「總覽」的地方,我們可以看到不同瀏覽器、國家/地區、各個網頁的載入速度:

GA測試速度
可觀測不同地區與裝置的速度

而在「網頁操作」時間的地方,你也能看到你每個網頁跟平均載入時間的比較,就可以知道哪些網頁是低於平均值,可以去優化的。

GA測試網頁速度
不同網頁與平均速度比較

#3 ​WebPagetest

WebPagetest 算是比較專業的工具,一般部落客用不太到,不過我還是稍微介紹一下,有興趣的可以去玩玩。

它主要就是可以讓你測試你的網站在 40 個不同國家,以及 25 種不同瀏覽器 (行動裝置) 的速度。

評分標準從 F~A,測試的東西很多,對於技術人員來說可以針對檢測結果去做很多細部的優化。

​WebPagetest
可選擇地區與瀏覽器
​WebPagetest測試結果報表
測試結果報表

#4 GTmetrix

GTmetrix 大多都是技術人員在使用,它除了有前面提到可以根據不同地點以及裝置做測試外,它更融合了 PageSpeed 以及 Yslow 的測試指標 (意思就是測一次可以看到不同地方測試的指標。)

而最讓很多技術人員愛使用的原因,就是因為 GTmetrix 有「監控」網站的功能,你可以自行設定要監控哪些數據,當這些數據有異動時,就會直接寄郵件通知你。

如果你是一般部落客,想要長期監控自己的網站速度是否有異常,也可以使用這套工具,收到異常通知時,可以馬上通知技術人員處理。

這裡有一篇介紹 GTmetrix 蠻仔細的文章,可以參考看看:GTmetrix 網頁開啟速度檢測、分析工具,協助最佳化使用者體驗

GTmetrix測量結果
GTmetrix測量結果

一般部落客可以如何提升網站速度?

#1 選擇優良主機

第一個,針對如果你是自架站的部落客,那麼從選擇主機的部分就可以讓網站速度提升。

這部份把握兩個點:

  • 選擇風評良好且歷史比較久的主機代管
  • 機房位置盡量選擇離你的客戶群近一點

我目前自己這個網站是使用 Cloudways,主機位置選擇日本機房,在各方面的速度都還不錯,推薦給大家。不然也可以參考以下的詳細評測文。

延伸閱讀:架設網站必備虛擬主機!7大服務商優缺點評價

#2 調整圖片大小

有時候明明你文章內的圖片最大只要 500*500,結果你卻上傳了 2000*2000 的圖,多出來的體積都會是網站的負擔。

建議在上傳照片前,要先對於照片進行裁切或是壓縮,可以使用以下兩個網站:

在圖片調整上,也要記得顧及到「使用者體驗」,因為壓縮圖片往往會造成畫質降低,一些需要高解析度的圖片就會看不清楚。總而言之,兩者之間還是站主要自己去斟酌。

另外,如果你是有大量圖片的網站,例如美食或旅遊部落客,會建議你直接去找圖床來放圖片,如:imgurflickr

延伸閱讀:線上圖片壓縮工具推薦,快速縮小你的部落格照片

#3 調整網站功能

為什麼要精簡網站功能?因為有些網站的工具外掛會有太龐大的程式碼,這些程式碼都是有可能拖慢網站整體速度的。

網站功能主要可以從這些地方下手:

1. 刪除不必要的佈景主題 & 外掛

基本上一個網站只會需要一個佈景主題,多餘的佈景主題都可以直接刪除。

而外掛的部分,很多不必要的外掛也可以刪除,舉例來說:

  • 隨機文章展示
  • 社群分享按鈕
  • 多功能留言板
  • 即時線上人數
  • 文章瀏覽統計 …

以上單純舉例,還是要針對自己的需求與狀況去判斷。

2. 精簡網站側邊欄

網站中大多頁面都會有側邊欄,所以如果你的側邊欄放太多東西,也是有可能會拖到網站速度。

會建議放一些基本功能就好,像是作者介紹、文章分類、近期文章、熱門文章。

就反過來思考,你到別人網站瀏覽時,會用到它側邊欄的哪些功能,除了這些功能外,其他功能其實都不會是必須的。

#4 降低廣告數量

廣告應該會是很多部落客的部落格收益來源之一,但如果過度插入廣告,不但會造成使用者觀感降低,也有可能拖慢網站速度。

如果你有瀏覽過痞客邦的網站,你會發現大部分痞客邦部落格瀏覽起來都會卡卡的,其實那就是因為他們的不管是內嵌還是彈窗廣告都太多了。

在廣告及速度之間要好好去斟酌,其實真的不用執著於廣告,網站賺錢的方式還有很多種,可以參考:如何提升網站收入?部落格賺錢的10種方法

#5 減少內嵌工具

大部分文章內嵌的內容都會造成網頁速度降低,內嵌工具泛指那些:

  • 嵌入 Google Map
  • 嵌入 Youtube 影片
  • 嵌入 Facebook 貼文
  • 嵌入 Instagram 圖片

非得必要,不然不會建議嵌入太多元素,如果之前有文章嵌入太多,也會建議回去調整看看,留下一些重要的就好。

#6 安裝快取外掛

網站有一些圖片或功能,大多都是影響整個網頁載入速度的主因,所以如果能夠讓先快取的話,整體來說就會比較快速。

而且大部分的快取外掛,也都會包含其他提升網站速度的功能,如:延遲載入、檔案壓縮、資料庫優化 … 等等。

延遲的外掛有很多種,像是:

以上的外掛都還不錯,有興趣的人可以安裝看看。

網站遇到技術性問題怎麼辦?

身為非技術背景的部落格經營者,在遇到技術問題時,能夠先在社團中詢問看看,看能不能獲得解答,順道評估是否是能夠自己處理的,如果不行的話再外包給工程師。

我有整理過一篇我自己覺得不錯的 FB 技術性社團,有需要的人可以參考看看:網站遇到技術性問題怎麼辦?FB技術性社團推薦

補充:手機載入速度也很重要

這邊補充一下,大部分的人都只是一直在做網頁版的速度優化,而忘記了「行動版」速度優化也很重要。

對於行動版的速度測試,除了前面提到的 Page Speed Insight 網頁版,也可以使用 2019 年 Google 自己推出的測速工具「Think with Google」。

除了可以知道自己的行動版網頁在不同國家的速度:

Think with Google

更可以直接與競爭對手的網站做比較:

Think with Google 不同網站比較

也可以針對個別的網頁去進行檢測,並給予優化建議:

Think with Google 網頁優化

總之,這年頭使用手機瀏覽網站的人比使用電腦的人多太多了,記得除了網頁版,行動版也要好好優化。

要記住,速度永遠是個主觀的存在

很多的網站新手常常會犯一項錯誤,都會認為:「我覺得我的網站速度蠻快的,應該不用特地做什麼優化。」

但事實上,速度是個「主觀」的存在,意思就是你自己感覺蠻快的,但不一定對於任何人來說都有這樣的感覺

網站速度優化

速度可能會受到很多因素影響:

  • 使用的瀏覽器種類
  • 看網站的裝置種類
  • 該地點的 wifi 速度
  • 該國家的網路環境…

所以你不能保證說,每個人對於你網站速度的感覺都一樣,我們能做到的也就是盡可能針對不同的狀況去優化我們的速度。

而避免主觀最好的做法當然就是使用一些測速工具 (例如前面的那幾種),可以針對不同地區、不同瀏覽器、不同裝置進行測試,我們才能客觀的去優化自己的網站。

如果你說,你不是技術人員,這些測速工具的數據你看不懂,那我建議你可以直接詢問身邊的親朋好友,請他們跟你說對於你網站速度的觀感,當樣本數越多,主觀性自然就降低。

結論:功能與速度間還是要有所取捨

最後我想說的是,其實很多時候會遇到這樣的狀況:

  • 想要在網站上加裝某個功能,但連帶的可能就會拖慢網站速度。
  • 而如果選擇了網站速度,可能又會缺乏一些好用的功能。

所以說到底,站主還是要在「功能」與「速度」之間做取捨,兩者很難同時並存,只能從中取得一個平衡。

要去判斷到底什麼該裝?什麼不該裝?而裝了什麼又必須放棄什麼?這沒有任何標準答案,就看每位創作者自己的決定。

更多《SEO急診室》文章

SEO 急診室 #1你真的有思考過SEO是什麼嗎?這些觀念將顛覆你的思維
SEO 急診室 #2文章如何選擇關鍵字?先問問自己,你了解你的客戶嗎
SEO 急診室 #3網站文章如何規劃?把搜尋者困住,你就成功了
SEO 急診室 #4如何下吸睛的標題與描述?掌握人性,就能增加點擊率
SEO 急診室 #5網址URL如何優化?永久連結絕對不可以犯的錯誤
SEO 急診室 #6網站連結該如何優化?你的目標就是讓資訊更完整
SEO 急診室 #7圖片SEO怎麼做?額外曝光機會,不做你會後悔
SEO 急診室 #8如何有舒服的網站設計?讓讀者無壓力閱讀的幾種方式
SEO 急診室 #9如何做好網站速度優化?不懂程式的部落客,你可以這樣做
SEO 急診室 #10淺談 Google Search Console,窺視網站未來的最佳利器
SEO 急診室 #11Social Signal 社群訊號是什麼?它對SEO的影響沒那麼簡單
SEO 急診室 #12網站權重是什麼?重要嗎?破解 Domain Authority 常見迷思

如何做好網站速度優化?不懂程式的部落客,你可以這樣做《SEO急診室#9》 2

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

error: 內容已被保護!
文章目錄
返回頂端