首頁 部落格 網頁設計提昇網站速度的四個方法
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,網頁設計才能兼具「美觀」與「輕穎」,為客戶贏得商機。

轉載請註明出處或鏈接

成功的網站,背後必有一位專案管理師
成功的網站,背後必有一位專案管理師
Ryan
Ryan
May 08, 2018
2018網頁設計趨勢
2018網頁設計趨勢
Ryan
Ryan
Dec 15, 2017
IWARE官網改版紀錄(上)
IWARE官網改版紀錄(上)
Winnie
Winnie
Nov 10, 2017