優化網站效能成就良好使用者體驗

作者-網路中文

Net-Chinese

·

2022-08-29

debug

什麼是網站的「效能」?直接解釋可能有點抽象,帶您看個例子吧!

想買個背包旅行時用,上網搜尋原本看到一個不錯的想點進去細看產品資訊,畫面跑了半天只出現文字,圖片一張都沒跑出來,但我就是想看背包長什麼樣子啊!等到耐心都磨光也不想買了,最後果斷去另一個跑得更快的網站下單購買。

這就是最直觀的「網站效能」所帶來的影響。

為什麼做網站效能優化?

若僅是少了我這一個買背包的顧客,看上去並無多大損失,但當越來越多使用者有同樣的感受時情況就不同了:網站效能影響使用者體驗,使人對本次使用產生不好的印象,他可能不會再踏進此網站,也可能影響身邊親友們對網站的評價,長久下來可能影響該網站甚至企業與品牌的形象,進一步影響網站的SEO導致排名下降,這一切影響最終會回歸到網站本身,曝光度下降、品牌形象下滑、營收下降等狀況浮出水面

由上面的例子就能知道,網站的使用者體驗十分重要,現代人講求凡事都要快速、有效率,操作起來越順暢的網站當然越有機會讓使用者更多「參觀瞭解」。

網站效能該如何評估?

絕對不是憑感覺!!!

網站的效能好不好、速度快不快,絕對不是我們自己點開網站靠「體感」來判斷快或慢,依據網速不同、環境不同甚至裝置不同都有可能影響體感接收到的快慢,那如何正確判斷效能呢?我們從Core Web Vital切入。

• Core Web Vital(網站體驗核心指標)

該指標為Google分析網站效能的重要判斷,可使用工具Google PageSpeed Insight進行效能檢測,在介紹檢測工具前,先帶您認識下面三項重要的檢測項目:

  • LCP最大內容繪製時間,是指在一進入網頁 (不上下拖移) 所看到的畫面中,檔案最大、要跑最久的元素,測量它需要花多少時間載入,一般來說會是圖片等檔案較大的素材,該值越小越好。
  • FID首次輸入延遲時間,使用者進入網站後與網站的「第一個互動」執行所需要的時間,例如點擊選單或連結,這項分數對於互動式網站來說非常重要,延遲時間越小越好。
  • CLS累計版面配置位移,指網站元素中,因為出現廣告、提示訊息等,導致網站內容位置發生偏移,取位置偏移最多的值,該值越小越好。此項目對於使用者體驗來說十分重要,畢竟多數人都不希望網站看到一半突然上下偏移甚至移出視窗外。
debug4
CLS-累計版面配置位移 範例示意圖

• 指標分數評估

下表為Google所制定的各指標數值標準,需特別注意的是:總評分為取低者。若您的LCP、CLS為速度良好,但FID為需要改善,那總體評分會顯示需要改善。因此各項指標都是十分重要的,千萬不要忽視任何一項所帶來的影響!

指標 速度良好 需要改善 速度低落
LCP <2.5 秒 2.5秒~4 秒 >4 秒
FID <100 毫秒 100毫秒~300 毫秒 >300 毫秒
CLS <0.1 0.1~0.25 >0.25

資料來源:Google說明-網站使用體驗核心指標報告

• 檢測工具-Google PageSpeed Insight

要到哪裡才能看見這些指標呢?現在使用率最高的就是Google的PageSpeed Insight,只需將您的網址輸入,即可免費為您檢測網站效能,同時因手機、平板電腦等上網需求日益增多,將行動裝置的效能另外分別出來,故同一個網站會有兩組效能檢測成績,一組為電腦一組為行動裝置

debug4
可切換行動裝置與電腦,觀看各項指標檢測結果

除了上方使用者體驗外,下面會有更加詳細的效能診斷結果,再這邊會看到您網站的總體效能成績,右方則為網站的預覽圖。

debug4
總體效能成績顯示與網站畫面預覽

再往下會看到Google給的優化建議,右邊還能看到該問題優化後預估可加速多少秒,也可以依照指標篩選查看優化項目。但這些指標、優化項目皆是供您參考,並非Google建議您就必須完全照做,請依您對自家網站的瞭解,搭配這份檢測結果來優化,以免效能分數拉高了,卻也將網站上重要的功能與資訊都拔掉了。

debug4
依稽核項目篩選,顯示最佳化建議

網站效能優化方式

除了依照PageSpeed Insight做優化外,日常維運網站時也可以注意以下幾點:

• 圖片、素材的取用

網站上的每一個素材都有可能影響效能,因此在取材時請注意這些素材的檔案大小,特別是圖片,強烈建議圖片使用SVG、WebP、JPEG或JPG的檔案,這類圖片檔比起PNG等其他檔案,其對系統效能的負擔更低。另外在上傳之前可先進行壓縮,以免檔案過於肥大,這邊提供一個網站iloveimg,可一鍵批量壓縮圖片等檔案,且壓縮後不會失真。

⦁ 內建網站字型

(這部份就需要一點點前端功底了,可請網站的前端工程師協助。)

我們在設計網站時都會希望網站能好看,因此苦苦找尋中意的字型,特別中文字型更不好找。但是請注意,若您加載字型的套件等太過肥大也會導致網站效能降低,因此建議若無特殊需求可使用內建網站字型,此方式對於效能來說是最好的。


內建網站字型範例:


                font-family: "Microsoft JhengHei",Arial,Helvetica,sans-serif;
                

(系統會依照排序套用字體,若Microsoft JhengHei找不到就會往下使用Arial字型。)
其他可使用字型例如:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol

⦁ 快取-Cache

Cache運作原理是將某些檔案較大,但不太會有變動的檔案於首次在入後存在一個資料夾中,之後短時間內使用者再回來到同個頁面時系統會先從快取資料夾裡拿到之前存的資料,如此便可以很快顯示改使用者看到,此方式可大大減輕系統負荷達到提升效能的效果。如何設定快取須由相關程式人員進行處理,因此可請您網站的製作公司或您身邊的技術人員協助處理,若有需要,網路中文也可為您提供優化服務,歡迎聯繫洽詢

⦁ 壓縮程式碼

我們在做網站時前端常用到CSS、Javascript,CSS主要控制整個網站的外觀樣式,例如:艷色、字型、邊框;Javascript則控制一些動態特效與基礎判斷,例如:淡入淡出特效、表單欄位驗證等等。這些程式撰寫完呈現一行一行的,而斷行或空格其實也可能會影響到網站效能,特別當這些程式上百上千行後整個檔案大小就很可觀了,因此我們會將完成的程式進行壓縮,以降低系統負擔。

debug4
壓縮前雖較容易讀,但空格換行都會使檔案更肥大

另外,因為載入程式的過程也會消耗時間,故可將一些較不急著載入的Javascript放在最後面執行,讓網站先將一開始必要的資訊跑完,而這部份也會需要您網站工程師的幫忙。

⦁ CDN加速

最後要介紹的是CDN(Content Delivery Network),CDN是透過世界各地的伺服器站點來儲存、讀取您的網站資訊,今天住在美國的使用者,可以透過美國的站點快速讀取您的網站,這比大老遠連回台灣讀取快的多了。但CDN並非單靠自家工程師就可以完成的,畢竟是要串連全世界,這方面如有需要可以使用網路中文的CDN網站加速服務,全球多達150個CDN伺服器,讓您的網站更快速、更穩定、更安全。

文章類別:

網站知識

相關文章

委託網站建置需做哪些準備?

想委託廠商為自己架網站,但除了「我想做一個網站」外實在不知道還要說什麼嗎?本篇將用5W2H、流程公開等訣竅告訴您,就算沒有資訊背景、設計功底,也能讓廠商瞭解您的需求,製作出夢寐以求的網站!

我的網站打不開!網站碰到問題該如何與廠商溝通?

當您如同往常一樣打開您的網站,卻發現突然打不開了?或是原本可使用的功能突然失常?這時想嘗試自救但不知道怎麼處理,想告訴外包廠商卻不曉得怎麼溝通問題嗎?本篇將這些秘訣都告訴您。

傳說中的RWD、AWD是什麼?用哪個好?帶您一探究竟

RWD是現行最為主流的網站設計方式,為響應式網頁設計(Responsive Web Design)的簡稱,亦稱為回應式網頁設計或適應性網頁設計。其最大的特點為可配合各種螢幕尺寸, 自行調整網站顯示內容,讓使用者不管用什麼裝置瀏覽網站都能方便順暢。


洽談