網站速度優化

如何做好網站速度優化?

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

前言

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

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

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

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

如果你對 SEO 有興趣,想要了解更多 SEO 知識,那麼我未來有計劃籌備一堂 SEO 的課程《SEO終極處方箋》,會站在部落格經營者的角度,帶領大家做好部落格的 SEO 及內容行銷。你可以立即加入課程等候名單,將會接收到關於課程的第一手資訊。

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

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

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

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

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

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

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

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

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

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

網站速度如何影響SEO?

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

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

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

網路爬蟲

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

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

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

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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

#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測量結果
Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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

#1 選擇優良主機

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

這部份把握兩個點:

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

我目前自己這個網站是使用 Cloudways,主機位置選擇日本機房,在各方面的速度都還不錯,給大家做個參考。

#2 調整圖片大小

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

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

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

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

#3 調整網站功能

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

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

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

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

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

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

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

2. 精簡網站側邊欄

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

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

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

#4 降低廣告數量

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

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

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

#5 減少內嵌工具

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

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

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

#6 安裝快取外掛

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

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

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

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

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

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

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

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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

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

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

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

Think with Google

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

Think with Google 不同網站比較

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

Think with Google 網頁優化

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

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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

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

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

網站速度優化

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

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

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

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

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

Call To Action

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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

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

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

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

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

更多《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 有興趣,想要了解更多 SEO 知識,那麼我未來有計劃籌備一堂 SEO 的課程《SEO終極處方箋》,會站在部落格經營者的角度,帶領大家做好部落格的 SEO 及內容行銷。你可以立即加入課程等候名單,將會接收到關於課程的第一手資訊。

你是部落客嗎?是否有流量或收益上的困難?還是遲遲找不到網站方向?那也許我能幫助你,我目前已經幫助過上百位部落客優化網站,點這邊了解更多!

如果你想要更密切追蹤我的動態,歡迎加入 Dean 的 Telegram 秘密基地。我會把我撰寫的文章,以及平常看到不錯的資訊在第一時間分享給大家。

如果這篇文章有幫助到你,可以不限金額斗內我,或花 30 秒登入 LikeCoin 帳戶,並點擊下方拍手按鈕,免費支持我。(也能加入讚賞公民點此了解更多)

Leave a Comment

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