提昇體感網頁速度30%的關鍵-使用網頁快取

提昇體感網頁速度30%的關鍵-使用網頁快取

由於現在網頁技術已發展成熟,使用者在等待網頁內容上也失去了耐心,超過三秒鐘的網頁讀取時間,就足以趕走一半的使用者。這也讓快取成為讀取速度的關鍵幫手,在網頁設計之初,就需要考量進去,也對於 SEO 有正向幫助。

DATE 2018-11-06

提昇體感網頁速度30%的關鍵-使用網頁快取

Nov 06, 2018

雙十一到了,網頁速度有跟上流量人潮嗎?

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

編按:不對啦,這邊是要告訴大家,很多線上平台的網頁技術做到可以讓這麼多人同時讀取,速度又有一定程度,其實也具備了相當技術。

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

*若在最近去逛各大購物平台像是某甲殼類,就會發現手機版速度慢到不行,還有許多 bug 導致部分功能很難使用。

網頁速度再提昇

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

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

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

別讓好不容易進入網站的使用者失去……

由於現在網頁技術已發展成熟,使用者在等待網頁內容上也失去了耐心,超過三秒鐘的網頁讀取時間,就足以趕走一半的使用者。這也讓快取成為讀取速度的關鍵幫手,搜尋引擎也有部分評分關鍵,與是否利用網頁快取作為考量基準。

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

(當然像文章一開始提到的限量的商品,或是像搶演唱會票券等,會是比較複雜的技術。)

圖片來源: Amazon Web Service

除了快取外……

使用快取當然是網頁速度優化的關鍵之一,下面這些原則也千萬不能忽略:

主機商的選用:
有商譽、好的主機商相當重要,另外也要根據你的使用者決定主機存放位置,必要的話使用 CDN 技術,加速世界各地使用者網頁讀取的速度。

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

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

網頁程式設計/WordPress Theme 的選用
漂亮的程式語法和解法也會是網站執行速度的關鍵,好的 WordPress Theme 也可能透過簡單幾行就完成漂亮的網頁動態效果,同樣的外觀,實際執行出來的速度仍會有差距。

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

Cache web design web technology 快取 網頁設計 網頁速度