首屏加载速度优化

1、JavaScript外联文件引用放在html文档底部;CSS外联文件引用在html文档头部,位于head内;

2、http静态资源尽量用多个子域名;

3、服务器端提供html文档和http静态资源时,尽量开启gzip压缩;

4、在js,css,image等资源响应的httpheaders里,设置expires,last-modified;

5、尽量减少HTTP Requests的数量;

6、js/css的minify:可统一通过combo handler做到压缩加合并;

7、减少不必要的301/302跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);

8、请大量使用雪碧图:这样做可以大大地减少CSS背景图片的HTTP请求次数;

9、首屏不需要展示的较大尺寸图片,请使用lazyload;

10、图片无损压缩的优化;

11、避免404错误:尽量减少外联js;

12、减少cookies的大小:尽量减少cookies的体积对减少用户获得响应的时间十分重要;

13、使用无cookies的域;

14、减少DOM Elements的数量;

15、引入textarea/script元素做延迟解析异步渲染

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​
优化Web H5页面的首屏加载速度可以从以下几个方面入手: 1. 减少HTTP请求数量:减少页面中的HTTP请求可以显著提高性能。可以通过合并CSS、JS文件、压缩图片等方式,减少HTTP请求数量。 2. 使用缓存:将静态资源(例如图片、CSS和JS等)缓存在本地,可以大幅度减少HTTP请求。可以通过设置HTTP响应头中的缓存策略,让客户端缓存这些静态资源。 3. 压缩文件大小:减小HTML、CSS和JS文件的大小可以减少加载时间,提高性能。可以使用压缩工具压缩这些文件,减小文件大小。 4. 延迟加载:将不必要的资源(例如图片、视频等)延迟加载,可以减少页面的加载时间。可以使用LazyLoad等工具来实现延迟加载。 5. 预加载:将可能需要的资源(例如下一页的内容、用户可能要点击的按钮等)预加载到本地,可以提高用户体验。 6. 减少DOM操作:减少DOM操作可以减少页面的重绘和回流,提高性能。可以将多次DOM操作合并为一次操作,使用事件委托等方式来减少DOM操作。 7. 合理设置CSS和JS:将CSS和JS文件放在页面的头部,可以提高页面的加载速度。同时,可以将CSS和JS文件进行异步加载,以避免阻塞页面的加载。 总之,通过以上的方法可以优化Web H5页面的首屏加载速度,提高用户体验。需要根据实际页面的情况,综合考虑以上方面进行优化

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值