露营页面滚动文本(ticker tape)启动延迟，求与视频共存的优化方案

刚完成节日业务新网站的搭建，发现露营页面的滚动文本“ticker tape”启动加载极慢，手机端有时甚至需一分钟。仅该页面出现此问题，其他页面的ticker与视频配合正常。想咨询：

• 是否是视频导致滚动文本启动延迟？
• 能否在保留两者功能的前提下，加快滚动文本的启动速度？
• 本人是业余开发者，寻求可行解决办法。

相关代码 #

CSS代码 #

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker2-wrap {
  position: static;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background: rgba(0, 0, 0, 0.2);
  box-sizing: content-box;
}

.ticker2-wrap .ticker2 {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 120s;
  animation-duration: 120s;
}

.ticker2-wrap .ticker2__item {
  display: inline-block;
  padding: 0 0rem;
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
}

HTML代码 #

<div class="ticker2">
  <div class="ticker2__item">********<strong>School holidays with a difference Camping is just £6 a night for Adults &amp; £3 for Children</strong>********</div>
  <div class="ticker2__item">********<strong>With daytime &amp; evening entertainment included in the price everyone can afford to enjoy a camping holiday with us</strong>********</div>
  <div class="ticker2__item">********<strong>Have as much space as you need at no extra cost</strong>********</div>
  <div class="ticker2__item">********<strong>Caravans Campervans Motorhomes and tents are all welcome here</strong>********</div>
  <div class="ticker2__item">********<strong>Pop up campsites at 7 beautiful locations for up to a week at each one</strong>********</div>
  <div class="ticker2__item">********<strong>Full toilet facilities including disabled toilets and elsan points on site</strong>********</div>
  <div class="ticker2__item">********<strong>Camping zones to suit all campers you can stay up late or you can enjoy peace and quiet it's your choice</strong>********</div>
  <div class="ticker2__item">********<strong>Our camping is now available for everyone, no festival booking required</strong>********</div>
  <div class="ticker2__item">********<strong>Camp more for less at WF</strong></div>
</div>
</div>

原因分析 #

大概率是视频加载导致的：移动设备浏览器资源有限，未优化的视频会抢占CPU/GPU和带宽资源，导致浏览器推迟非关键资源（比如CSS动画）的初始化，直到视频加载完成或进入稳定状态。其他页面正常，说明该页面的视频可能未做加载优化，或文件更大、数量更多。

具体优化方案 #

1. 优化视频加载策略（核心解决视频阻塞问题） #

• 延迟加载视频：给页面中的视频标签添加loading="lazy"属性，让视频只有滚动到视口范围内才开始加载，避免初始加载时抢占资源：

  <video loading="lazy" src="your-video-url.mp4" controls></video>
  

• 替换为缩略图+按需加载：如果视频无需自动播放，先用视频缩略图代替，添加点击播放按钮，点击后再加载并播放视频，大幅降低初始加载压力。
• 压缩视频文件：用工具将视频转成MP4（H.265编码），降低分辨率（比如移动端用720p）和码率，减少文件大小以加快加载速度。

2. 优化滚动文本动画的启动速度 #

• 显式设置动画延迟：给.ticker2添加animation-delay: 0s，避免浏览器默认的延迟计算：

  .ticker2-wrap .ticker2 {
    /* 原有属性不变，新增 */
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  

• 提前设置可见性：把.ticker2的初始visibility设为visible，不要依赖动画第一帧才显示：

  .ticker2-wrap .ticker2 {
    /* 原有属性不变，新增 */
    visibility: visible;
  }
  

• 告知浏览器优化动画：添加will-change: transform，让浏览器提前为动画分配GPU资源，减少启动延迟：

  .ticker2-wrap .ticker2 {
    /* 原有属性不变，新增 */
    will-change: transform;
  }
  

3. 轻量化动画实现（可选） #

当前用translate3d已经是GPU加速的最优方式，无需大改，但可以检查：

• 确认.ticker2__item的color设置是否符合需求（当前为全透明，若为笔误可调整为实际显示颜色）
• 动画时长可根据需求微调，但此操作不影响启动延迟，若需保留现有滚动节奏可忽略。

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