[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-看不懂選項也可以駕馭的litespeed-cache設定法":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":18,"minRead":19},3508,"看不懂選項也可以駕馭的litespeed-cache設定法","看不懂選項也可以駕馭的LiteSpeed Cache設定法","看不懂選項也可以駕馭的 LiteSpeed Cache 設定法 WordPress最方便的就是有很多外掛、主題 […]","\u003Ch1>看不懂選項也可以駕馭的 LiteSpeed Cache 設定法\u003C\u002Fh1>\n\u003Cp>WordPress最方便的就是有很多外掛、主題，可以透過編輯器讓設計師甚至是不懂任何網頁概念的使用者作出美觀又符合需求的網頁，這也是造成設計出來的網頁可能存在效能問題的原因之一。\u003Cbr \u002F>\n尤其是\u003Cdel>(大家都知道的)elementor\u003C\u002Fdel>，因此使用WordPress架設網站後，調校效能就是另一間很多人會想做的事情了。但網站的效能調校需要具備高度相關知識，更需要耐心和溝通(?，除此外我們還會再藉由一些外掛來協助達成目標。\u003Cbr \u002F>\n這篇文章指在寫給非網頁專業的使用者，在使用LiteSpeed Cache時可以快速基本調校設定。\u003C\u002Fp>\n\u003Ch2>LiteSpeed Cache是什麼\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Flitespeed-cache\u002F\" title=\"LiteSpeed Cache\">LiteSpeed Cache\u003C\u002Fa> 是一個 WordPress 的外掛，如果你的 WordPress 是架設在 LiteSpeed Web Server 上，就會推薦使用 LiteSpeed Cache 作為效能調校的外掛。\u003Cbr \u002F>\n如果無法確認，那也堪用，但注意像是A2 host就有自己的效能調校外掛，所以記得先確認自己的主機傷有沒有相關服務喔。\u003Cbr \u002F>\n而如果你的主機有 LiteSpeed Web Server ，也記得要用它來開啟 WordPress 服務。\u003Cbr \u002F>\nLiteSpeed Cache 有大量使用到 QUIC.cloud 服務的功能，但這不是這篇的重點，有興趣的人請再看看 \u003Ca href=\"https:\u002F\u002Fwww.quic.cloud\u002F\" title=\"QUIC.cloud\">QUIC.cloud\u003C\u002Fa> 是什麼。\u003C\u002Fp>\n\u003Ch2>基本操作\u003C\u002Fh2>\n\u003Cp>安裝完後，記得 LiteSpeed Cache 有付費服務，但基本方案就夠用了。應該可以在後台上方的工具列看到 LiteSpeed Cache 的功能像這樣。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F05%2F%E6%88%AA%E5%9C%96-2023-05-03-%E4%B8%8B%E5%8D%883.51.04-296x300.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n記好「清除全部快取」，這個會很常用。\u003Cbr \u002F>\n再來是記得以下流程：\u003C\u002Fp>\n\u003Col>\n\u003Cli>每次做完任何設定 + 儲存後\u003C\u002Fli>\n\u003Cli>點擊「清除全部快取」\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>這樣重讀網頁才會看得到更動效果。\u003C\u002Fp>\n\u003Ch2>Cache 設定快取\u003C\u002Fh2>\n\u003Cp>左側找到「Cache」選項，快取簡單來說就是將你的網頁目前資料先放到一個地方，當使用者打開你的網頁時可以快速提供讀取。優點就是會變快，但也有缺點，有時候網站內容有修正不會立即反應。(所以每次變動玩記得清除，請看上面)\u003Cbr \u002F>\n雖然下面會列出每個功能的用途，但看不懂的人可以全開，\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Enable Cache – cache啟動的選項，必須ON才能啟動快取功能。\u003C\u002Fli>\n\u003Cli>Cache Logged-in Users – 如果會有很多登入的使用者，這個功能會產生多個相關快取。\u003C\u002Fli>\n\u003Cli>Cache Commenters – 針對留言的人的暫存，就開吧。\u003C\u002Fli>\n\u003Cli>Cache REST API – WordPress 的 REST API 快取功能，就開吧。\u003C\u002Fli>\n\u003Cli>Cache Login Page – 官方都在選項寫不開可能會有不好效果，就開吧。\u003C\u002Fli>\n\u003Cli>Cache favicon.ico - 透過php設定加速favicon.ico的讀取，就開吧。\u003C\u002Fli>\n\u003Cli>Cache PHP Resources - 提高php讀取效能，就開吧。\u003C\u002Fli>\n\u003Cli>Cache Mobile - 這個預設沒有開，現在誰不需要手機版本呢？記得打開。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Page Optimization 設定頁面最佳化\u003C\u002Fh2>\n\u003Cp>這裡是設定頁面最佳化，像 CSS，Javascirpt 檔案壓縮或合併、非同步載入等等，這邊的選項每次都可能會影響原先的網頁動畫、功能等等，建議一次一個選項。\u003C\u002Fp>\n\u003Ch3>CSS Settings 分頁\u003C\u002Fh3>\n\u003Cp>免費版本的話只會用到以下幾種，就加減試試看囉：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>CSS Minify – 壓縮 CSS 檔案，通常不會有問題，開吧。\u003C\u002Fli>\n\u003Cli>CSS Combine – 合併 CSS 檔案合併，可能會造成網頁顯示異常，經驗上滿常出現，如果有異常就關掉。\u003C\u002Fli>\n\u003Cli>CSS Combine External and Inline - 會合併外部和內連宣告的CSS，官方說這選項要在 CSS Combine 啟動時才有效果，能大幅減少 CSS Combine 的異常。\u003C\u002Fli>\n\u003Cli>Inline CSS Async Lib - 用非同步方式載入 CSS，意思是錯開 CSS 檔案的讀取時間，有可能提高載入速度但可能會出現部分網頁顯示異常。\u003C\u002Fli>\n\u003Cli>Font Display Optimization - 會先建議設定 Swap，但可能會出現網頁開始時先識預設字體然後再跳換成另一種字體，先開看看。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>JS Settings 分頁\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>JS Minify – 壓縮 JS 檔案，開吧。\u003C\u002Fli>\n\u003Cli>JS Combine – 合併 JS 檔案，但一樣可能會造成 JS 程式錯誤，經驗上滿常出現，如果有異常就關掉。\u003C\u002Fli>\n\u003Cli>JS Combine External and Inline - 跟上述 CSS 一樣，也要在 JS Combine 開啟時才有效果。\u003C\u002Fli>\n\u003Cli>Load JS Deferred – 選擇載入 JS 的時間，可以都試看看，有問題就切回預設。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>HTML Settings 分頁\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>HTML Minify – 壓縮 HTML 檔案，開吧，哪次不開\u003C\u002Fli>\n\u003Cli>DNS Prefetch Control  – 讓DNS擷取文檔中的URL，建議開啟\u003C\u002Fli>\n\u003Cli>Remove Query Strings - 移除連結 URL 的查詢字串，開吧。\u003C\u002Fli>\n\u003Cli>Load Google Fonts Asynchronously – 非同步載入 Google Fonts，開啟後可以讓讀取 Google 字型快一點，老實說我感覺不太出來，但開吧。\u003C\u002Fli>\n\u003Cli>Remove Google Fonts – 防止所有網頁讀取 Google Fonts ，理論上會快很多，但我也感覺不太出來，先開吧。\u003C\u002Fli>\n\u003Cli>Remove WordPress Emoji – 移除 WordPress 表情符號檔案，沒用到的人就開吧。\u003C\u002Fli>\n\u003Cli>Remove Noscript Tags – 有noscript tag 可以增加老舊瀏覽器的相容性，但會增加檔案大小，如果不考慮舊型瀏覽器相容性，就開吧。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>小結\u003C\u002Fh2>\n\u003Cp>上述設定完，如果網站沒有什麼大概，應該能提升10~20%的效能。非常有用喔。\u003Cbr \u002F>\n至於其他沒提到的設定，多半有用預設就可以了，本文的前提是給看不懂設定的人使用，所以其他設定就不要管了XDDD那麼未來有機會再寫分享更多效能調校的經驗吧！\u003C\u002Fp>\n","2023-05-03T20:07:29","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2FWordPress-logotype-alternative.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":17},"WordPress","wordpress","\u002Fblog\u002F看不懂選項也可以駕馭的litespeed-cache設定法",2]