跳到主要內容區塊

如何提升網頁的載入速度

資訊科技應用蓬勃發展,民眾的日常生活與網際網路的連結越來越密切,民眾對於政府機關提供網路服務的期待也隨之提高,尤其數位原生世代更是以網路為獲取資訊的主要來源。國家發展委員會「107 年個人家戶數位機會調查報告」指出,民眾最常使用智慧型手機上網的比率增為75.3%,最常使用桌上型電腦上網的比率減少至14.9%,曾使用無線或行動上網的比率則增為98.2%。行動上網已成為臺灣民眾上網主要方式。

另一方面,依據Google於2019年11月的新聞指出,未來Chrome將透過系統標示,告知使用者正要瀏覽的網站速度較慢。針對載入速度較慢的網站,未來若使用者使用Chrome瀏覽器,會在連線到載入網站資料的過程,顯示「通常下載較慢」,針對較快的網站則顯示綠色的進度指示。

圖一、網頁載入速度指示差異
檔案來源:Chromium Blog: Moving towards a faster web

為了避免民眾在瀏覽政府網站時,被Chrome瀏覽器告知此訊息,機關網站管理人員應定期檢視網站的載入速度,確保網站載入所需的時間維持在適當的水準,避免影響使用體驗,減少等候的時間及提高繼續使用網站的意願。

但要如何提升網站的載入速度?除了加大網站對外線路的頻寬(請注意:越大的頻寬,所需費用越高),應先從其他方面著手,包括分析網站的網頁載入速度並予以改善。

網頁速度代表網頁內容讀取的速度,一般來說,常見的描述方式有「網頁載入時間」與「TTFB (Time to first byte第一個字節的反應時間)」等,網頁載入時間指的是完整讀取網頁並顯示於瀏覽器所花費的時間,而TTFB則是從用戶端送出請求起,到用戶端瀏覽器收到第一個位元組為止所經過的時間。

為此,Google推出了自家的網頁速度分析工具PageSpeed Insights,該程式會分析網頁內容,並提供如何加快網頁載入速度的建議(如下圖)。首先連上Google PageSpeed Insights的服務頁面,然後只要在框內輸入網頁網址,就可以獲得對該頁面的網頁速度評級與最佳化作法建議,是不是很簡單呢?

圖二、PageSpeed Insights工具介面

檔案來源:PageSpeed Insights

網頁載入速度對於整體使用體驗具極大影響,影響網頁載入的因素包括但不限於下列內容:圖像最佳化、優先處理可見的內容、最佳化CSS傳遞、啟用壓縮及改善伺服器回應時間等。

  1. 圖像最佳化:可減少載入圖像所需的資料量及提升效能,網站應依據自身需求,找出最適合的圖像格式及策略,包括編碼類型、檔案格式、預設壓縮率及解析度等。
  2. 優先處理可見的內容:為加快網站載入,應減少呈現當前頁面內容所需的資料(例如HTML、圖像、CSS及JavaScript),並透過HTML屬性改善載入順序,優先載入重要的內容,以免造成顯著的網頁載入延遲。
  3. 最佳化CSS傳遞:在瀏覽器呈現網頁內容之前,必須處理當前頁面的所有CSS樣式和配置;因此精簡不必要的原始碼及改善CSS傳遞路徑,亦可加快網頁內容的渲染。
  4. 啟用壓縮:啟用網頁伺服器的Gzip壓縮功能,啟用此功能可減少多達90%的資料傳輸量,不但可以有效縮短等候下載的時間,並可加快網頁的呈現。
  5. 改善伺服器回應時間:影響伺服器回應時間的潛在因素,可能包括應用程式設計邏輯、資料庫查詢速度、網路環境、硬體資源不足(CPU或記憶體)等。

備註:完整內容請參閱PageSpeed Insights Rules說明