網頁速度 Page speed 如何優化？10 個網站速度優化項目！教學 by 貓熊先生 2021 年 12 月 5 日 2021 年 12 月 5 日 5.4K 網頁速度 Page speed 網頁速度的英文叫做 Page speed，網頁速度 也是 SEO 優化中的一環，因為網頁速度也是兩百多條 SEO 排名要素之一，過慢的網站速度會使你的關鍵字排名受到影響。如果你跟某個網頁搶攻同一個關鍵字，對方網頁兩秒就能打開並載入完畢，而你網頁卻需要花六秒才能完全載入內容，光是這個影響就足以讓你排名受到影響。 網頁速度（Page speed）可以優化的項目很多，包括壓縮靜態檔（Javascript/css）、提升主機伺服器回應速度、優化資料庫查詢、壓縮圖片…等等，這些項目屬於技術性 SEO 優化的一環，雖然技術性 SEO 沒有內容面 SEO 來得那麼重要，但若你的網頁速度（Page speed）過慢，仍然會影響到你的搜尋結果排名。 如果你還不知道網頁速度（Page speed）是什麼，或是不知道怎樣優化自己的網站速度，以及還不了解網頁速度的優化項目一共有哪些，本篇文章會有完整的教學。 內容目錄 Toggle網頁速度（Page speed）是什麼？網頁速度 Page speed （或網站速度）優化項目有哪些？1、提升伺服器回應時間2、替網站增加快取（Cache）機制3、壓縮圖片4、壓縮 html / css / javascript 靜態檔5、內容網站使用AMP6、使用 CDN 服務7、減少轉址（Redirects）8、解決 Javascript 阻礙頁面渲染時間9、善用瀏覽器快取(cache)10、移除未使用的 JavaScript / CSS網頁速度 Page speed 如何影響 SEO？1、網頁速度會影響SEO 排名2、網頁速度 （Page speed）會影響跳出率3、網站速度會影響爬取頁面的數量網頁速度 Page speed 有哪些檢測工具1.Google Page speed2.Web Page Test 網頁速度檢測工具3.Google search console 網站使用者體驗核心指標網頁速度 Page speed 常見問題網頁速度 （Page speed）是什麼？網頁速度（Page speed）會影響關鍵字排名嗎？網頁速度 Page speed 總整理 網頁速度（Page speed）是什麼？ 網頁速度（Page speed），或叫做頁面速度，它是衡量特定頁面內容加載速度的指標。網頁速度越快，意味著使用者打開網頁的時候，可以更快看到第一屏的內容，而不用花時間在等待頁面開啟。 網站速度本身就是 SEO 排名要素之一，在 google search console 裡面你也可以很清楚的看到這個項目。google search console 會顯示你的網站上已索引的網址中，一共有多少網址提供良好的網頁體驗。 Google search console 網頁體驗頁面 另外 google search console 還提供了三個網頁體驗訊號項目：網站使用體驗核心指標、行動裝置可用性跟 https。想了解更細節的說明可以參考下面這篇文章。 Google Search Console 教學 網頁速度 Page speed 指標 關於網頁速度（Page speed）是 SEO 排名要素之一，Matt Cutts 在 Youtube 影片上也證實了這一點。有興趣的人也可以看一下 Matt Cutts 是如何談論網頁速度（Page speed）的。 Matt Cutts 談論 網頁速度（Page speed） 網頁速度 Page speed （或網站速度）優化項目有哪些？ 下面會列舉出，網頁速度 （Page speed）的各種優化項目，如果你的網站速度過慢，你可以試著從這些地方先著手開始。 1、提升伺服器回應時間 提升伺服器回應時間的主要做法就是升級主機硬體，比方說很多虛擬主機商都會提供不同等級的主機選項，有些記憶體例如有1G/2G/4G/8G…等等，CPU 也有各種不同等級。 升級主機是提升網站速度最快的方法之一，它唯一的問題是需要花錢。如果有金錢成本上的考量，也可以從其它網頁速度 （Page speed）的優化項目著手，但提升伺服器回應速度確實是最快提升網站速度的方法之一，而且它“用錢就能解決”。 另外：當你使用硬體配備很差的虛擬主機時，隨著你的網站流量開始慢慢變大，你常常會遇到資料庫連線掛掉的情況，如果這種情況頻繁發生，代表你的主機真的撐不住了，你應該往上升級你的主機。 貓熊先生遇到資料庫常掛掉的情況時，就會將主機性能進行升級。 另外，Google 官方也表示：主機回應的速度最好在 200ms (毫秒) 之內。 2、替網站增加快取（Cache）機制 快取（Cache）機制就是將使用者要的結果先儲存在快取裡，而不需要再跟資料庫連線。常見的快取有檔案快取( file cache) 、記憶體快取(memory cache)…等等，檔案快取是最基本的。 很多內容網站像是 Wordpress，使用的也都是檔案快取（File cache）。 使用快取（Cache）機制可以大大減少資料庫請求數，讓你不用頻繁地跟資料庫建立連線，因此建議每個網站一定都要把快取做好做滿。 3、壓縮圖片 用錢可以解決的事都是小事（例如花錢升級主機性能），不過如果錢是你很大的考量，那麼壓縮圖片則可以算是網頁速度 （Page speed）的重點項目之一。 通常內容網站的 HTML 網頁裡面，檔案最大的通常是圖片，因此有效壓縮圖片，才能大大提升網頁速度 （Page speed）。 這裡推薦使用 TinyPNG 跟 TinyJPG 這兩個線上圖片壓縮工具，它們使用的是無損壓縮，在不讓圖片畫質丟失的前提下，又能將圖片大小縮減50%以上。 圖片壓縮這個優化項目，建議從網站成立的一開始就要做，當你網站流量變大的時候，你會很慶幸自己一開始每次上傳圖片之前，就先壓縮圖片的，因為這對提升網頁速度 （Page speed）很有幫助。 4、壓縮 html / css / javascript 靜態檔 CSS/Javascript 這些檔案都可以叫做靜態檔，都是可以壓縮的。網路上你可以找到很多類似的工具來壓縮你的 CSS/Javascript 檔案。將靜態檔壓縮也可以提升網頁速度 （Page speed）。 5、內容網站使用AMP AMP 的全名叫做 Accelerated Mobile Pages，是 Google 為了提升行動版網頁速度所推出的項目。AMP 並不適合每個網站，通常只有內容網站比較適合加上 AMP。如果你的網站是使用 Wordpress 架設的，通常也只需要安裝一個 AMP 外掛就可以開始使用 AMP了，相當方便。 AMP 的運作機制其實也是一種快取的概念，只是這個快取是存在 Google 伺服器裡面，所以當使用者在手機上打開 AMP 頁面時，你會發現上面的網址是 Google 的網址，因為 Google 把你的網頁儲存在它的快取裡面，當使用者對網站有了第二次的點擊互動時，才會變成使用者自己的網址。 Google 的 AMP 快取機制肯定做得相當好，所以加了AMP 的網站，在行動端的網頁速度 （Page speed）是爆炸快的，通常可能 0.5秒就完全開啟完畢了。 不過 AMP 也有它的缺點，比較適合純內容網站或是新聞網站使用，需要跟使用者有大量互動、會跟後端資料庫聯繫的網站，都不適合加上 AMP。 這裡順便提一點：內容網站加上 AMP，其實可以幫你省錢，因為使用者在行動端開啟的第一個畫面，通通讓 Google AMP 幫你先檔掉了，光是這點就可以幫你省下不少錢以及伺服器的請求數了。 6、使用 CDN 服務 很多虛擬主機服務商都會提供 CDN 服務，像是知名的 AWS 當然也有提供類似服務，叫做 Cloudfront。知名的免費 CDN 服務則是推薦 CloudFlare。 如果你的網站是使用 Wordpress 架設的，通常快取外掛也會有 CDN 的設定，非常方便。 CDN 其實你可以把它當作是最佳化的快取，因為它會從使用者所在的最近的節點去抓取快取，因此 CDN 可以大幅提升網頁速度 （Page speed）。 7、減少轉址（Redirects） 關於什麼是轉址（Redirects），可以參考先前這篇文章：「301 Redirects 轉址」。每一次的轉址都是向伺服器重新提出一次請求，因此你應該減少網站上轉址的網頁數量，替伺服器減少一些負擔。 8、解決 Javascript 阻礙頁面渲染時間 有些 Javascript 會在網頁頁面渲染的時候就先被載入，而當 Javascript 程式碼運行過久的時候，會阻擋網頁被渲染的時間。 要解決這個問題，通常是將網站上的所有 Javascript 檔案放在</body>這個標籤的前面，而將所有 CSS 檔案都放在<head></head>區塊裡面，這樣可以讓網頁快速的先跑出頁面（因為已經先載入CSS，所以不用怕跑出醜陋的頁面），而 Javascript 檔案因為放在</body>標籤前面，所以是頁面渲染快結束的時候再進行讀取。 9、善用瀏覽器快取(cache) 瀏覽器快取可以減少使用者對伺服器的請求，加快頁面載入的時間。使用瀏覽器快取 (cache) 需要在 HTTP Header 中，設定暫存資源的使用期限，暫存的資源通常包含重要的 HTML、CSS、Javascript、圖片等。 10、移除未使用的 JavaScript / CSS 有些網站會使用一些好用的 JavaScript / CSS 資源庫，例如Jquery、bootstrap…等等，又或者是 Wordpress 網站的某些外掛也會加載很多額外的 JavaScript / CSS，那些裡面的 JavaScript / CSS 很多都是沒用到的，可以請工程師處理一下，將它們移除。 上面這十個，就是提升網頁速度 （Page speed）的幾個重點 SEO 優化項目，有需要針對網站速度進行優化的人可以從這些方向著手。 網頁速度 Page speed 如何影響 SEO？ 網頁速度 （Page speed）影響 SEO 是無庸置疑的，下面列出幾點，當你的網站速度/網頁速度過慢的時候，是怎麼影響到你網站的 SEO 關鍵字排名的。 1、網頁速度會影響SEO 排名 網頁速度 （Page speed）本身就是一個 Ranking factor，所以在所有其它條件都不變的情況下，提升網頁速度 （Page speed）可以改善你的搜尋結果排名。Matt Cutt 在上方影片中也提到了這點。 在 Google 官方文件，你也會看到 Google 直接了當的告訴你：網頁速度 Page speed 就是 SEO 排名要素之一。（參考：使用網頁速度做為行動搜尋的排名依據） 網頁速度會影響SEO 排名 2、網頁速度 （Page speed）會影響跳出率 根據 Google 官方資料顯示，網頁載入時間越長，對跳出率的影響就會越大。 舉例如下： 如果網頁載入時間從 1 秒增加到 3 秒，跳出率就會增加 32%。 如果網頁載入時間從 1 秒增加到 6 秒，跳出率就會增加 106%。 網頁速度影響跳出率也可以參考官方說明：網站使用體驗核心指標報告。（下圖是官方說明頁面的截圖） 網頁速度 （Page speed）會影響跳出率 當一個網頁因為網頁速度過慢而導致跳出率超高的時候，排名肯定會受到影響。 3、網站速度會影響爬取頁面的數量 每個網站都會有它的爬取額度（Crawl Budget），網站速度越慢，意味著爬蟲需要等待更久的時間，因此爬取的數量會受到影響。 關於 Google 爬取、索引跟排名，可以參考下面文章。 Google 檢索、索引、搜尋引擎排名與原理 網頁速度 Page speed 有哪些檢測工具 下面列出一些推薦的 網頁速度 Page speed 線上檢測工具，通常這些工具還會直接給你建議，告訴你怎樣優化自己的網站速度。 1.Google Page speed Google PageSpeed Insights 是 Google 官方提供的工具，相當好用。 點擊下方網址，前往「Page speed」。 Page speed 網頁速度檢測工具 接著直接輸入你要檢測的網頁。 Google Page speed 網頁速度檢測工具 Page speed 會跑出各項數據，包括 LCP、CLS…等等，然後下方有最佳化建議，你可以從 Page speed 建議的那些優化項目開始著手。 Page speed 建議的網頁速度優化項目像是有： 排除禁止轉譯的資源提供 next-gen 格式的圖片減少無用的 css減少無用的 javascript使用合適的圖片大小壓縮javascript 想針對自己網站上的網頁速度進行優化的人，建議都可以從 Page speed 給的優化項目開始著手。 Page speed 網頁速度優化項目 2.Web Page Test 網頁速度檢測工具 Web Page Test 同樣是 Google 官方推薦的工具。點擊下方網址前往。 Web Page Test 網頁速度檢測工具 一樣輸入你的網頁網址就可以開始線上進行檢測。 Web Page Test 網頁速度檢測工具 Web Page Test 跟 Page Speed 不同的是，它呈現的是類似瀑布流的頁面，讓你知道你自己的 HTML 網頁上的每個資源需要多長的載入時間。 你可以透過下圖這個瀑布流去優化你網站上的檔案。 Web Page Test 網頁速度檢測工具 3.Google search console 網站使用者體驗核心指標 其實 Google search console 也提供了網頁體驗指標可以讓你直接針對有問題的網頁進行優化。 如果顯示良好的，那就代表該網頁給使用者有良好體驗，如果你的網頁出現在「需要改善」或是「不良」，你就可以前往該頁面進行優化跟檢測。 完整 Google search console 報表教學，可以參考下面網址。 Google search console 教學 Google search console 網站使用者體驗核心指標 上面就是貓熊先生滿推薦的三個網頁速度優化與檢測工具，有需要的人可以使用看看。 網頁速度 Page speed 常見問題 網頁速度 （Page speed）是什麼？ 網頁速度（Page speed），或叫做頁面速度，它是衡量特定頁面內容加載速度的指標。網頁速度越快，意味著使用者打開網頁等待的時間越短。 網頁速度（Page speed）會影響關鍵字排名嗎？ 會的，網頁速度（Page speed）是 SEO 排名要素之一，如果你的網站速度很慢，你的排名就會受到影響。關於網頁速度影響排名，可以參考 Matt Cutts 的影片解說。 網頁速度 Page speed 總整理 要優化網站速度，你可以從下面十個項目著手。 1、提升伺服器回應時間2、替網站增加快取（Cache）機制3、壓縮圖片4、壓縮 html / css / javascript 靜態檔5、內容網站使用AMP6、使用 CDN 服務7、減少轉址（Redirects）8、解決 Javascript 阻礙頁面渲染時間9、善用瀏覽器快取(cache)10、移除未使用的 JavaScript / CSS 要知道你的網站上哪些頁面有網頁速度的問題，導致使用者體驗不佳，你可以使用下面三個網頁速度檢測工具。 1.Google Page speed2.Web Page Test 網頁速度檢測工具3.Google search console 網站使用者體驗核心指標 其他人正在看 Google PageSpeed Insights 網站速度分析工具！優化教學 WebPageTest 網站效能與網頁速度檢測工具，核心網頁體驗指標最佳化工具 網址連結 URLs 是什麼？9個 SEO URL 網址結構設計原則！教學 waterfaller 網頁速度與網站速度核心體驗檢測工具 page speedpagespeedSEO 排名要素網站速度網頁速度 相關文章 WebPageTest 網站效能與網頁速度檢測工具，核心網頁體驗指標最佳化工具 waterfaller 網頁速度與網站速度核心體驗檢測工具 Google PageSpeed Insights 網站速度分析工具！優化教學 網址連結 URLs 是什麼？9個 SEO URL 網址結構設計原則！教學