讓你的產品更優秀！22個上線前應該測試的地方
為什麼上線的產品總是覺得“小家子氣”，使用起來“不順暢”，使用者感受“不爽”？我們很難說清楚答案，但直觀感覺就是『產品質量』不行。女票
ofollow,noindex">英選Plus 的專案經理服務了N多網際網路專案，在『產品質量』的優化方面積累了不少經驗。不過，一切優化都有成本，無止境的優化不會帶來更多使用者，反而可能會讓專案週期過長、預算增加引來更多問題。
產品的核心功能和流程一般經過精心設計，也會有多方共同測試完善，很難出現漏洞，所謂的『產品質量』更多在容易忽略的細節。
產品在上線前通常會做一輪完整的迴歸測試，這輪測試很難再發現大問題，目標應該是『以最低的成本、最大程度提高產品的質量』。為此， 英選Plus 整理了22條產品上線前測試規範，包括訪問速度、產品設計、運營分析和安全性四個方面。
這些規範經過驗證，無論是處理和驗收的成本都不高，但卻能夠大幅度提升產品體驗和可靠性。
訪問速度
1. 在1秒內響應、5秒內載入完畢
天下武功唯快不破，網站、應用的開啟速度對於使用者來說，是最為影響使用感受的因素之一。
許多研究都表明，使用者最滿意的開啟網頁時間，是在2秒以下。使用者能夠忍受的最長等待時間的中位數，在6～8秒之間，8秒是一個臨界值，如果你的網站開啟速度在8秒以上，那麼很可能大部分訪問者最終都會離你而去。
處理方法：
如果感覺你的網站確實不夠快，優化速度的方法很多，但大體是兩類：開源和節流。
開源包括：加大伺服器頻寬，提高伺服器效能，加入CDN；
節流會涉及到技術方面的工作：優化程式碼效能，增加頁面快取，壓縮靜態資源等等。
除了程式碼優化之類的需要具體專案具體處理外，其他方式都可通用，具體步驟請參考下文。
驗收方式：
用Chrome的應該會注意到，開啟網頁時標籤卡上會有一個旋轉的圖示，灰色逆時針轉就是等待伺服器響應（響應太快，需要仔細看哦~），而藍色順時針則是開始載入資源，變成了網站的固定圖示，則是載入完畢。
如果需要量化響應和載入時間，則需要用到『開發者工具』了。
Chrome下開啟『開發者工具』（網頁上隨意右鍵並“審查”或F12）後，按以下步驟：
--切換到Network標籤頁，並Disable cache（關閉快取，保證每次重新整理都是全新載入）；
--點選位址列左側的“重新整理”按鈕，並等待頁面載入完畢；
--DOMContentLoaded的結果即為響應時間，Load即為頁面完全載入完畢的時間;
--可以通過仔細檢視網站內資源的載入時間（Time）來識別比較耗時的請求。
看到網站的效能情況後，需要規劃優化方案，請繼續往下看。
2. 使用CDN加速靜態資源
使用者開啟你的網站時，載入的過程就像我們下載檔案，我們會受寬頻運營商（例如電信、天威）和服務提供商（例如百度雲盤）頻寬的限制，當需要下載的檔案很多時，同時可以併發下載的數量也會影響整體時間。
對於瀏覽器來說，單個域名的請求併發量是 6 個，而自行購置伺服器的頻寬通常都比較有限（2-10M是比較常見的），10M的頻寬實際下載速度是1MB/s，如果一個網頁的資源加總是5MB，只有一個訪客，理論上他可以5秒的速度載入完，但實際情況是有30個檔案需要載入，他只能分5輪下載，整體時間會長達20秒以上。
通過CDN可以讓網站的靜態資源載入併發量有效提高，CDN通常有全球節點快取，且絕大多數按流量計費，能充分保障使用者客戶端下載速度，減少頻寬費用。
處理方法：
先去七牛、阿里雲、騰訊雲申請開通『物件儲存』服務，開通後會自動啟用CDN。工程師需為網站配置CDN域名，並設定 映象回源 到網站的正式域名。
驗收方式：
Chrome下開啟『開發者工具』後檢視網站裡面的圖片、CSS及JS等靜態資源確認引用了CDN域名，而非網站域名。
3. 圖片尺寸優化
Google做過一個試驗，顯示10條搜尋結果的頁面載入需要0.4秒，顯示30條搜尋結果的頁面載入需要0.9秒，結果後者使得Google總的流量和收入減少了20%。
Google地圖上線的時候，首頁大小有100KB，後來下降到70~80KB。結果，流量在第一個星期上升了10%，接下來的3個星期又再上升了25%。
當下網路環境下，頻寬仍舊是稀缺品。100畫素寬的網頁位置，但卻放了一張1000畫素寬的圖片，然後縮放顯示。二者的實際尺寸差了100倍，這是流量和頻寬的極大浪費。
處理方法：
根據設計圖/介面實際情況，對需要用到的圖片事前進行尺寸大小調整。
驗收方式：
Chrome下在圖片位置右鍵“審查”，開啟『開發者工具』後比對實際大小和原圖的解析度，考慮到響應式（不同尺寸螢幕下圖片實際大小會變化）可能會有差異，但是整體來說應該基本一致，如果差異太大則需要與工程師溝通。
4. 靜態資源壓縮編譯
網站裡面使用的靜態資源應當儘可能壓縮以節約大小，包括圖片、JS和CSS等。
處理方法：
不同的開發框架都有外掛可以做到這一點，例如Uglifier。
驗收方式：
Chrome下開啟『開發者工具』後切換到Sources標籤，進入Page，找到網站CDN域名或者網站域名下的檔案，以JS為例，壓縮過後程式碼通常難以閱讀，且單行很長，行數很少。
產品設計
5. 404、500錯誤頁面友好處理
輸入網站的某個連結但找不到合適的內容，就會出現404錯誤；而當某一些操作或者頁面程式碼出了問題，則會出現500錯誤（英文提示Internal server error，內部伺服器錯誤。後文第17個測試點告訴你怎麼及時獲知使用者遇到報錯的情況。）。
考慮到這兩種情況都是難以完全避免的，我們需要通過美觀的設計讓使用者碰到時感受好些。
處理方法：
設計師提供UI設計稿並交由前端實現後，放到public目錄或者用nginx配置。
『英選Plus』公眾號回覆”404”獲得404、500設計參考
驗收方式：
在網站域名後邊隨便輸入一些字元回車訪問，就會觸發404；如果網站訪問過程中有程式碼執行錯誤，就會觸發500，可以讓工程師配合測試。
6. 使用者密碼強制中等強度以上，後臺管理員賬號使用強密碼
一般理解的暴力破解是1234，2345，3456這樣無規則的嘗試，而事實上密碼也有心理學，有經驗的黑客會通過其他途徑獲取你的使用者名稱、姓名拼音、生日，以及親友的資訊，並用那些資訊組合進行嘗試。
如果你用的簡單的密碼，被破解只是時間問題。
因此，請不要心懷僥倖，務必使用隨機強密碼，符號數字大小寫搭配使用。
什麼才叫強密碼？關注『英選Plus』公眾號，回覆“密碼強度”獲得最實用的密碼強度規則
7. 桌面端、手機端、平板端版式均無錯亂（完全縮放或響應式）
使用者可能從各種終端訪問你的網站，我們應該將精力放在最重要的終端上（例如手機移動端和桌面端），但是其他常見終端（例如iPad平板）的解析度也要保證基本的訪問效果。
處理方法：
前端工程師需要針對各個常見解析度下，優化處理明顯的問題，例如佈局或者版式錯亂（不需要刻意追求完美）
驗收方式：
Chrome下開啟『開發者工具』後點擊切換裝置（Toggle Device toolbar）的按鈕（見圖）。開啟後，通過上方的下拉框可以切換裝置。如果將開發者工具的佈局收縮到右側，測試體驗更好。
8. 不相容瀏覽器顯示升級提醒
我們在技術選型時經常不得不使用不相容舊瀏覽器的新技術，而新式瀏覽器的使用者也確實將擁有良好的訪問體驗，但是仍有一些使用者使用老舊的瀏覽器，我們無法完全放棄這部分使用者，這種情況下，引導他們升級，是更負責任的態度。
處理方法：
判斷瀏覽器的型別和版本資訊（User Agent）並在老舊瀏覽器上顯示類似以下的引導內容，也有外掛可以方便做到這些。
驗收方式：
目前來說，老舊瀏覽器通常意義是指IE9及以下。如果使用Windows 10之類的系統，將無法直接測試IE舊版本的相容性，為此，我們需要開啟IE核心相容性模式。
以使用最新的IE11瀏覽器為例，按F12鍵調出“開發人員工具”，然後在左側導航欄向下滾動，找到電腦圖示狀的“模擬”按鈕，在“文件模式”下拉列表中可以選擇從IE5到IE10的舊版IE核心，選擇某個核心之後，當前網頁就會重新整理以選定的IE核心相容性模式開啟。
9. 慢網路下有Loading或載入進度
每個人都遇到過網路狀況不太好的情況，使用者會因為“沒有反應”、“頁面空白”而焦慮，造成重複點選提交資訊、中斷操作甚至離開你的產品。
研究顯示，如果等待12秒以後，網頁還是沒有載入，那麼99%以上的使用者會關閉這個網頁，不再等待。
但是，如果在等待載入期間，網站能夠向用戶顯示反饋訊息，比如一個進度條，那麼使用者可以忍受的時間會延長到38秒。
處理方法：
loading.io有大量loading樣式素材參考下載
網站響應後如有大量素材待載入，應及時讓使用者知道載入進度，例如“進度條”；
表單請求提交後立即遮蔽提交按鈕，並加上“旋轉的菊花”等。
驗收方式：
如果前面網站速度優化到位，本地的頻寬又比較充裕，可能會難以復現低速網路的效果。我們同樣可以通過Chrome的『開發者工具』，進行網路情況的模擬。
Chrome下開啟『開發者工具』後點擊切換裝置（Toggle Device toolbar）的按鈕，開啟後，通過上方右側的下拉框可以切換模擬網路情況（預設Online）。
10. 表單必填引導及錯誤提示
屬於產品範疇，不多解釋
11. 使用者敏感操作需要二次驗證
最常見的二次驗證就是手機驗證碼，屬於產品範疇，不多解釋
運營分析
12. 引入統計分析
你瞭解你的網站流量和訪客情況嗎？很多企業有網站，卻並不知道自己的這些資料，或是沒人知道怎麼獲得這些資料。對此， 英選 的意見是，根據不同企業的情況，目前可以不做各種資料運營和分析，但要立刻開始收集。確保未來要用時，能有歷史資料。
處理方法：
需求方需要先註冊好例如Google分析、百度統計之類的賬號，並新增好站點，將跟蹤程式碼交給工程師放在layout佈局檔案裡面。
驗收方式：
引入跟蹤程式碼後次日登入統計分析系統，檢視有無訪客、來源之類的資料產生。
13. SEO基礎：頁面描述、favicon及動態標題變化
當你谷歌搜尋 『英選』 ，你會看到 英選 首頁的標題、描述，開啟網站後標籤卡上的網站圖示（favicon），這些內容都是我們能夠控制的。同時，我們還需要讓網站內不同頁面有自己的標題。
處理方法
新增不同的meta，分別對應description和keywords，以及favicon。
驗收方式：
如果網站已經被收錄，修改後一般隔天重新搜尋就能看到更新；如果尚未收錄，得先用谷歌或百度的站長工具先提交網站收錄。
品牌升級後的 英選 ，對網站的標題和描述也進行了優化
14. 應用日誌自動清理策略
網站執行過程中會產生大量日誌，這些日誌對於分析網站的問題有很大幫助。
但是持續的日誌產生又會導致硬碟空間被擠佔，嚴重情況下會導致伺服器無法正常執行——這是一個很難在專案交付初期發現、容易忽略的問題，卻會給網站執行的穩定性帶來風險。
處理方法：
增加定時任務（如crontab）壓縮、備份及清理日誌，也可使用logrotate。日誌價值很大的情況下，可以考慮ELK。
驗收方式：
告知日誌儲存位置及策略，檢查檔案是否按策略壓縮、備份及清理。
關注『英選Plus』公眾號，在公眾號回覆“日誌備份”，獲取最佳日誌策略是什麼？
15. 資料庫自動備份策略
資料庫存放了應用方方面面的資訊，而且執行過程中時時刻刻都在更新。一旦伺服器出現問題，我們需要有可行的備份策略。
處理方法：
不同的資料庫都有備份方法，需要有定時任務制定備份策略，並備份到物件儲存等外部空間。
驗收方式：
告知資料庫備份策略及位置，檢查資料庫檔案是否按策略備份，是否可以正常恢復。
關注『英選Plus』公眾號，在英選Plus公眾號回覆“資料庫備份”，獲取英選推薦的資料庫備份策略是什麼？
16. 伺服器資料資料夾定期備份策略
應用使用過程中，會有大量的資料檔案產生，例如上傳圖片、附件等，這些都存放在伺服器內，而不是資料庫或者程式碼庫。
一旦伺服器出現問題，我們即使恢復了資料庫，資料檔案的缺失也可能導致應用無法正常使用，我們需要有可行的備份策略。
處理方法：
需要有定時任務制定備份策略，定期自動打包、壓縮並上傳到物件儲存等外部空間。
驗收方式：
告知資料檔案備份策略及備份位置，檢查檔案是否按策略備份，是否可以正常恢復。
17. 前後端程式碼錯誤監控
每個應用執行過程中都會有出錯的時候，但一般來說我們不知道使用者正在面臨問題，這時候可能使用者就帶著憤懣離開了，而我們卻毫無知覺。可怕的是，這樣的事情可能一直在發生。
處理方法：
為了儘可能提高產品質量，我們需要對前端（包括使用者使用的客戶前臺及管理員使用的後臺）、後端都新增程式碼錯誤監控，出錯時通過郵件等方式及時通知工程師和專案經理。
建議使用Sentry之類第三方服務，方便持續收集統計報錯資訊。
驗收方式：
新增自己的郵箱到Sentry或其他報錯通知列表，觸發報錯檢查是否可以收到郵件。
安全性
18. 支付介面非同步通知
涉及到支付的環節對於產品來說至關重要，我們不僅要保障使用者支付流程的順暢，還要保障資料的正確。
支付介面有同步通知也有非同步通知，前者是支付成功後支付介面直接返回的狀態，後者是指支付服務商直接通知到伺服器後端的通知。二者幾乎都是實時的，但是由於後者是支付服務商主動通知，意味著對支付的正式確認，可靠程度更高。
處理方法：
採用非同步通知邏輯處理訂單狀態的變化，前端不可依賴支付介面的返回，需等待後端通知或者主動向後端查詢訂單狀態。
微信小程式支付文件中的業務流程時序圖，包含了“推送支付結果後更新訂單狀態”的部分
驗收方式：
向工程師確認支付通知的處理邏輯是否包含簽名驗證、訂單金額驗證和訂單狀態變化。
19. HTTPS證書
HTTP可以被劫持，篡改網頁內容。而HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議， 要比HTTP協議安全，實現了伺服器和客戶端雙向驗證以確認對方身份。
處理方法：
需求方於阿里雲、ssls.com購買商業SSL證書，或Let's encrypt申請免費SSL證書，配置代理伺服器（nginx、apache）以啟用HTTPS。
阿里雲上SSL證書產品的詳細介紹頁面
驗收方式：
檢視瀏覽器位址列左側，有無”小鎖“的標誌或”安全“字樣，展開後點擊證書，可以檢視證書的頒發方、證書型別及過期時間。
20. 伺服器root賬號禁止登陸
黑客在無時無刻窺探、嘗試破解我們的伺服器，root作為Linux系統的超級管理賬號，名字是固定的，如果暴露在外容易被暴力破解。
處理方法：
除了各類防暴力破解的策略外，更加簡單有效的就是直接禁止root賬號登入，而啟用自行建立的具有超級管理許可權的賬號名。
驗收方式：
在終端輸入ssh root@ip或域名，提示許可權拒絕。
21. SSH更換埠，採用證書登入，禁用密碼登入
root賬號已經禁用了，但如果你的賬號仍舊有概率被猜到，一旦提示輸入密碼，那就又有了暴力破解的機會。
處理方法：
修改伺服器ssh的預設埠（22），並禁用密碼登入，所有需要伺服器許可權的工程師採用證書方式登入。
驗收方式：
在終端輸入 ssh root@ip或域名 ，提示22埠連結拒絕，意味著埠已更換。如果埠正確，提示許可權拒絕（公鑰），則表示證書對該使用者名稱無效。
22. （簡訊服務、支付功能等）外部服務採用白名單策略
對於一些涉及付費、敏感的外部服務，例如微信公眾號、支付介面、簡訊服務等，需要採用白名單策略，避免金鑰資訊洩露後被非法使用。
處理方法：
將伺服器的公網IP配置到這些服務的後臺。
驗收方式：
一旦被非法呼叫（例如遷移伺服器後忘了新增白名單）會觸發錯誤拒絕呼叫，併發送安全通知。
參考內容
網頁開啟速度的心理學 - 阮一峰的網路日誌：
http://www.ruanyifeng.com/blog/2009/03/the_psychology_of_web_performance.html
The Psychology of Web Performance - how slow response times affect user psychology：
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
微信支付官方文件：
https://pay.weixin.qq.com/wiki/doc/api/index.html
Sentry：https://sentry.io
七牛雲端儲存官網：https://www.qiniu.com/
阿里雲SSL證書產品：https://www.aliyun.com/product/casspm=5176.10695662.1171680.1.5358481ayfgi6F
SSLs.com：https://www.ssls.com
原文連結：