執行時期效能警告

過大的圖片

載入圖片時，會把下載檔案的固有大小與圖片在頁面上的實際大小做比對。實際大小是用套用 CSS 後圖片的渲染大小，乘以像素裝置比率計算而得。如果下載的圖片大得多（任一維度大了超過 1200px），就會觸發此警告。下載過大的圖片會拖慢頁面載入，並對 Core Web Vitals 造成負面影響。

延遲載入的 LCP 元素

頁面載入時最大的內容元素被視為「LCP 元素」，它與 Largest Contentful Paint 有關，是 Core Web Vitals 之一。延遲載入 LCP 元素會對頁面效能造成強烈的負面影響。採用這種策略時，瀏覽器必須先完成版面配置計算，判斷該元素是否在可視區域內，才能開始下載圖片。因此，當 Angular 偵測到 LCP 元素被加上 loading="lazy" 屬性時，就會觸發警告。

除錯方式

使用主控台警告中提供的圖片 URL，找出有問題的 <img> 元素。

修正過大圖片的方式

• 使用較小的來源圖片
• 如果不同版面配置需要多種大小，加入 srcset。
• 改用 Angular 內建的圖片指令（NgOptimizedImage），它會自動產生 srcset。

修正延遲載入 LCP 元素的方式

• 把 loading 屬性改為其他值，例如 "eager"。
• 改用 Angular 內建的圖片指令（NgOptimizedImage），它能輕鬆地把 LCP 圖片標示為優先。

停用圖片效能警告

這兩個警告都可以在應用程式根部使用提供者，個別在全站停用：

providers: [
  {
    provide: IMAGE_CONFIG,
    useValue: {
      disableImageSizeWarning: true,
      disableImageLazyLoadWarning: true
    }
  },
],