云社区 博客 博客详情
云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-22 14:48:17 07-22 14:48
华为云官网技术团队 发表于 2020-07-22 14:48:17 2020/07/22
0
0

【摘要】 Accelerated Mobile Pages(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 插件


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消