【Chrome web.dev Live 2020总结】第一天第7集：AMP为您服务

关于AMP

Accelerated Mobile Pages（AMP）是一套移动端页面性能优化方案，其设计核心思想是通过减少不必要的资源请求和响应处理，来提升性能，以实现更好的用户页面体验。

AMP在web页面性能提升方面有突出的表现，除了包括页面加载(Loading)、交互性(Interactivity)、视觉稳定(Visual Stability)三大核心指标外，对2020年5月新增扩展的移动端友好性(Mobile Firendly)、安全浏览(Safe Browsing)、HTTPS、无侵入式插页广告(No Intrusive Interstitials)也表现良好。根据官方说明，AMP 在 Speed Index（首屏展现时间平均值）测试中，性能有 15% ~ 85% 的提升。

最新特性

• 新增AMPScript，以支持自定义JavaScript

AMPScript是一种组件，允许开发者向AMP添加自定义JavaScript；

• 修改内联CSS大小限制

将内联CSS大小限制从50KB调整到75KB，满足大多数开发者需要。

即将发布

• 组件库 Bento AMP

允许在AMP页面之外的其他框架中使用AMP组件，开发者只用专注业务，提升性能交给组件库实现，Google将这一组件库命名为Bento AMP，会在今年晚些时候会发布。

• 服务端性能优化 AMP Optimizer

通过使用AMP优化，可以达到与从CDN缓存中提供页面相同的性能；

最新的AMP Optimizer添加了对图片源的支持，JavaScript模块可以获取更小的运行时模块；

使用AMP Optimizer的最终目标是实现AMP Optimizer和现有框架无缝对接,Nextjs提供了开箱即用的解决方案，通过添加属性即可实现有效的AMP，不许要导入相关的模板和组件信息，这些都会系统自动添加

成功案例

Axios

完全使用Next.js构建AMP，详细案例见http://go.amp.dev/axios-case-study

AMP Wordpress 插件