Angular SSR场景下多源视频LCP优化方案咨询

核心思路是在SSR服务器端通过用户代理（User-Agent）识别设备类型，直接渲染对应适配的视频源，避免客户端加载后再替换，从根源解决LCP得分差的问题。

具体实现步骤 #

1. 服务器端解析User-Agent判断设备类型 #

在Angular SSR的服务器入口（如server.ts）中，解析请求头的User-Agent字段，区分移动/桌面设备：

import { parse } from 'ua-parser-js';
import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';

// 处理所有路由请求
app.get('*', (req, res) => {
  // 解析UA判断设备类型
  const uaResult = parse(req.headers['user-agent'] || '');
  const deviceType = ['mobile', 'tablet'].includes(uaResult.device.type) ? 'mobile' : 'desktop';

  res.render('index', {
    req,
    res,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
      // 将设备类型注入Angular应用
      { provide: 'DEVICE_TYPE', useValue: deviceType }
    ]
  });
});

2. 组件中基于设备类型渲染对应视频源 #

使用Angular的TransferState将服务器端的设备类型传递到客户端，避免 hydration 阶段的渲染不一致：

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer, TransferState, makeStateKey } from '@angular/platform-browser';

// 定义TransferState的键
const DEVICE_STATE_KEY = makeStateKey<string>('deviceType');

@Component({
  selector: 'app-hero-video',
  template: `
    <video autoplay muted loop playsinline style="width:100%;height:100vh;">
      <source [src]="targetVideoSrc" type="video/mp4">
    </video>
  `
})
export class HeroVideoComponent {
  targetVideoSrc: string;

  constructor(
    private transferState: TransferState,
    @Inject('DEVICE_TYPE') private serverDeviceType: string,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformServer(this.platformId)) {
      // SSR阶段直接设置对应视频源
      this.targetVideoSrc = this.serverDeviceType === 'mobile' 
        ? '/assets/videos/vertical.mp4' 
        : '/assets/videos/horizontal.mp4';
      // 将设备类型存入TransferState，供客户端复用
      this.transferState.set(DEVICE_STATE_KEY, this.serverDeviceType);
    } else {
      // 客户端从TransferState读取，避免重复判断
      const savedDeviceType = this.transferState.get(DEVICE_STATE_KEY, 'desktop');
      this.targetVideoSrc = savedDeviceType === 'mobile' 
        ? '/assets/videos/vertical.mp4' 
        : '/assets/videos/horizontal.mp4';
    }
  }
}

方案优势 #

• 完全无需客户端JS切换视频源，SSR直接输出适配当前设备的视频标签，从根源避免“先加载桌面版再替换”的LCP损耗
• 通过TransferState保证客户端与服务器端渲染一致，避免 hydration 错误
• 逻辑简洁，仅依赖服务器端UA解析和Angular原生API，无额外第三方依赖

注意事项 #

• UA解析存在一定局限性，若需更高准确性，可结合请求头的Viewport-Width字段（部分客户端会携带）辅助判断
• 务必给视频添加playsinline属性，避免移动端视频自动全屏，影响用户体验和LCP计算

内容的提问来源于stack exchange，提问作者user2477219