Shopify C 端页面优化思考

FCP

1. 在支持 HTTP 2.0 的站点避免使用 bundle 产物，拆分 JS/CSS 代码充分利用 HTTP 2.0 多路复用特性加载资源

2. 提取 JS/CSS 关键代码（包括但不限于首屏组件，例如：header 等，布局、reset 等样式代码）将其转为内联代码

3. 拆分长任务，避免主线程阻塞

避免主线程阻塞参考

function sleep(delay) {
  return new Promise((resolve) => {
    setTimeout(resolve, delay)
  })
}

async function taskScheduler(_tasks = [], delay = 0) {
  if (!_tasks.length) return

  const tasks = _tasks.filter((task) => typeof task === 'function')
  let deadline = performance.now() + 50

  while (tasks.length > 0) {
    // Optional chaining operator used here helps to avoid
    // errors in browsers that don't support `isInputPending`:
    if (
      navigator.scheduling?.isInputPending() ||
      performance.now() >= deadline
    ) {
      // There's a pending user input, or the
      // deadline has been reached. Yield here:
      await sleep(delay)

      // Extend the deadline:
      deadline = performance.now() + 50

      // Stop the execution of the current loop and
      // move onto the next iteration:
      continue
    }

    // Shift the task out of the queue:
    const task = tasks.shift()

    // Run the task:
    await task()
  }
}

参考

Optimize long tasks  |  Articles  |  web.dev

You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?

https://web.dev/articles/optimize-long-tasks

TBT

1. 连续的 JS Animation 使用 requestAnimationFrame 进行拆分

2. 避免重绘、重排。常见处理方法网上都有，这里说一个点，对于需要使用当前视口数据的如：window.innerWidth 等，可以在进入页面后配合上述 taskScheduler 获取后挂载在 window上后续监听窗口变化再更新即可

3. liquid/JS 中遍历语法提前返回

4. 使用 Partytown 将 content_for_header 代码拆分进入 Service Worker 中执行

参考

Introduction - Partytown

Partytown - Run third-party scripts from a web worker

https://partytown.builder.io/

CLS

1. 动态内容设置占位图（三方代码）

2. 自有代码考虑将布局相关样式放至内联

SPEED INDEX

1. 因为 liquid 模板的特殊性，如果需要获取特定的 page/blog 内容用作显示的话，应避免直接将其内容防止在当前页面中从而导致增加 liquid/html 体积。应使用 Alternate templates 去通过 fetch 动态获取内容将其显示

2. 静态内容可以考虑使用 Section Rendering API 去通过 fetch 动态获取内容将其显示，从而达到减轻 liquid/html 体积的目的

参考

Templates

Learn about theme templates, theme files that control what's rendered on each type of page in a theme.

https://shopify.dev/docs/themes/architecture/templates#alternate-templates

Section Rendering API

Request the rendering of a single theme section through an AJAX request that includes a specific section_id.

https://shopify.dev/docs/api/section-rendering