WordPress教學效能提升網站維護

不懂程式的 WordPress 速度 優化懶人包

你的網站速度很慢嗎?網站速度絕對會影響你的使用者體驗與 Google 排名!不過,優化網站速度絕對是一門很專門的、很技術性的學問,帶路姬是資深的設計師,今天就來從設計師的角度,用最親民的方式,分享給各位不懂程式的站長們,一些幫助加快網站速度的小技巧,希望對大家有幫助囉!(如果有誤,工程師大大們,請小力鞭策,謝謝 ^_^)

有哪些因素會影響 WordPress 網站速度?

在開始優化速度之前,首先要先知道一下,有哪些主要因素可能會影響網站的速度?

  1. 網路連線狀況(寬頻也有分很多種,也有可能纜線剛好有問題等等,如果你上每個網站都慢時,也有可能是你的網路連線有問題…)
  2. 主機條件狀況(主機也有分很多種,主機本身的條件、主機的設定、主機的狀態等等都會影響網站的速度)
  3. 網站本身狀況(網頁本身肥的跟豬一樣,要運送到你家,當然得花久一點的時間… )

WordPress 網站速度怎麼測量?

可以到 Pingdom 網站做測試,只要三個步驟:

  1. 輸入網址
  2. 選擇「Asia – Japan – Toyko」
  3. 點選「Start Test」

然後你就會看到自己的網站,從日本連線時,會花多少秒數,因為日本是離台灣最近的測試點,並且,這個秒數每次測可能都會有些微的不同,是沒關係的,就只是拿來參考而已,還有一些其他數據,下面會一一解釋。

如何解讀測量結果?

  1. Performance Grade – 表現等級(其實我覺得這個參考就好)。
  2. Page Size – 頁面檔案大小(越小越好)
  3. Load Time – 頁面花多少時間載入(越少越好)
  4. Request – 跟主機要求資料的次數(越少越好)

知道了上述這幾個主要的數字後,我們的目標就很明確了:減少網頁的檔案大小、減少載入的時間、減少跟主機請求資料的次數,要怎麼做呢?

WordPress 優化網站速度的四大方向與七個技巧

一、減少網頁的檔案大小

苗條點才跑得快啊!

試想看看,如果以一秒鐘只可以載入100~400 KB來算,你的網頁如果有4M,可能就要花10~40秒的時間才打得開耶… (當然實際算法還有很多變動因素,很複雜啦,不過還是希望你們有個概念),至少要知道,每個人的電腦每秒鐘能從遠端收到的資訊量就這麼多,網頁檔案越大,當然會花越多的時間載入。

這邊我簡單列出一些減少檔案大小的技巧:

  1. 圖片一定要優化過再上傳,盡量讓每張照片小於200K,300K大概已經極限,我知道你很想要圖片清楚,那就要盡量找能維持圖片清晰度的壓縮方式。而且,每張照片的顏色佈局不同,盡可能手動一張一張來壓縮,可以知道壓縮到什麼大小,他的清晰度仍在可接受範圍。
  2. 避免使用動態 GIF 圖片,動態圖片的檔案大小都非常驚人,除非萬不得已,盡量避免比較好。
  3. 謹慎使用 PNG 圖片,PNG 是可以帶透明度的,是未壓縮的,圖片清晰度很高,但是檔案就會比較大,要謹慎使用,GIF 也是可以帶透明度的,檔案會小很多。
  4. 不要直接上傳影片!現在 YouTube 和 Vimeo 這麼方便,建議最好是上傳到這些影音串流平台,在崁入到網頁裡。
  5. 使用壓縮 HTML、CSS 和 JavaScript 程式檔案的外掛,例如像:Fast Velocity Minify (安裝啟用後什麼都不用做,建議直接使用預設值,只有當網頁排版出現問題時,再把預設有打勾的項目,一個一個取消,看看會不會解決排版的問題)、WP Rocket 或 SG Optimizer (下面會介紹怎麼用)

二、減少 Request (跟主機請求資料的次數)

如果你希望能快一點打開你的網站,你就把他想像成,有人欠你錢沒還,你是要一張一張借據分別打電話跟他要錢?還是借據加總起來,一次要全額比較快?

你在輸入網址,按下Enter的那一剎那,你就是在跟遠端的主機要資料,與其發送一堆要求慢慢要,最好是想辦法減少請求的次數,可以減少一點點溝通的時間…

不懂程式要怎麼減少 Request 呢?

  1. 不用的外掛要關掉,並且最好刪除(避免被駭客偷藏東西)。
  2. 減少使用外掛,外掛越多,通常 Request 越多,網站會越慢。
  3. 盡量使用來源可靠的外掛,通常程式會寫的比較好。
  4. 盡量使用速度快的佈景主題(可以參考主題的介紹與評價、還有帶路姬的推薦清單)。
  5. 使用合併程式檔案的外掛,例如:Fast Velocity Minify,(安裝啟用後什麼都不用做,建議直接使用預設值,只有當網頁排版出現問題時,再把預設有打勾的項目,一個一個取消,看看會不會解決排版的問題)或 WP Rocket。(執行合併前,建議還是確定網站有先備份好喔!

三、WordPress 選對主機很重要!

簡單一句話,一分錢、一分貨,如此而已。

很多人貪便宜,買了一年不到2000元的主機,期待他的網站會飛,其實蠻不切實際的。

帶路姬選 WordPress 主機,很在乎的點有幾個:

  1. 網站速度要穩定 (Bluehost 普通, SiteGround 很快, Cloudways 非常快)
  2. 網站不斷線
  3. 客服速度很快、而且他們真的懂 WordPress
  4. 主機商有足夠的應變 DDoS 的能力 (大量惡意攻擊)
  5. 主機商規模大、歷史悠久
  6. 主機商對 WordPress 非常有經驗,讓主機設定在適合 WordPress 運行的狀態。
  7. 主機商有提供專門給 WordPress 使用者的方案
  8. 是 WordPress 官方推薦的主機商。(BluehostSiteGround 都是)
  9. 世界等級的主機商,有百萬人的見證。

所以,在我十幾年的使用經驗後,我最後只敢推薦這三個主機給各位,如果你目前用的主機讓你不滿意,你可以放心搬到這三個主機來 (Bluehost, SiteGround, Cloudways),特別是 SiteGround 主機,帶路姬有完整的購買、搬家到 SiteGround、與管理 SiteGround 主機的教學。

千萬不要小看主機的差別,帶路姬聽過太多從其他各大知名主機搬家到 SiteGround 的案例… 搬家後,我聽到的都是… 「相見恨晚啊… 」。

帶路姬近期也正在錄製 Bluehost 主機Cloudways 主機的教學,如果你有興趣的話,請記得在頁尾加入電子報的通知喔!

四、使用 SiteGround 主機限定的免費加速外掛!

「SG Optimizer」— SiteGround 網站優化器全攻略

接下來帶路姬要介紹的這個外掛真的超棒!功能很多、效果很好、使用超簡單,最重要的是,只要你是 SiteGround 主機的用戶,就完全不用另外花錢!

因為使用 SiteGround 主機來架設 WordPress 網站的客戶真的非常多,SiteGround 主機花了額外的心力推出了這款外掛,希望幫助不懂程式的站長朋友們,透過簡單的設定,就能輕鬆的將 WordPress 網站與主機做很好的結合,讓主機發揮最好的效能!

如果你的網站是從 SiteGround 主機直接一鍵快速安裝的,通常 SG Optimizer 已經安裝好在你的外掛清單裡。在你的後台,左手邊的選單,會看到「SG Optimizer」的選項。

1. SUPERCACHER SETTINGS (一般設定)

2. ENVIRONMENT OPTIMIZATION (主機環境設定)

3. FRONTEND OPTIMIZATION (前端程式碼優化)

4. IMAGE OPTIMIZATION (圖片優化)

其他WordPress 優化網站速度的小技巧~

1. 使用 Lazy Loading (惰性載入)技術或外掛

Lazy Loading 是一種技術,很簡單的來說:

  1. 視窗捲軸捲到哪,頁面中的內容就載入到哪,也就是說,不用讓訪客等整個頁面都全頁載入完畢才開始顯示內容。
  2. 可以從進入頁面的那一秒起,透過這個技術,來決定顯示的優先順序。像是,直接先顯示文字、再開始顯示圖片或影片等等。

可是不懂程式的人該怎麼辦呢?

有很多外掛都有提供 Lazy Loading 的功能。像是上面提到的SG Optimizer(SiteGround主機專用)、WP Rocketa3 Lazy Load

另外需要注意的是,對不懂程式的人來說,可能只能安裝完外掛後,實驗性的啟用看看某些功能,然後到每個網頁檢查一下,看看會不會造成網頁排版亂掉,或顯示不正常等等,如果有的話,表示該外掛可能和你的佈景主題不相容喔!可以換一個外掛試試看。

2. 使用 GZIP 壓縮檔案

又是一個看不懂的專有名詞XD… 不用怕,他和ZIP檔案的概念是類似的,有壓縮檔案的意思,GZIP就是在網站主機傳送資料給你的訪客時,先壓縮一下再傳到訪客的瀏覽器上,網頁載入的速度自然可以提高很多喔。

GZIP 因為要和主機端有所搭配,他的啟用方式就要依據你選擇的主機商而有所不同。

  • SiteGround 主機的話,可以參考上面SG Optimizer 的第二個影片。
  • Cloudways 主機的話,官方是建議搭配 Breeze 的外掛,就可以簡單的啟用了喔,詳情可以參考官方的教學

3. 使用 Cache 網站快取

Cache 又是什麼呢?工程面要說起來,大家應該會跟帶路姬一樣,暈頭轉向或睡著了…我就來解釋一點我所知道的 Cache(網站快取)吧~

你可以他想像成,小虎打開你的首頁時,網站主機要把首頁裡的內容,計算排列組合好,然後再傳給小虎。小花來打開你的首頁時,網站主機又重複做了一次計算排列組合,然後再傳給小花。每個訪客來你的首頁,明明都是打開同一個首頁,網站主機卻重複在計算排列組合,多花很多重複的時間。

因此,如果我們把計算排列組合好的網頁,存成一個獨立的頁面,讓每個訪客來首頁,都直接看這個計算排列組合好的頁面就可以了,不用再一直重複計算了,這個暫存的獨立頁面就是 Cache(快取)。

據我知道,快取有分很多種,主機資料送到訪客螢幕上的過程當中,不只一個地方可以產生快取,所以說起來是蠻複雜的。

那不懂程式的新手們該怎麼辦呢?簡單的說,就兩個步驟吧:
  1. 啟用快取外掛(上面SG Optimizer的第一個影片、WP RocketWP Super Cache 等等)
  2. 當你更新網站後,網頁前台卻看起來好像沒有更新,大概就是被「快取頁面」暫時擋住了真正的更新,這時請「Purge Cache 清除快取」就可以了。

快取外掛有分很多種,網路上 Google 「快取外掛」就很多教學,帶路姬就不一一介紹了。我自己最常用的還是 WP Rocket,為什麼呢?因為我只要花一點點錢,他就包含了所有優化速度時可以用的技術,都是勾一勾就可以了,我就不用分別安裝好幾個外掛,還要擔心外掛彼此間的相容性。

4. 升級到PHP7 (比較進階一點)

PHP的版本,對網頁的速度也有點影響。就有點像,iOS的版本,升級到越新,通常會運算的越快。不過,你猜對了,你有沒有發生過,iPhone或Android升級的太快,結果有些APP卻打不開或閃退了?

因此,升級到PHP7之前,建議你一定要先備份你的網站,或者在測試環境中先執行,不要直接升級喔,有時候升級完,你的主題模板或外掛不相容的話,網站會壞掉喔!

如何升級呢?

通常很簡單,Bluehost 和 SiteGround 主機的話,通常在 cPanel 主機控制台,就可以找到一個PHP Version (PHP版本的選項),在那裡改就可以了喔。

SiteGround 主機的話,也可以參考上面的 SG Optimizer 的第二個影片,透過外掛也可以設定喔!

5. 定期清理資料庫

其中一個原因是,因為WordPress會自動幫你儲存很多草稿,我曾經看過有客戶的網站有幾千篇草稿的,造成他在編輯內容時,後台超級慢。

要如何清理資料庫呢?

帶路姬通常是直接透過 WP Rocket 外掛來設定每週自動清理。如果你想要免費的外掛的話,也可以考慮 WP-Optimize 這種外掛喔。

6. 使用CDN (比較進階一點)

CDN,是一種技術,簡單的說,他會幫你複製你的網站的某些檔案或快取頁面到世界各地的主機伺服器,當你的訪客瀏覽你的網站時,CDN就會判斷哪一個主機伺服器離你的訪客最近,就可以從最近的主機來傳遞給他,速度自然就比較快了。

那要怎麼使用 CDN 呢?

SiteGround 主機本身有整合免費版的 CloudFlare 的 CDN 服務喔!可以參考官方的教學文件

Cloudways 主機的話,最簡單的方式,是可以在他們的後台直接啟用他們的 CDN服務,他們的 CDN 是要另外付費的,以流量計費,越多人拜訪你的網站,傳遞資料量越多,費用就會越高喔。

7. 其他的小小小技巧…

  • 文章列表請使用文章摘要(如何設定摘要),會比直接顯示長篇文章快一歇。
  • 如果你的文章非常長,也可以考慮使用 Page Break 分頁功能,這樣也會讓單頁載入的快一些。
利用「分頁符號」來把長的頁面分頁。

身為不懂程式的朋友,是不是還是有蠻多事情可以做,來優化你的 WordPress 網站的速度呢?希望這篇文章對你有幫助喔!歡迎分享給更多需要的人。


如果你是超級新手,建議跟著帶路姬的「五天自學衝刺班」開始學起,只要每天一小時,帶路姬用影片手把手,帶你做好第一個網站!

用五天下班時間做好第一個形象作品集網站
用五天下班時間做好第一個型錄購物網站

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

相關文章

發佈留言

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

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link
Close