五分鐘就能讓你看起來很專業的修正

有些事只花五分鐘，效果卻大到不成比例。這些是我每次都會做的——低成本、高影響力的改進，區分「看起來像週末專案」和「看起來是懂行的人做的」。

加一個像樣的 Favicon

沒有什麼比分頁上的預設瀏覽器圖示更大聲喊著「沒做完」的了。你的網站設計可以很漂亮，但少了 favicon 就是看起來像草稿。

拿你的 logo（或甚至一個字母就好），丟進 favicon 產生器，然後加進去。兩分鐘，你的網站立刻看起來更正式。

優化你的 SVG

如果你在用 SVG 圖示或插圖，很可能它們塞滿了編輯器的 metadata、不必要的元素和多餘的屬性。

從設計工具匯出的典型 SVG 可能是 15KB。優化之後變 3KB。視覺效果完全一樣，資料量少 80%。

把你的 SVG 丟進優化器然後替換原檔。頁面載入更快，而且沒人看得出差別。

壓縮你的 CSS 和 JavaScript

開發時，你的程式碼有註解、空白和有意義的變數名稱。對可讀性來說很棒。

對正式環境呢？把那些都拿掉。壓縮移除所有瀏覽器不需要的東西，檔案大小減少 30-60%。

大多數建構工具會自動處理這個。但如果你在用原始檔案或一個沒有建構步驟的簡單網站，一個快速的程式碼壓縮器就能搞定。

修好你的 OpenGraph 圖片

在 Slack、Twitter 或 iMessage 上分享你的網站 URL。出現了什麼？

如果是空白的預覽或一張隨機截圖，你缺少 OpenGraph 圖片。這是別人分享你的連結時會出現的圖片。

做一張簡單的 1200x630 圖片，放上你的網站名稱和簡短描述。在 HTML head 裡設定好。花五分鐘，讓每一次分享的連結看起來是有意的，而不是壞掉的。

設定適當的錯誤頁面

在你的網站上點一個壞掉的連結。發生了什麼？

如果是預設的伺服器錯誤頁面或空白畫面，修掉它。一個自訂的 404 頁面加上回首頁的連結，十分鐘就能做好，能拯救誤入死連結的訪客。

保持簡單就好：「這個頁面不存在。這裡有一些存在的頁面。」

壓縮你的圖片（再一次）

是的，我知道你已經做過了。但你上週新加的圖片壓縮了嗎？客戶 email 過來的那個 4MB PNG logo 呢？

圖片壓縮不是一次性的工作。每張新圖片都需要同樣的處理。如果你發現自己在跳過這步，把它變成流程的一部分——上傳前壓縮，每次都是。

加一個載入狀態

如果你的頁面需要抓資料或載入重度內容，在等待期間顯示點東西。一個轉圈動畫。一個骨架畫面。甚至只是純文字的「載入中...」。

空白頁面 2 秒感覺壞掉了。有轉圈動畫的頁面 2 秒感覺很正常。同樣的等待時間，完全不同的體驗。

檢查你的手機版面

在手機上打開你的網站。真的看一下。點按鈕。填表單。

我看過設計得很漂亮的響應式網站，結果「送出」按鈕在手機上被鍵盤擋住了一部分。沒人發現，因為沒人在真正的手機上測試過。

---

質感不是追求完美。是消除那些讓人覺得「好像哪裡怪怪的」的東西。一個 favicon、優化過的素材、乾淨的錯誤頁面，還有看得過去的手機體驗。這些每一項都不到五分鐘，加在一起就會讓一切看起來都是有意為之的。