網站最佳化 - 網站改版就用「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 – 使用超輕量佈景主題編輯器快速建立網站」。

這些功能包含：

文章尾端的「上一文章」、「下一文章」

quants-note-pre-next-post Blocksy Theme and Kadence Blocks 區塊編輯器

文章頁面尾端的「相關文章」區塊能按照本文的類別、標籤等屬性顯示關聯性文章

quants-note-related-posts Blocksy Theme and Kadence Blocks 區塊編輯器

頁面中提供的 Hook 位置
Blocksy 可以顯示各個頁面上的 Hook 位置，搭配 Blocksy 的內容區塊 Content Blocks 可以自由地將各種自訂的區塊內容按照「指定條件」顯示在「指定的 Hook」上。

blocksy-hooks Blocksy Theme and Kadence Blocks 區塊編輯器

是的，數十年前手刻網站的時候都會覺得這些都是理所當然該要有的功能，但事實上以現在多數佈景主題編輯器來說，即使有提供也未必能達到效能最佳化的要求。(但可以設計的很美)

也正因為 Blocksy 佈景主題的超輕量特性，使用 Content Blocks 任意的插入頁面中指定的 Hook 位置也不見任何對頁面載入速度的負面影響。

> 前往 Blocksy 官網

當然，在設計 Content Blocks 的內容時別忘了使用 Gutenberg 區塊編輯器。

Gutenberg 區塊編輯器 – Kadence Blocks

將舊網站改版的時候，一定會有許多元素是我們希望能保留下來的，這時候就會需要利用功能豐富的區塊編輯器 Kadence Blocks 了。

文章回顧 – 「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」。

豐富實用的區塊類型

在「WooCommerce 小技巧 – 自訂「我的帳號」頁面、善用區塊編輯器」一文中我們特別提到了 Kadence 中相當好用的 Info Box 區塊，事實上，這次網站改版的過程中使用最多的區塊包含：

Row Layout
每一個 Row Layout 區塊中可以切分出橫向 1 ~ 6 個區域 Section，每一個區域可以自由加入各種區塊類型。使用者可以針對底層 Row Layout 區塊進行細部設定，或是對每一個 Section 區域的各個屬性進行調整。

kadence-blocks-row-layout-block-editing — Row Layout 的功能選項

kadence-blocks-section-editing — Row Layout 的功能選項

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 的功能。

> 前往 Kadence 官網

網站改版設計元素

我們接下來就挑幾個舊網站上的設計元素來說明。

舊版 – 完全使用 Thrive Themes 的 Thrive Architect 進行設計，可以做出相當精美的網頁。
新版 – 使用上述 Kadence Blocks 的各種區塊搭配 Blocksy 的 Content Blocks。Kadence Blocks 負責設計風格，Content Blocks 則控制這些設計完成的區塊顯示在頁面上的條件。