Waterfall

【網站速度優化】WordPress 媒體圖片轉移到子網域

2015-01-06

提升網站讀取速度除了壓縮圖片外,還需要將圖片放置於子網域,對於瀏覽器而言一個網域同一時間一次只能下載4~6個資源(Chrome、FireFox、IE9以上)

若能新增網域同時間就會增加一倍的下載佇列,原本4~6個就會變成8~12個。如何達到呢?

1.新增子網域

我以虛擬主機Cpanel控制台操作面來講解,首先要先增子網域,在網域管理區塊點選子網域選項

images to subdomain

子網域就叫images吧,資料夾名稱預設與子網域名稱一樣,如果跟現有資料夾有重複,手動更改名稱就可以了。

images to subdomain

查看FTP在/www下已經多了一個剛剛新增的子網域對應的資料夾,剛新增的子網域需要等DNS轉址通常約6~24hr,DNS需要設定A Record 紀錄來轉址。

到這邊其實就可以把圖片檔丟到子網域的資料夾,並手動把圖片網址手動貼上去,這樣的工程對於Wordpress 來說太浩大了。笨方法!! 相信我試過了。

後來我發現可以透過改WP-optins 資料表將媒體預設路徑修改到→子網域的資料夾,我只要把現有的wp-content/uploads 全部轉移過去就可以了。

images to subdomain

2.備份資料庫

到資料庫區塊的phpMyAdmin 來操作

images to subdomain

接下來會需要修改資料庫的資料,所以先備份資料庫吧,以免指令打錯WP就毀了
點選Wordpress資料庫→匯出→執行。

phpmyadmin

3.修改媒體圖片上傳位置

找到wp_optins資料表→點選該資料表→搜尋→運算符選擇LIKE%…%→值輸入”upload”→執行

images to subdomain

要先知道主機路徑,可以從Cpanel 查詢到,以我主機的路徑為/home4/willicv1

images to subdomain

執行完後會出現三個搜尋結果,首先修改資料夾預設路徑,”upload_path“點選左邊編輯即可修改,預設是空白的

  • upload_path:圖片資料夾路徑/home4/willicv1/public_html/images/uploads(原圖片資料夾)
  • upload_url_path:子網域的網址路徑https://images.williamformosa.com/uploads

修改好後按執行,

images to subdomain

一旦Wp_options 有了資料後,就可以到設定>媒體>上傳檔案,來檢查路徑有沒有錯,從這邊可以直接修改,Wordpress 為什麼不一開始就把這選項弄出來啦….還要先去資料庫弄

images to subdomain

4.修改文章內圖片舊路徑

點選SQL,將下列兩串指令的網域修改成你的網域&子網域,按下執行就會將文章裡的舊路徑修改成子網域的路徑了!!

images to subdomain

UPDATE wp_posts SET post_content = REPLACE(post_content,'http://www.domain.com/wp-content/uploads','http://img1.domain.com/uploads')
UPDATE wp_posts SET guid = REPLACE(guid,'http://www.domain.com/wp-content/uploads','http://img1.domain.com/uploads')

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

5.測試網站載入順序&速度

可以裡用WebPagetest 測試網站的目前載入速度,修改後可以發現圖片與CSS,JS等資源會一併下載,同一時間抓取的資源馬上Double!!!是不是很有效呢,趕緊來試試提升Wordpress整體讀取速度吧,成功的話別忘了分享此文章唷^^

Waterfall