如要最佳化內容導向網頁應用程式的託管作業,您必須採取各種策略,才能提升效能和使用者體驗。主要做法包括使用 CDN 有效率地傳遞內容、快取包含靜態資產的內容、最佳化安全性、監控、考慮擴充性選項,以及盡可能縮短延遲時間。有效率地搜尋選項和安全性整合功能,可進一步改善託管作業。持續修正以效能為導向的努力,是因應使用者需求不斷變化的關鍵。
託管靜態資產
靜態資產是由伺服器針對每項要求動態產生的檔案。靜態資產不會改變或經常更新,而且通常會傳送至使用者的瀏覽器,不會進行伺服器端轉譯。
靜態檔案類型 | |
---|---|
圖片 | 相片、圖示、插圖、圖片和標誌等圖片都是靜態檔案。部分範例格式包括 JPEG、PNG、WebP、GIF 或 SVG。 |
樣式表 | 樣式表 (CSS) 可控制使用者介面的版面配置、字型、顏色和視覺元素。這些通常是靜態內容,可套用至瀏覽器中的 HTML 內容。 |
音效與影片 | 音訊和影片檔案是可嵌入應用程式內,或透過媒體播放器提供的靜態資產。 |
JavaScript | 靜態 JavaScript (JS) 檔案包括可以讓應用程式與應用程式互動的用戶端程式碼。這些指令碼會在使用者的瀏覽器中執行,並處理表單驗證和動態內容載入作業。第三方 JavaScript 程式庫 (例如 jQuery 和外掛程式) 會在強化網頁應用程式的功能時納入靜態檔案。 |
網路應用程式防火牆 | WebAssembly (WASM) 是一種檔案,可在瀏覽器中執行堆疊式 VM,且十分接近硬體效能,且支援多種語言進行編譯。 |
靜態資產通常會儲存在網路伺服器中,或透過 CDN 提供。開發人員可以運用素材資源最佳化、壓縮及壓縮等技巧,縮減靜態資產的檔案大小,藉此改善網頁效能。此外,我們也建議您採用適當的快取策略,在使用者回訪網站時減少重複下載的需求。
如要進一步瞭解 CSS 和 HTML,請前往 web.dev。
快取資料和資產
內容導向網頁應用程式的快取作業包括儲存及重複使用先前擷取或產生的資料和資產。這是一項重要的最佳化技術,有助於快速向使用者提供內容,特別是對於經常存取的資料和靜態資產而言。快取可以提升效能、降低伺服器負載,並將內容導向網頁應用程式的延遲時間降到最低。
下表說明各種快取類型。
類型 | |
---|---|
瀏覽器快取 | 使用者的瀏覽器可以快取圖片、樣式表和 JavaScript 檔案等靜態資產。當使用者返回同一網站時,就能從本機快取載入這些素材資源。 |
伺服器端快取 | 內容導向的應用程式通常會使用伺服器端快取機制儲存靜態內容、資料庫查詢結果,甚至是整個網頁。常見的伺服器端快取方法包括反向 Proxy (Nginx、Varnish)、記憶體內快取 (Redis、 Memcached),以及資料庫查詢結果快取。 |
CDN 快取 | CDN 可以快取靜態資產並分配給使用者附近的邊緣伺服器,藉此提升傳遞速度。 |
資料庫查詢快取 | 資料庫查詢快取會將頻繁的資料庫查詢結果儲存在記憶體或快取儲存庫中。這個類型可以提高資料庫效能,因為這樣就不必為類似要求重新執行相同的查詢。 |
Service Worker 快取 | Service Worker 快取功能可讓網頁應用程式在獨立於網頁的主要執行執行緒之外,快取及管理 HTML、CSS 或 JavaScript 檔案等資源。它們是在背景執行,可做為應用程式和網路之間的中介。包括離線功能及降低頻寬用量。 |
如何快取資產
請務必平衡快取和及時更新,讓使用者能接收最新內容,並在存取網頁應用程式時持續享有良好的體驗。請注意,並非所有資產都需要快取。您不需要快取動態內容,例如伺服器端指令碼產生的 HTML 網頁。靜態資產可快取一段時間,或直到在伺服器上更新為止。快取策略的實作計畫取決於您選擇執行的快取類型。舉例來說,您可以使用 HTTP 回應中的 Cache-Control 標頭來導入瀏覽器快取,或使用 Cache API 導入可運作的服務快取。
建議您使用版本管理系統處理快取資產;這樣一來,更新快取資產就不會失效。請務必監控快取用量,並視需要進行調整。您可以進一步瞭解如何透過 web.dev 快取。
資源調度
調度內容導向的網頁應用程式,需要執行策略計畫以處理增加的流量和資料,同時維持應用程式的效能和可靠性。資源調度程序需要規劃、監控及彈性,才能管理波動的流量模式和資料磁碟區。調度網頁應用程式的資源時,您必須在效能最佳化與管理基礎架構成本之間取得平衡。
負載平衡器會將流量分配到不同的伺服器。確保應用程式能夠有效處理增加的流量。您可以透過實作快取機制,降低伺服器的負載。CDN 也非常適合快取靜態資產及發布內容,進而縮短延遲時間。您也可以視需要使用自動配置器來自動調整應用程式的資源配置。自動配置器可確保應用程式有處理目前流量所需的資源。資源調度方法和策略需要有效的監控與效能微調。請務必定期分析效能資料,並視需要對基礎架構和程式碼進行調整。
延遲時間
延遲時間是指使用者與網頁應用程式互動時經歷的時間延遲或延遲。網路要求從使用者的瀏覽器或裝置傳輸到網路伺服器,以及使回應傳回至使用者裝置所需的時間,通常以毫秒 (ms) 為單位。延遲會對使用者體驗產生極大影響,因為這可能會讓使用者感到困擾並讓他們失望。
會影響延遲時間的因素包括:
因素 | |
---|---|
網路延遲時間 | 網頁應用程式使用者與伺服器之間的距離、資料轉送和網路連線品質都可能會影響網路延遲時間。 |
伺服器處理時間 | 伺服器處理時間取決於要求的複雜程度和伺服器的效能。 |
內容上傳時間 | 內容傳遞時間會受到伺服器位置、CDN 和資產最佳化的影響。是指轉譯網頁所需的圖片、樣式表、指令碼和其他素材資源。 |
內容載入策略 | 預先擷取、以非同步方式載入內容,以及延遲載入等策略都會影響到感知延遲時間,因為這類策略通常會優先載入重要內容。 |
您可以整合內容快取、內容傳遞最佳化、伺服器效能調整,以及使用 CDN 將 RTT 最小化等技術,來縮短延遲時間。