WordPress網站效能調校

如何調整Wordpress網站效能, 相信搜尋一下, 即可得到一大堆內容, 而這篇內容會以此網站曾經試過調整過的一些心得分享, 由於內容很多, 之後會持續更新此篇文章!

首先, 為何要改善網站效能? 主要幾個原因:

1.網站速度太慢. 例如:載入時間太久!

2.想有較好的SEO排名

3.改善使用者體驗(user experience)

在網站效能調整之前, 有一個重要因素也要先考慮進去, 就是使用者的網路環境. 例如:離網站主機的距離是否太遠, 以及本身的網路速度不夠! 這些也是會影響載入網站速度慢的其中一個原因.

以下是主要幾個重要事項要注意的:

1.主機的挑選– 主機又分成SharedHosting(分享式主機)/VPS(虛擬主機的進階版)/Dedicated(專屬)Wordpress主機/CloudHosting(雲端主機)..等等而主機商的選擇更是重要, 除了考慮速度/服務/價格/主機遠近挑選,更重要的是穩定度, 所謂uptime的百分比, 大多以99%為主要挑選項目之一. 例:SiteGround/ BlueHost/ A2 Hosting/ Hostgator/GoDaddy/Kinsta/WP Engine..等等, 還有更多其他主機商, 最後二個主機商對初學者來說, 價位上就會比較高一點, 但相對效能/服務也會更好!

2.Theme(佈景主題)-一個輕量化且速度快, 而且經常有更新解決問題/或是增加安全性, 這都是選擇佈景主題重要因素.像是WP內建的Twenty Twenty, 或是GeneratePress/Astra/Neve/StudioPress/Themify..等等!

所有的針對佈景主題調整, 建議在child theme中修改.

可以參考此篇文篇:如何建立子佈景主題3.PHP7.0以上, 目前最新為7.4, 版本越新, 效能/穩定也會好些!

4.圖片輕量化, 合適的圖片解析度, 以及壓縮過的圖檔, 和圖檔格式,主要以jpg為主, 也有更適合且輕量化的webp格式.

5.挑選合適的外掛程式(plugin), 以及移除不再使用的外掛程式.

6.cache plugins, 有許多外掛程式, 像是W3 Total cache/ WP Super Cache /WP Fastest/ WP Rocket(付費), 和Cache Enabler..等等!! 由於Wordpress是屬於dynamic(動態)內容, 所以利用cache外掛程式, 產生static(靜態)畫面, 讓使用者能快速看到呈現所需的內容.

7. .htaccess的調整.這個檔案是在網站的根目錄下, 如果沒有看到這個檔案, 也可以自行建立,名稱為[.htaccess].

後面內容會介紹一些要加的代碼, 可以增加網站的速度與安全性!

8.WordPress版本更新到最新.

 

從這裡開始一步一步到調整網站速度:

速度很重要

Google建議一個網站從連線到完全載入是2秒內,超過這個時間, 訪客有可能就會離開了! 應該沒有人會喜歡慢的網站吧! 而且速度慢也會影響各個搜尋網站的排名, 也就SERP(Search Engine Results Pages)搜尋結果頁! 如果想有更多流量,減少bounch rate(跳出率),增加訂閱者, 以及收益等等, 是時候花些時間調整網站速度!

如何確認目前網站速度

這裡提供幾個測試網站的位置, 以個人來說, 比較常用是前三個: 透過這些免費線上測試網站, 可以了解目前網站有哪些需要改善的, 有哪些要解決問題, 在每一個測試報告中, 也可以了解如何解決!

PageSpeed Insights

GTMetrix

Pingdom Tools

WebSite Speed Test

WebPageTest

PageSpeedGrader 拖慢網站速度

幾個原因會造成網站速度變慢,

1.主機的挑選:

一開始有提到, 以4個主要類別來說, shared hosting會最容易受到影響, 儘管價格比較便宜,比方來說, shared hosting就像是集合式的社區, 當其中幾戶比較不安份,經常進出,也常發出吵鬧聲, 就會影響整個社區,而shared hosting是和其他人共用一個硬體資源, 當有幾個網站流量特別高, 就難免會受到影響而速度變慢了!

2.WordPress環境配置:

系統版本是否更新, 外掛是否更新,佈景主題是否更新, 以及一些沒必要的設定是否有關閉, 像是:引用通知..等等.如果是已經存在的文章,利用[批次編輯]方式選取文章, 然後選編輯, 在[內容更新通知]中設定為[不開放], 最後更新就好了!3.圖片檔案大小的壓縮:

整個Wordpress環境中, 圖片檔應該是佔最大量的, 所以設定一個合適的解析度是很重要的.

可以利用Google Squoosh去壓縮更小的圖檔以加快網站載入的速度!

4.外部的script載入:

像是廣告的javascript 或是字型的載入, 這些都多少會影響網站載入速度.

5.外掛數量過多以及不好的外掛不使用:

一個網站多少是需要外掛程式來增加功能, 但安裝數量越多, 就也較容易影響速度, 同一個功能的外掛可能有好幾個不同的外掛都同時有, 一般來說, 如果能控制在10個以下, 相對地對主機來說負擔就比較輕.也有可能只是因為其中一個外掛而造成速度變慢, 所以在測試網站時,如果不清楚誰造成的, 就全部停用, 再一個一個啟用來找出原因.

也可以透過以下外掛來量測每個外掛的速度,就能找出影響速度是哪些外掛!

外掛名稱:P3 (Plugin Performance Profiler)

安裝一個cache外掛

就像上面第六點有提到, 要加快速度就是使用cache機制, 而它是如何運作呢?

沒有cache 

Visitor–>Wordpress網站–>PHP指令–>MySQL資料庫–>Hosting主機–>HTML內容–>回到Visitor

而在Wordpress(WP)安裝cache外掛後, 當使用者第一次連結網站後, 就會存成一份頁面備份內容(也就是cached copy),之後的visitor就不會再需要繁瑣的過程去接收HTML 內容, 只要從Cached Copy中取回內容, 就可以節省許多等待的時間了!  利用cache功能可提升約2X-5X的載入速度!

Cached

Visitor –>Wordpress網站–> Cached Copy –> HTML內容–>回到Visitor

而各家主機有的也有專屬的cache功能, 像是Bluehost的Performance Management.圖片檔的壓縮

圖檔解析度越高, 相對地的載入時間越長, WP環境裡, 大多都是圖檔, 所以一開始設定要呈現的解析度大小就很重要, 但這沒有一定的標準, 所以端看網站主的調整!

這裡會把圖檔調到一個標準解析度,例如:1024X576 存成jpg檔, 然後再用Google Squoosh線上工具去壓縮圖檔, 然後再上傳到WP裡!

一開始可以先安裝[Smush]外掛程式, 它可以在上傳圖片到WP後台裡時, 先優化圖片大小, 讓原先的圖檔變的更小, 加快載入網站速度, 而且它是免費.除了這個好用的功能, 也有其他可以加快速度的功能.像是:Lazy load或是CDN功能, 或是能完美地調整大小到webP格式的圖檔,不過後面這個功能是需要付費的!使用LazyLoad的功能

接續上面外掛的使用, 可以開啟Lazy Load的功能, 用意為:

只會顯示目前畫面的圖片, 當繼續瀏覽往下時, 圖片才會再度載入, 也就是說, 不會一開始就把文章內的全部圖片都一次載入, 可以加快網站的載入.使用CDN(Content Delivery Network)內容傳遞網路

可參考這篇文章:架站必備的CDN-CloudFlare

 

保持Wordpress更新

維持最新版本,可以讓Wordpress環境更加安全一些, 相對地,效能也會更加穩定.使用[內容摘要]模式

WordPress預設是[完整內容], 當文章全部顯示出來, 只會讓網站載入速度更慢,而且使用者也可能會閱讀不易,所以在WP後台中–>設定–>閱讀, 就可以找到此選項了!留言進行分頁

WP預設是沒有開啟分頁功能, 當留言數過多時, 容易造成網站下載速度變慢, 所以可以自訂顯示幾個留言時,系統自動分頁.分頁較長的文章

較長篇的文章, 通常圖片也會較多, 所以可以用分頁的方式來加快網路下載的速度, 這是WP內建的功能,只要在要分頁的地方加入下列指令就可以, 請記得在[文字]模式中!

<!--nextpage-->

分頁完成後, 就可以到前台看到文章的分頁標示!優化資料庫

在WP後台中–>外掛–>安裝外掛, 輸入[WP-Optimize], 然後安裝啟用!

此外掛可以清除資料庫中的post revisions, 以及垃圾文章, 留言和優化功能! 當然還有其他功能, 算是多合一的外掛. 除了在WP後台中利用外掛優化資料庫, 也可以在主機cPanel來優化資料庫.

維護資料庫的穩定度與效能, 可以使用下列方式去設定!

1.主機cPanel中的[phpMy管理]\資料庫\結構\勾選[全選]

2.挑選在右邊已選擇項目中的:[修復資料表]

3.顯示[您的SQL語法已順利執行]

4.再重複step 1:

5.挑選在右邊已選擇項目中的:[最佳化資料表]

6.此時,就完成資料庫的效能維護了! 可以常使用, 讓資料庫發揮正常的效能! 限制文章修訂版本

在主機cPanel中, 直接編輯wp-config.php這個檔案然後加入下列代碼就可以了!限制每篇文章/頁面只保留最後4個版本, 其他舊版本會自動刪除!

當修訂版本記錄越來越多時,它可能會影響使用者在網站內搜尋文章的速度!

define( 'WP_POST_REVISIONS', 4 );

使用最新的PHP版本

一般主機cPanel中大多可以調整php version, 目前主流為7.0以上, 而建議使用最新的版本.

以Bluehost主機來看, 可以在[PHP管理器]去做挑選版本,如果這裡無法改變的話, 也可以透過線上客服幫忙更改版本. 基本上改到這裡就可以感覺網站速度有些加快了, 也可以試著再用測試網站重新測試一下看分數有沒有提高.

<溫馨提醒>修改任何設定, 還是記得要先備份和記錄內容, 才不會造成網站無法使用!

 

CSS效能優化

一般網頁是HTML為基礎骨幹, 而CSS都則像是裝潢一般, 可以使畫面呈現更好看.但有時過多的特效反而增加內容下載的時間, 以下幾個屬性是會有效能的影響. 除非主機效能很好, 不然能不用就不要用, 可以減輕server的負擔.

box-shadows

border-radius

transparency

transforms

CSS filters

 

CSS最小化

一般修改style.css時, 總是會習慣加一些備註和空格來讓整個程式更加清楚了解, 但其實這些多餘的用不到的內容, 可以利用線上工具做縮小化, 讓檔案變得更小/更輕量化, 加快網路下載速度.

<溫馨提醒>由於線上最小化之後, 所有的css代碼會變成只有一行, 所以會減少易讀性, 在使用之前, 先將此檔備份改名, 會比較建議的方式.

Minify – JavaScript and CSS minifier

ID選擇器(ID selector) 前面不要進行巢狀或寫標籤

.content#footer

or

div #footer

由於ID的權值最大而且是唯一的, 所以不需在前面加入無效的程式碼, 會影響效能.

 

減少DNS lookup時間

DNS lookup

DNS lookup的調整也是增加效能的其中一項, 通常購買的網址都會有自己的DNS server, 但其速度大多不怎麼理想,利用CloudFlare DNS代管方式讓DNS lookup時間減少到最低, 可以利用上方的連結去測試網站主機的DNS lookup 時間, 數值越低, 表示server 反應時間越快,就多少能改善其速度!

變更favicon to Base64 image coding

Base 64 image encoder

favicon–>就是網站上logo圖示, 一般HTML畫面載入完後, 才會再載入它, 也因為如此會多增加一個請求資源! 為了改善網站載入速度, 就會把它轉換為HTML代碼, 而這樣子就不用再從server 端下載.

利用上方連結, 將favicon的圖示上傳, 不論是ico/jpg/png..等等, 都可以使用, 然後按下按鈕[GO]就可以產生代碼了! 如以下所示, 由於代碼很多很長, 所以只擷取一小部份,將兩個單引號中的紅色字體內容全部複製, 然後貼到cPanel中child theme 裡的functions.php, 取代二個橘色區域中的代碼就可以了!

src='data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJvWQLNgB/ZjdXB2Jq17FxY2CkkjGpVOFmkMQT11qO6DSmVYWyxNwcg5bapaNvBj2APYA9gD2AKlAGMOtnB7oWzg90LZwe6Fs4PdCMuBuiONFSOmESy1h/K1mzT3WHNO/GipHTCjwKH0xWViwCw40VI9YEQCmGSYZJgQzKwDh//2Q=='

關閉Gravatar頭像

一般如果不是很在乎留言是否顯示頭像的話,就可以把功能關掉, 這多少也會改善頁面載入的速度!

移除不再使用的媒體檔

從WP後台中–>媒體, 選擇[尚無關聯內容], 就可以知道目前有多少媒體檔是沒有在使用, 可以檢查一下, 確認沒有使用就可以全部移除, 可以節省資料庫的空間,也多少會改善效能!

接下來就會再深入一點, 針對.htaccess文件中做修改以及安裝必要的外掛程式來改善網站的速度!

必裝的外掛

1.Cache Enabler 

請參考此篇文章:[WP小技巧]Cache Enabler輕量化的快取外掛

2.Autoptimize

請參考此篇文章:[WP小技巧]Autoptimize外掛程式, 自動優化網站, 提升讀取速度!

3.WP-Optimize

請參考此篇文章:[WP小技巧]WP-Optimize多合一外掛

4.Limit Login Attempts Reloaded

請參考此篇文章:[WP小技巧]Limit Login Attempts Reloaded

5.UpdraftPlus

請參考此篇文章:[WP小技巧]使用UpdraftPlus外掛備份整個網站

<< 後面內容, 持續更新>>

 

 

返回頂端