網站最佳化 – 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」
時常關注 Quants Note 的朋友們應該感覺得出來,跟隨著我們分析、測試的歷程,追求網頁效能的最佳化一直是我們的重心;不僅是希望訪客造訪網站時能夠獲得更好的體驗,另一方面也希望隨著網頁效能的提升、資源耗用降低的同時,對於伺服器、主機效能的需求也能稍稍降低,進而節省成本。
「Live for Speed」
在這過程中,我們進行了 Heavy Theme 巨大佈景主題的網站最佳化分析與研究:
文章回顧 – 「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」。
同時也分享了一系列能提升網頁載入速度、效率的外掛分析:
文章回顧 –
「無痛架站 – 縮圖工具 ShortPixel 快速又方便」。
「無痛架站 – Flying Scripts 提升網頁速度,改善 Google Core Web Vitals 分數」。
「無痛架站 – Self-Host Google Fonts 提升網頁速度,改善 Google Core Web Vitals 分數」。
「WordPress 超輕量圖片 Lightbox 特效外掛 – 完美取代 FooBox」。
「Presto Player Review 最佳的線上影片播放解決方案」。
讓大家在自由自在架站、無需顧慮使用的工具 (佈景主題、外掛等) 是否是效能最佳化的同時,知道可以使用哪些外掛、技巧來改善網站的載入速度。
我想這也是大家架設 WordPress 網站的初衷吧,因為「自由」、因為「分享」,所以我們有各式各樣的外掛可以自由使用,也安裝著各式各樣的外掛。
由於搜尋引擎龍頭 Google 近年來也將網頁索引的原則說明的很清楚,一切都會以網站的內容以及各種訪客體驗指標為重點,過去利用關鍵字堆疊的取巧方式、花而不實功能重於效能體驗的呈現方式、無數廣告蓋版的騙取點擊行為都會被懲罰。
超輕量佈景主題 – Blocksy Theme
只有優質內容足夠嗎?
Quants Note 的網站自然搜尋流量 (Organic Search) 在這一年來漸有起色,我們也觀察到流量增長確實與網站、網頁的載入速度有著正向相關。
當然,有不少人還是堅持只要有「優質的內容」自然可以獲得搜尋引擎的獎勵,但說實話如果好不容易有訪客從 Google 搜尋到了你的文章,點擊進入之後卻因為載入時間過長而放棄瀏覽,這是不是讓人感覺很嘔呢?
而這些都可以從 Google Analytics、HockeyStack Analytics 等分析工具所提供的數據中觀察到:
- Bounce Rate – 跳出率高可能代表網站內容與訪客搜尋的關鍵字差異太大、站內文章的關聯導引設計不良,也有可能是網頁載入效能太差造成的。
- Pages/Session – 如果站內文章的關聯導引設計的好,網頁載入速度快,訪客就會傾向於接續閱讀站內相關文章。
- Session Duration – 即使跳出率高,但如果訪客願意停留長時間閱讀也就代表他認同「這一篇」文章。
文章回顧 – 「HockeyStack 2021 絕佳的分析工具,讓你從不同角度分析網站流量」。
輕巧的佈景主題 + 彈性的設計
在將網站改版轉換為 Blocksy Theme + Kadence Blocks 的過程中,也觀察到了「單次工作階段頁數」、「網頁瀏覽量」有顯著提升。
這些都有賴於 Blocksy 超輕量 + 時尚的設計,讓我們在設計網站整體風格「頁首」+「頁尾」以及首頁、部落格頁面、文章頁面的時候,不需要像以往使用 Heavy Theme 時為了考量效能只能採用減法策略,把許多對訪客瀏覽體驗有幫助的功能一個個拿掉。
文章回顧 – 「Blocksy – 使用超輕量佈景主題編輯器快速建立網站」。
這些功能包含:
- 文章尾端的「上一文章」、「下一文章」
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - quants note pre next post quants-note-pre-next-post Blocksy Theme and Kadence Blocks 區塊編輯器](https://www.quantsnote.com/wp-content/uploads/2021/12/quants-note-pre-next-post.png)
- 文章頁面尾端的「相關文章」區塊能按照本文的類別、標籤等屬性顯示關聯性文章
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - quants note related posts quants-note-related-posts Blocksy Theme and Kadence Blocks 區塊編輯器](https://www.quantsnote.com/wp-content/uploads/2021/12/quants-note-related-posts.png)
- 頁面中提供的 Hook 位置
Blocksy 可以顯示各個頁面上的 Hook 位置,搭配 Blocksy 的內容區塊 Content Blocks 可以自由地將各種自訂的區塊內容按照「指定條件」顯示在「指定的 Hook」上。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - blocksy hooks blocksy-hooks Blocksy Theme and Kadence Blocks 區塊編輯器](https://www.quantsnote.com/wp-content/uploads/2021/12/blocksy-hooks.png)
是的,數十年前手刻網站的時候都會覺得這些都是理所當然該要有的功能,但事實上以現在多數佈景主題編輯器來說,即使有提供也未必能達到效能最佳化的要求。(但可以設計的很美)
也正因為 Blocksy 佈景主題的超輕量特性,使用 Content Blocks 任意的插入頁面中指定的 Hook 位置也不見任何對頁面載入速度的負面影響。
當然,在設計 Content Blocks 的內容時別忘了使用 Gutenberg 區塊編輯器。
Gutenberg 區塊編輯器 – Kadence Blocks
將舊網站改版的時候,一定會有許多元素是我們希望能保留下來的,這時候就會需要利用功能豐富的區塊編輯器 Kadence Blocks 了。
文章回顧 – 「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」。
豐富實用的區塊類型
在「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」一文中我們特別提到了 Kadence 中相當好用的 Info Box 區塊,事實上,這次網站改版的過程中使用最多的區塊包含:
- Row Layout
每一個 Row Layout 區塊中可以切分出橫向 1 ~ 6 個區域 Section,每一個區域可以自由加入各種區塊類型。使用者可以針對底層 Row Layout 區塊進行細部設定,或是對每一個 Section 區域的各個屬性進行調整。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - kadence blocks row layout block editing kadence-blocks-row-layout-block-editing](https://www.quantsnote.com/wp-content/uploads/2021/12/kadence-blocks-row-layout-block-editing.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - kadence blocks section editing kadence-blocks-section-editing](https://www.quantsnote.com/wp-content/uploads/2021/12/kadence-blocks-section-editing.png)
- Advanced Heading
對於頁面中的文字,不論是字首或本文都可以使用 Advanced Heading 區塊以獲得最大的設計自由度。 - Advanced Button
當設計頁面上 CTA (Call To Action) 按鈕的時候,使用 Advanced Button 可以自訂各種按鈕效果。 - Table of Contents
與 Blocksy 的 Content Blocks 結合使用,可以設計出只在電腦版文章側邊欄中顯示「目錄」的內容區塊。
光是透過這幾種區塊 (加上 Icon、Icon List 區塊) 的設計、組合,我們就將可以完整的在 Blocksy + Kadence Blocks 的架構中重現舊網站上的設計元素了。
而這些功能都包含在 Kadence Blocks 免費版所提供的 15 種區塊中了 (Pro 版提供超過 23 種區塊類型),建議大家可以在測試網站上安裝試試看 Kadence Blocks 的功能。
網站改版設計元素
我們接下來就挑幾個舊網站上的設計元素來說明。
- 舊版 – 完全使用 Thrive Themes 的 Thrive Architect 進行設計,可以做出相當精美的網頁。
- 新版 – 使用上述 Kadence Blocks 的各種區塊搭配 Blocksy 的 Content Blocks。Kadence Blocks 負責設計風格,Content Blocks 則控制這些設計完成的區塊顯示在頁面上的條件。
功能比較表格
Thrive Architect 可以用「所見及所得」的方式拖、拉網頁元素,並且方便設定各個元素的屬性。並且有「非常多」各類用途的模板供大家使用。
Kadence Blocks 設計「功能比較表格」時使用了 Row Layout、Advanced Heading、Advanced Button、Icon 等區塊。
對於想要做出漂亮表格的人來說,可以多加利用 Row Layout 的 Section 做出「多行」的顯示,並重複加入多個 Row Layout 做出「多列」的資料表。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - comparison table old version comparison-table-old-version](https://www.quantsnote.com/wp-content/uploads/2021/12/comparison-table-old-version.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - comparison table new version comparison-table-new-version](https://www.quantsnote.com/wp-content/uploads/2021/12/comparison-table-new-version.png)
這個表格實際上使用了超過 40 個 Row Layout 區塊堆疊而成,但 PageSpeed Insights 行動裝置版的速度評分依然有 90 分。(電腦版是 100 分)
優劣比較表
Kadence Blocks 設計「優劣比較表」時使用了 Row Layout、Advanced Heading、Icon、Icon List 等區塊。
Icon List 區塊的存在讓我們在設計時能夠大大減少重複性的工作量。(相較於功能比較表)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - pros and cons table old pros-and-cons-table-old](https://www.quantsnote.com/wp-content/uploads/2021/12/pros-and-cons-table-old.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - pros and cons table new pros-and-cons-table-new](https://www.quantsnote.com/wp-content/uploads/2021/12/pros-and-cons-table-new.png)
行動呼籲 Call To Action
Kadence Blocks 設計 CTA 時使用了 Row Layout、Advanced Heading、Advanced Button 等區塊,使用區塊編輯器設定相當方便簡單且直覺。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - call to action old call-to-action-old](https://www.quantsnote.com/wp-content/uploads/2021/12/call-to-action-old.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - call to action new 1 call-to-action-new](https://www.quantsnote.com/wp-content/uploads/2021/12/call-to-action-new-1.png)
搭配 Blocksy 的 Content Blocks 更可以針對關聯標籤的文章,在指定的 Hook 位置插入 CTA 區塊。未來只需要修改 Content Blocks 的 CTA 區塊內容,就可以直接在關聯文章上同步更新、顯示。
摺疊選單 Accordion
使用 Kadence Blocks 設計摺疊選單時只需要使用 Accordion 區塊。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - accordion old accordion-old](https://www.quantsnote.com/wp-content/uploads/2021/12/accordion-old.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - accordion new accordion-new](https://www.quantsnote.com/wp-content/uploads/2021/12/accordion-new.png)
一般表格
對於一般表格來說,我們只使用了 Row Layout 以及 Gutenberg 的表格區塊。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - ordinary table old ordinary-table-old](https://www.quantsnote.com/wp-content/uploads/2021/12/ordinary-table-old.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - ordinary table new ordinary-table-new](https://www.quantsnote.com/wp-content/uploads/2021/12/ordinary-table-new.png)
大家也都知道內建的 Gutenberg 表格區塊相當的平凡,無法額外設定各種屬性,如果想要追求更精美的表格設計,可以仿造前面「功能比較表格」的方式大量使用 Row Layout 區塊即可。
成果
改版前
完成這些網頁元素的設計之後,檢查了所有非 WordPress、Gutenberg 核心所提供的內容與設計並進行改版,按照慣例我們先看看舊版網站曾經做過的網站最佳化分析成果。
分析的網頁類型包含:
- 首頁 – Home
- 部落格頁面 – Notes
- 彙整頁面 – Silo
- 文章頁面 – Post
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - PageSpeed Insights with Thrive Themes Project Lightspeed and Clearfy new PageSpeed Insights - with Thrive Themes Project Lightspeed and Clearfy](https://www.quantsnote.com/wp-content/uploads/2021/06/PageSpeed-Insights-with-Thrive-Themes-Project-Lightspeed-and-Clearfy_new.png)
文章回顧 – 「網站最佳化 – Thrive Themes 的 Project Lightspeed 光速計畫 + Clearfy Pro」。
改版後
改版之後的速度評分則為:
- Mobile
Home | Notes | Silo | Post |
98 | 87 | 99 | 98 |
- Desktop
Home | Notes | Silo | Post |
100 | 98 | 100 | 100 |
值得一提的是,新版網站目前並沒有使用 Optimole 的 CDN 功能,也並未使用 Clearfy 的 Assets Manager 排除或延後 CSS、JS 的載入。
速度評分表現相當的亮眼。
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - pagespeed insights mobile new pagespeed-insights-mobile-new](https://www.quantsnote.com/wp-content/uploads/2021/12/pagespeed-insights-mobile-new.png)
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - pagespeed insights desktop new pagespeed-insights-desktop-new](https://www.quantsnote.com/wp-content/uploads/2021/12/pagespeed-insights-desktop-new.png)
PageSpeed Insights 速度評分
![網站最佳化 - 網站改版就用「Blocksy 佈景主題 + Kadence Blocks 區塊編輯器」 - gtmetrix speed test gtmetrix-speed-test](https://www.quantsnote.com/wp-content/uploads/2021/12/gtmetrix-speed-test.png)
GTmetrix 速度評分
結語
從 Thrive Themes 到 Blocksy + Kadence Blocks
先前 Quants Note 網站使用的編輯器、外掛完全仰賴 Thrive Themes 家族體系所提供的工具,從佈景主題、頁面編輯器,一直到收集訂閱郵件的 Leads、限時活動通知的 Ultimatum、學習管理系統 Apprentice 等。
功能覆蓋相當全面且完整,以 1 年 $228 的費用提供 25 個網站架設的授權其實是相當划算的。
說真的,並不是 Thrive Themes 有什麼不好,以 WYSIWYG 的頁面編輯器來說 Thrive Themes 甚至是最快採取最佳化開發,大幅改善頁面載入速度的廠商。
對功能導向、品牌行銷為主的網站,搭配穩定的流量導入策略 (例如:行銷、廣告),Thrive Themes 絕對是最佳的選項之一。
起心動念想要尋找其他可能性完全是因為想要有更高的自主權與追求速度的渴望,這部分在我財務工程領域的經歷中也是可以觀察的出來的。
當然,絕對也是因為 Blocksy 與 Kadence 都有提供 LTD 授權。(^///^)
大家看完之後,有興趣的話可以參考看看唷!
Blocksy Pro 的定價
(行動裝置可左右滑動查看更多方案)
方案 | Personal | Professional | Agency |
網站授權數量 | 1 | 10 | unlimited |
年費方案 | $69 | $99 | $149 |
LTD 方案 | $199 | $299 | $499 |
Blocksy Pro
使用優惠碼「QNSAVE10」獲得10%折扣!