SuperAPI AI 工具集

web_performance_optimization

前端与建站

查看项目

更新于 10-15 23:47

技能介绍

用途:帮助开发者系统化测量、分析并改进网站与 Web 应用的加载速度、运行时性能和 Core Web Vitals,以提升用户体验、SEO 排名与转化率。

工作流程:先测量当前性能(运行 Lighthouse 审计、测量 Core Web Vitals 的 LCP、FID、CLS,检查打包体积与网络瀑布);再识别问题(过大的 JavaScript 包或未优化图片、阻塞渲染的资源、布局偏移或服务器响应慢);然后按高影响项排优先级(关键渲染路径、图片优化、代码分割);接着实施优化(优化资源、添加缓存头、懒加载非关键资源);最后对比前后指标并监控真实用户指标。

核心策略:图片转为 WebP/AVIF、使用响应式图片、指定尺寸并懒加载;JavaScript 包保持在 200KB 以下,做代码分割、移除未使用依赖、延迟非关键 JS;CSS 内联关键样式、延迟其余、移除未使用 CSS。Core Web Vitals 目标:LCP < 2.5s、FID < 100ms、CLS < 0.1。

端到端优化(进阶):性能剖析与可观测性方面,生成 CPU 火焰图与内存堆转储以定位热点路径,评估分布式追踪(OpenTelemetry)与 APM 工具集成;数据库与后端方面,分析慢查询日志、创建缺失索引、优化执行计划、实现查询结果缓存(Redis)、修复 N+1 查询、实现分页与响应压缩;前端与 CDN/边缘方面,代码分割、tree shake、懒加载,配置边缘缓存(CloudFlare/CloudFront)、HTTP/2/3、Brotli 压缩与 WebP/AVIF 图片;移动与 PWA 方面,用 service worker 实现离线功能、针对慢网络做自适应加载、长列表用虚拟滚动;负载测试与验证方面,用 k6/Gatling 设计真实负载场景,在部署优化前测试正常、峰值与压力水平。

限制:资料未提供具体安装命令、收费方式、支持平台或效果保证,相关细节暂未提供。