企业官网项目验收时页面能打开远远不够。这篇整理一份可以直接照着过的技术清单覆盖前端性能、SEO 基础、安全配置和交付物四个部分共 20 项附常用配置代码。适用于定制开发项目的自测和甲方验收。一、前端与性能核心指标按 Core Web VitalsLCP ≤ 2.5s移动端 4G 模拟首屏主图预加载link relpreload asimage hrefhero.webpCLS ≤ 0.1图片/视频必须声明宽高或用aspect-ratio广告位预留固定尺寸INP ≤ 200ms避免长任务重逻辑分片或延后执行图片提供 WebP/AVIF保留img兜底懒加载只用于首屏以下picture source srcset/img/hero.avif typeimage/avif source srcset/img/hero.webp typeimage/webp img src/img/hero.jpg width1200 height630 alt描述文本 fetchpriorityhigh /picture字体用font-display: swap限制 1–2 个字重按需做子集化响应式断点覆盖 ≥360px 窄屏横向上不出现页面级滚动JS 打包做 code splitting首屏脚本总量未压缩控制在 200KB 以内Nginx 开启 Brotli/gzip 与静态资源长缓存brotli on; brotli_types text/plain text/css application/javascript application/json image/svgxml; location ~* \.(js|css|png|jpg|webp|avif|woff2)$ { expires 30d; add_header Cache-Control public, immutable; }二、SEO 基础每页独立 title≤30 个汉字与 description列表页/详情页由模板动态生成禁止全站相同canonical 标签必带分页、筛选参数页指向规范 URLlink relcanonical hrefhttps://example.com/news/语义化标签h1 每页仅一个标题层级不跳级自动生成 sitemap.xml内容发布后更新并在 robots.txt 声明结构化数据企业官网用 Organization / 文章页用 Articlescript typeapplication/ldjson { context: https://schema.org, type: Organization, name: 企业名称, url: https://example.com, logo: https://example.com/logo.png } /scriptHTTPS 全站强制http 301 跳转不是 302带 www 与不带 www 只保留一个入口自定义 404 页面返回真实 404 状态码软 404 会误导搜索引擎三、安全配置响应头至少包含 CSP、X-Content-Type-Options、X-Frame-Options或 CSP frame-ancestorsadd_header Content-Security-Policy default-src self; img-src self https: data:; style-src self unsafe-inline; script-src self; add_header X-Content-Type-Options nosniff; add_header X-Frame-Options SAMEORIGIN; add_header Referrer-Policy strict-origin-when-cross-origin;所有表单输入服务端校验 参数化查询防 SQL 注入输出做 HTML 转义防 XSS留言类接口加限流和验证码后台路径不使用默认弱路径登录接口限制尝试次数敏感配置文件放在 web 根目录之外四、交付物与验收无加密源代码全部交付附带部署文档环境版本、依赖清单composer.json/package-lock.json、构建命令、Nginx 示例后台管理操作手册数据库定期自动备份建议每日验证一次恢复流程交付时用 Lighthouse/PageSpeed Insights 实测出报告存档验收建议用脚本化方式跑而不是人工点几页。Lighthouse CI 示例npm i -g lhci/cli lhci collect --urlhttps://example.com --numberOfRuns3 lhci assert --presetlighthouse:recommended --assertions.largest-contentful-painterror小结这 20 项里性能和 SEO 决定网站能不能被客户和搜索引擎顺畅访问安全配置决定会不会出事故交付物条款决定第二年改版、迁移时会不会被卡住。建议在合同和验收单里直接把这几项列成硬指标——量化指标比页面美观、运行稳定这类描述有用得多。
