想架站不會寫網頁，那就用 WordPress 吧 從把妹角度理解前後端如何和平相處

不會寫程式也可以架設網站甚至賺錢?! 隨著科技的進步，答案是可以的。

近年來各種軟體都轉換成服務的形式 (SaaS)，透過網路就可以存取和使用並達到預期結果。

那不太會認識女孩子也可以交到女朋友嗎?! 就讓我們來看下去。

什麼是 WordPress

WordPress 是以 PHP 和 MySQL 為平台的自由開源的部落格軟體和內容管理系統，並且擁有相當豐富的模板系統、外掛程式可以直接使用。

等等，那不會 PHP 和 MySQL 的人該怎麼辦?

那就是直接使用網路上現成的託管服務即可。

當我們使用託管服務或是自己架設起 WordPress 後，就能夠透過後臺管理介面來維護我們的網站。

一段感情從認識到交往，大致上可分幾個階段：陌生 -> 認識 -> 好感 -> 曖昧 -> 交往，這個過程並不是單向也不是只能按照順序。

使用託管服務相當於讓你有機會直接從陌生到交往。

WordPress 佈景主題

當然男女交往首先還是外在的條件、談吐等等要超過可交往的門檻，WordPress 的佈景主題則是協助了這個部分。

Avada (Fushion Builder) 跟 OceanWP (Elementor) 這兩套都是小編體驗過的編輯器佈景主題，透過選擇佈景主題可以讓網站的外在條件迅速達到可交往的門檻。

Avada 小編的公司曾經付錢購買過，功能真的是非常非常的豐富，OceanWP 則是可以搭配免費版本 Elementor 使用。

熟悉佈景主題，就跟需要好好打理外表一樣重要。

什麼是 Avada

相信很多人在入門時，很可能是在看了一些部落客的文章後，在毫無概念的情況下選擇了主題 Avada。

Avada 並不是不好，只是蠻容易讓新手遇到問題，遇到問題之後可能就會開始求助於社群，社群裡當然就會遇到很多那些年一起踩過坑的大家。

我是一個前端工程師，所以直接從網站的效能面來看，因為 Avada 是一個相對完整的主題，這也代表著初學者的我們，很可能只是用大砲打小鳥，加上剛開始又使用較一般的機台，跑著一大包完整的功能，自然網站速度也就慢了。

這像是一個男生做了很多事情，可是卻沒做在正確的重點上，最後卻變成工具人而不是秋森萬一樣。

而網站的速度就像是釋放和接收到對方的意圖，丟球跟接球就相當於網站的速度。

Builder 優化

Builder 是佈景主題的頁面編輯器，提供我們所見及所得的方式去編輯、修改網站。

完整的主題中包含了很多的功能，在啟用主題底下相關功能的時，同時也需要在使用時下載相關的資源檔，這意味者我們開啟的功能越多，需要下載的資源檔越多，這時候速度也就自然被拖慢了。

怕你買到被閹割的，預設值全功能開啟

那這些功能性的資源檔在網站中主要會分為兩種：

• 腳本 (.js) ，腳本語言包含相關邏輯
• 樣式檔 (.css)，樣式檔則是顯示的樣子

也就是說通常你打一個勾多啟用一個功能通常就會多一組資源檔。

小編使用 Avada 時是搭配 Fushion Builder，當然 Elementor 也是類似的概念，建議未使用到的功能建議就直接停用。

另外 Avada 主題選項中，有提供 Performance 選項做相關調整及優化，主要可調整的項目：

• Litebox 功能若未使用可以停用
• google font 若需要使用請改用 CDN 的選項
• JS 的編譯
• 圖片的懶載入

就像女孩子有時候會說，有時候就是要她喜歡才重要，不然再多東西可能都算是多餘的。

系統面優化

除了外掛跟部景主題外，從工程面我們可以從系統面著手。

優化執行環境

• PHP 版本及相關設定，可以從以下看到：
  • Avada 裡面 System Status
  • 工具裡頭的 Site Health
• Litespeed 伺服器，市占率較低，但官網說有較好的效能

設定 WordPress 快取

網站在渲染頁面時，一般會分成下面三種情境：

• 伺服器端動態渲染：資料庫的存取 -> 存取後的運算 -> 最終動態渲染的產生
• 伺服器端靜態檔案：Prerender 成一個靜態檔案
• 瀏覽器端渲染：只取網站中骨架，部分資料等網站載入後才透過瀏覽器去取得及抽換

WordPress 會是屬於第一種，在頁面 render (渲染) 的過程中，會需要好幾道手續。

在還沒裝外掛之前你只要拿個壓力測試工具打一下，很容易就可以看到 cpu 99.99% 了。

為了加速這樣的過程我們就需要安裝快取的外掛 (ex: WP Super Cache, WP Fastest Cache)，進行這幾道手續的優化，這個目的主要是將動態渲染的部分進行加速。

圖片資源使用 CDN

CDN (Content Distribution Network) 中文全名是內容傳遞網路。

簡單來說就是透過這樣的服務我們可以加速資源檔的載入速度，圖片過多又沒有進行相關的處理當然直接拖慢網站載入速度。

• jetpack 提供將圖片使用免費 CDN 的功能
• tinypng 也協助我們將圖片進行不失真的壓縮

• ← 上一篇
• 下一篇 →