初载于thatdevpro.com.乃ThatDevPro公开SEO+AI框架库之部分。ThatDevPro者，乃SDVOSB认证之退伍军人所创之网络+AI工程之坊也。开源AI引证之器：github.com/Janady13/aio-surfaces。

核心网页要素（LCP、INP、CLS），移动优化，HTTPS，侵入式插屏，及用户端质量底线

页面体验之全面安装与审计指南——谷歌视之为排名要素之用户界面性能与可用性层级，尤以决定访客是否驻留页面为重。双用：安装手册与审计文书。

跨栈实现说明：此框架中代码示例以纯HTML书写，为求明晰。若求React、Vue、Svelte、Next.js、Nuxt、SvelteKit、Astro、Hugo、11ty、Remix、WordPress、Shopify、Webflow诸般模式之对应，请参framework-cross-stack-implementation.md。若求纯客户端渲染之SPA（无SSR/SSG），则请参阅。framework-react.md者，若涉Tailwind特有之疑，如清涤、动态类、暗色模式之CLS、聚焦可及性等事，请参framework-tailwind.md。

一、文书之旨

此乃页境之正典。其所在framework-technicalseo.md 覆基础于机器，此篇则覆基础于人也。二者交会：页缓则害用户，亦耗爬取之预算；布局不稳则害用户，亦损INP。页之体验，乃量度并修正谷歌所模用户实感之指标之学也。

二二六年，頁面體驗與二零年者異於三：其一，二二四年三月，INP（互動至下次繪製）代FID（首輸入延遲）為反應性指標——INP難達，因其測互動無論首末。其二，首移端索引，則移端要害為僅要害，排名所憑。其三，所謂"善"之標準益嚴：Google今期，欲七五分頁載皆合三CWV要害於真用戶數據之七五分位。

1.1 所需之器

• PageSpeed Insights — pagespeed.web.dev — 实验室及实地之数据
• Chrome User Experience Report (CrUX) — 实地数据源为 CWV
• Lighthouse (经由 Chrome DevTools) — 实验室之测量
• WebPageTest —webpagetest.org — 深入瀑布流分析，兼控位置/设备/连接
• Google Search Console — 核心网页健康报告 — 全站域数据采集
• Chrome DevTools 性能面板 — 交互剖析以应INP之需
• Chrome DevTools 覆盖标签页 — 未用CSS/JS之侦测
• Chrome DevTools 网络面板 — 资源瀑布
• 真实用户监控 (RUM) — Vercel Speed Insights, Cloudflare Web Analytics, SpeedCurve, Calibre
• 网页性能 JS 库 — web-vitals npm 包，用于定制 RUM
• GTmetrix — 替代实验室 + 瀑布

1.2 文档范围

覆：三要务（LCP、INP、CLS），携行，HTTPS之姿，侵扰之插页，图像之优化，字之载，JavaScript之效，第三方之标签管理，及验证之法。涉而未尽：深之优化（framework-performance.md），可及（framework-accessibility.md），安固（framework-security.md），平台之调适（framework-nextjs.md，framework-wordpress.md).

二、客变量之纳

domain: ""
hosting: ""                            # Vercel | Netlify | Cloudflare | shared | VPS | dedicated
cdn: ""                                # Cloudflare | Fastly | KeyCDN | Bunny | none
cms_or_framework: ""                   # WordPress | Next.js | Astro | Hugo | Shopify | Webflow | static
current_lcp_p75: 0                     # in milliseconds, from CrUX or RUM
current_inp_p75: 0
current_cls_p75: 0
mobile_score_baseline: 0               # PageSpeed Insights mobile
desktop_score_baseline: 0
known_performance_issues: []
third_party_scripts_inventory: []      # GA4, GTM, ad tags, chat widgets, etc.
hsts_deployed: false
mobile_friendly_test_passes: false

三、核心网页要素—三要术

三.一 LCP—最大内容渲染时

至最大可见内容元素终成渲染之时。以秒计.

阈限（用户之七十五分位）：

• 佳：≤ 2.5秒
• 需改进：2.5 – 4.0秒
• 贫者>四秒

何谓 LCP 元素？

常取英雄图或最大文块。察LCP候选于DevTools Performance面板——标LCP之元素即为当优化者。

常见之LCP病因：

測量之法：

• 實驗室測量（燈塔、WebPageTest）可察大弊。
• 實地測量（CrUX、RUM）乃Google用於排名之法。
• 一處之站可有大實驗室之得分而實地之得分不良（反之亦然）。二者必皆通過。

3.2 INP — 互動至下一次繪製

用户交互（点击、轻触、按键）与下一次反映结果的重绘之间之75分位延迟。二零二四年三月已替FID。

阈值（交互之75分位）：

• 佳：≤二百毫秒
• 待改进：二百至五百毫秒
• 劣：>五百毫秒

何故INP较FID为难：

FID仅测首遇。INP则度页全生涯诸遇，报其最劣（或近劣者）。页首应速而三卷滞，其INP必下。

INP常见因：

INP归因：

用Chrome开发者工具性能面板。录下交互。其"交互"轨迹显输入迟滞加处理时加呈现迟滞。辨何者为主，随宜修正之。

3.3 CLS — 累计布局偏移

视感稳定之度也——页面加载时跃动几何。无单位之数；愈低愈善。

阈限（用户之75分位）：

• 佳：≤ 0.1
• 需改进：0.1 – 0.25
• 贫者>四分之一

常见之CLS原因：

饼干横幅之例外：

迟现之饼干同意横幅乃CLS之主因。或于页载时预留空间以呈横幅，或作固定位置之覆盖，不使内容移位。

四. 移动端可用性

自二零二三年起，谷歌索引诸网站之移动版。移动端要务，乃排名之唯一要务。

四.一 视口标签

诸页必含：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

无此，手机浏览器将以桌面宽度渲染页面，随后缩放，几无通过移动可用性检查者。

四二 触目标尺寸

点选目标（按钮、链接）须至少为48×48 CSS像素。小于48像素或间距不足8像素者，则损移动可用性。

.btn, .link-as-button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
}
nav a {
  padding: 12px 16px;  /* generous click area */
}

文字之大小

移动端之文字，当不小于十六磅。字小则iOS表单自动缩放，且失移动可用性。

内容须合视口。移动端水平滚动，则失测试。

img, video, iframe { max-width: 100%; height: auto; }
.container { max-width: 100vw; overflow-x: hidden; }

__JHSNS_SEG_1766f0c2_162__ 移动友好测试

每要紧之页，必经search.google.com/test/mobile-friendly（已弃用；以GSC中URL检查代之）。Lighthouse移动审核已涵盖大抵同类检查。

5. HTTPS

页面体验需HTTPS。其全貌载于framework-technicalseo.md第11节；与页面体验相关者：

• 有效证书（无浏览器警示）
• HSTS已部署
• 无混杂内容（HTTPS页面加载HTTP资源）
• HTTP/2或HTTP/3启用（性能增益，非严格要求）

6. 侵扰式插屏广告

弹出窗口、覆盖层及插屏广告，若阻塞移动端内容访问，则受排名惩罚。此惩罚适用于：

• 页面加载时立即覆盖主要内容的弹出窗口
• 独立式插屏，用户须先撤除，方得达页。
• 折叠之上之布局，其显见者以广告或弹窗为主

豁免：

• 登录对话框于正当需登录之页
• 年龄验证于正当所需之页
• 若 Cookie 同意横幅不霸占视窗，则可。
• 小旗广告，不占显要之位

常为过者：

• 邮箱注册浮层于着陆时即刻触发
• 订阅吾辈简报全屏模态
• 用户未阅半文，折扣弹窗已现
• 聊窗自展，盈屏而弥

时序与比例乃其要。当涉及时，显其叠影（十五秒以上，五十载以上，出意所向），且令其不逾视域之三十。

七、图像优化以提升性能

图像常为LCP元素，亦为CLS主要贡献者。宜猛力优化之。

七一分式之择

<picture>之模式適各瀏覽器之格式：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="800" loading="eager" fetchpriority="high">
</picture>

7.2 响應式圖像

因视窗之异，供不同之量。

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="..." width="1200" height="800">

七三 懒加载

<img src="..." loading="lazy" alt="..." width="..." height="...">

甚要之。LCP圖像必須不可惰性載入。僅惰性載入折疊下圖像。使用loading="eager"或略之；eager为英雄图象设默认值并添加fetchpriority="high"以示优先。

七四维度恒常

每<img>，<video>，且<iframe>需之width且height属性（或CSS）aspect-ratio此预留布局之位，且防CLS。

7.5 图像内容分发网络

图像众多之域，图像云存储（Cloudinary、imgix、Cloudflare Images、Vercel Image Optimization、Next.js next/image）所供者：

• 即兴格式转换
• 即兴尺寸调整
• 自动AVIF/WebP服务
• 边缘缓存

互引：framework-imageseo.md关于SEO图像之考量。

八、字體載入

字體乃頻為長頓、閃動之禍首。

八.一 字体显示

常须指明font-display：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;  /* show fallback immediately, swap when font loads */
}

八、二、预载要字体

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

唯用于首屏之上之字。预载过多资源，损及LCP。

八.三 字體子集

今之Google字體，多已分節。自備之定制字體：宜依實用之字符集（如拉丁、西里爾等）分節。二百KB未分節之字體，分節拉丁後，僅餘三十KB。

八、四、可变字体

变量字體（Inter、Fraunces等）一檔文件即可呈現多種字重。規模之際，利潤倍增。

八点五尺寸调整与备选指标

匹配备用字体度量至网络字体，以消弭换字之跳变：

@font-face {
  font-family: 'fallback-inter';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: 'Inter', 'fallback-inter', sans-serif; }

吾fontaine庖丁解牛，庖丁解牛，此乃图书馆之自动化也，尤擅流行字体。

九、JavaScript之效能

九一分包预算

首重移动 2026：

此等目标严苛，非恒可得，然实为标尺.

9.2 代码拆分

初载所需，余者暂缓。

// Next.js dynamic import
const HeavyChart = dynamic(() => import('./HeavyChart'), { ssr: false });

九有三，树之摇。

今之捆包器（如esbuild、Vite、Rollup、Turbopack）能自树摇。验之，察最终之包，有无未用之导入——Chrome DevTools之覆盖标签，显未用之JS。

九点四 延迟与异步

<!-- Async: download in parallel, execute as soon as ready -->
<script src="analytics.js" async></script>

<!-- Defer: download in parallel, execute in order after HTML parsing -->
<script src="enhancement.js" defer></script>

大抵第三方脚本宜async或defer。内联阻断<script>标记，乃LCP之最劣者也

。 9.5 长任务

"长任务"者，凡JS执行逾五十毫秒者皆是也。长任务阻输入，损INP。于Chrome开发者工具性能面板寻之——显为红旗标示之块。常见之源：

• 重初渲染（React/Vue预渲染）
• 邦国大事更迭
• 同步遍历大数组之循环
• 第三方SDK初始化

分而治之，化繁为简。setTimeout(0)，requestIdleCallback或调度器让出。

第十. 第三方标签管理

世之真境，页面上之患，多源第三方之脚本：析数之器、广告之符、谈天之匣、分试之具、营务之点。

第十篇之一 审计

每处之地，皆察其外物之脚本，而询曰：

• 此何为？
• 客实用其产之数据乎？
• 其INP影响何如？
• 可后载之（迟、异步、交互后）？
• 有轻便之替否？

审计后常除者：

• 旧A/B测试平台已废
• 竞合分析多（GA4 + Adobe + Heap + Hotjar + Mixpanel）
• 未加察之聊窗
• 久别之司空标签
• "万一"之标，其意莫识

10.2 标签管理之洁癖

若用GTM：

• 审触发器——多在每页载时发，虽仅于特定页相关
• 审标签——禁或除不用之标
• 能则用内置标签模板，勿用自造HTML
• 设"待标签"阈限，勿阻CWV之流

十有三分，自架之式

高影响第三方脚本（尤以分析脚本为甚），自托管可减DNS、TCP、TLS之冗余。Plausible、Fathom、Cloudflare Web Analytics皆支持自托管。

对于Google Analytics，gtag.js 自身难易自托管，然 analytics.js 负载可经 Cloudflare Worker / nginx 代理，以减第三方源连接之需。

10.4 隐私与效能

歐盟私隱法（GDPR）與美國州法（CCPA）日益要求在標籤觸發前獲得同意。此同意之門有側益：標籤不至交互前不載入，此善於CWV。GTM中之同意模式v2乃傳統實施之法。

十一、服务器端之效能

十一有一，初字节之至时 (TTFB)

虽非CWV之直接指标，然TTFB实可入LCP。佳者不及600毫秒，至者不及200毫秒。

11.2 缓存层级

依优先次序（由廉至贵之查询）：

1. CDN边缘缓存 — 云锋、飞利等 — 毫秒计，规模自费
2. 应用级页面缓存 — WP超级缓存、Vercel即时重载、Astro静态 — 单位毫秒
3. 对象缓存 — Redis、Memcached — 用于查询结果、会话数据
4. 数据库查询缓存 — 内置于MySQL/PostgreSQL — 小心失效
5. 数据库本身 — 不得已而为之

11.3 HTTP/2，HTTP/3，Brotli

• HTTP/2 — 处处支持，连接复用.
• HTTP/3 — 新兴；Cloudflare、Fastly 支持之。损益网络中略有性能增益.
• Brotli 压缩— 文本资源之用，胜gzip。宜于服务器或CDN处启之。

十二、真实用户监控 (RUM)

实验室之测试，可察部分之患。实地之数据，可察其余。于每处客户之地，皆设RUM。

十二有一 释免之选

• 谷歌搜索控制台 — 核心网页要素报告— 全站 CrUX 数据，无需设置
• 云锋网络分析器(Cloudflare Web Analytics) — 自由，重隐私，含 CWV
• Vercel 速览 — Vercel 托管网站免费

12.2 付费选项

• SpeedCurve — 全面 RUM，含合成监测
• Calibre — 性能预算，警报
• Pingdom RUM — 基础监测

十二点三 自制以网络之要义

欲尽其权，请用之。web-vitals藏书阁：

import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({name, value, id}) {
  navigator.sendBeacon('/rum', JSON.stringify({name, value, id, url: location.href}));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

自往己之端点发运，任择适器以析之。

十三. 验证之流程

每遇客户之约：

1. 基准（第0周） — 记录 LCP、INP、CLS 于七十五分位之数，源自 PageSpeed Insights 之字段数据、GSC CWV 报告及 RUM 之可获者。分录移动端与桌面端之状况。
2. 诊疗 — 于代表性页面施行 Lighthouse 审计。以 WebPageTest 观水势。辨识五大主要致问题。
3. 修正 — 施行变革。首于实验室测试中验证之。
4. 衡量— 等候二十八日，俟CrUX之域数据更新（CrUX用二十八日之滚窗）。
5. 往复循环— 若尚未"善"，则续行诊断。
6. 监察之器— 酒与GSC CWV之报，未已。

十四. 审计模式

得分：三十。世界一流：廿八以上

15. 常见谬误

1. 英雄图懒载 显著减慢LCP
2. 无图像尺寸 最大CLS源
3. Cookie banner injected late, pushing content. Reserve space or use overlay.
4. Multiple analytics SDKs running concurrently. Pick one, remove the rest.
5. Synchronous third-party scripts. Use async / defer.
6. Optimizing only desktop. Mobile is what Google ranks.
7. 实验之分数佳，而田野之分数劣。 田野之数据乃所重也。
8. 长时之点击处理器。 INP之杀手；破为块状。
9. font-display: block （或未指明，则默认为块状。） 隐文字直至字体载毕。
10. 重JavaScript之“互动”着陆页，亚秒级阻塞亦能运作。 中流之器遭灾变.
11. 无CDN之助. 一域之服器，供全球之用；近源者外，LCP皆受困.
12. 阻碍渲染之CSS. 要务之CSS内联于首屏；其余则缓之.
13. 外部CDN载网书，无预接. 添加<link rel="preconnect"> 为字源之始。
14. 基于民意之民意，JavaScript也。 用服务器发送事件或WebSocket。
15. 未用之JS框架已加载。 "吾用React于一小件"然全束亦发。
16. <iframe> 嵌入而无尺寸。 大CLS之源。
17. 一度视CWV为复选框，永不再视。CWV随功能增而渐衰。

16. 维护

周：

• 抽查代表性页之PageSpeed Insights
• 审GSC核心网页健康度报告之新误

月：

• 全域GSC CWV检视
• RUM仪表盘检视
• 新第三方脚本审计
• 灯塔检视前十页

季度：

• 全面性能检视（WebPageTest + Lighthouse）
• 第三方标签库更新
• 图像/字体/CSS/JS预算检视
• CDN配置检视
• 缓存命中率检视

年度：

• 全面性能预算重估
• 主机/CDN评估
• 新CWV指标监测（Google不时修订CWV）
• 主要框架/内容管理系统更新规划

17. 伴随文件

• framework-technicalseo.md — 索引、HTTPS、服务器端基础
• framework-performance.md — 超越CWV的深度性能优化
• framework-imageseo.md — 图片SEO包括格式与替代文本
• framework-mobileseo.md — 移动端深度解析
• framework-accessibility.md — 无障碍模式（与移动端可用性重叠）
• framework-security.md — HTTPS、HSTS、安全头
• framework-nextjs.md — Next.js性能模式
• framework-wordpress.md — WordPress性能模式
• framework-headless.md — 无头架构性能
• framework-cro.md — 性能与转化关联

文档版本一
末次更新二〇二六年五月五日
主人约瑟夫·W·安纳迪 — 那开发者之君 — SDVOSB

此框架库名之谈

此文乃ThatDevPro之SEO+AI工程库中框架参考文档，由Dev.to转载。正源https://www.thatdevpro.com/insights/framework-pageexperience/

ThatDevPro者，SDVOSB认证之退伍军人所创之网络与人工智能工程之坊，设于密苏里州卡西维尔。此坊运十四层引擎优化之全栈，且输出开源之人工智能引证工程之器。

伴侣十四层引擎优化之栈（每层皆为独立之文）：

1. 第一层——根基
2. 二级——搜索可见性
3. 三级——人工智能主导
4. 四级——实体与权威
5. 五级——本地主导
6. 六级——内容与多媒体
7. 七级——社交与社群
8. 八级——数据、分析、转化
9. 九级——监控与智能
10. 十级 — 工作流程与运营
11. 十一级 — 市场与零售
12. 十二级 — 国际
13. 十四级 — 高级与沉浸

欲于尔处实施此框架乎？参看引擎优化之服务或通过ThatDevPro之联系人。