前情提要-2021Google製訂SEO新規則

大家好我是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服務還是一樣，畢竟是免費的)。先來看一眼目前優化後的成果：

PageSpeed Insights-電腦版

PageSpeed Insights-行動版

GTmetrix-加拿大服務器

Pingdom Tools-東京服務器

WEBPAGETEST-臺灣服務器

從WEBPAGETEST可以看到First Byte Time評分很低，被評級爲F，因爲測試出來的FBT超過1000ms，而建議值爲不超過400ms，同樣PageSpeed Insights的分數也受到這個部分的限制，後面會詳細説明。

在優化前先跟大家説明，在國外優化網站速度效能已經有一定歷史了。基本而言，優化網站人員都會有一個共識：所有的測試效能的分數衹能作爲參考，不需要過於追求高分，抓住優化的重點-讓網站瀏覽更快速提升訪問者體驗。因此就算今天你的網站測試出來分數不夠高，但瀏覽體驗不錯，也就不需要太糾結在分數上，各種測試效能的結果衹是作爲優化的方向而不是結果。

本篇的內容基於自己優化的經驗，與大多數英文網站介紹的效能優化結構可能不盡相同，但最終還是需要根據自己網站的特殊情況，分別討論，不過基本而言，優化WordPress網站速度效能可以分爲以下幾個步驟：

一. 選用效能更好的主機供應商

一個好的主機供應商，除了有更好的服務、更合理的價格以外，更重要的是有更穩定快速的網站內容供應，我們所知的TTFB(Total to First Byte)以及FID(First Input Daley)指標，主要都會受到主機商選擇的影響。如果不確定是否瞭解主機商的選擇，可以查看上一篇主機供應商的介紹以及分類。主機商的挑選通常都在網站上綫之前就需要定下來，根據自己網站的功能需求制定預算，並從自己預算範圍內挑選最適合的主機商。

• 全球入門主機：就入門主機商而言，先前有特別介紹入門主機的選擇，在這就不具體介紹了。本網站正在使用的Bluehost的共用主機方案。
• 全球進階主機：如果預算比較寬裕，可以考慮選擇諸如Kinsta、A2 Hosting、Cloudways等知名主機，考量的因素通常是自己網站受衆的主要使用區域響應速度以及內容傳遞速度。
• Local在地主機：當然如果自己的受衆主要在臺灣，也不需要考慮國外訪問速度，也可以選擇臺灣的主機商，因爲服務器設在臺灣，因此臺灣使用者的內容獲取速度更快，這邊因爲自己沒有使用，而且選擇很多，就不做推薦了。

二. 挑選適合自己的主機託管方案

每個網站主機供應商都會提供許多網站託管方案的選擇，選擇方案的基本原則有以下幾點：

• 價格：不論是否有預算，價格一定是首要考量，價格高的不一定適合自己。
• 功能：挑選適合自己網站功能的方案是另一個重要考量，主要決定的功能分類是電商、文字部落格、較多圖片或影片媒體內容等。
• 主要訪問者地理位置：許多主機商會在全球架設服務器，也會針對服務器地理位置設定不同的方案選擇。諸如Cloudways在東京的服務器方案就常被臺灣網站使用。
• 主機的效能：主機效能主要看的是CPU處理器記憶體及速度，內容儲存空間大小等，這部分通常進階主機商才會提供，因此也是根據自身網站功能需求選擇。

三. 根據需要選擇使用CDN內容供應網路服務

CDN內容傳遞網路(Content Delivery Network)是什麽呢？可以把它理解成，一家CDN網路供應者在全球不同的地理位置都有設服務器，通過網路讓彼此之間連結，使用CDN網路供應服務的網站會通過網路將內容存放在不同地理位置服務器中，訪問者在訪問CDN服務網站時，則會根據訪問者的位置，選擇最近的服務器位置提供網站內容。

如果網站選擇的是入門主機商(服務器內容傳遞速度較慢)，或者希望全球訪問者都能快速訪問網站，又或者主機商友Bandwidth帶寬流量的限制，那麽可以考慮使用CDN服務。當下最熱門的綜合CDN服務商便是Cloudflare，許多全球優秀的主機都會跟Cloudflare合作，因此也作爲許多入門主機使用者的配合使用對象，我自己也是選擇使用Bluehost+Cloudflare的組合。除了Cloudflare以外，其他CDN供應商最常被網站使用的CDN服務便是圖床功能。將圖片或大媒體文件存放在CDN供應商的服務器，減少主機的負擔，還能提供全球範圍快速的CDN內容傳遞服務，如Cloudinary等。

關於Bluehost+Cloudflare的組合設定將會專門介紹，如果有這部分的需要，歡迎留言讓我們知道。

四. 優化網站圖片-壓縮或使用Webp格式

基本原則是圖片越少越小，載入的速度越快。這部分因爲很容易理解，因此幾乎所有的網站速度優化教學都會提供相關介紹，但是具體要怎麽優化？基本而言可以分爲以下3個步驟：

•  裁剪圖片到合適的尺寸：通常我們上傳的照片如果沒經過裁剪，圖元都會比較大，而且目前攝影的設備越來越好，對大多數非專業照片服務網站而言，照片在放在網站上時其實並不太需要使用到原始尺寸。因此可以通過裁剪圖片，讓圖片的尺寸適合瀏覽設備瀏覽即可。
• 選擇更小的圖片格式：如果要放上網站的圖片是PNG格式，且該圖片不是透明背景，則可以選用JPEG格式或Google發展出的下一代(Next-Gen)圖片格式Webp (目前部分Safari設備還未支援，將來會逐漸普及至所有瀏覽器)，將會獲得更小的圖片大小。
• 壓縮圖片：目前有非常多的方式可以壓縮圖片，綫上壓縮圖片的網站例如Tinyjpg、Squoosh等。如果是WordPress網站也可以通過安裝WP外掛實現，知名的如Shortpixel等。

五. 延緩圖片載入-Lazyload Images

幾乎對許多網站而言，Lazyload 延緩載入圖片都能快速提升網站開啓速度。Lazyload是什麽意思呢？準確來說，就是瀏覽者在快要瀏覽到網站的一些圖片或媒體時，才載入圖片媒體資源，而不是在網站開啓時就載入。這很好理解，因爲初始載入資源變少了，因此網站能更快速的響應。

然而對於不同功能需求的網站而言，Lazyload延緩載入圖片並不一定適合，也有一些人反對延緩載入圖片，認爲這樣會影響訪問者體驗，而且是治標不治本的方法。這個就見仁見智了，按我的理解而言，衹要延緩載入的圖片不會過多的影響到網站想傳達的內容，就可以採用。同時還要權衡網站的屬性，如果網站提供圖片供應服務，需要傳遞大量圖片，設定合適的圖片延緩載入，還會提升訪問者的體驗。

如果使用的是WordPress網站，幾乎所有的網站速度優化外掛都會提供Lazyload圖片延緩載入功能。也有專門的Lazyload外掛，例如A3 Lazyload等。

六. 優化網站字體-Google fonts優化

對於網站而言，如果爲了好看或特定功能需要，而是用到超過3種非系統字體，例如最常被使用的Google fonts的字體，則會在測試網站速度時，發現這些字體的載入大大拖慢了網站的速度。因爲本篇衹介紹原則，詳細的字體優化方法也會再另外説明。優化字體有以下4個方向：

• 減少使用的字體種類：除非特殊需求，通常一個網站不要使用超過3種字體。
• 減少字重數量：字重屬性在字體部分顯示爲Weight，通常從以100爲間隔，從100-900共9種字重。在載入字體時，每種字重都是一個單獨的檔，因此，如果減少使用沒必要的字重。以WordPress網站而言，字體設定的部分不要保留預設值，盡量指定字體和字重屬性。一般而言，400是一般粗細，700是粗體。
• 設定字體形態：除了字重屬性以外，還有一個屬性需要指定，那就是斜體或正常，這個部分也跟字重一樣，一個形態對應一個檔，如未使用到就移除。
• Google Fonts字體集：通常許多網站會使用Google fonts提供的特殊字體，體現個性和美觀，但這個部分需要被好好優化，否則會嚴重拖慢網站速度，之後會專門介紹如何優化。

七. 減少網站載入資源數-Reduce Requests

Request資源包括了CSS/JS等渲染網站外觀和功能的檔以及圖片媒體資源等。上一篇有介紹3個最主要的網站效能測試網站，不論是使用測試網站或是用Google Chrome的開發者功能，都可以查看到載入特定網頁需要的資源數量Requests。一般而言，越少的Requests資源數量，網頁載入速度越快，但也有特例(隨著HTTP/2技術的普及，資源的加載模式改變了，讓資源加載能同時進行，而且細分的資源能減少指標TTB的時間，因此需要視情況調整)。

八. 優化與壓縮CSS/JS/HTML文件

壓縮CSS/JS/HTML文件是什麽意思呢？通常來說，沒有壓縮的CSS樣式檔、JS功能檔及HTML網站語言檔具有更好的可讀性，代碼按照規定樣式分行顯示，在修改時能通過讀代碼知道這部分的具體功能。然而壓縮這些檔就是將所有代碼之間的空格和分行符刪除，從而獲得更小的檔，缺點就是會破壞檔本身的可讀性，讓後期修改變的困難。

但是，如果使用的是WordPress，有許多優秀的外掛可以在不改變原始檔的前提下，通過自動生成新的壓縮檔並載入進網站的方式，保留原始檔的易讀性，也能縮小網站所需載入代碼文件的大小。目前最知名的免費優化外掛就是Autoptimize，然而收費外掛就是WP Rocket。我自己使用的是Autoptimize，這部分的設定將來會再單獨説明。

九. 測試合併CSS與JS檔

以WordPress網站來說，因爲會安裝許多外掛，不同外掛都會載入許多CSS樣式檔或JS功能檔，這些會大大增加網站資源載入Requests數量，通常這會拖慢網站的載入速度(特例在上一部分有説明)。因此，許多WordPress外掛都會提供一個自選功能來合併CSS/JS檔，這個功能會將所有網站載入的CSS樣式檔或JS功能檔分別合併成一個CSS及JS檔。通常這樣的合併會讓一些關聯文件沒辦法找到彼此，而造成一些網站前段顯示的問題。因此多數外掛都會提供一個排除特定CSS／JS檔不被合併的進階設定功能。不同網站的屬性不同，因此在使用這個功能之前，一定要先測試過，需要如何測試也會再單獨説明。

通常合併CSS/JS檔能減少Requests數量，大多數網站都會因此而獲得更快的載入速度，因此在諸如PageSpeed Insights這類網站速度效能測試的結果分數也會更高更漂亮(特別提醒，網站優化重在交互體驗，分數並不是重點)。

十. 優化並本地託管GA代碼

類似於線下商店的POS系統，能幫助門店經營者獲得來客數和消費數據。Google Analysis就像是網站的POS，幫助網站收集訪問數據。因此，大多數網站都會安裝GA代碼。WordPress安裝GA的方法十分容易，衹需要將GA生成的代碼貼到網站的<head>表頭內即可，有許多不同的外掛可以實現，這邊推薦一個外掛Insert Header and Footer。看似幾行簡短的代碼卻常常會拖慢網站的載入速度，因此出現了一些外掛能在自己的服務器上加載GA代碼。這裏推薦最知名的CAOS Host Google Analytics Locally外掛。通過這個外掛，能根據自己網站的需求，調整GA代碼在線下的載入功能，也會因此獲得更快的網站載入速度。

十一. 優化最大內容繪製LCP-預載入重要資源

上篇提到Google在2021年提出的3項重要網路體驗指標將會影響網站的SEO自然排名，最大內容繪製指標LCP(Largest Contentful Paint)就是其中權重占比很高的指標之一。這個指標的主旨在於，載入網站時顯示熒幕範圍內的全部內容所需的時間(可以類比爲網站的第一印象)。然而對於網站而言，首先要載入的資源可能是LOGO/圖片/文字，但是有許多資源可能會因爲外掛的原因而在比較後面才會載入，因此就會大大影響網站的第一眼載入內容的時間。所以，通過網站測試，在確定哪些資源是會影響LCP時間後，特別針對這些資源，使用代碼或外掛的方式預載入這些資源，就可以改善網站的LCP指標。

十二. 測試並優化累計版面配置位移CLS

累計版面配置位移CLS(Cumulative Layout Shift)是另外一個被Google要求的重要網路體驗指標，這個指標主要是在講頁面資源因爲資源載入先後順序，而出現版面的位移。最常被舉的例子就是：電商購物車頁面因爲圖片或其他資源的載入，讓訪問者點擊購買按鈕時版面位移而無法有效交互，大大降低訪問者的網站訪問體驗。上一篇有提到查看如何測試網站的CLS指標，可以立即測試自己網站是否達標。關於優化CLS的方法，也會再單獨詳細説明。

十三. 優化Database數據-爲服務器減負

本篇介紹的最後一點，就是優化Database數據。網站就像電腦和手機一樣，隨著使用時間增長，系統會產生許多多餘的過程文件，這些文件會讓服務器變的無比龐大，也會嚴重影響服務器的初始響應時間。有許多方式可以優化網站Database數據庫，如果是WordPress網站，這裏介紹一個最簡單的方式，安裝外掛Advanced Database Cleaner，免費版其實已經夠用了，當然也可以付費進階清理數據庫檔。在外掛的General clean-up標簽下，會看到所以留存的文章或頁面修訂版本記錄，通常都是系統自動保存下來的舊版檔，如果網站已經確定不會使用到這些舊版本檔，就可以直接清除(在清理之前記得一定要備份數據庫檔，推薦免費WP網站備份外掛UpdraftPlus，關於備份設定再詳細介紹)。

十四. 使用Cache快取外掛

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爲最新版本

PHP是Wordpress建立在網站上的編碼語言，PHP版本由網站託管公司在服務器級別設定。爲了保證網站的安全，我們不僅要保持Wordpress主題和外掛爲最新版本，同時也需要保持PHP版本爲最新。之前有寫關於如何安全更新PHP版本，歡迎參考。更新PHP爲最新版本能獲得以下好處：

• 網站速度更快：PHP最新版本(目前爲7.4)能讓WordPress網站速度更快，可以極大的提高網站性能。相較於較舊版本的PHP，目前版本的PHP能將速度提高3到4倍。
• 網站更加安全：PHP與Wordpress一樣，由其社區進行維護。因爲PHP相當流行，所以常常被駭客當作攻擊的目標。然而最新版本的PHP相較舊版本具有最新的安全功能，因此能更加確保網站的安全。
• 搜索排名提高：因爲SEO中針對網站速度的部分特別提到，更快的網站將受到搜尋引擎的獎勵，因此更快速的網站將會有更高的搜索排名曝光。
• 訪問者體驗好：訪問者在訪問網站時，如果加載時間太長，他們就會離開。因此提升網站速度，讓網站訪問者有更流暢的瀏覽體驗，提升網站成效。
• 網站聲譽受損：一個更安全的網站能保護網站遠離駭客攻擊。一個常常被駭客入侵的網站，不僅會影響網站聲譽，還會帶來相關的運營成本增加。

十六. 使用Gzip或Brotli壓縮

Gzip/Brotli 壓縮是一種文本壓縮算法，經過這兩種格式壓縮過的網站能節約更多字節數，縮小網站大小，從而優化網站載入速度。順帶一提，Brotli算法是由Google開發，相較於Gzip有更高效的壓縮能力，而且目前已經被大多數主流瀏覽器支援，因此如果能選用Brotli壓縮，效能將會更好。點擊測試自己的網站是否已經採用Gzip或Brotli壓縮。如果測試結果顯示您的網站還未採用了其中任何一種壓縮算法，那麼恭喜您，即將獲得另一個提升網站速度的機會。接下來將分別介紹設定Gzip以及Brotli壓縮網站的方法。

如何設定Gzip壓縮網站？

有許多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>

如何設定Brotli壓縮網站？

目前測試的方法是使用Cloudflare的CDN服務，如果已經在使用Cloudflare，那麼可以在speed選項下面的最佳化標籤下開啟Brotli壓縮即可，關於如何最佳化設定Cloudflare，在網絡上可以搜到非常多詳細的設定方法，這裡就不贅述了。

在完成以上所有步驟的優化之後，趕緊來測試一下自己加速後的網站吧！

WordPress網站速度優化總結

網站速度優化的重點是讓訪問者獲得更快速流暢的互動體驗，針對WordPress網站而言，正確完成以上16個步驟的優化，便能讓網站速度獲得巨大的提升，所謂的3秒跳轉魔咒便不會光顧你的網站，也能獲得Google今年SEO政策改變能帶來的自然排名提升，打造三贏局面。網站體驗除了速度以外，安全性能也非常重要，Google早在2020年已經針對網站SSL認證提出要求，對未來而言，一個安全性能高的網站，也將會獲得更優秀的SEO排名結果。點擊閱讀如何優化提升WordPress網站安全性能。如果看完這篇有任何疑問或者有不足的地方，歡迎留言或私訊我們。