Gtmetrix 2023 Page
|

菜鳥追求極致的優化 60天內網站評分從F升上A的故事

建構網站其實是一件有趣的事情。

2004年寄人籬下,附屬Oui-Blog下用Subdomain架設網站時,在內容管理系統(CMS,Content Management System)方面,就採用了Movable Type引擎。當年除了Movable Type,還有占據大部分市場的WordPress,以及Google自己推出的Bolgger(或稱Blogspot)。

Blogger是許多初學者的選擇,但控制權上並不能讓你完全掌控,故不推薦使用。至於Movable Type和WordPress,則各有千秋,各有利弊;那麼,為何當初會選用Movable Type?

i love 975
Sangui Family前身叫Mr & Mrs Turtle Family,Domain Name i3975.com,取之愛上烏龜(975)。

為何選擇Movable Type?

Movable Type使用Perl語言,WordPress使用php語言,當初為學習架設網站的技巧,退而求次選用了Movable Type,而事實證明,相當挑戰,但可從中學到不少關於HTML5、CSS等知識。

尤其當你打下穩固的基礎,在使用WordPress時,即使遇到一些阻礙,往往他人一點即通,很容易明白問題根源並找到解決方案。

grandiaver3_1
Grandia’s BLOG上線於2004年4月5日,屬OUi-BLOG社群一分子,採用MT引擎,當時的封面設計。
ouigrandia
Grandia’s BLOG的文章頁面。
i3975 blog born
i3975.com在2008年11月17日創建時,是採用極簡風格。
i3975 blog
i3975.com的起源與未來。
FB_IMG_1603712157521
i3975.com在2010年最後一次大改版時,命名為 Mr & Mrs Turtle Family。
FB_IMG_1603712160688
2010年改版時,Mr & Mrs Turtle Family的文章頁面設計是走擬真風格(Skeuomorphism)。
OurBlog
2010年自己一手一腳設計的擬真風格(Skeuomorphism)在2021年看來也不會過時。

隨著科技進步,行動網頁(Mobile Pages)越來越吃重,如今架設網站,不再只是追求美觀,還要打造極致的行動網頁對用戶帶來良好體驗。

Google建議頁面加載時間(Page speed)少於2秒。當網頁載入時間多於3秒,68%的人會選擇離開跟你Say Goodbye。

除此之外,如何讓他人在汪洋大海中找到你的網頁,搜尋引擎優化(SEO,Search Engine Optimization)也是必須研究的一門功課。

為何選擇WordPress?

不過,建構網站應該是一件有趣、好玩又輕鬆的事情。如果想在幾分鐘之內,輕鬆構建快速、美觀的網站,Kadence WP主題是其中之一非常合適的選擇。無論是採用入門模版庫的設計,或是從頭開始構建,都能迅速打造閃電般性能,又充滿了現代功能的網站。

這就是為何事隔多年,三龜小站(Sangui Family)從Movable Type轉戰WordPress的原因,最重要就是好玩。

如何選擇WordPress主題?

在採用Kadence WP主題之前,Sangui Family是採用多媒體主題,花俏功能多樣化,也是當下許多網站的喜愛,可是華而不實,在GTmetrix拿下F評分,是非常糟糕的成績,是時候重新學習新的技術了。

GTmetrix-report F
2020年12月12日,取名Sangui Family的mysagui.com網站全新出發,但受伺服器主機及主題影響,在GTmetrix拿下F評分。

一開始拿下低分,有許多原因造成,伺服器主機性能差是其一,即使是國際大牌也未必好,然後主題優化不夠,花俏功能太多等。在了解當下趨勢,以及一些專業人士的指點,就明白行動網站的體驗、速度,決定你的品牌轉換率。之後轉至國內知名品牌Exabytes最佳優化的WordPress託管,速度明顯大幅度提升一半。接下來就是更換一個輕巧但優質的WordPress主題。

為何選擇Kadence的WordPress主題?

Kadence WP主題是一個輕量級但功能齊全的WordPress主題,可比以往更輕鬆地創建漂亮的快速加載和可訪問的網站。

它具有易於使用的拖放式頁眉和頁腳構建器,可在幾分鐘內構建任何類型的頁眉,也具有完整的華麗入門模板庫,可通過智能全局字體和顏色控件輕鬆進行修改。

而且,還可以通過與最受歡迎的3rd Party插件進行廣泛集成,並快速構建令人印象深刻的電子商務網站、課程網站、商業網站等。

Kadence WP主題可以搭配當今流行的網頁編輯器Elementor來使用,不過為了擺脫Elementor的擁腫,以及加快網頁性能,最終改用區塊編輯器Gutenberg Blocks來設計,也是為了未來做好準備。

捨得捨得,有捨必有得,Sangui Family在GTmetrix的評分,立刻從F升上A接近100滿分的水平,是不是很驚訝?

什麼是GTmetrix?

GTmetrix是其中之一權威的分析工具,用來檢測網頁開啟速度,協助最佳化使用者體驗。做網站管理員不能不認識的工具。

GTmetrix-report A
2021-2-8,Sangui Family在GTmetrix的評分A, Fully load 2.2s。
gtmetrix speed 2021-2-20A
2021-2-20,使用ShortPixel 只啟用Glossy,在GTmetrix的評分小幅度上升,fully load 1.9s。
gtmetrix-reports-mysangui-com-l1eEphW7-2021-03-09-10_45_33
2021-3-8,WP Rocket + Asset CleanUp, Fully load 1s。
gtmetrix yslow 20210220C
2021-2-20,使用ShortPixel 只啟用Glossy,在GTmetrix的YSlow分數79,網頁size從2.52MB減至1.46MB。
27-2-2021_8232_gtmetrix.com
2021-2-26,啟用WP Rocket後,優化進一步提升。
2023-2-17,優化進一步提升。
gtmetrix-reports-mysangui-com-FkodQUal-2021-03-09-10_38_14
2021-3-8,WP Rocket + Asset CleanUp, 表現進一步優化。

什麼是PageSpeed Insights?

PageSpeed Insights是Google所提供的網站速度檢測工具,簡稱為PSI。

14-4-2021_PageSpeed Insights
2021-4-14, Google PageSpeed Insights 針對行動裝置測試最高一次的分數。
2021-4-15-google-speed-pagespeed-insights
2021-4-15, Google PageSpeed Insights 針對桌面裝置測試最高一次的分數。
2023-2-21,Google PageSpeed Insights改版(整合measure工作)後第一次針對行動裝置測試成績。
2023-2-27,主頁重組後第一次針對行動裝置測試成績。
2023-2-21,Google PageSpeed Insights改版(整合measure工作)後第一次針對桌面裝置測試成績。
2023-2-27,主頁重組後第一次針對桌面裝置測試成績。

什麼是WEB.DEV ?

Google推出的web.dev網站SEO檢測工具,為網站評分、給予改善建議,優化整體排名。

Measure 3-3
web.dev測試的成績,由2-22到3-3,多次調整後性能分數一路上升。
4-3-2021_8454_webdev
2021-3-3,使用WP Rocket + Asset CleanUp, 分數進一步推高。

什麼是Lighthouse ?

Lighthouse是Google Chrome的擴充應用程式,是一個網路開發者(Web developer)工具,它的主要功能是針對網頁的性能(包含網頁載入速度)做分析,並產生分析報表,報表上會有該頁面各項數據、指標的表現,以及如何優化改善的建議。

lighthouse-desktop-3-3
桌面裝置在Lighthouse取得的分數。
lighthouse-mobile-3-3-2021
裝行動裝置在Lighthouse取得的分數。

為何選擇WP Rocket?

WP Rocket是世界上功能最強大的緩存插件。 用它來提高您的WordPress網站,SEO排名和轉換的速度。 無需編碼。

High Performance

激活後,WP Rocket可以縮短網站的加載時間。忘記配置的煩惱,好好享受結果!

Easy to Use

WP Rocket會自動應用80%的網絡性能最佳做法,用戶無需成為「火箭科學家」即可進行設置並從中受益。

Great Support

提供技術支援是WP Rocket的支柱,如果對插件有任何疑問或問題,隨時提供幫助。

Referral Program

我喜歡WP Rocket,想邀請你從速度提升中受益。

10% OFF on Single license
15% OFF on Plus license
20% OFF on Infinite license

為何Kadence WP主題那麼受歡迎?

作為一個品牌,Kadence創建了簡潔專業的WordPress主題,適用於任何類型網站的主題,並且與各種插件兼容,幫助不專業的我們創建漂亮的網站。

Kadence的名字是取之「Cadence」(節奏)一詞的不同拼寫,意思是「一系列聲音或單詞的節奏流動:一種語言的節奏」。

Kadence WP主題在2020年發佈後,就以突飛猛進的速度獲得高下載量,可以想像它的受歡迎程度。

到了2021年,Kadence順勢推出了Membership服務,以優惠的價錢便能簡單獲取Kadence所有主題、插件以及最新的功能。

Sangui family 2021 design
2021年用Kadence WP主題設計的主頁。

如何選擇WordPress的頁面構建?

Gutenberg Blocks是WordPress當下流行,且未來主打的區塊編輯器,而Kadence Blocks也是建立於區塊編輯器。

區塊編輯器在建立多媒體頁面和文章方面,很容易且輕鬆就能掌控版面配置,無須擔心如何對齊和整理文字、引文及照片,現在文章和頁面中的每個元素都有自己的區塊,讓你可以專心創作網站內容。

如果你喜歡通過精美的設計來創建引人入勝的內容,Kadence Blocks可以在WordPress編輯器中提供具有創造力的工具,包括免費版即有的Parallax Background Image功能。如果是Pro版,更包括了On Scroll Animation功能。這兩種功能都是本站設計的主要泉源。

此外,你還可以通過Design Library享受大量的預建內容來輕鬆創建你的網站,非常適合靈光一閃的快速創建。在Typography方面,更提供了800多種的Google fonts。

挑選合適的WordPress主題,絕對是建構網站最重要的第一步,有需要的朋友不要錯過了。

為何選擇Exabytes WordPress託管?

如果需要優秀的Web Server,可以考慮Exabytes那快速且功能豐富的WordPress託管,除了Sangui Family目前使用的Nginx,2021年還推出了使用LiteSpeed的SSD drive,比普通託管服務器快5倍。

增強安全性

具備360保護網站安全性,自動惡意軟件掃描和網站修復,一鍵強化,WordPress安全掃描和安全補丁。

One-click Staging

每個Exabytes WordPress託管帳戶都帶有額外的數據庫,供你創建過渡環境,在發布之前安全測試新更改(例如:新插件,新主題或核心/插件/主題更新)。

每日網站備份

每天備份你的網站,可在遭受攻擊或災難時一鍵還原。 24/7技術支持獲得幫助。

挑選合適的Web servers是踏出成功的第一步。

參考資料

Similar Posts