騰訊云教你如何在3分鐘內(nèi)提高網(wǎng)站打開速度

對于一個用戶來說，判斷一個網(wǎng)站好壞的首要指標就是網(wǎng)站的打開速度。有研究表明：用戶打開網(wǎng)站最滿意的時間是3秒以下，網(wǎng)站打開時間超過10秒，就會有98%的用戶選擇直接關閉網(wǎng)站。如此嚴重的用戶流失對于站長和企業(yè)來說，都是非常嚴重的問題：無論你的網(wǎng)站布局有多么合理，素材有多么精美，內(nèi)容有多么無敵，都再無用武之地。這時候，我們該怎么辦？

在開始分析解決問題前，先得對整個網(wǎng)站系統(tǒng)有個清晰的理解。網(wǎng)站是單機部署，還是多機部署？有沒有用到負載均衡？當前網(wǎng)站的QPS多高，各機器負載情況如何？最好能用可視化圖形畫出清晰架構(gòu)。

除此之外，我們也需要知道瀏覽器請求背后的原理：當用戶在瀏覽器輸入完一個網(wǎng)址，這背后經(jīng)歷了一系列復雜的流程才能最終將頁面呈現(xiàn)出來：比如DNS解析、TCP建連、TLS握手、瀏覽器解析和渲染（詳細流程可以參考：https://github.com/alex/what-happens-when）。這其中每一個環(huán)節(jié)出了問題，都可能導致最終網(wǎng)站打開速率降低。那么，我們應該怎么快速找到問題點？

01 分析定位問題

首先，要定位網(wǎng)站打開慢的原因，通常有以下幾種方法：

·客戶端信息收集

我們一般需要用戶配合，提供一些基礎信息：

·問題是否必現(xiàn) /是首次打開慢，還是每次打開都很慢？

如果只是首次打開慢，說明是本地沒緩存。如果每次打開都慢，說明服務端緩存配置可能不正確，或者站點包含了太多動態(tài)請求。

·是否共性問題 /除了本站點打開慢，打開大流量網(wǎng)站（比如www.qq.com）也慢嗎？

如果大流量站點打開也慢，極可能說明本地網(wǎng)絡或者DNS存在問題。否則，可能是本站點的原因。

·是否網(wǎng)絡差異 /切換不同的WiFi，或者切換熱點重試，是否有改善？

如果WiFi/熱點訪問體驗不同，也可能說明是網(wǎng)絡鏈路問題。比如服務器在電信網(wǎng)絡，而客戶端在移動，跨網(wǎng)互聯(lián)會存在天然的延時。

·其他用戶是否有類似問題

如果只是個別客戶端出問題，基本能確定是客戶端自身原因。

我們可以保持和客戶交流，通過提問的方式驗證自己的猜想，不斷地把不可能的因素排除掉，確定排查方向。

·抓包

除了找用戶收集信息之外，我們還可以引導用戶借助瀏覽器抓包診斷。比如Chrome就有開發(fā)者工具，其中network面板可以分析資源加載時序，查看每個資源的加載時間，定位到加載慢的資源，詳細操作：https://developer.chrome.com/docs/devtools/network/。

·診斷工具

除了主動詢問客戶外，也可以利用自動化診斷工具來快速獲取客戶端的ip、localDNS、瀏覽器版本等基礎信息，http://debug.ping.dnsv1.com/ping.x。

·第三方探測

有時候，為了判斷問題是個例行為還是共性行為，我們可以借助第三方探測工具來排查。比如一次性探測工具：https://www.17ce.com/，周期性探測系統(tǒng)可以用博睿、基調(diào)等公司提供的服務。

·主動監(jiān)控

為了更快、更主動的發(fā)現(xiàn)客戶端的異常，一般情況下我們也需要在業(yè)務代碼中做一些埋點上報邏輯，將頁面加載的延時等基礎信息上報服務端，用于分析訪問情況，對頁面優(yōu)化有極大的參考作用。

不僅僅是頁面內(nèi)要做埋點上報邏輯，對于服務端，我們也需要做好監(jiān)控，將服務器基礎信息（CPU/內(nèi)存/磁盤/tcp連接/文件描述符）以及業(yè)務維度指標（請求QPS、請求時延、線程池數(shù)量）上報至監(jiān)控系統(tǒng)。當系統(tǒng)具備了全面的監(jiān)控，碰到問題時我們才不會盲目，可以順著監(jiān)控曲線快速驗證猜想，排除干擾，定位到根因。

以上粗略列舉了分析定位問題的一些手段，實際操作過程中我們往往需要綜合多種方式來找到問題。

02 問題解決方案

定位到根因后，我們便可以針對性提出解決方案。

·客戶端原因

如果是客戶端網(wǎng)絡/DNS解析異常，需要聯(lián)系本地網(wǎng)絡服務提供商解決。

·服務端原因

1.服務器CPU高負載

一般情況下，這意味著請求量超出了服務器承受能力，資源已耗盡，需要擴容新服務器。有以下方式：

1）LB服務端負載均衡

可以引入負載均衡服務，比如騰訊云CLB，能將來自客戶端的請求以特定的均衡算法派發(fā)到后端服務器上，降低單臺服務器壓力。并且還可以探測后臺服務器存活性，自動剔除掉不健康的節(jié)點。

2）DNS全局負載均衡

如果請求量超出了單臺LB承受能力，這時LB也可能會掛掉，因此可以引入多個負載均衡服務，為了讓客戶端能發(fā)現(xiàn)多臺負載均衡，我們可以修改DNS解析，添加多個LB ip作為A記錄。

3）接入CDN

如果網(wǎng)站業(yè)務正處于一個上升期，流量預計會有不小的增長，為了跟上業(yè)務發(fā)展的節(jié)奏，我們會需要頻繁擴容，這是一個繁瑣的過程，費力不說，購買新LB和服務器都需要不小的服務器、網(wǎng)絡帶寬成本。這時，我們可以考慮將網(wǎng)站接入CDN。對于靜態(tài)資源類網(wǎng)站，CDN可以將絕大部分資源緩存在邊緣節(jié)點上，提升最后一公里用戶的訪問效率，為服務器抵擋住接近100%的流量，CDN加速產(chǎn)生的流量相比普通服務器產(chǎn)生的流量更廉價，因此可以大大減少網(wǎng)站服務器成本。騰訊云CDN就提供了這樣的能力。

2.網(wǎng)絡帶寬打滿

此時可以選擇帶寬擴容，或者接入CDN，相對來說，CDN加速帶寬相比服務器帶寬更廉價，是更好的選擇。

3.服務器首包響應慢

這意味著服務器負責正常，但業(yè)務側(cè)處理能力跟不上，可能有以下幾類原因：

1)WEB服務器性能太差。比如Apache服務器，由于每個連接都需要創(chuàng)建新線程處理，在高并發(fā)量請求場景下線程創(chuàng)建銷毀以及切換開銷都不小，因此可以換用性能更好的服務器軟件nginx。

2)磁盤IO高負載?？梢钥紤]服務器內(nèi)存做緩存，內(nèi)存讀寫效率相比磁盤有很大提升，可以顯著提升性能。如果覺得改造成本比較高，又不差錢的話，可以選用SSD硬盤，也能有不錯的提升效果。

4.網(wǎng)絡傳輸慢

客戶端和服務端處在不同網(wǎng)絡，或者客戶端和服務端處于不同區(qū)域，都可能造成網(wǎng)絡傳輸慢。此時，我們可以從協(xié)議棧上全棧做優(yōu)化。

1)物理上，就近部署服務。將服務器靠近目標用戶，并且同網(wǎng)絡部署，降低路由跳數(shù)，但如果目標用戶廣泛分布，此法解決不了問題。

2)傳輸層上，我們可以對tcp參數(shù)做調(diào)優(yōu)，比如linux有net.ipv4.tcp_max_syn_backlog/net.ipv4.tcp_rmem/net.core.somaxconn等參數(shù)可以配置。也可以換用更好的擁塞控制算法，比如bbr。

3)應用層協(xié)議上，可以啟用傳輸效率更好的HTTP2、QUIC協(xié)議。

4)應用開發(fā)上，有非常多優(yōu)化方式。比如將多個css/js文件打包合并，減少分散加載引入的慢啟動時延?？梢詫⑽谋绢愇募嚎s傳輸?？梢钥梢栽跒g覽器、內(nèi)存、磁盤、中間件上做各級緩存，可以將外鏈本地存放，圖片內(nèi)容base64編碼，為站點申請多個域名，解決瀏覽器同個域名最大6個tcp連接的限制。

5)使用CDN。騰訊云CDN在全球廣泛部署有非常多緩存節(jié)點，資源一旦在節(jié)點上緩存下來，后續(xù)客戶端都能直接從最近的節(jié)點拿到內(nèi)容，因此顯著降低地理位置差異引入的延時。此外，騰訊云CDN支持智能壓縮傳輸、支持HTTP2/QUIC協(xié)議，能幫助站點在不改造的情況下更進一步提升傳輸效率。

?綜合來看，將網(wǎng)站接入CDN是最省事、成本最低、并且加速效果最好的一種方式。

最后我們以一個靜態(tài)網(wǎng)站樣例來說明應用以上一些優(yōu)化手段后的效果。

03 實戰(zhàn)演練

這是一個AdminLTE3的示例頁面，首頁上加載資源很多，我們按加載時長從大往小排序，可以看到，在沒優(yōu)化前，頁面總共加載耗時8.48s。其中adminlte.min.css文件加載就花了4.68s，耗時最多。

查看server回包，可以看到缺失Transfer-Encoding、Content-Encoding這樣的頭部，說明未啟用壓縮。

1.nginx開啟壓縮傳輸

我們配置服務器nginx，啟用傳輸壓縮，再看看效果。

可以看到adminlte.min.css加載時間降低為724ms，只有之前的15%。網(wǎng)站總體加載時間6.02s，比之前8.48s降低了一些。

server返回頭部中確實攜帶了Content-Encoding、Transfer-Encoding。

2.接入CDN

我們以騰訊云CDN接入來說明，只需要簡單幾步操作即可快速啟用CDN加速。

1)接入域名

在騰訊云CDN控制臺上，最簡單的操作，只需要將加速域名，源站ip填寫進來，點擊確認提交即可創(chuàng)建域名配置。

2)調(diào)整解析

域名配置創(chuàng)建好后，會分配一個CNAME，該CNAME即是接入CDN的關鍵，可以將客戶端DNS請求調(diào)度到最優(yōu)CDN節(jié)點。我們只需要將原始域名添加一條CNAME類型記錄指向該CNAME即可。

最終DNS解析關系應該如下：

3)查看域名配置

騰訊云CDN默認為靜態(tài)站點開啟了智能壓縮特性，還有其他功能，讀者可以自行挖掘。

4)驗證加速效果

再一次訪問站點，由于請求由就近CDN節(jié)點提供服務，這里加載延時進一步降低，并且總體加載時間也只有3.24s，比原始站點開啟壓縮之后的6.02s提速效果大大增加。

5)啟用QUIC加速

除了以上優(yōu)化，我們還可以在騰訊云CDN控制臺上為域名啟用QUIC特性，提高傳輸效率。

6)再一次驗證

可以看到，css加載延時進一步降低，總體加載時間只有2.15s。

·網(wǎng)站頁面加載速度優(yōu)化的方法有很多，有實力、愛折騰的開發(fā)者可以通過調(diào)整軟件設計、架構(gòu)以及服務器配置達到加速效果。除此之外，最簡單、便捷的方法就是將網(wǎng)站接入CDN，快速啟用壓縮、QUIC特性，達到既節(jié)省成本，又靈活，還能大幅提速的目的。

參考文獻

[1]web性能權(quán)威指南

[2]https://www.nngroup.com/articles/

response-times-3-important-limits/

[3]https://github.com/alex/what-happens-when