<-- IE錯誤修正 --> RiS社群 | FileMaker 跨平台企業應用 - 瀏覽單個文章 - Google 推出全新網站檢測服務「Web.dev」,協助開發者打造現代化網頁
瀏覽單個文章
  #1 (permalink)  
舊 2018-12-10
wowria wowria 目前離線
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Google 推出全新網站檢測服務「Web.dev」,協助開發者打造現代化網頁

Click the image to open in full size.

如果要說有什麼技能是網站經營者必備,搜尋引擎最佳化(SEO)大概歷久不衰,雖然看起來很容易,其實背後的學問很多,而且得依照時間不停的更新學習才行。每個人都會有一套自己的最佳化心法,對於不同類型的網站來說可能操作方式也不太一樣,但我始終認為 Google 相關工具非常具有參考價值,包括大家熟悉的 Google PageSpeed Insights 和搜尋引擎最佳化入門指南工具書,兩者在今年都有更新。



下半年 Google 再度推出一款和網站最佳化相關的檢測工具「Web.dev」,這個工具在輸入網址後能快速檢測網站效能,提供一系列如何改進和調整的詳細說明,協助開發人員學習並將現代化網頁技術應用到自己的網站或應用程式,建構出更符合未來的網路。

Web.dev 檢測的四大項目分別是:效能、可用性、最佳化和 SEO,會對於各項指標給出一個評分和評級顏色,在時間部分區分的非常細節,只是數字看起來好像不如實際感受,延遲也會比真實情況來得更多一些。

Web.dev 提供不同類別指標的最佳化修改建議,依照重要性有不同的等級,大部分和 Google PageSpeed Insights 檢測結果差不多,不過沒有提供中文,必須自己去找相關資料。網站最佳化工具不嫌多,尤其又來自 Google,其重要性不言可喻。

網站名稱:Web.dev
網站鏈結:https://web.dev/

使用教學

STEP 1

開啟 Web.dev 後,直接輸入要檢測的網站頁面網址,點選「Run Audit」就會開始抓取網頁,分析各項評分因素。

Click the image to open in full size.

STEP 2

如果點選「Sign in with Google」按鈕登入 Google 帳戶,檢測後的結果畫面會不太一樣,從下圖可以看到效能、可用性、最佳化和 SEO 分別有紅色、橙色和綠色三種不同結果,除了綠色是完全達標沒有需要修改,橙色和紅色分別有建議調整的項目,特別是紅色可能存在迫切問題,必須優先處理。

Click the image to open in full size.

STEP 3

將網頁向下拖曳,可以看到各項時間分析,其中綠色的代表在正常範圍內,如果紅色可能就是時間過長,開發者可以研究一下要如何調整降低延遲,不過就像前面所述,Web.dev 檢測出來的結果延遲都會偏高,不確定是不是工具本身的問題,畢竟在瀏覽時都相當順暢,但能作為參考用。

Click the image to open in full size.

STEP 4

檢測結果最下方有各項待處理的建議修改項目,並顯示該問題的分類、重要性和相關指南,通常是看一下 Audit 顯示的問題,不確定怎麼改的話可以丟進 Google 找找有沒有其他人寫過解決方案,或者點選 Guide 裡的鏈結也會連接到特定的說明文件,不過要全部修改通過檢測並不容易,建議可以挑重要性較高的項目即可。

Click the image to open in full size.

值得一試的三個理由:
  1. Google 再推出全新網站檢測工具,協助打造現代化網頁
  2. 可針對效能、可用性、最佳化和 SEO 進行檢測評比
  3. 提供最佳化修改建議與相關鏈結
喜歡 Google 推出全新網站檢測服務「Web.dev」,協助開發者打造現代化網頁 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章