如何確保網站的核心功能隨時可用、容易存取、安全、可用性、容易找到且快速。
本頁提供相關指引,協助您確保網站隨時可供存取、存取、安全且可供使用。
本頁面提供的指引來自 Google 內部的跨部門團隊,他們正在將短期目標轉向支援網站,維護在 COVID-19 期間的安全網站。這些 Google 員工發現,搜尋重要資訊的使用者越來越需要存取重要資訊,其中許多人先前很少或從未使用過網路,因此網站面臨了前所未有的增長。確保網站在這段期間可供所有人存取並不容易。
指引
可用性、可靠性、彈性和穩定性
如果你的網站收到流量遽增,且記錄不如預期,或您想要防止網站失敗,可以參考以下指南,快速修正問題,或是在問題成為重大問題前及時偵測。
- 請參閱「修正超載伺服器」一文,瞭解如何偵測、減少及避免流量尖峰問題。
- 移除不必要的圖片、影片、指令碼和字型。確保每個網頁都只著重提供網站訪客確實需要的功能。
- 將圖片最佳化可能會大幅減少伺服器頻寬用量,因為圖片是網路造成的首要來源。
- 盡可能將靜態內容卸載至 CDN。以下是常見的提供者詳細資料:AWS、Azure、Cloudflare、Google Cloud、Firebase。
- 檢查您的 CDN 是否有任何方便啟用的最佳化功能,例如動態圖片壓縮、文字壓縮,或自動壓縮 JS 和 CSS 資源。
- 最佳化 HTTP 快取可大幅減少伺服器的需求,而且只需大幅修改程式碼。如需具體建議,請參閱 HTTP 快取:第一行防線一文;如需具體建議,請參閱 HTTP 快取和快取最佳做法。Lighthouse 中的透過高效快取政策提供靜態資產稽核,可協助您快速偵測未快取的資源。請注意,不同類型的資源會有不同的更新要求,因此需要不同的快取策略。
- 服務工作站可大幅降低伺服器需求,但可能需要大量技術投資。這些代碼也能使您的網站在離線狀態下運作,讓您顯示營業時間、電話號碼和其他資訊,即使沒有網路連線也能回訪使用者。建議您使用 Workbox 來為網站新增服務工作站,因為這項工具會自動執行大量樣板,方便您遵循最佳做法,還能避免直接使用低階
ServiceWorker
API 時常見的細微錯誤。 - 如果網站的使用率大幅上升,請檢查您是否針對 DDoS 攻擊進行充分防護,因為您的網站現在可能更具吸引力。以下是常見提供者的詳細資料:AWS、Azure、Cloudflare 和 Google Cloud。
詳情請參閱網路穩定性一文。
無障礙功能
將重心放在無障礙設計變得更加重要,因為有各種需求的使用者可能會存取您的網站。請遵守下列指南,確保所有人都能存取您網站的核心功能。
- 無障礙設計需要團隊合作,而且人人都應負責。首先,請詳閱 Google 的團隊專用無障礙指南及美國數位服務團隊指南。這些指南會說明每位團隊成員 (產品經理、工程師、設計人員、品質確保等) 可以做出哪些貢獻。
- 進行無障礙審查,判斷哪些功能運作良好,以及需要改善的地方。WAVE 瀏覽器擴充功能可引導您手動稽核網站的無障礙功能。
- 詳閱無障礙指南,進一步瞭解特定主題,例如鍵盤導覽和螢幕閱讀器支援。
- 執行 Lighthouse 稽核以找出常見的無障礙功能問題。報表中也會以手動檢查的方式列出手動檢查,改善網站操作能力。請注意,即使無障礙功能分數為 100,也無法保證您的網站可供存取。在自動化方面,Lighthouse 無法測試許多重大問題,所以手動審查仍然相當重要。其他自動化稽核工具包括 WAVE API 與 AXE 擴充功能。
- 完成「開始在 Edacity 建構無障礙網頁應用程式」課程課程,或查看 Udacity 網頁無障礙功能課程。
- 歡迎觀看 A11ycast 播放清單,查看更多關於特定無障礙主題的快速提示。
身分識別、安全性和隱私權
您可能會想採取捷徑來取得重大修正項目,但請務必小心,以免在這麼做時造成安全漏洞。使用者必須存取極度私人主題的內容。網站必須妥善保護這類機密的使用者資料,並讓使用者相信其個人識別資訊 (PII) 安全無虞。
- 瞭解為何所有網站都應使用 HTTPS 保護,而不只是處理敏感 PII 資料的網站。
- 請改用預設使用 HTTPS 的代管服務供應商,或使用 Let's Encrypt 或類似的服務在伺服器上啟用 HTTPS。
- 請參閱「SameSite Cookie 說明」,瞭解如何進一步確保 Cookie 的使用方式安全無虞。請注意,我們已暫時恢復強制執行 SameSite Cookie 標籤。
如需更多指南,請參閱「安全無虞」一節。
可用性、使用者介面和使用者體驗
使用者在滿足基本需求時,越來越仰賴網路。其中許多人不常使用網路。建議您同時稽核網站核心功能的可用性,並盡可能簡化操作。
- 建議您在網站頂端加入醒目的橫幅 (可使用 X 按鈕移除),清楚傳達服務更新資訊。請在橫幅廣告中使用行動號召,引導使用者前往更具體的資源。建議您使用與網頁其他內容脫穎而出的顏色和字型。撰寫內容時,請抱持同理心、重視使用者的需求,並清楚說明預期的服務類型。
- 請設法盡量減少在關鍵使用者歷程 (CUJ) 中的身體互動,並為產品團隊提出這些變更建議。舉例來說,如果您的運送服務通常需要簽名,不妨看看能不能解決這個問題。
- 再次確認您的 CUJ 是否盡可能簡單且直覺易懂,如果發現任何改善機會,請向產品團隊提出修改建議。
- 請參閱良好行動裝置設計原則,並在各種行動裝置上試用 CUJ,確保沒有任何呈現問題。如果不常使用網路,使用者突然發現自己更需要依賴網路,就有可能是透過行動裝置存取您的網站。
- 重構網站,盡可能使用回應式設計模式。
- 請確認您的表單效率高且設計完善。
搜尋引擎最佳化 (SEO)
使用者尋找重要的健康和工作相關資訊。確保所有搜尋引擎都能找到你的網站。 Lighthouse 搜尋引擎最佳化 (SEO) 稽核可協助您偵測基本問題。 追蹤搜尋引擎的官方網誌,取得最新指南和更新:Google、Bing、百度、DuckDuckGo、Yandex。最近的 COVID-19 相關貼文:
- 如何變更線上活動,同時將對 Google 搜尋的影響力降到最低
- 為虛擬、已延後和已取消活動的新屬性
- Bing 採用 schema.org 標記來發布 COVID-19 特別公告
- 在 COVID-19 公告中加入結構化資料
- 協助衛生機構提升 COVID-19 資訊的能見度
- 搜尋健康和政府網站的一般最佳做法
如需詳細指引,請參閱「可探索」一節。
效能
部分網際網路服務供應商 (例如印度) 發現家用網際網路用量大幅增加,且沒有具備可滿足增加需求的基礎架構。在這類情況下,您的網站速度可能會因為自身因素而變慢。對載入效能進行最佳化調整,可以抵銷減少頻寬的頭痛。換句話說,只要減少載入網頁時需要透過網路傳送的位元組數,就能減低頻寬對效能的影響。
- 圖片是網路爆炸的主要原因。您可以最佳化圖片,藉此大幅降低網站的頻寬用量。Squoosh 是一款簡易的開放原始碼圖片壓縮工具,可協助您快速壓縮圖片。
- 執行 WebPageTest 或 Lighthouse 發掘效能改善商機。
- 啟用文字壓縮,以縮減文字資源的網路大小。這通常要能輕鬆提升成效 只需投入最少的技術投資
- 請參閱修正跨部門網站速度一文,瞭解如何與其他部門合作並獲得認可。
- 為圖片使用標準化延遲載入,盡量減少使用者可能從未實際看見的圖片要求。瀏覽器相容性不是 100%,但可以做為漸進式強化。換句話說,如果特定瀏覽器不支援標準化延遲載入,圖片應照常載入。
- 請檢查網站是否有任何 A/B 測試或個人化指令碼可更非同步載入,或是指令碼中是否有任何可停用的非重要功能。A/B 測試和個人化指令碼通常無法完整以非同步方式載入,因為這類指令碼必須在網頁內容載入前執行,但有機會以更非同步的方式載入部分指令碼。請參閱關鍵轉譯路徑一文,瞭解同步指令碼 (也稱為轉譯封鎖指令碼) 在一般網頁載入時間和網頁載入時間之間的基本取捨,然後判斷是否需要優先處理會封鎖的指令碼和網頁載入時間,反之亦然。
- 對於多數網站,第三方程式碼共構成約半數的要求。建議您optimizing,或者暫時移除或停用與執行網站無關的第三方程式碼。
- 如果優先發布功能,這可能就是進行清理的好時機。請從代碼管理工具中移除代碼、清除過大的 CSS 和 JS,以及移除已淘汰的功能或程式碼。Chrome 開發人員工具的 涵蓋率分頁和 Puppeteer 中的
Coverage
類別可協助您偵測未使用的程式碼。
如需更多相關說明,請參閱「縮短載入時間」一文。