关键CSS必须内联且紧贴<meta charset>后、<title>前，体积≤14KB（gzip前），禁用@import；首屏图片须显式设loading="eager"；preload需正确配置as值并置于样式表前；脚本一律加defer。
关键CSS必须内联且位置紧贴之后
首屏样式不内联，浏览器就得等CSSOM构建完成才敢渲染——哪怕只慢200ms，用户就感知为“卡”。<style>块必须放在<meta charset="utf-8">之后、<title>之前，且不能含@import（它会触发串行请求，白费内联）。体积控制在14KB以内（gzip前），超限反而拖慢FCP。
- 用
critical或critters提取真实首屏CSS，别靠肉眼猜 - 内联后务必删掉对应外链
<link rel="stylesheet">，否则样式可能被覆盖或重复下载 - 若主题色动态生成，需服务端渲染时注入，不能靠JS后置补
preload必须写对as值且紧跟charset声明
<link rel="preload">不是加了就快，错位或错配as会导致静默失效：字体不加载、图片重复请求、Priority显示Low。它必须出现在<head>中<meta charset>和<title>之后、任何<link rel="stylesheet">之前。
- 字体：必须
as="font"+crossorigin（哪怕同源），否则Failed to decode downloaded font - CSS文件：用
as="style"+onload="this.onload=null;this.rel='stylesheet'"，否则只下载不生效 - 首屏图片：优先用
fetchpriority="high"而非preload；若非要preload，则as="image"，且href必须与<img src>完全一致（含查询参数）
首屏图片必须显式设loading="eager"
现代浏览器默认loading="lazy"，但首屏图若没显式声明loading="eager"，可能被启发式策略误判，导致视觉空白或重复加载（一次lazy触发，一次fallback补发）。该属性只对<img>和<iframe>生效，且必须写在HTML源码里，JS动态加无效。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有明确在初始视口内的
<img>都加loading="eager" -
<picture>只需在最外层<img>上设，<source>不用单独加 - 避免混用：
loading="eager"的图应比loading="lazy"的图在HTML中位置更靠前，否则调度可能错乱
脚本必须加defer且禁用head中同步执行
没加defer或async的<script src>会阻塞HTML解析，哪怕放在</body>前——弱网下用户看到的是白屏，不是内容闪一下再消失。内联脚本<script>...</script>同样阻塞，除非加defer。
立即学习“前端免费学习笔记（深入）”；
- 业务逻辑脚本统一用
defer：<script src="app.js" defer></script> - 统计/广告类脚本可用
async，但别依赖DOM，document.getElementById可能报null - 绝对禁用
document.write()，现代浏览器执行即清空整个文档流 -
<head>里不要放未加defer的外部脚本，尤其别塞在<link rel="stylesheet">前
