雙十一到了，網(wǎng)頁速度有跟上流量人潮嗎？

時值 2018 雙 11 光棍節(jié)，最近是不是在網(wǎng)路上跟別人搶折價券，搶限量特價商品（什麼 0.7 折的，特價 1,111 的，實際看到銷貨數(shù)量寫 1，整個心都變得心如止水），卻發(fā)現(xiàn)搶購時間一到，網(wǎng)頁就開始轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)，轉(zhuǎn)完之後，你會發(fā)現(xiàn)想買的東西也賣完了，恭喜你！又省下一筆額外開銷。

編按：不對啦，這邊是要告訴大家，很多線上平臺的網(wǎng)頁技術(shù)做到可以讓這麼多人同時讀取，速度又有一定程度，其實也具備了相當(dāng)技術(shù)。

雖然這種粗劣的行銷手法（沒錯，你花了不少費用打廣告，最後告訴消費者，這件超特價商品只有一個，就失去了部分的商業(yè)原則），某種程度上仍是很管用，會讓消費者開始註冊你家的會員帳號，關(guān)注部分商品，但要能讓消費者維持原有、良好的使用經(jīng)驗，以及最終在結(jié)帳時順暢、不延遲的消費體驗，仍需要網(wǎng)頁技術(shù)的配合。

*若在最近去逛各大購物平臺像是某甲殼類，就會發(fā)現(xiàn)手機版速度慢到不行，還有許多 bug 導(dǎo)致部分功能很難使用。

網(wǎng)頁速度再提昇

回歸網(wǎng)頁技術(shù)的問題。短短幾秒鐘內(nèi)，當(dāng)有成千上萬的消費者擠進你的網(wǎng)站，點擊加入購物車，意圖要結(jié)帳。若將這中間過程拆分來看，從消費者主機/手機端，到網(wǎng)路連線的各個線路、節(jié)點，以致於主機（每臺主機又分為記憶體，各階層 CPU 的快取），這麼多環(huán)節(jié)，可以做到如此大量的請求，還能繼續(xù)運行，就歸功於虛擬伺服器以及 CDN 技術(shù)的進步，以及回歸最基本的「快取」這項環(huán)節(jié)。

由於現(xiàn)在 CPU 運算速度通常在數(shù)個 GHz 間打轉(zhuǎn)，也代表每秒 10^9 電子信號震盪，其餘的硬體像是記憶體、硬碟設(shè)備與網(wǎng)路速度是遠遠跟不上的，所以在電腦發(fā)展的階段，就產(chǎn)生了「快取」的概念。

Cache（快?。┘夹g(shù)原本泛指 CPU 和記憶體中快速溝通的一種方式，起源於 1967 年的一篇店起期刊論文，作者將法語詞「cache」賦予「safekeeping storage」的涵義，現(xiàn)在則擴充到像是磁碟和記憶體間、本機與網(wǎng)路伺服器間也都有類似臨時資料夾、網(wǎng)頁快取內(nèi)容等，主要目的就是降低兩個速度落差較大的硬體間，協(xié)調(diào)速度的輔助機制。（資料來源自維基百科）

別讓好不容易進入網(wǎng)站的使用者失去……

由於現(xiàn)在網(wǎng)頁技術(shù)已發(fā)展成熟，使用者在等待網(wǎng)頁內(nèi)容上也失去了耐心，超過三秒鐘的網(wǎng)頁讀取時間，就足以趕走一半的使用者。這也讓快取成為讀取速度的關(guān)鍵幫手，搜尋引擎也有部分評分關(guān)鍵，與是否利用網(wǎng)頁快取作為考量基準(zhǔn)。

網(wǎng)頁快取簡單來說，是將被使用者「看過」一次的內(nèi)容，打包起來放在一旁，當(dāng)下一次有使用者請求想要「看」相同內(nèi)容時，就不將這個請求傳回主機重新運算。這對有大量圖片、資訊交換的網(wǎng)站分外重要，將網(wǎng)頁不常改變的資料，做成類似靜態(tài)網(wǎng)頁，讓下一次被請求時，可以快速撈出所需資訊，功效就是大幅提昇了網(wǎng)頁讀取速度。

（當(dāng)然像文章一開始提到的限量的商品，或是像搶演唱會票券等，會是比較複雜的技術(shù)。）

圖片來源： Amazon Web Service

除了快取外……

使用快取當(dāng)然是網(wǎng)頁速度優(yōu)化的關(guān)鍵之一，下面這些原則也千萬不能忽略：

? 主機商的選用：
有商譽、好的主機商相當(dāng)重要，另外也要根據(jù)你的使用者決定主機存放位置，必要的話使用 CDN 技術(shù)，加速世界各地使用者網(wǎng)頁讀取的速度。

? 圖片檔案大小要注意
即便現(xiàn)在網(wǎng)路速度以有所提昇，網(wǎng)頁中的圖片（甚至 gif 檔、影片）通常會是拖垮網(wǎng)頁速度的元兇。在網(wǎng)頁上觀看圖片，使用 jpeg 檔可以適當(dāng)程度的壓縮，肉眼是不容易看出差異的，使用 WordPress 也會有適當(dāng)?shù)?Plugin 來達到批次處理的能力。

? 壓縮 HTML, CSS & Javescript
好的語法編寫也會提昇網(wǎng)站讀取速度，一般來說經(jīng)過壓縮的 CSS 大概可以減少掉 30%~50% 的空間，主要減少不必要的空隔、字元等等。

? 網(wǎng)頁程式設(shè)計/WordPress Theme 的選用
漂亮的程式語法和解法也會是網(wǎng)站執(zhí)行速度的關(guān)鍵，好的 WordPress Theme 也可能透過簡單幾行就完成漂亮的網(wǎng)頁動態(tài)效果，同樣的外觀，實際執(zhí)行出來的速度仍會有差距。

以上這些網(wǎng)頁速度都是簡單提及，想知道自己的網(wǎng)站速度是如何被評比的，不妨參考最具公信力的 GoogleSpeed Insights 花不用一分鐘就可以知道網(wǎng)頁速度上還有哪些可以改進囉！當(dāng)然也可以 mail 給專業(yè)的 CTK Pro 來諮詢囉！

延伸閱讀

? 來看看 Progress Bar 怎麼用深入淺出的方式介紹快取

? 為何需要清除網(wǎng)頁快取，及其作法