通常一個網站背後是由許多的技術和服務組成,舉例來說,使用 WordPress 做為內容管理系統,再以 Cloudflare 加速並保護網站、對圖片進行分流,透過 Google Analytics 分析流量等資訊,搭配 Google AdSense 和 Google DFP 管理廣告和營利等等,雖然可以直接從原始碼得知網站可能使用那些技術,但也有更快速的查詢工具,像是 SimilarTechWhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。

本文要介紹的「Hexometer Website Analyzer」來自 Hexometer,是一個相當知名且獲得好評的網站分析服務,整合像是頁面分析、失效鏈結掃描、Meta 標籤分析、IP 及網域名稱查詢、網頁速度掃描、SSL 監測等等工具,Hexometer Website Analyzer & Ranker Tool 則是免費的瀏覽器擴充功能,支援 Google Chrome、Firefox,可以快速查詢某個網站評分(HX Rank)、使用的技術和服務、網域名稱和頁面元件。

當然像是 Hexometer Website Analyzer 這類工具主要都是想吸引使用者去使用他們的服務,但在不用付費的情況下依然可以透過 Hexometer 取得不少資訊,值得一提的是 Hexometer 除了會告訴你某個網站使用那些技術,也能知道該技術或服務被多少網站使用,市佔率也是考慮的因素之一,我認為對於網站管理者來說相當有用。此外,它可以分析頁面大小及相關檔案(CSS、JavaScript 和圖片)比例,若要最佳化網頁也會很有幫助。

Hexometer Website Analyzer & Ranker Tool
https://hexometer.com/

使用教學

STEP 1

Hexometer Website Analyzer & Ranker Tool 是瀏覽器外掛功能,可以從 Hexometer 官方網站找到下載鏈結,或是直接點選 Google ChromeFirefox 下載,安裝方式和一般外掛相同,不用註冊或登入帳戶就能使用外掛上的完整功能。

STEP 2

開啟要查詢的網站,點選右上角 Hexometer 圖示會開啟相關功能,第一個畫面是 HX Rank,也就是透過 Hexometer 演算法為每個網站計算出的數值,從幾個主要的分析參數得到的結果,不過數字通常是幫助我們最快看到成效的方法,實際上還是得從細節來探討有沒有任何的最佳化空間,有興趣可以在 Hexometer 網站獲得更多資訊。

STEP 3

切換到「Tech Stack」也就是網站使用那些技術或服務堆疊而成,會出現該頁面偵測到的第三方服務或技術,例如 Facebook、Cloudflare、Google Analytics 或 WordPress 等等。

點選某個服務或技術下方的鏈結後會回到 Hexometer 網站,在這裡會直接告訴你某個服務的市佔率高低,舉例來說,內容傳遞網路(CDN)佔比最高的是 Cloudflare,其次才是 Amazon Cloudfront 和 Fastly,當然這可以做為要選擇或更換服務的參考,使用人口比例越高,可能可以獲得更好的價格或技術支援,不過還是得評估自己的需求。

STEP 4

另外,在「Assets」部分會顯示該網頁目前的頁面大小、載入多少元件,還有 CSS、JavaScript 和圖片等等檔案分別有幾個,網站速度已經是目前搜尋引擎排序的重要指標,Google 也不斷提倡加快網站載入速度,在網頁檔案上就要嚴格控制,盡量讓網頁更輕巧就能有更好的速度表現。

在 Assets 最底下有個鏈結會回到 Hexometer,當然也是透過這家公司的查詢工具得出更多更細部的資訊,對於使用自適應網頁設計(RWD)的網站來說,Hexometer 會顯示在桌上型電腦、筆記型電腦和行動裝置的網頁呈現樣貌,而下方還會有開啟該網頁時會載入的相關檔案,這對於要降低頁面大小、加快網頁載入速度和找出用不到(或無法使用)的檔案來說很有用。

值得一試的三個理由:

  1. 透過 Hexometer 瀏覽器工具快速分析網頁相關資訊
  2. 可查詢網站使用那些第三方服務或技術,包括這些工具的市佔率
  3. 可以檢查頁面載入多少個檔案,例如 CSS、JavaScript 或圖片等等