首页 > 其他分享 >H5--性能测试(PageSpeed Insights )

H5--性能测试(PageSpeed Insights )

时间:2022-12-20 22:05:43浏览次数:44  
标签:请求 查看 结果 -- PageSpeed H5 测试 页面 加载

中文网站(不需要FQ): http://www.googlespeed.cn

 

主要可实现:

  1、测试手机与电脑打开的速度对比。

  2、详细的测试结果

  3、直观的统计数据,查看页面的共xx个请求、总共大小、image、script、font等等各占多少个请求数量及大小。

 

使用总结:

(1)页面的显示介绍如下截图:

     

H5--性能测试(PageSpeed Insights )_加载

 

二、具体的使用介绍

1、分类介绍

(1)移动设备:指的是在手机上打开此页面的测试结果

(2)桌面设备:指的是电脑打开此页面的测试结果

 

2、功能使用介绍(默认加载的是第一页的内容

(1)分析:在文本框中输入需要测试的链接,点击”分析“等待执行完成即可看到测试的数据

  

H5--性能测试(PageSpeed Insights )_缓存_02

(2)测试结果的分析

  1、实验室数据:

    这里记录的数据只是参考,不作为我们查看的重点。

  

H5--性能测试(PageSpeed Insights )_加载_03

   2、优化建议:

    我们关注的部分,这里的数据具体可跟开发沟通下,根据这里记录的结果查看参考价值有多大,是否适合自己的项目去做优化

    

H5--性能测试(PageSpeed Insights )_数据_04

 3、诊断结果:

    可作为我们重点关注的部分。这里有我们测试主要去查看的数据。

    

H5--性能测试(PageSpeed Insights )_数据_05

      

H5--性能测试(PageSpeed Insights )_数据_06

 

性能分析说明与解决方案:

《1》采用高效的缓存策略提供静态资源:此处标注了 45项资源,也就意味着当前的这个页面并未做缓存。

要求:一般的页面都会做缓存,避免再次请求时的耗时过大

  

H5--性能测试(PageSpeed Insights )_加载_07

 

《2》Keep request counts low and transfer sizes small中的Image数量过大。意味着这个页面首次在加载时一次加载了第一页所需的所有图片

要求:一般可做懒加载,当页面滑动下去时在加载出图片,已此来降低首次请求时的时间过长。

 

《3》other:此处记录的other为5。跟开发沟通后的结果是:此处本可将后端去处理的请求放在了前段在处理,因此在耗时上也有一定的增加。

要求:

  <1>一般为接口请求。可以对照项:用浏览器打开分析的链接。右键”检查“---》network---》XHR,查看请求的数量是否与other统计的一致。

  <2>不应该把过多的请求处理放在前段去做,否则会耗时太多。可以将这些处理放在后端实现。

  

H5--性能测试(PageSpeed Insights )_加载_08

 

《4》Script和Stylesheet:可以看到Script为7,Stylesheet为0,跟开发沟通后的结果是CSS的样式也写在了JS中,并未做分离。

要求:一般情况下Script和Stylesheet会隔离开写。在页面加载时会优先加载CSS,再次加载js脚本。已此来节省时间

  

H5--性能测试(PageSpeed Insights )_加载_09

《5》注意点:虽加载此页面时你看到了此页面未使用的脚本或者样式。但是此部分内容可能是公共项,因此同样会加载出来。

 

重要提示:

1、将测试的结果可与对应的开发沟通。查看测试结果和优化项是否适合你们的项目。并且已此来做参考项优化代码,提升页面加载速度

 2、页面的加载速度相关连性:网络的带宽(2G、3G、4G)、后端的慢请求、前段或者客户端工程师实际可优化的项。此3个内容加起来决定着一个页面的请求加载速度。

 

 作者:Syw



标签:请求,查看,结果,--,PageSpeed,H5,测试,页面,加载
From: https://blog.51cto.com/u_15739244/5956841

相关文章

  • 『NLP学习笔记』Transformer技术详细介绍
    Transformer技术详细介绍!文章目录​​一.整体结构图​​​​二.输入部分​​​​2.1.词向量​​​​2.2.位置编码​​​​三.注意力机制​​​​3.1.注意力机制的本......
  • 在线工具
    1、PDF转Word(不需要下载任何软件):​​https://pdf2doc.com/​​注:更多的了解见此链接中的介绍:​​https://www.jianshu.com/p/bc69b629b472​​ 2、IP地址查询:​​http:......
  • 『NLP学习笔记』BERT技术详细介绍
    BERT技术详细介绍文章目录​​一.BERT整体模型架构​​​​1.1.Attention机制​​​​1.2.基础架构-Transformer中的Encoder​​​​1.3.BERT输入的三部分​​​​二.......
  • 前段性能----缓存机制
    缓存一词原本来源于计算机系统结构,提供“缓存”的目的是为了让数据访问的速度适应CPU的处理速度,其基于的原理是内存中“程序执行与数据访问的局域性行为”,即一定程序执行时......
  • 『论文笔记』基于度量学习的行人重识别方法中损失函数总结!
    基于度量学习的行人重识别方法中损失函数总结!文章目录​​一、对比损失(Contrasiveloss)​​​​二、三元组损失(Tripletloss)​​​​三、改进三元组损失(Improvedtripl......
  • 前端性能----从输入URL开始到返回数据的中间经历过程
    这是一个古老的问题,即我们输入URL后按下回车到网页测呈现都发生了什么?加载过程到显示如下:1.根据域名,进行DNS域名解析;2.拿到解析的IP地址,建立TCP连接;3.向IP地址,发送HTTP请求;4......
  • 构建自动化测试体系的考虑因素
    自动化体系的建设初期面临的问题无法使用目前市面上的开源自动化测试工具。因为这部分的工具大多基于桌面客户端,弊端明显,缺乏系统性的过程管理,无法适应公司级别的自动化体系......
  • 性能测试开始前必知知识点
    1、什么是GPU,主要用来做什么?   GraphicsProcessingUnit,缩写:GPU),又称显示核心、视觉处理器、显示芯片,是一种专门在​​个人电脑​​​、​​工作站​​​、游戏机和一些......
  • consul原理
    阅读目录​一、使用Consul做服务发现的若干姿势​​​1阅读目录​​启动第1个Server节点,集群要求要有3个Server,将容器8500端口映射到主机8900端口,同时开启管理界面​​​​......
  • MOOD|所以真的是“游戏”的问题吗?
       刚刚我妈抢走了我的手机和平板,因为我在平板上玩游戏。   我没想到这些会发生在一个21岁的人身上。不过好像在我和我妈之间,每天都在发生着一些荒诞且幼稚的事......