公司地址:
台北市中山區建國北路二段
週一~週五: 9am – 7p
週六、日: 10am – 7pm
大家好我是Alex,2021年對於部落客以及自媒體網站擁有者的挑戰之一無疑是來自Google宣佈的:今年5月開始,網站的速度將對SEO排名產生影響,並指出網站需要能達到具有關鍵意義的3項網站體驗核心指標(Core Web Vitals benchmarks):分別是最大內容繪製(Largest Contentful Paint – LCP)、首次輸入延遲(First Input Delay – FID)、纍計畫面偏移(Cumulative Layout Shift – CLS)。
上文提到Google在2021年會調整網站速度不佳的網站的SEO自然排名,因此本文開始將介紹今年過年期間我自己是如何優化網站(最好是ATOS)的速度效能的。因爲每個網站都不一樣(不同主機/主題/外掛/功能需求/圖片多少等),本著簡單易懂的方式,本篇將會寫出優化網站的總體輪廓,各步驟的細節也將逐步整理出來,您也可以根據自己的需要分別查看。因爲大多數的網站速度優化文章大多是英文介紹,而且文章數量類型龐大,在試錯的過程中我自己也走了不少彎路,希望能通過這邊的整理,真的幫助到有需要優化WordPress網站速度效能需求的你。 這裏提到一點,因爲我使用的主機是Bluehost共用主機方案,主機位置在美國,且因爲價格低,效能並不是太好,因此我的服務器初始響應時間比較長-約爲1000ms左右,導致Total to First Byte時間較長(已經使用Cloudflare的CDN服務還是一樣,畢竟是免費的)。先來看一眼目前優化後的成果:
從WEBPAGETEST可以看到First Byte Time評分很低,被評級爲F,因爲測試出來的FBT超過1000ms,而建議值爲不超過400ms,同樣PageSpeed Insights的分數也受到這個部分的限制,後面會詳細説明。
在優化前先跟大家説明,在國外優化網站速度效能已經有一定歷史了。基本而言,優化網站人員都會有一個共識:所有的測試效能的分數衹能作爲參考,不需要過於追求高分,抓住優化的重點-讓網站瀏覽更快速提升訪問者體驗。因此就算今天你的網站測試出來分數不夠高,但瀏覽體驗不錯,也就不需要太糾結在分數上,各種測試效能的結果衹是作爲優化的方向而不是結果。
本篇的內容基於自己優化的經驗,與大多數英文網站介紹的效能優化結構可能不盡相同,但最終還是需要根據自己網站的特殊情況,分別討論,不過基本而言,優化WordPress網站速度效能可以分爲以下幾個步驟:
一個好的主機供應商,除了有更好的服務、更合理的價格以外,更重要的是有更穩定快速的網站內容供應,我們所知的TTFB(Total to First Byte)以及FID(First Input Daley)指標,主要都會受到主機商選擇的影響。如果不確定是否瞭解主機商的選擇,可以查看上一篇主機供應商的介紹以及分類。主機商的挑選通常都在網站上綫之前就需要定下來,根據自己網站的功能需求制定預算,並從自己預算範圍內挑選最適合的主機商。
每個網站主機供應商都會提供許多網站託管方案的選擇,選擇方案的基本原則有以下幾點:
CDN內容傳遞網路(Content Delivery Network)是什麽呢?可以把它理解成,一家CDN網路供應者在全球不同的地理位置都有設服務器,通過網路讓彼此之間連結,使用CDN網路供應服務的網站會通過網路將內容存放在不同地理位置服務器中,訪問者在訪問CDN服務網站時,則會根據訪問者的位置,選擇最近的服務器位置提供網站內容。
如果網站選擇的是入門主機商(服務器內容傳遞速度較慢),或者希望全球訪問者都能快速訪問網站,又或者主機商友Bandwidth帶寬流量的限制,那麽可以考慮使用CDN服務。當下最熱門的綜合CDN服務商便是Cloudflare,許多全球優秀的主機都會跟Cloudflare合作,因此也作爲許多入門主機使用者的配合使用對象,我自己也是選擇使用Bluehost+Cloudflare的組合。除了Cloudflare以外,其他CDN供應商最常被網站使用的CDN服務便是圖床功能。將圖片或大媒體文件存放在CDN供應商的服務器,減少主機的負擔,還能提供全球範圍快速的CDN內容傳遞服務,如Cloudinary等。
關於Bluehost+Cloudflare的組合設定將會專門介紹,如果有這部分的需要,歡迎留言讓我們知道。
基本原則是圖片越少越小,載入的速度越快。這部分因爲很容易理解,因此幾乎所有的網站速度優化教學都會提供相關介紹,但是具體要怎麽優化?基本而言可以分爲以下3個步驟:
幾乎對許多網站而言,Lazyload 延緩載入圖片都能快速提升網站開啓速度。Lazyload是什麽意思呢?準確來說,就是瀏覽者在快要瀏覽到網站的一些圖片或媒體時,才載入圖片媒體資源,而不是在網站開啓時就載入。這很好理解,因爲初始載入資源變少了,因此網站能更快速的響應。
然而對於不同功能需求的網站而言,Lazyload延緩載入圖片並不一定適合,也有一些人反對延緩載入圖片,認爲這樣會影響訪問者體驗,而且是治標不治本的方法。這個就見仁見智了,按我的理解而言,衹要延緩載入的圖片不會過多的影響到網站想傳達的內容,就可以採用。同時還要權衡網站的屬性,如果網站提供圖片供應服務,需要傳遞大量圖片,設定合適的圖片延緩載入,還會提升訪問者的體驗。
如果使用的是WordPress網站,幾乎所有的網站速度優化外掛都會提供Lazyload圖片延緩載入功能。也有專門的Lazyload外掛,例如A3 Lazyload等。
對於網站而言,如果爲了好看或特定功能需要,而是用到超過3種非系統字體,例如最常被使用的Google fonts的字體,則會在測試網站速度時,發現這些字體的載入大大拖慢了網站的速度。因爲本篇衹介紹原則,詳細的字體優化方法也會再另外説明。優化字體有以下4個方向:
Request資源包括了CSS/JS等渲染網站外觀和功能的檔以及圖片媒體資源等。上一篇有介紹3個最主要的網站效能測試網站,不論是使用測試網站或是用Google Chrome的開發者功能,都可以查看到載入特定網頁需要的資源數量Requests。一般而言,越少的Requests資源數量,網頁載入速度越快,但也有特例(隨著HTTP/2技術的普及,資源的加載模式改變了,讓資源加載能同時進行,而且細分的資源能減少指標TTB的時間,因此需要視情況調整)。
壓縮CSS/JS/HTML文件是什麽意思呢?通常來說,沒有壓縮的CSS樣式檔、JS功能檔及HTML網站語言檔具有更好的可讀性,代碼按照規定樣式分行顯示,在修改時能通過讀代碼知道這部分的具體功能。然而壓縮這些檔就是將所有代碼之間的空格和分行符刪除,從而獲得更小的檔,缺點就是會破壞檔本身的可讀性,讓後期修改變的困難。
但是,如果使用的是WordPress,有許多優秀的外掛可以在不改變原始檔的前提下,通過自動生成新的壓縮檔並載入進網站的方式,保留原始檔的易讀性,也能縮小網站所需載入代碼文件的大小。目前最知名的免費優化外掛就是Autoptimize,然而收費外掛就是WP Rocket。我自己使用的是Autoptimize,這部分的設定將來會再單獨説明。
以WordPress網站來說,因爲會安裝許多外掛,不同外掛都會載入許多CSS樣式檔或JS功能檔,這些會大大增加網站資源載入Requests數量,通常這會拖慢網站的載入速度(特例在上一部分有説明)。因此,許多WordPress外掛都會提供一個自選功能來合併CSS/JS檔,這個功能會將所有網站載入的CSS樣式檔或JS功能檔分別合併成一個CSS及JS檔。通常這樣的合併會讓一些關聯文件沒辦法找到彼此,而造成一些網站前段顯示的問題。因此多數外掛都會提供一個排除特定CSS/JS檔不被合併的進階設定功能。不同網站的屬性不同,因此在使用這個功能之前,一定要先測試過,需要如何測試也會再單獨説明。
通常合併CSS/JS檔能減少Requests數量,大多數網站都會因此而獲得更快的載入速度,因此在諸如PageSpeed Insights這類網站速度效能測試的結果分數也會更高更漂亮(特別提醒,網站優化重在交互體驗,分數並不是重點)。
類似於線下商店的POS系統,能幫助門店經營者獲得來客數和消費數據。Google Analysis就像是網站的POS,幫助網站收集訪問數據。因此,大多數網站都會安裝GA代碼。WordPress安裝GA的方法十分容易,衹需要將GA生成的代碼貼到網站的<head>表頭內即可,有許多不同的外掛可以實現,這邊推薦一個外掛Insert Header and Footer。看似幾行簡短的代碼卻常常會拖慢網站的載入速度,因此出現了一些外掛能在自己的服務器上加載GA代碼。這裏推薦最知名的CAOS Host Google Analytics Locally外掛。通過這個外掛,能根據自己網站的需求,調整GA代碼在線下的載入功能,也會因此獲得更快的網站載入速度。
上篇提到Google在2021年提出的3項重要網路體驗指標將會影響網站的SEO自然排名,最大內容繪製指標LCP(Largest Contentful Paint)就是其中權重占比很高的指標之一。這個指標的主旨在於,載入網站時顯示熒幕範圍內的全部內容所需的時間(可以類比爲網站的第一印象)。然而對於網站而言,首先要載入的資源可能是LOGO/圖片/文字,但是有許多資源可能會因爲外掛的原因而在比較後面才會載入,因此就會大大影響網站的第一眼載入內容的時間。所以,通過網站測試,在確定哪些資源是會影響LCP時間後,特別針對這些資源,使用代碼或外掛的方式預載入這些資源,就可以改善網站的LCP指標。
累計版面配置位移CLS(Cumulative Layout Shift)是另外一個被Google要求的重要網路體驗指標,這個指標主要是在講頁面資源因爲資源載入先後順序,而出現版面的位移。最常被舉的例子就是:電商購物車頁面因爲圖片或其他資源的載入,讓訪問者點擊購買按鈕時版面位移而無法有效交互,大大降低訪問者的網站訪問體驗。上一篇有提到查看如何測試網站的CLS指標,可以立即測試自己網站是否達標。關於優化CLS的方法,也會再單獨詳細説明。
本篇介紹的最後一點,就是優化Database數據。網站就像電腦和手機一樣,隨著使用時間增長,系統會產生許多多餘的過程文件,這些文件會讓服務器變的無比龐大,也會嚴重影響服務器的初始響應時間。有許多方式可以優化網站Database數據庫,如果是WordPress網站,這裏介紹一個最簡單的方式,安裝外掛Advanced Database Cleaner,免費版其實已經夠用了,當然也可以付費進階清理數據庫檔。在外掛的General clean-up標簽下,會看到所以留存的文章或頁面修訂版本記錄,通常都是系統自動保存下來的舊版檔,如果網站已經確定不會使用到這些舊版本檔,就可以直接清除(在清理之前記得一定要備份數據庫檔,推薦免費WP網站備份外掛UpdraftPlus,關於備份設定再詳細介紹)。
Cache快取外掛是在做什麽呢?簡單來説,就是通過給網站載入所需的資源加上一個Header屬性cache-control,通過設定緩存最大保存時間max-age,告訴訪問者的瀏覽器可以緩存這個資源,以便縮短下次載入的時間。目前許多網站使用Google的AMP技術在行動設備端能秒開網頁,也是因爲Google提前緩存了這個網頁的內容。因此,正確的設定和使用緩存能大大提升網站開啓速度,改善訪問者瀏覽體驗。
WordPress的快取外掛非常非常多,網路上的評測也非常多,但是衹是適合自己的才是最好的。免費的外掛裏面,我自己使用過功能最全的W3 Total Cache,需要設定的地方真的非常多,不建議剛接觸使用WP架設網站的朋友。除了W3TC以外,優秀的知名緩存軟體還有諸如WP Fastest Cache, Comet Cache, Breeze(由Cloudways主機商開發)等。收費的外掛一樣最知名的還是WP Rocket,這個外掛集合了非常全面的網站優化功能,也包括了網站快取功能。
PHP是Wordpress建立在網站上的編碼語言,PHP版本由網站託管公司在服務器級別設定。爲了保證網站的安全,我們不僅要保持Wordpress主題和外掛爲最新版本,同時也需要保持PHP版本爲最新。之前有寫關於如何安全更新PHP版本,歡迎參考。更新PHP爲最新版本能獲得以下好處:
Gzip/Brotli 壓縮是一種文本壓縮算法,經過這兩種格式壓縮過的網站能節約更多字節數,縮小網站大小,從而優化網站載入速度。順帶一提,Brotli算法是由Google開發,相較於Gzip有更高效的壓縮能力,而且目前已經被大多數主流瀏覽器支援,因此如果能選用Brotli壓縮,效能將會更好。點擊測試自己的網站是否已經採用Gzip或Brotli壓縮。如果測試結果顯示您的網站還未採用了其中任何一種壓縮算法,那麼恭喜您,即將獲得另一個提升網站速度的機會。接下來將分別介紹設定Gzip以及Brotli壓縮網站的方法。
有許多WordPress優化外掛提供Gzip壓縮的選項,這裡提供2种設定的方法:第一個是安裝Breeze快取外掛,如果還未安裝快取外掛,那麼便可以採用這個方法,在設定網站快取同時,只需要在基本設定內勾選“Gzip 壓縮”即可;第二個設定的方法需要修改代碼,首先要先確認自己的網站服務器類別,這裡以最好是ATOS舉例,網站使用的是Bluehost主機,因此服務器是Apache servers,那麼只需要去到網站後臺,將下面代碼複製貼上到.htaccess檔案內即可,修改檔案這個部分在優化網站安全文章中有詳細介紹。
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
目前測試的方法是使用Cloudflare的CDN服務,如果已經在使用Cloudflare,那麼可以在speed選項下面的最佳化標籤下開啟Brotli壓縮即可,關於如何最佳化設定Cloudflare,在網絡上可以搜到非常多詳細的設定方法,這裡就不贅述了。
在完成以上所有步驟的優化之後,趕緊來測試一下自己加速後的網站吧!
網站速度優化的重點是讓訪問者獲得更快速流暢的互動體驗,針對WordPress網站而言,正確完成以上16個步驟的優化,便能讓網站速度獲得巨大的提升,所謂的3秒跳轉魔咒便不會光顧你的網站,也能獲得Google今年SEO政策改變能帶來的自然排名提升,打造三贏局面。網站體驗除了速度以外,安全性能也非常重要,Google早在2020年已經針對網站SSL認證提出要求,對未來而言,一個安全性能高的網站,也將會獲得更優秀的SEO排名結果。點擊閱讀如何優化提升WordPress網站安全性能。如果看完這篇有任何疑問或者有不足的地方,歡迎留言或私訊我們。
原文出處:2021網站優化大集合-16步提升WordPress網站速度-提升SEO排名
查看更多內容:數據分析