CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

提昇網頁速度的關鍵-使用網頁快取

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

時值 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 來諮詢囉!

延伸閱讀

Aron Lai

數位行銷工具應用者。從企劃、文案、社群、網路行銷工具無所不包。 希望大腦可以和網路資料庫連結,緩解資訊焦慮症狀。

Follow: