上周，我和一位老客戶聊天，她說：“我覺得我的網站需要改進，但我不能確定我具體需要做什么。”

然后我就去問了一圈，包括朋友、家人和其他非互聯網行業的商務人士，他們都提到了相同的觀點：

“我需要一個檢查清單，因為我不知道怎樣建站，這也是我要雇人來做這件事情的原因。但是我依然需要知道這個過程涉及到哪些方面。”

因此，我列了一的優化清單，我敢保證:如果你能把列表的每一項問題都改好，你將會擁有業界里最好的網站之一。

你是怎么知道的？

據我所了解的情況，我從沒見過一個網站可以把所有選框都打上勾的。

對于企業老板，根據這個列表，你可以了解到接下來可以做哪些改進工作，然后把它發給你的設計或者開發去修改。你甚至還可以自己去修復其中的一部分問題。

對于自由職業者，使用這個列表可以讓你做出更加酷炫的內容，然后回去找你的老客戶們，對他們說：

“我重新回顧了之前的項目，我們可以修復這里、這里和這里，給我 1000, 5000 然后你可以期待得到以下的改進結果……”

重點是我希望可以幫你構造出更加酷炫的網站。事不宜遲，現在進入正題，開始介紹這個列表：

酷炫的品牌

挑選一個 專業的 logo，現在很難找到一個帶有很棒的 logo 的網站或者博客，因此這是一個瞬間獲取信任感的好方法。

上傳一個 支持 retina 屏幕的 favicon (在瀏覽器標簽上顯示的正方形小圖標)。大部分網站的 favicon 都是 16x16 像素的，在 retina 屏幕會顯得模糊。使用 X-Icon Editor 生成 64x64 像素大小的 favicon。

使用 支持 retina 屏幕的圖片。這很簡單，只需要確保圖片寬高是容器的兩倍，然后顯示時縮放就可以了。

最多使用 2-3 種顏色。包括背景色、文字-動作顏色和強調色。

選擇調色板時，從 互補色或者三色組（complementary or triad colors）開始選擇，然后再進行調整。好的顏色組合會給你帶來充滿故事感的設計。

不要使用純黑色 (#000000)。純黑色是不存在的，所以在網上使用純黑色看起來不合適。實際上，黑色應該總是作為其它顏色的深色陰影。

不要使用淺灰色 (比如 #cccccc)。如果你希望設計更顯個性化，可以試著添加一點黃色顯得溫暖，添加紅色給予能量，而藍色產生信任。

酷炫的排版

挑選一種 優質的字體。使用 Typekit 之類的服務吧。據說多達 95% 的網站都是有排版的，想要產生良好的第一印象，使用優質字體是最簡單、成本最低的方法。

最多使用 2-3 種字體。使用更多字體會顯得雜亂，并且減慢加載時間。挑選一種字體用在頭部，一種用在段落中，如果有需要的話，還可以挑選一種用在其它特殊情況里。

設置 body 的字體大小為 最小 16px，更小的字體在大屏幕中不方便閱讀，如果是移動端頁面可以考慮的最小值為 12px。

設置 排版縮放比例，就像（樂理中有）增四度，純五度音程或者（在繪畫使用）黃金比例。根據比例來設置段落文本大小，以及 H4, H3, H2 和 H1 標簽。當然，文本的行高和間距也要基于這個比例。

設計其它的 排版元素，包括引用、符號列表、數字編號列表、表格標題、幫助文本、警告框、高亮文本、代碼示例、縮寫甚至地址。

選擇一種 自定義圖標字體，比如 Font Awesome，來代替圖片和其它一些元素，比如社交媒體 logo、導航按鈕、交互圖形等。圖標字體的加載速度更快，可以任意縮放，并且可以隨意更改圖標顏色。

酷炫的學習交流

免費分享干貨，包括2018最新的前端企業案例學習資料和零基礎入門教程

酷炫的布局

使用 三分法 來設計基本布局。水平垂直把布局劃成三等分，然后當線段橫穿時，設法對齊關鍵的焦點。

使用一個網格系統來維護 垂直方向的網格。把你的布局分隔成 8 列、12 列或者 16 列的布局，列與列之間帶有足夠空白。

使用 基線網格 保持垂直方向的調和感。文本行之間的空間，和內容塊之間的空間都同樣重要。每行文本應該都擁有一定的底部外邊距，也就是位于基線的地方。

空白 是奢侈的。空格的存在是為了創造呼吸空間和平衡，你應該把讀者的眼球吸引到重要的地方去。

均衡擺放視覺元素，比如按鈕、輸入框、表單和大標題等。你應該把眼睛瞇起來，試著跟蹤那些你想讓用戶關注到的路徑點。

酷炫的用戶界面

使用大大的加粗的 行為按鈕。每個頁面應該只有一個目標，而且幾乎都是點擊一個按鈕而已。所以確保這個按鈕不會被用戶忽略。

添加 鼠標懸停 (hover) 和鼠標點擊 (active) 狀態 的樣式給鏈接、按鈕、輸入框和文字區域。如果你選擇在鼠標懸停時讓按鈕顏色變亮，那你也應該對于鏈接和輸入框邊框給出同樣的樣式。

保持 表單樣式 的一致性。所有的文本區域和輸入框都應該有相同的樣式。包括相同的邊框顏色、背景顏色、懸停狀態、點擊狀態、占位符文字、點擊狀態文字等。確保 tabindex 屬性的正確設置，以便用戶可以使用 tab 鍵在表單項之間用正確的順序切換。

改變 已經點擊過的鏈接 的顏色，讓用戶知道他們已經去過那個頁面了。

一旦你擁有了自己的 logo、顏色、排版、布局和圖像大小，你要建立一個 風格指南。好的用戶界面應該使用風格一致的組件，其樣式應該總是相同的。

酷炫的用戶體驗

在按鈕和其它表單域元素使用 微交互（microinteractions）。比如，點擊上傳按鈕之后，提示文字可以變為 “正在上傳” 或者 “處理中”。

不要使用 scroll jacking （譯注：通過重新定義鼠標滾動速度、幅度達到控制可視區域視覺效果的方式）！不要打亂瀏覽器的默認行為，雖然你可能會覺得讓滾動速度變成原來的兩倍很不錯，但事實并非如此。

放棄使用首頁輪播。輪播會減少轉化率，可以考慮使用更佳的方法來在有限空間顯示更多信息。

不要使用歡迎界面。當用戶第一次打開首頁時，用戶希望能直接看到首頁內容。

使用 標題、副標題、頭段落、列表、表格標題 讓你的內容更容易被檢索。大部分人在瀏覽網頁前，都會先檢索一遍全文，再決定是否閱讀。

添加 描述性的占位符文字 到你的表單、輸入框和下拉菜單。如果你想要讓瀏覽者用某種特定方式來填寫表單，你應該指引他怎么做。對于下拉菜單和選擇框來說，可以讓第一個選項變成描述，比如 “選擇年份” 就比 “2016” 更合適。

往表單添加 HTML5 驗證，讓用戶在提交表單時可以清楚地知道哪些部分出現填寫錯誤。

通過避免含糊鏈接名字、減少雜亂排版、使用標點符號、保持簡潔布局、添加圖片提示（alt text）、使用大字號、保持文本和背景色的高對比度，可以讓你的網站 適用于視覺障礙人群。

酷炫的開發

確保你的站點是經過 移動端優化 的，也就是在任何設備上都可以響應式地顯示。合理優化移動端的站點，加載速度更快，排行更高，并且可以提供更佳的用戶體驗。

生成并 顯示經過優化的圖像。假設你上傳了一張大圖片，比如博文的特征圖像，如果你想在站點的其他地方顯示（比如側邊欄），應確保你在側邊欄顯示的是圖像的縮略圖而非原圖。

所有圖片和超鏈接都要添加 alt 和 title 屬性。當遇到某種異常情況，圖片沒有正常加載出來的時候，網站應該在圖片位置顯示替換文字（alt text）。并且，當鼠標懸停在鏈接時，瀏覽器應該顯示該鏈接的 title 屬性的值。

使用 和 標簽代替 and ，以輸出加粗和斜體字符。雖然他們的作用相同，但是有著根本區別。 標簽對應著一種樣式，而 標簽則是一種語義化的表示，指明了應該如何理解這個標簽的含義。

去除多余的 HTML。當你復制粘貼內容到 WYSIWYG 編輯器（類似于 WordPress 的編輯器）的時候，它會添加許多不必要的 span 標簽與內聯樣式。時間長了，你的網站代碼就會變得不可讀了。

說到這里，需要給你的 HTML 移除內聯樣式。99% 的樣式規則都應該寫進 CSS 文件，以便你可以在同一時間更新一個組件在所有頁面的樣式。

使用 Sass 變量 代替原生 CSS，以保持顏色和其他組件可以在整個網站之間共用。這樣，當你想要改變這個顏色時，只需改變一行代碼而不是上百行。

鏈接使用永久鏈接（permalinks）代替完整 URL。當你打算切換域名時，你的鏈接最好使用 代替完整路徑 domain.com/slug-goes-h…”>。對于一些圖片資源和 CSS 背景，如果你不這么做，當域名變化的時候，你的所有資源都將會失效。

開發一個 自定義插件 或者工具，為你的網站提供獨特的功能。雖然自定義軟件難以維護，但是這樣做可以讓你的網站在眾多類似網站中脫穎而出。

測試 跨瀏覽器兼容性，確保你的網站可以在 Chrome, Firefox, Safari, Internet Explorer 和其它瀏覽器正常顯示。雖然舊版 IE 在兼容性方面臭名昭著，但是可以通過 BrowserStack 進行人工檢查。

使用 W3C 的 Markup Validation Service（標記語言驗證服務） 來檢查 HTML 的明顯錯誤。要記住，大部分網站的 HTML 都不是十分完善的。雖然這項檢查并非最高優先級，但是如果你的 HTML 沒有錯誤，你會感到更開心。

設定一個 模擬環境 用來改變你的當前網站。理想情況下，你應該有一個生產環境，是用戶能看見的；以及一個模擬環境，供開發者作出更改。一旦更改已經準備好發布，就可以把模擬環境的代碼部署到生產環境。

在頁面顯示當前年份。當你看見一個站點的 copyright 年份不是最新的時候，你就會覺得這個網站應該很久沒維護了。可以使用 PHP 或者類似的腳本語言，動態地顯示當前年份，而不僅僅是顯示靜態文本。（比如 ? ?—?）。

酷炫的搜索引擎優化

為每個頁面選擇一個關鍵詞，這個關鍵詞關系到你的頁面排名。圍繞這個關鍵詞，優化這個頁面的方方面面。當然，并不是讓你在每句話都提到這個詞，可以動腦筋想想你想讓它排到第幾位去。

給每個頁面設定一個充滿關鍵詞的 title 標簽。標題會顯示在谷歌搜索結果的藍色鏈接文字上，有 55 個字符的長度限制。

每個頁面有且僅有一個 H1 標簽。在大多數情況下，這個標簽的文字應該和 title 標簽相同。

在頁面內容中包含很多 H2、H3 和 H4 標簽 ，以創建小標題和顯出視覺層次感。

用一個 特定的關鍵詞 優化頁面，可以通過把它包含在標題、H1、副標題和內容的前 1/3 部分。

你的 meta 標簽的描述（description） 會顯示在搜索引擎的鏈接下方。所以確保你的每個頁面都包含 meta description，并確保在描述里包含關鍵詞。

你的 永久鏈接（permalink），也就是 URL 里緊隨域名的部分（比如 domain.com/permalink-here/），應該包含破折號分隔開的關鍵詞內容。

Google 把 域名的注冊時長 考慮到算法中，他們認為，注冊時間長的域名更有可能提供高質量的資源。提前注冊你的域名吧，如果你的域名注冊時間超過 10 年，相信你對你的事業是認真的。

平均起來，SERP (搜索引擎結果頁面) 的第一個結果，不管是任何關鍵詞，打開的頁面都不少于 2000 字/頁。當你寫文章或者創建頁面時，如果你希望頁面的排名更高，試著至少寫 2000 字吧。

添加你的網站的 Google Webmaster Tools，然后你可以知道 Google 如何索引你的站點，并在遇到關鍵問題時保持更新。

為了提高圖片的排行，上傳之前應該總是 重命名你的圖片 和其它文件。

在站點中包含 robots.txt 文件，告訴爬蟲哪些頁面應該/不應該被索引。

添加 canonical 重定向 把不帶 www 的頁面訪問指向網站的 www 版本，或者反過來也可以。

研究并整合每個頁面的 LSI 關鍵詞（LSI: 潛在語義索引），以幫助提高頁面在主關鍵詞的排行。通過 Google 搜索一些關鍵詞短語并尋找 “相關搜索” 鏈接，可以幫你找出 LSI 關鍵詞。

經常確保 你的內容之間可以互相連接。你的站點的每個頁面，都應該可以通過從首頁開始的不多于三次點擊訪問到。

添加 結構化的數據 到相關頁面，以幫助 Google 合理索引你的內容。以下這些頁面類型需要結構化的數據，包括：人物、產品、事件、公司、電影、書本、報刊評論等。使用 Schema Creator 可以幫你生成結構化的數據。

使用 Google 的 PageSpeed Insights 工具，以確保你修復了所有可能降低頁面速度的普遍問題。頁面加載速度越快，排名越高。

酷炫的網頁速度

保持 頁面流量低于 2MB。檢查主頁面的加載流量，如果多于 2MB 說明內容太多了。

保持 頁面請求低于 50 個。頁面中的每個文件和圖片都是一個 HTTP 請求，請求數越少，加載速度越快。平均每個網頁的請求數是 70 個。使用 GTmetrix 可以檢查你的網頁請求數。

設計頁面元素時，使用 CSS 代替背景圖片。不要使用圖片來顯示按鈕、表單或者其它通用的元素。CSS 的加載速度更快，并且在響應式布局中更加靈活。

在圖片上傳之前 優化圖像。比如 TinyPNG 這樣的工具，可以幫助你在不降低分辨率或者圖像質量的情況下，減少圖片文件大小。

使用 內容分發網絡（Content Delivery Network） 來存儲你的圖片和其它大文件，并放在世界上的不同區域中。CDN 通過策略定位好的服務器，存儲分發你的文件，可以最大化加速頁面速度，當然加載速度也根據訪客的所在地區而有所差別。

在上傳你的代碼文件到服務器之前，通過編譯和壓縮工具，最小化 JavaScript, HTML 和 CSS。對于 JavaScript，可以使用 Closure Compiler。對于 HTML，可以使用 HTML Minifier。對于 CSS，可以使用 YUI Compressor。

把 阻塞渲染的 JavaScript 移動到底部。唯一應該放在頭部的腳本是那些會立刻影響頁面設計的內容（比如：自定義字體）。

避免目標網頁重定向。重定向觸發額外的 HTTP 請求，會延遲頁面渲染。

借助 瀏覽器緩存，可以通過為頁面和不經常更新的資源設置過期時間來實現。瀏覽器緩存會通知瀏覽器，從本地磁盤加載之前下載過的頁面，以減少不必要的網絡請求。

在服務器配置中啟用 gzip 壓縮。壓縮可以減少多達 90% 的傳輸響應時間，大大減少了首次渲染頁面的時間。

在服務器配置中啟用 Keep-Alive，以允許同一個 TCP 鏈接可以發送和接收多個 HTTP 請求，因而可以減少后來請求的延遲。

升級為 專用服務器 或者更優質的主機服務，以降低服務器響應時間。當你使用共享的服務器環境時，你的站點通常放在一臺需要同時響應至少上百個網站的服務器里，如果其它網站的流量很大，你的網站速度自然就會降低。

酷炫的平面設計

作為可選的加分項，使用 自定義 ebook 封面。它不難創建，但是可以讓你的轉化率大大提高。

為你的主頁和銷售頁面設計一個 自定義的平面圖形或者插圖。一個專門為站點設計的好插圖，可以讓你的站點更加容易讓人記住。

創建一個或者一系列的自定義 博客特征圖像設計。也就是你在 Facebook, Twitter, Pinterest 等社交網站傳播時使用的圖片。當用戶看到和博客有所關聯的某類型的圖片時，他們會聯想到文章可能是你寫的。

給你自己和你的團隊的每個成員顯示一張自定義的 頭像插圖或者漫畫。相比于聘請專業的攝影師，自定義的漫畫成本較低，特別是當你的團隊增加新成員的時候。此外，對于新成員來說這也是一份不錯的禮物。

自定義圖表 以可視化的方式顯示數據和其他內容，相比于同類的博客文章，更容易獲取更多流量。人們更喜歡在 Pinterest 這樣的網站上分享圖表，或者是帶著你的站點的反向鏈接并轉發到他們自己的網站上。

如果你創作了一個甚至一系列的視頻，你應該擁有一個 定制的視頻開場部分和/或結尾部分，讓大家感受到視頻是專業的。不要提及其它的視頻畫面或者動畫，可以幫助你的品牌更加突出。

酷炫的 Web 安全性

安裝 SSL 證書，以允許服務器端和瀏覽器之間建立安全連接。如果網站用到銀行卡支付功能，大部分的檢測軟件都要求使用 SSL 證書。用上 SSL 證書可以幫助提高網站的搜索排行。

你用到的軟件和插件要 保持最新版本。Wordpress 和其它 CMS 軟件都會釋放更新，通常是為了修復漏洞。如果你沒有及時更新，你的網站被攻擊也就是遲早的事情了。

為管理員頁面設置 雙認證登錄。大部分的黑客入侵都是從登錄頁開始的。

檢查并 刪除惡意軟件。如果你的網站曾經被入侵，黑客很可能會留下一些不容易發現的后門。如果你沒有及時刪除，你的網站可能會被谷歌列入黑名單，大大降低你的網站排行，并在用戶打開網站時，警告用戶離開。

不要把 管理員賬號 稱為 “admin”。刪除默認的管理員賬號，并創建一個使用其他名字的新賬號。

定期 備份數據庫和網站文件。大部分備份軟件和插件都只備份你的數據庫，里面包括了數據和內容。但如果你把整個網站都丟了，你還需要文件內容的備份來還原網站。

酷炫的內容

創建一個自定義 錯誤 404 頁面，當用戶嘗試訪問不存在的地址時，這個頁面就會顯示出來。可以使用 404 頁面把他們引導到首頁，并幫助他們尋找他們想要的頁面。

除了主頁之外，關于頁面 可能是用戶最常訪問的頁面了。要確保這個頁面能夠很好地代表你和你的公司。

聯系方式頁 幫助用戶找到你，而且還能夠建立你和訪客之間的信賴。當決定站點排名時，機器會尋找你的聯系方式，然后找到郵箱地址、電話號碼和地址。聯系信息告訴 ta，這個站點更加值得信賴一點。

在戰略上，站點里擁有選填的表單是正確的，然而建立一個 準顧客收集頁面 的想法也不錯，除了一個高轉化率的選填表格什么也不用放。當你希望用戶提交信息時，鏈接到該頁面就行了。

當用戶訂閱你的列表時，確保你可以給他們一個 確認頁面，讓他們可以確認郵箱地址。假如用戶不能確認郵箱是否正確，他們可能就會把事情給忘了，然后再也不會回來你的站點了。

在點擊郵箱里的確認鏈接后，給用戶發送一個 感謝頁面 讓他們知道下一步可以做什么。這個頁面是每個訂閱者都能看見而且只能看見一次的，因此這是一個絕佳機會鼓勵用戶去掏腰包購買內容。

你的網站或者主題應該有一個 著陸頁 模板，當你需要用戶進行特定操作時，可以用上。

如果你在網站上買東西，確保你有一個漂亮的 銷售頁面。從大字標題開始；為你的賣場留出足夠空間；有可能的話做一個介紹視頻；在頁面底部指引用戶如何購買。

酷炫的社交媒體

在你的文章和頁面上，限制 社交媒體按鈕的數量，因為每個按鈕都會運行相關的腳本，額外增加頁面加載時間。通常包含 1-5 個按鈕比較合適

弱化那些鏈接到個人檔的社交媒體圖標，可以讓圖標變小或者放在頁面底部。其實社交媒體營銷的目的就是把用戶導流到你的網站來，而不是反過來作用。

好了，我還有什么遺漏的嗎？作為程序員，你有沒有嘗試過使用上述方法讓網站變得酷炫呢？

期待你的回復，可以轉發或者收藏。

如果你希望更多人看見這個列表，不妨推薦這篇文章給大家。讓我們一起把網站變得更加酷炫！