如今2021年,如果想要在線上競爭脫穎而出,完全取決於是否具有提升網站性能的能力,以及能否提供流暢又快速的使用者經驗,現在網站效能優化也成為了品牌的致勝關鍵因素之一。網站訪客對載入緩慢的網站沒什麼耐心,甚至可能因為緩慢的網站速度而對品牌印象不佳。最近的研究顯示,47%的網站使用者預期網站要在2秒-甚至更短時間內載入資訊!達3秒之久的話,大部分的人就乾脆放棄該網站,改去搜尋表現更好的網站。更值得擔憂的是,在這些接受調查的購物者中,有60%如果對電子商務體驗(包括載入時間緩慢)不滿意,就會去找別人買東西,幾乎不太可能會再回來。
如您所見,就網站效能優化而言,即使是幾秒之差就會帶來截然不同的結果
5個提升網站效能、速度的方法:
針對全球性能進行優化的快速載入網站可以作為打造2021年及未來願景的穩固基礎。而且,因為有了多重內容傳遞網路(CDN)技術及其他簡單的修正,您可以比您所想的更快到達目標。
1. 將您的CDN提升至另一個層次:嘗試多重CDN(Multi CDN)
您知道嗎,只需進行一次變更,就能節省多達60%的頻寬,並將來自您網站的請求數量降低一半?這是真的。若您沒有將媒體檔案寄存在CDN上,那麼您就錯失了完整的網站性能潛力。
CDN的運作方式如下:
您的檔案寄存在實際上遍佈全球的廣大伺服器網路上。當使用者造訪您的URL時,地理位置上離他們最近的伺服器將為他們提供網站服務。將頻寬分出給多台伺服器,以降低單台伺服器上的負載。單一CDN設置確實有一些限制。瞭解與CDN性能有關的一些特殊情況非常重要。CDN可能且的確會時常斷線。一旦CDN斷線,將所有雞蛋都放在這個單一CDN籃子裏的企業,得冒著承擔災難性後果的風險。
升級為Multi CDN
為緩解這些全球存取問題,許多公司開始轉向Multi CDN技術。您可能已經猜到了,Multi CDN設置可以同時使用來自不同供應商的多個CDN,以實現更好、更穩定的網站性能。
瞭解更多:Multi CDN資安服務
Multi CDN策略是對典型方式的一種改良,在此情況下,組織可依據性能要求訂閱多個CDN。適當的Multi CDN設置可提供全球性能強化及更快的網站,但最重要的是,可確保網站正常運行時間持續不中斷。在此處瞭解更多關於Multi CDN設置的其他效益,以及如何建置您自己的Multi CDN方式。
2.將HTTP請求降至最低:
別讓您的網站落後了
只要瀏覽器從網站伺服器提取一個檔案、頁面或圖片,就會產生超文本傳輸協定(Hypertext Transfer Protocol ,HTTP)請求。這些請求佔頁面載入時間的一大部分-高達80%。瀏覽器也會將每個網域的請求限制介於四到八個同時連線的狀態。不可能一次載入十幾個資產,因此您需要允許更多HTTP請求,而這將導致更長的載入時間,因為頁面要檢索這些全部的資產。
好消息是降低總HTTP請求數是一個簡單的程序:
將JavaScript(JS)與CSS檔案相結合。載入一個較大檔案所需的時間少於載入多個較小檔案。只要你可以,就應該將樣式表與腳本相結合。
僅載入需要的部分。舉例來說,使用條件式陳述限制在行動裝置上載入網站所需要的元件數量。使用較少的圖像。若您的網站因為圖像停頓而載入緩慢,很有可能會以多種方式影響使用者經驗(user experience,UX)。移除會讓人分心的圖像,以保持您的網站流暢且快速載入。
看更多:如何防範網站速度的延遲及停機?看國外在特賣期間是如何做到的!
3.壓縮圖像並優化檔案:
如果知道圖像檔案佔每個頁面平均載入位元組的60%,遠高於腳本、CSS及影片,您可能會感到驚訝。除了減少頁面上的總圖像數量外,也要花一點時間優化您確實需要的圖像。優化圖像並提高其載入速度最有效的方法之一,就是在上傳到網站以前,先壓縮圖像檔案。有許多線上工具可供使用,包括Compressor.io及TinyPNG。或者,您可以利用像是PhotoShop等照片編輯軟體,壓縮圖像。原則上,想辦法把圖像大小保持在150KB以下且寬度小於1920px,並採用72dpi中等畫質。花點時間瞭解圖像類型也是值得的。使用正確的圖檔類型,有助於降低大小及載入速度:
- JPG:非常適合用在對細節要求不高的照片
- PNG:是具有透明背景圖像的理想檔案類型,例如您的標誌
若訪客會想要放大圖像以檢視細節,則SVG是您最好的選擇-這些向量檔案可以縮放成任何大小,包含廣告看板大小,卻也不會佔據太多檔案空間
4.儘可能利用快取功能:
快取讓您能暫時將網頁儲存在本機,以節省頻寬並提升整體網站性能。當有人造訪您的網站時,除非網站在上次快取後有所變更,否則他們將會看到快取的版本。藉由快取網頁,將有助於確保留住訪客,因為他們從一開始就獲得美好的體驗。使用諸如YSlow等工具檢查您快取的到期日。您可以透過Apache Module mod_expires或在您的網站建構工具(若您有使用)介面中,變更此日期。除非您會頻繁地變更網站設計,否則一年的到期日通常是安全的選擇。
5.清理您的網站程式碼:
無瑕的程式碼才是關鍵
另外,也建議可以定期審查您網站的程式碼是否冗餘又雜亂。可以藉由減少過多的程式碼行數,並以幾種其他主要的方式清理您的程式碼,大幅提升網站性能及速度。在調整您的網站程式碼時,要記住幾個重要的準則。這些技術將藉由減少您網站的伺服器需求而帶來好結果。當您擁有無瑕程式碼時,進行故障排除會變得更容易,也能快速地改正問題,因而減少日後可能的停機時間。
a.優化資料庫查詢
SQL查詢優化著重於編寫嚴謹的SQL查詢,以提升資料庫性能。當您的查詢效率低落時,可能會面臨耗盡生產資料庫資源的風險。效率低落或容易出錯的查詢會降低性能,甚至可能導致停機時間。
b.使用設計模式樣板及結構化編碼
設計模式樣板為可重複使用的編碼結構,可應用在整個網站的架構中。這樣將可協助確保網站每個頁面之間的一致性,讓訪客在瀏覽時獲得更順暢的體驗。高品質且易讀的程式碼亦能更輕鬆地解決影響速度及網站性能的問題。
c.以行動優先的思維編寫程式碼
現今大部分的網頁都是在智慧型手機的行動瀏覽器中開啟。以行動優先的思維編寫程式碼非常重要,可確保行動使用者即使在小螢幕上,也能完整檢視您的網站並與之互動。擁有行動響應式網站也十分重要,因為Google搜尋排名演算法會優先考慮這些網站而不是非響應式網站。
重點摘要:
如您所見,有一些可以快速提高網站載入時間並提升網站性能的簡單方法。您的網站訪客將獲得更好的體驗,讓他們更有可能忠於您的品牌。當您使用CDN或Multi CDN時,將HTTP請求降至最低、壓縮圖像並優化檔案、快取您的網站並清理您的網站程式碼,您一定會看到網站性能飆升。此外,應記住,CDN或Multi CDN策略可藉由讓正常運行時間連續且不中斷,大幅提升您的網站性能。在本文中瞭解更多關於Multi CDN的資訊。
延伸閱讀:
什麼是多重內容傳遞網路(Multi CDN)?網站停機有哪些原因?
如何提升網站速度及效能?推薦先搞懂動態v.s靜態網站的差異!