如何調整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(跳出率),增加訂閱者, 以及收益等等, 是時候花些時間調整網站速度!
如何確認目前網站速度
這裡提供幾個測試網站的位置, 以個人來說, 比較常用是前三個: 透過這些免費線上測試網站, 可以了解目前網站有哪些需要改善的, 有哪些要解決問題, 在每一個測試報告中, 也可以了解如何解決!
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 server, 但其速度大多不怎麼理想,利用CloudFlare DNS代管方式讓DNS lookup時間減少到最低, 可以利用上方的連結去測試網站主機的DNS lookup 時間, 數值越低, 表示server 反應時間越快,就多少能改善其速度!
變更favicon to Base64 image coding
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外掛備份整個網站
<< 後面內容, 持續更新>>