Excalidraw LCP优化：最大内容绘制加速
在现代Web应用中，用户打开页面后的第一印象往往决定了他们是否愿意继续停留。尤其对于像Excalidraw这样以视觉交互为核心的工具——一个空白画布持续数秒，足以让用户怀疑“是不是加载失败了？”更糟糕的是，这种延迟不仅影响体验，还会直接拖累LCP（Largest Contentful Paint）评分，进而波及SEO和转化率。
Excalidraw作为一款开源的手绘风格白板工具，凭借轻量、实时协作与AI辅助绘图能力，在技术团队中广受欢迎。但其基于Canvas的渲染机制天然存在“首屏不可见”的问题：HTML早已就绪，主线程却被JavaScript阻塞，直到场景数据解析完成才开始绘制。这个过程中，浏览器眼中的“最大内容”迟迟未出现，LCP自然被严重推迟。
如何让系统“感知”到主内容已经就位？我们不能改变Canvas本身的限制，但可以巧妙地引导浏览器尽早触发LCP。本文将围绕一次Excalidraw镜像部署的实际优化过程，拆解从资源加载到内容占位的关键策略，展示如何通过工程手段实现首屏感知速度提升40%以上。
从CDN镜像说起：静态资源的“最后一公里”
Excalidraw本质上是一个前端密集型应用，核心逻辑全部运行在浏览器端。这意味着它的性能瓶颈往往不在后端服务，而在资源的分发效率上。哪怕代码再精简，如果用户距离源站太远，TTFB（首字节时间）依然会成为拖累。
解决方案很直接：把构建产物部署到CDN边缘节点，形成地理上的就近服务。我们在Vercel + Cloudflare Pages双层CDN架构下进行了测试，结果令人振奋——中国用户访问欧美源站平均TTFB为820ms，而通过CDN缓存后降至310ms，降幅超60%。
但这还不够。即使资源来自边缘节点，若加载顺序不合理，主线程仍可能被阻塞。比如主JS文件体积接近1.5MB（ESM格式），若等到<script type="module">自然执行才开始下载，整个初始化流程就会卡在这里。
于是我们引入了rel="modulepreload"：
<link rel="modulepreload" href="/assets/index-abc123.js"> <link rel="preload" href="/fonts/Recursive-Mono.ttf" as="font" type="font/ttf" crossorigin>这一行代码的作用不可小觑。它告诉浏览器：“这个模块马上要用，请优先拉取。”相比传统动态import的懒加载模式，modulepreload能在HTML解析阶段就启动关键脚本的预读，避免后续因网络等待造成的空转。
字体资源同样重要。Excalidraw使用自定义字体Recursive来维持手绘风格的一致性。如果没有预加载，文本元素会在FOUT（Flash of Unstyled Text）中闪烁，甚至引发布局偏移（CLS）。