菜单几乎是每一位访客都会用到的东西。所以一个慢吞吞的菜单应用，会让整个页面都显得慢。但”快”是个含糊的词。在挑选应用时，我们总能听到”超轻量”“不会拖慢你的页面”之类的说法，却没有清晰的办法去验证。
这篇文章汇总了五条快速菜单应用的标准，你不需要懂技术也能自己核查。这些是我经营了一段时间店铺，并重新翻阅 Google 和 Shopify 两家文档后总结出来的。
开始之前先说一个参照点。Google 用 Core Web Vitals 这套指标来衡量页面加载体验，其中”良好”的阈值是 LCP 低于 2.5 秒、INP 低于 200 毫秒、CLS 低于 0.1（web.dev）。一个好的菜单应用，应当不会让这几个数字变差。
1. 懒加载：只在需要时才加载
懒加载的意思是，应用不会在页面一打开就把所有东西都加载进来。暂时用不上的部分先搁置，只有当访客把鼠标悬停或点击时才加载。
桌面端的 Mega Menu 可能容纳几十个条目，还带着图标和缩略图。如果应用试图在一开始就把这些全部加载，它就会和访客真正想看的主要内容（比如商品图片和价格）争夺资源。有了懒加载，子菜单层只会在访客真正悬停时才出现。
如何核查：在电脑上打开页面，留意菜单展开时是否会稍微”顿”一下。第一次悬停时出现一个小停顿，通常说明应用是在恰当的时机加载，而不是一开始就把所有东西塞进来。这一点对品类繁多的店铺最为重要，比如综合百货店，或是产品线众多的时尚店铺。
2. 精简的 JavaScript
这是最难用肉眼判断的一条标准，但值得向供应商问清楚。道理很简单：一个菜单不应该为了显示几个链接，就拖进一整套沉重的框架。
JavaScript 是应用中”运行”的部分。JavaScript 包越大，浏览器加载和处理它所花的时间就越多，这会直接影响 INP，也就是访客点击时的响应速度。一个写得精简的菜单应用，只携带打开和关闭菜单所需的代码，仅此而已。
判断这一点你不需要读代码。把页面放到 Google 的 PageSpeed Insights 里跑一遍，看一看未使用的 JavaScript 那一项。如果安装菜单应用后这一项明显膨胀，那就是一个该三思的信号。
这也是为什么一个把单件事做好的应用，通常比一个试图做十几件事的应用更轻。塞进去的功能越多，就越难让 JavaScript 包保持精简。
3. 不阻塞渲染
阻塞渲染，是指应用的脚本拦住了浏览器，让它无法把主要内容绘制到屏幕上。访客必须等菜单应用加载完毕，页面其余部分才会显示出来。
根据 Google 的文档，以默认方式加载的脚本会阻止浏览器解析和显示页面，直到该脚本加载、读取并运行完毕（web.dev）。这会推迟像 First Contentful Paint 和 LCP 这样的关键节点。换句话说，一个放错位置的菜单应用，会让屏幕空白的时间更长，哪怕菜单本身并不复杂。
一个构建得当的应用会异步加载它的脚本（async 或 defer），让页面先显示主要内容，菜单随后再挂载上去，那点延迟访客几乎察觉不到。这一点很难自己核查，但 PageSpeed Insights 有一条专门针对”阻塞渲染的资源”的警告，你可以对比安装应用前后的得分。
4. 资源通过 CDN 提供
CDN 是一张遍布全球多个地点的服务器网络。当菜单的图标、图片和文件通过 CDN 提供时，它们会从离访客最近的服务器拉取，因此在每个地区都能快速且均匀地加载。
这对面向国际客户的越南商家很实用。如果菜单文件只放在一台位于远方的服务器上，欧洲或美国的访客每加载一个小图标都得多等一会儿。有了 CDN，这段距离就被缩短了。
这也很容易向供应商打听：菜单里的图标和图片是从哪里提供的？一个认真的应用能够回答，而且往往会主动提到自己用了 CDN 作为加分项。在 Shopify 上，大多数资源都走内置的 CDN 基础设施，但菜单应用自己加载进来的图片和图标，仍然值得核查一下。
5. “Built for Shopify”徽章
如果你用 Shopify，又不想把上面每一条技术标准都自己核查一遍，那么 Built for Shopify 徽章是一个可靠的捷径。它是 Shopify 颁发给符合其质量标准的应用的标识，而 Shopify 的审核相当严格。
值得注意的是，这套标准里包含了一个性能部分，直接取自 Core Web Vitals。根据 Shopify 的文档，应用必须达到 LCP 2.5 秒或更短、CLS 0.1 或更低、INP 200 毫秒或更短，以加载量的第 75 百分位来衡量。在此之上，应用还不得让店面的 Lighthouse 性能得分下降超过 10 分。
换句话说，一个带有这枚徽章的应用，意味着它已经通过了一部分本来需要你自己去做的技术审查。徽章不能替代你在自己店铺上的实测，但它能非常迅速地缩小候选名单。
在菜单应用当中，Navi+ 拥有”Built for Shopify”徽章，并且按照上述标准做了优化：它加载精简、不阻塞渲染、菜单出现时也避免造成布局位移。Navi+ 可以为移动端构建底部 Tab Bar，以及 Mega Menu、Slide Menu、FAB 和 Grid Menu，移动端和桌面端可分别配置，无需写代码。我在这里提到它，是因为它正好是刚才讨论的五点的一个贴近的例子，而不是说它是唯一的选择。
把它整理成一个核查习惯
上面五条标准，归结起来就是几件你能在十分钟内做完的小事：
- 把鼠标悬停在菜单上，看它是否会因为一次性加载全部而出现停顿（懒加载）。
- 在安装应用前后各跑一次 PageSpeed Insights，对比未使用的 JavaScript 和阻塞渲染的警告。
- 向供应商打听图标和图片是否走 CDN。
- 如果你在 Shopify 上销售，优先选择带有”Built for Shopify”徽章的应用。
一家店铺通常会安装很多应用，每一个都会给整体速度添上一点负担。因为菜单几乎出现在每一个页面上，所以这是一个值得多挑剔一些的地方。从一开始就选对，能省去你日后卸了又装的麻烦。
本文是更大篇幅指南 导航与页面速度——选择一个不拖累 Core Web Vitals 的菜单应用 的一部分。