Waterfall

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

提升網站讀取速度除了壓縮圖片外，還需要將圖片放置於子網域，對於瀏覽器而言一個網域同一時間一次只能下載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://www.williamlion.tw/images/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

Author: 威廉獅

擁有知識不是力量，分享知識才是力量。 對於新鮮事物保持樂觀學習的態度，創意來自於我對科技的熱愛!! 每週一篇以上分享我生活中、工作上、發現的新事物^_^

(23) Comments

  3. 請問：最後SQL那兩串指令是”一起”輸入還是分開兩次操作？謝謝

  6. 威廉師，我修改好了以後，開啟後台媒體庫，裡面全部圖片都無法顯示耶，不過圖片的鏈結網址已經移轉成子網域的網址沒錯，請問現在圖片沒辦法顯示的問題要如何解決呢？

  7. 我用FileZillaPortable去查看，圖片位置還是在原地資料夾內，不過開啟網頁後台，媒體庫內的圖片都是顯示我要的網址，請問這樣的問題是哪裡出錯呢？拜託幫忙協助，謝謝！

  8. 有把原本的照片/upload 複製到新的images 資料夾內了嗎，先上傳一張圖片看看跑去哪個資料夾了

  10. 我上傳照片後還是看不到圖片，但是有顯示檔案，點進去看鏈結網址是顯示 http://img.domain.com/uploads 沒錯，但是去圖片資料夾路徑*****/public_html/img/uploads 裡面去找，找不到圖片，所以這樣的問題是？

    （後台媒體庫可讓我上傳，可是上傳的好像是一個幽靈檔案）
    （DNS我有轉好了，使用 http://img.domain.com/ 去搜尋是顯示我的首頁沒錯）

  11. 1.你的上傳路徑設定有錯，請去設定>媒體 (上傳的檔案將儲存於此目錄) 這邊要改成你的主機路徑
    2.DNS 設定應該是顯示img資料夾裡面的檔案唷，不會是顯示主網域的內容
    http://www.williamlion.tw/ 我的

  12. wp_option 裡面的 upload_path 會是你上傳圖片的路徑，這邊要看你的主機路徑 *****/public_html/img/uploads

  13. 我發現我可能是沒設定subdomains造成
    我是使用VESTA 的vps後台，網址是註冊godaddy的，

    我不知道設定subdomains要從哪個去做設定
    （現階段godaddy我有去作DNS的 A (Host)添加，添加img的子網域；VESTA我是直接增加一個img.domain.com/的網站）

  14. 你先透過FTP 手動把照片丟到img裡面 123.jpg這樣
    然後打img.domain.com/123.jpg 會不會顯示，有代表網域OK

    不行的話找一下VESTA的設定方式，因為新增子網域，主機會需要設定對應的主機位置，透過VESTA 的新增子網域應該可以成功

    你Godady的步驟是OK的，就只差在VESTA要重新設定嚕~~加油 只差一步

  15. 我覺的現在主要問題是subdomains沒有弄好

    研究好久還是不知道subdomains要從哪個去做設定
    （現階段godaddy我是把DNS的 A (Host)添加 改成CName(Alias)添加，添加img的子網域，Host是填寫img，Points To是填寫＠；最主要問題是VESTA後台它沒有creat a subdomain，所以我不知道是要從web去做添加img.domain.com的子網域還是說，直接在後台的DNS設定 CNAME紀錄 ）

    截圖
    http://josieyewear.com/img/uploads/2015/07/11111112.jpg
    http://josieyewear.com/img/uploads/2015/07/11111111.jpg

  16. 你點那個add web domain 子域直接打上去就可以了
    img.josieywear.com

  17. 這樣的話 媒體設定 內 “上傳的檔案將儲存於此目錄“ “完整的檔案網址“ 空格要填寫什麼路徑呢？
    （“完整的檔案網址“ 我填寫 http://img.josieyewear.com/uploads
    它就會無法顯示圖片，要空白才會便正常）

  20. 要用第二張
    完整檔案網址 要打上去啊，不然看不到

  22. HI威廉，照你方法做之後真的成功了!! 但似乎把固定網址改成”文章名稱”模式後，圖片都看不到了，到FTP資料夾去看多了個.htaccess 檔，是不是有甚麼權限設定?

Leave a Reply