2020-08-01

製作高效能WordPress網站的Oxygen Builder網站編輯器

Oxygen Builder是一款WordPress的「網站」編輯器,擁有與其他WordPress「頁面」編輯器非常不同的特點,這款外掛讓網站開發者在進行網站高度客製化的同時,能夠兼顧網站效能及SEO。本文將介紹Oxygen Builder網站編輯器的特點,並與Elementor Pro頁面編輯器比較兩者間的差異,最後分享FirstHatch一起孵的使用經驗。

什麼是Oxygen Builder「網站」編輯器?

Oxygen Builder是一款由Soflyy團隊開發的「網站」編輯器外掛,第一個版本發佈於2016年,核心理念便是讓網站開發者能夠掌握WordPress的各個細節。

Oxygen Builder的運作方式與常見的頁面編輯器極為不同,在安裝這個外掛之後,主題會被直接停用,也就是說,主題的樣式、版型等均不會被帶入。網站開發者則必須透過這款編輯器從header及footer開始,一步一步完成各個頁面、列表頁、文章頁等的設計及製作,進而達到高度客製化WordPress網站設計的目的。這也就是為什麼Oxygen Builder被稱作「網站」編輯器。

Oxygen Builder網站編輯器的特色

和Elementor、Beaver Builder、Divi Builder等知名頁面編輯器相較,Oxygen Builder網站編輯器除了停用主題的獨特運作機制之外,其實還具有不少鮮明的特色。另外,從網站開發者的角度來說,Oxygen Builder其實較一般頁面編輯器來說更適合商業開發,也更符合客戶往往希望能夠自行修改內容的需求。以下將分別介紹並以Elementor Pro作為對比。

停用主題的運作機制

一般的頁面編輯器是與主題平行運作,在沒有使用頁面編輯器的地方,會使用主題本身的版面配置。Oxygen Builder網站編輯器則是將主題停用,所有頁面均需要透過Oxygen Builder網站編輯器製作。

舉例來說,一個剛建立的WordPress網站,前台顯示如下圖A。若安裝Elementor及Elementor Pro外掛後,前台顯示如下圖B。若安裝Oxygen Builder外掛後,前台顯示則如下圖C。相互對照圖A、圖B及圖C,應該就可以了解停用主題的運作機制對網站前台造成的影響了。

oxygen-builder-1

能夠高度客製化網站

由於停用主題的關係,使用Oxygen Builder的網站開發者必須要從header及footer的開始,依序設計及製作頁面、文章列表頁、分類列表頁、標籤列表頁、文章頁、404頁等頁面。

以Oxygen Builder建構頁面內容時的使用邏輯,則如同其他頁面編輯器,也是先建構section,在設置column,最後依據需求加入元素。Oxygen Builder提供的元素雖然數量不是很豐富,但包含了帶入動態欄位資料的功能,更能夠直接在編輯器中插入HTML、CSS、JavaScript和PHP並製作需要的功能,故足以解決大部分的需求。舉例來說,如果要以Elementor Pro製作列表頁的話,如果對專業版元素外觀不滿意的話,可能就必須安裝Elementor Custom Skin或是Dynamic Content for Elementor等外掛來解決問題。但透過Oxygen Builder可以直接以Code Block元素寫入PHP等相關程式碼製作列表頁所需元素。

在CSS樣式方面,Oxygen Builder提供Stylesheet讓網站開發者設置全站樣式,亦或是透過視覺化的selector detector針對各元素做細節調整。另外,Oxygen Builder也提供了不少精美的設計集,能夠整頁或是局部匯入,讓網站開發者能夠快速佈局頁面架構再做細部修改。

最後,和Elementor Pro相較,FirstHatch一起孵認為Oxygen Builder雖然提供較少的元素,但在全站客製化方面則更具彈性。

oxygen-builder-2

HTML結構乾淨、速度快、搜尋引擎友善

根據Oxygen Builder官網的敘述,以Elementor插入一個標題元素時,會產生9個div標籤,但以Oxygen Builder插入標題元素時,不會產生div標籤。這也意味著以Oxygen Builder製作的網站具有HTML結構較為乾淨、頁面大小較小、HTTP request較少等特點,故有較快的載入速度。在網站頁面結構較為複雜的時候,這個差異會更加明顯。另外,Oxygen Builder可以自由地對每個區塊設定HTML5語意標籤,有助於網站的搜尋引擎友善度。

與WooCommerce整合

WooCommerce是以WordPress做電子商務時的首選外掛,因此大部分的頁面編輯器都會強調能夠製作WooCommerce頁面,Oxygen Builder網站編輯器也不例外。與Elementor Pro相較,Oxygen Builder除了能夠製作商店頁及產品頁之外,還能夠製作購物車頁、結帳頁,甚至會員帳戶頁,適用範圍極廣。

與Gutenberg區塊編輯器整合

Oxygen Builder也提供了與Gutenberg區塊編輯器整合的解決方案,讓網站開發者能夠設計及製作符合需求的Gutenberg區塊,也就是說,網站開發者可以僅設計及製作網站樣式及Gutenberg區塊,而將頁面排版的自由度交給實際使用網站的人。另外,Oxygen Builder製作的頁面內容也可以直接透過Gutenberg區塊編輯器修改,再輔以客戶模式的角色權限,即可避免樣式設定在客戶自行修改頁面內容時被改變,盡可能滿足選擇以CMS作為網站核心的客戶需求。

Oxygen Builder網站編輯器的缺點

根據FirstHatch一起孵的使用經驗,目前發現一些Oxygen Builder網站編輯器的缺點。以下將分別說明。

第三方延伸外掛不多

推測由於使用者人數較少或是歷史較短的原因,造成Oxygen Builder網站編輯器的第三方延伸外掛不多較其他頁面編輯器來得少。因此,如果外掛原生元素不敷使用時,並沒有太多第三方延伸外掛可以選擇,但如果真的找不到,其實還是可以透過Code Block元素自己寫。

社群資源不多

推測原因同樣是由於使用者人數較少或是歷史較短,造成社群數量相對較少,目前僅有找到官方社群和數個英文社群,但尚未看到中文社群,也鮮少在中文社群中看到討論。

和多語言翻譯外掛相容性不佳

Oxygen Builder雖和大多數外掛相容,但目前並沒有正式支援和多語言翻譯外掛的相容性,在一些案例中可能有不相容的情況。根據FirstHatch一起孵自己的經驗,和多語言翻譯外掛WPML的相容性真的是有待加強。

Oxygen Builder及Elementor Pro的比較

在前兩段中,FirstHatch一起孵分別介紹了Oxygen Builder網站編輯器的特點及缺點,以下將以Elementor Pro作為比較對象,對Oxygen Builder做一個系統性的整理。

Oxygen BuilderElementor Pro
主題相容性因為不需要主題,所以無相容性問題與大多數主題相容
編輯器內原生元素
編輯器適用範圍Header&Footer適用適用
Page適用適用
Single post適用適用
Archive適用適用
與WooCoommerce頁面的整合性Woocommerce shop適用適用
Woocommerce product適用適用
Woocommerce cart適用不適用
Woocommerce checkout適用不適用
Woocommerce account適用不適用
與Gutenberg區塊編輯器的相容性已整合,可以同時使用只能選擇一個,不能同時使用
外掛相容性與大部分外掛相容,但與多語言翻譯外掛相容性不佳與大部分外掛相容
客製化設計容易度極高高,但容易受限於元素外觀設計
第三方延伸外掛
社群資源
費用價格99 - 249 USD/ 次49 - 199 USD/ 年
版本內容價格不同,功能不同,但無網站安裝數量限制價格不同,功能相同,但網站安裝數量限制不同

FirstHatch一起孵新舊網站效能評測

事實上,FirstHatch一起孵在仔細研究過Oxygen Builder網站編輯器之後,就立刻著手以Oxygen Builder重新建立自己的網站,也因此得以在網站翻新的過程中比較效能上的變化。

評測方法

首先,在同一個主機內建立兩個WordPress網站,分別安裝Astra主題和其他必要外掛(詳見下表)。將主題及必要外掛啟用後,建立相同的首頁,再以常見速度評測工具進行測試。

新網站(Oxygen bulder)舊網站(Elementor Pro)
已安裝外掛
  • Breeze
  • Contact Form 7
  • Oxygen Builder
  • Breeze
  • Contact Form 7
  • Elementor
  • Elementor Pro
備註Breeze僅開啟預設選項,包括Cache System、Gzip Compression、Browser Cache及Auto Purge Varnish。

評測工具

採用以下三個常見速度評測工具。

  • Google PageSpeed Insights
  • GTmetrix
  • Pingdom Website Speed Test

評測結果

經過實際測試後可以發現,除了Google PageSpeed Insights的結果之外,兩者在速度分數上並沒有太明顯的差異。然而,用Oxygen Builder所建立的首頁的頁面大小及Http requests大概是Elementor Pro的一半。詳見下表。

新網站(Oxygen bulder)舊網站(Elementor Pro)
Google PageSpeed Insights行動版89分47分
電腦版98分80分
GTmetrixPageSpeed Score A (96%) A (95%)
YSlow ScoreB (88%)A (90%)
Fully Loaded Time2.7s2.4s
Total Page Size198KB487KB
Requests2548
Pingdom Website Speed Test (Test from Asia-Japan-Tokyo)Performance gradeA (92)B (86)
Page size214.6KB518.0KB
Load time251ms500ms
Requests2548

結論

Oxygen Builder網站編輯器的特色打破了一般頁面編輯器的限制,除了能夠編輯所有的WordPress及WooCommerce網站頁面之外,也能夠和Gutenberg區塊編輯器整合,滿足網站開發者和客戶的需求。另外,FirstHatch一起孵以Oxygen Builder翻新網站之後,發現除了與WPML相容性不佳的問題之外,網站效能獲得大幅改善,整體表現良好,目前感到非常滿意。