首頁 部落格 網頁設計提昇網站速度的四個方法
Ryan
Jul 16, 2015
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

網頁設計提昇網站速度的四個方法


網站的速度一直是搜引擎評估網站表現的重要指標之一,越快速完成讀取的網站,在搜尋引擎的表現會更為出色,也能夠提昇自然搜尋排序(SEO)的表現。
提昇網頁讀取速度的方式很多,本篇分享先不提及硬體端例如:虛擬主機、頻寬等因素,而是以網頁設計師能夠控制的部份分享提昇速度的四個方法:
 

單一網頁不宜過長

隨著一頁式的網頁設計越來越流行,許多設計師熱愛將所有的內容添加於一個網頁上,顯示出網站、服務或產品的完整性,隨著頁面的長長度增加,網頁的檔案越大,讀取的時間也會越來越長。

不論是從客戶的角度,企業的角度,網頁的檔案過大都是不理想的結果,設計師必須取決視覺效果與網頁效能的最佳平衡性,不能夠一直無限制的讓頁面延長下去,適當地分頁,分散網站讀取的工作量,可以讓網站執行起來更快,客戶的感受更好。
 

套用單一程式

網站有很多重要的程式在背景運作,然而有經驗的網頁設計師,知道如何使用單一程式達到目的,而且當單一程式運用於於相同的網站上,是有很多維護上與速度上的好處。

有經驗的網頁設計者,不僅知道使用同樣的程式可以帶來速度上的好處,也避免於一個網頁內使用不同原始碼的程式,這樣一來客戶端只需要執行一次程式,節省了網站的頻寬與客戶等待的時間。
 

仔細評估插入套件

成千上萬的插入套件能夠強化你的網站,從最簡單的插入影片、顯示Facebook按讚的按鈕、到隱藏於背景的網站數據統計、客戶服務系統等,都會影響網站的執行效率。

此外不同地區的網站套件也會帶來不同的影響。舉例來說:中國最大的百度搜尋引擎提供的功能,安插於中國以外的網頁上,執行效率就會變得很差,相反地全球最大的搜尋引擎Google所推出的網頁套件,運用於中國的網站上,可能會受到防火牆的影響而影響網頁效率,甚至無法顯示出現錯誤,例如Youtube就是最常見的例子。
 

次世代圖片壓縮技術

根據統計一個網站的大小,圖片至少佔了50%以上,除了我們每天使用的JPG與GIF格式,其實這十年來出現了非常多種圖片壓縮與圖形處理技術,用於網頁設計上能夠美化顯示效果,更能夠減少網頁的檔案大小,增加網頁的讀取速度。

曾經我們分享過PNG與SVG兩種新格式,現在也已經普遍用於不少網頁設計環境下,現在市場還出現了WEBP的格式,雖然還不流行,但卻十分具有潛力。

Scaleable Vector Graphics (.SVG)
Portable Network Graphics (.PNG)
Graphic Interchange Format (.GIF)
Weppy (.WEBP)
Joint Photographic Experts Group (.JPEG or .JPG)

馬路科技iware認為一個好的網站的背後,都有一群優秀的網頁設計師,以Work Smart取代Work Hard,網頁設計才能兼具「美觀」與「輕穎」,為客戶贏得商機。

圖片來源 PIXABAY 作者 gustavorezende 轉載請註明出處馬路科技網頁設計或鏈接) 

2020網頁設計趨勢-用響應式設計,打造高可用性的網站
2020網頁設計趨勢-用響應式設計,打造高可用性的網站
iWare發言人
iWare發言人
Nov 21, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019
淺談無障礙網頁設計2.0
淺談無障礙網頁設計2.0
Ryan
Ryan
Jan 11, 2019