使用子網域儲存媒體庫來優化 WordPress 網站速度

如何使用子網域儲存圖片來增加網頁加載的速度?開啟一個網頁所需的加載時間不僅僅是由您的主機服務器和網絡速度來決定,還有一部分是由你所使用的瀏覽器種類來決定。

子網域為何能提昇網站速度?

因為所有的瀏覽器可以同時對同一個網域進行連接的數量上限,此限制因瀏覽器而異,有的可能低至 6 或甚至高達 17。您可以在 Browserscope 網站這裡查看瀏覽器列表及其各自的限制。

※注意:
connections per hostname 是瀏覽器對同一個網域進行的並發 http 請求的最大數量。為了增加並發連接的數量,可以在不同的網域中託管資源(例如:圖片)。但是跨越所有網域,您不能超過 Max Connections(瀏覽器將打開的最大連接數)。

就因上述的原理,每加載一個圖片都要用掉一個瀏覽器可用的連接數。一旦達到連接數上限,其它的請求就需要排隊,直到有連接可用。

這對一般的部落格或圖片少的網站,可能沒有甚麼感覺;如果是一個圖片網站,需要多個連接數的網站上,這真的可以縮短頁面的加載時間。

所以使用子網域來儲存媒體庫,將有助於加速您的網站頁面加載速度,因為子網域和主網域被視為不同的網域。因此,您的主網域加上子網域,可以達到 2 倍數量的可用連接數。

開始創建一個子網域

如果網站是採用虛擬主機架設,常用的管理介面是 cPanel,筆者這裡以 cPanel 創建方式作說明,例如:pic.wpsite.com。

cpanel-created-subdomain

注意:如果主網域有 https 加密證書,子網域也需要 https 加密證書,避免造成混合內容。

在 WordPress 中更改變圖片上傳的位置

WordPress 3.5 之後,預設媒體存儲位置的設置已被刪除,為了方便我們更改圖片上傳到子網域的路徑,需要安裝一個簡單 WP Original Media Path 外掛,來恢復此項設定功能。

啟用後,輸入以下的設定:

wp-original-media-path-setting

  • 上傳的檔案將儲存於此目錄 (Store uploads in this folder)
    完整的 URL 文件路徑,wp-image(這是您的子域名路徑,請更改域名為您的子域名)
  • 完整的檔案網址 (Full URL path to files)
    請填入子域名的網址,如 https://pic.wpsite.com/images(請更改域名為您的子域名)

如果這是一個新建的 WordPress 網站,步驟到這邊就可以實現圖片與主網站分開存放,往後您在媒體庫上傳圖片時,圖片真實存放在子網域的『images』資料夾內。

如果是運行一段時間的網站,請繼續下面的步驟…

將現在運行中的網站圖片移動到新的(子網域)圖片資料夾

現在我們已經創建了子網域,並且也更動了原本 WordPress 媒體庫的上傳位置,我們現在需要將現有的圖片文件移動到新的位置。

可利用 cPanel 的檔案管理或者是 FileZilla 的 FTP 軟體,將原先存放在【wp-content/uploads】中的所有文件全部移動到子網域的【images】資料夾內,在移動過程中請保持目錄結構。

備份您的 WordPress 資料庫

備份資料庫,請不要忘記。在進行下面的步驟之前,一定要先備份資料庫,因為很重要所以再說一遍:要先備份資料庫!

修改資料庫中圖片路徑

要更新 WordPress 資料庫中的圖片路徑,需要進入『phpmyadmin』管理界面,接著選取要修改的 WordPress 資料庫,點擊 SQL 輸入底下的 sql 更新代碼,即可將現有圖片路徑更改成新的子網域的圖片路徑:

UPDATE wp_posts SET post_content = replace(post_content, '要被替換之舊網站的網址/images', '新網站的網址/images')

例如筆者要以新創建的「子網域圖床」來替換成原先網址,則在 mysql 運行下面語句即可:

UPDATE wp_posts SET post_content = replace(post_content, 'https://www.wpsite.com/wp-content/uploads', 'https://pic.wpsite.com/images')
UPDATE wp_posts SET guid = REPLACE(guid,'https://www.wpsite.com/wp-content/uploads','https://pic.wpsite.com/images')

修改好後到 WordPress 後台【媒體】查看圖片是否都有顯示出來,沒有的話檢查一下 FTP 裡面是否有照片,如果有些圖片是放在小工具裡面就手動更換路徑吧,沒幾個應該很快的,基本上到這邊就大功告成了。

現在!我們已經完成主網站上的圖片是從您的子網域上的圖片提供,您可以開啟網站試試瀏覽器加載的速度,特別是那些圖片很多的頁面,應該可以感覺到速度加快了。

參考文件:Roundup on Parallel Connections

推薦閱讀ಠ.ಠ  Yet Another Related Posts Plugin (YARPP) - 讓 WordPress 網站可以顯示相關文章、延伸閱讀的外掛

在〈使用子網域儲存媒體庫來優化 WordPress 網站速度〉中有 2 則留言

  1. 抱歉請問一下
    因為設定完之後
    雖然新的路徑顯示正常
    但上傳的話會跑到 wp 目錄下的 wp-image 而不是子網域
    是每次上傳後都要手動再把圖片從 wp-image 搬移到子網域嗎?

    回覆
    • WordPress 3.5 之後,預設媒體存儲位置的設置已被刪除,為了方便我們更改圖片上傳到子網域的路徑,需要安裝一個簡單 WP Original Media Path 外掛,來恢復此項設定功能。試著安裝並啟用【WP Original Media Path】看看~

      回覆

發佈留言