一直以來我都是 Cloudflare 的忠實用戶,除了可以做為 DNS 代管,為網站提供更快、更穩定的速度及安全防護功能,後來也變身為網域名稱註冊商 Cloudflare Registrar,直接給出最貼近成本價的域名註冊和續用價格,包括 SSL 憑證、DNSSEC 或 WHOIS 隱私防護等功能在內都是不須額外加價的附加服務。如果你是使用 WordPress 架站,我也寫過 Cloudflare 的 WordPress 外掛教學,只要下載啟用後連接到你的帳戶就能快速整合 Cloudflare 各項功能。
網站優化
Cloudflare 和 Internet Archive 合作,當伺服器無法連線時提供網頁副本
根據 Cloudflare 研究發現他們的用戶每天總共花費四年半時間來等待沒有回應的伺服器傳回錯誤訊息,對使用者來說沒人想看到錯誤頁面,如果在網站無法開啟時依然想看到內容,搜尋引擎提供的「頁庫存檔」功能其實很有用,可以查看搜尋引擎在爬行時索引儲存的頁面內容,當然相較於「新鮮」頁面來說可能會有時間差,不過還是能讓我們看到網頁內容,特別是一些文字資訊就能正常瀏覽,我很常在無法正常開啟的網頁使用這個技巧。
Website Grader 網站評分工具,免費影音教學影片協助改善搜尋引擎排名
如果想要對網站或部落格進行搜尋引擎最佳化,我通常會建議先去詳細閱讀「Google 搜尋引擎最佳化(SEO)入門指南」,在 Google 釋出的手冊中有提到非常多觀念,適用於各種情境,只要把握大原則方向就會有不錯的成效表現。此外,Google 提到的網站使用體驗中以速度最為重要,想知道網站速度也可透過檢測工具 Web.dev 或其他網站測速工具進行檢查,這份列表中我較推薦 Google PageSpeed Insights 和 KeyCDN Website Speed Test。
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊(Chrome 擴充功能)
通常在網站流量出現變化時網站管理者會去探究原因,如果你的訪客多為來自搜尋引擎的自然流量,有很大機會是搜尋引擎排名下降或類似問題,當然各家公司使用的演算法技術是商業機密,但通常都圍繞著一些大原則,像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書,當中有提到使用正確語法清楚表達網頁資訊。
Counter by Alles 最簡單的免費網站計數器,一行程式碼就能顯示訪客數
Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。
Site Kit by Google 官方 WordPress 外掛開放下載,常用站長工具整合網站
ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果
早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。