MARKETING WEBSITE

筆記|自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦

真的要說,覺得自己開始自架網站之後,發現了很大的一個新天地,或者應該說之前很多內容都只是不斷的在吸收,可是完全沒有機會經歷到輸出的過程,直到自己開始架設網站之後,什麼事情都需要自己來,但是網站架設跟每一個頁面需要注意的事情真的太多,如果不靠一些外在協助(?),完全只靠自已真的覺得一定會有忽略到的部分,這個時候就是要派上Google Lighthouse登場了。

Google Lighthouse是什麼

[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 - 那位自由女神|芬妮Fengniii
[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 – 那位自由女神|芬妮Fengniii

Google Lighthouse是google團隊研發出來網頁質量衡量的chrome外掛。Google Lighthouse會審核網頁的性能,可訪問性和搜索引擎優化。它還包括測試漸進式Web應用程序是否符合標準和最佳實踐的功能。只要電腦裡有chrome都可以下載這個外掛,而且使用方式也相當的簡單,唯獨頁面是全英文,對於中文使用者來說會比較辛苦一些。下載完外掛之後,直接於想測試的網頁中點選外掛圖示(橘紅色小燈塔),再點選「Generate Report」後即可。

[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 - 那位自由女神|芬妮Fengniii
[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 – 那位自由女神|芬妮Fengniii

如果電腦沒有安裝chrome的人,也可以直接到這裡使用網頁版,輸入網址後直接點選「Run Audit」即可。網頁測試評分通常都需要等個30秒到1分鐘,請給他們一點時間等待呦。

[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 - 那位自由女神|芬妮Fengniii
[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 – 那位自由女神|芬妮Fengniii

Google Lighthouse 四大類別

Google Lighthouse內總共提供4大類別的網頁檢測,其中包含「Performance 網站的效能」「Accessiblity 網頁無障礙(非典型使用者體驗)」「Best Practices 網站最佳實踐」「SEO 網頁搜尋引擎最佳化」。

[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 - 那位自由女神|芬妮Fengniii
[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 – 那位自由女神|芬妮Fengniii

特別要說的是,雖然這個google開發的程式可以協助評估網頁的部分問題並評分,但這個分數也不是絕對!也就是說,如果是修正後會變得更好的內容就修改也無妨,但如果修正後會背離網頁的初衷或者是影響到文章內容的質量的話,就還是維持自己的想法比較重要呦。畢竟這只是一個機械式著參考數值,不該讓這些分數來真的影響到自己。

Performance 網站的效能

這一類別主要是在檢測網頁在上傳下載和顯示的速度,也就是說如果單一頁面速度跑得越快,這一類別的分數就會越高,反之頁面速度跑得比較慢的話,這裡的分數則會較低。

[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 - 那位自由女神|芬妮Fengniii
[筆記] 自架網站必學!Google Lighthouse一鍵評估網頁質量 檢測SEO工具推薦 – 那位自由女神|芬妮Fengniii

也會針對各項的表現直接顯示出來,可以很直覺的看見各項表現的速度,另外下方也會有提供針對各項檢測,提出可以修正的地方。身為一個外行人,真的覺得自己能做更改的地方少之又少,所以還是只能再說一次就是,這些分數只是用來做為輔助,千萬不要真的太看重這些分數,因為很多都是我們不太能夠更動的內容(吧)。

這一部分最容易方便改善的即是,網頁是否過度肥大(圖片檔案過大等),或是外掛安裝過多、廣告過多等,都是影響到這一部分導致扣分的很大原因。

Accessiblity 網頁無障礙(非典型使用者體驗)

我們先來看google定義的「網頁無障礙功能」的內容:

一般來說,當我們說某個網站具有無障礙功能時,我們的意思是網站的內容可用,並且毫不誇張地講,其功能可由任何人操作。作爲開發者,您會輕易地認爲所有用戶都能看見和使用鍵盤、鼠標或觸摸屏,並且與網頁內容的交互方式也與您相同。這會造成一些人能夠獲得良好的體驗,其他人則會遇到從簡單煩惱到重大障礙的各種問題。

那麼,無障礙功能就是指這樣一類用戶的體驗,他們可能不在“典型”用戶這一狹窄範圍之內,並且與網站的訪問或交互方式異於常規。具體地講,它所涉及的用戶具有某種身體缺陷或殘障(切記這種體驗可能具有非生理性或暫時性)。

例如,儘管我們在探討無障礙功能時往往是圍繞身體有缺陷的用戶,但實際上都能將其與我們使用的界面由於其他原因而無法訪問的經歷聯繫起來。您是否曾在手機上使用桌面版本網站時遇到問題?是否看到過“您所在地區不提供該內容”消息?或者是否在平板電腦上找不到熟悉的菜單?這些都屬於無障礙功能問題。

隨着瞭解的深入,您會發現在這種更廣泛、更普遍意義上解決無障礙功能問題幾乎總能讓所有人的用戶體驗得到改善。

簡單來說指的就是該單一頁面是否好閱讀,段落是否有良好區分,字體及顏色是否清晰可見,網頁操作是否良好易操作等,都會成為這一部分評分的要點。同樣的這一部分也會提供直覺式的判斷內容,網頁無障礙該如何修正等內容也都會直接列於下方,讓網頁擁有者評估是否需要進行修正。

Best Practices 網站最佳實踐

這個頁面主要是會針對網頁是否現代化,是否有一些不推薦的API等內容進行評估。

SEO 網頁搜尋引擎最佳化

許多網頁最看重的就是SEO網頁搜尋引擎最佳化,這個可以幫助網頁在Google搜尋中更容易被看見,並且也是網頁中最好修正的,適當的修正文章、網站的內容就可以讓這個分數大幅的提升。主要分成「Crawling and Indexing 搜尋引擎機械人是否能夠讀取網頁」及「Mobile Friendly 網頁是否可在智慧型手機中正常顯示」兩大評分標準。

另外SEO也有很多其他需要注意的部分,這裡真的是一片很大很深的學問,之後再做更詳盡的介紹,這篇文章只是單純介紹Google Lighthouse這個外掛程式,方便網頁綜合質量的簡易評比,這邊要再說一次,這些分數都只是用來做為輔助,畢竟只是透過程式算出來的成績,而一個網頁的好壞還有更多的是需要人為注意的部分,也就是說,即便這些分數都是100分,也不代表就是完美,通常都還會有很多可以增進更好的地方。

這篇文章就先打到這裡,有任何問題歡迎留言跟我說,如果喜歡這篇文章或是覺得這篇文章有幫助到你的話也歡迎分享給身邊的朋友。我是那位自由女神,我們下次再見,掰掰。

延伸閱讀

[筆記] 手把手架站教學 門外漢也可以無腦從0到1架設網站
零負擔把書帶出門 只要有裝置 隨處可閱讀|電子書平台整理 Kindle Kobo HyRead 讀墨 博客來
[筆記] 1天只要1元台幣 平價崛起IvacyVPN 輕鬆跨百餘國家| IvacyVPN 特色、優缺點評比

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。