Web | Coding | Blog | SOHO

[網站]瀏覽速度優化,WordPress 外掛大公開 #操作篇

這篇是詳細設定的操作篇,可以先觀看前一篇「瀏覽速度優化,WordPress 外掛大公開」後,再參考此篇的詳細設定唷! 以下站長僅選擇 3樣 做設定教學,也是我認為入門必須使用的。


1.多媒體素材使用 LazyLoad 延遲載入

a3 Lazy Load外掛頁面 (點此)

03

a3 Lazy Load外掛插件安裝後,直接啟用LazyLoad配置即可。

01

這裡可以選擇Script載入位置與讀取圖片的效果,
建議設置Threshold為600~900px,比較不會感受到圖片載入延遲的情形。(附註:此示範為800px)

02

2.使用快取緩存外掛

W3 Total Cache外掛頁面 (點此)04

安裝後並啟用;
先到General設定 (Performance > General Settings)啟用所需的壓縮功能與瀏覽器緩存功能:

03

啟用壓縮HTML的配置(Performance > Minify)。

04

啟用CSS與JS的瀏覽器緩存配置(Performance > Browser Cache),會直接修改伺服器的htaccess檔案。(建議設定一年)

05

啟用多媒體素材的瀏覽器緩存配置,同樣會修改伺服器的htaccess檔案。(建議設定一年)

06

通常快取外掛同時會有CDN功能,建議配置子網域給CDN使用強制快取的設置,
對於 https 網站來說,建議要修改 htaccess 配置 301 或 302強制https訪問;
測試時若訪問http網頁後,改瀏覽https容易出現不安全的混合內容
(根據Google說法,網頁有混合內容的安全性等同沒有使用https,Google不會優先收錄)

強制跳轉到https的htaccess配置

RewriteEngine on
# Uncomment the following lines to force HTTPS
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

 

3.優化JS與CSS載入方式

Autoptimize外掛頁面 (點此)

05

預設提供精簡配置,以下教學需要點擊顯示進階設定。07

啟用JavaScript優化。

08

啟用CSS優化;前一篇有提到停用佈景主題預設的 Google 字體,在此可以直接勾選「移除 Google Fonts」,這樣就可以不需要額外安裝多餘的外掛囉!

09

以上參考 HZSH Site 文章後撰寫。


ˋ站長的話:

以上3樣設定可以與站長的圖文相同,比較老練的讀者可以試著到外掛設定裡面瞭解更多的細項。

通常安裝後啟用已經有達到不錯的效果了!

有任何問題也歡迎在底下留言,或到fb粉絲專頁發訊息給站長一起討論。


如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;
另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:


相關連結:

[教學]如何上傳檔案至你的網站,使用 FileZilla

[網站]讓自己的網站更安全!https & SSL 憑證

[網站]如何成為Bolgger&經營Blog

[網站]HTML網頁 #入門篇

[網站]網站的基本(組成)要素 #基礎篇

[網站]建立屬於自己的網站(教學&心得篇)

[網站]Freenom 提供頂級域名,即刻擁有!tk,ml,ga,cf,gq

[網站]Hostinger 免費虛擬主機,練習架站最佳平台

Comments

comments

如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:


© 2017 4xCode™ | Design:SC 站長

歡迎來到SC站長網站

 

本站文章不再更新,新文章將發表至

4 x ‘s Space 網站

 

謝謝您一直以來的支持,我們新網站見~

 

SC站長網站文章也會將慢慢轉移至新網站,

新網站連結 4-x.tw 點此前往,或點擊上方圖案)