首页 > 其他分享 >谷歌浏览器Lighthouse网页性能分析工具使用

谷歌浏览器Lighthouse网页性能分析工具使用

时间:2024-06-03 20:55:04浏览次数:17  
标签:分析 Lighthouse 网页 cn 性能 谷歌 浏览器

需要使用谷歌浏览器的无痕模式

要不然其他浏览器插件的脚本会影响页面的性能判断

使用截图

  • 操作界面
    点击分析按钮开始分析
    image

  • 生成分析
    image

建议部分:红色是有必要解决的性能提升建议

image

红色建议分析:
image

lighthouse文档

文档地址:

https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint?hl=zh-cn

image

或者可以使用分析网站分析

输入网址,即可生成分析页面
https://pagespeed.web.dev/?hl=zh-cn

image

标签:分析,Lighthouse,网页,cn,性能,谷歌,浏览器
From: https://www.cnblogs.com/jocongmin/p/18229633

相关文章

  • Gradio.NET:一个快速制作演示demo网页的利器
    Gradio介绍Gradio是一个用于创建机器学习模型交互界面的Python库。它允许开发者快速为他们的模型创建一个简单的web界面,以便于非技术用户和其他开发者进行交互和测试。Gradio的主要优点是易用性和灵活性。你只需要几行代码就可以为你的模型创建一个交互界面。你可以选择各种输入......
  • nginx实现网页缓存防篡改
    简介使用网站防篡改对指定的敏感页面设置缓存,缓存后即使源站页面内容被恶意篡改,WAF也会向访问者返回预先缓存好的页面内容,确保用户看到正确的页面。启用 网页防篡改、敏感信息防泄露开关,才能使用该功能。填写精确的要防护的路径,可以防护该路径下的text、html和图片等内容......
  • 浏览器 performance 测试页面性能,查看阻塞代码
    截图黄色指的js执行紫色指的浏览器渲染一般只需要看js和render这2个就行,其他不用看,并从这2个中看出哪里的代码导致阻塞线程比较久。main线程推测main线程就是浏览器的主线程,主要负责浏览器的渲染和js代码执行,由此可见,浏览器用于渲染和js执行是一个线程,也就是主线程。渲......
  • 浏览器重绘和回流
    概述重绘指的是元素重新绘制,一般性能消耗很小,不用在意,一般修改颜色或者虚拟隐藏都是重绘回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流,性能消耗较大。重绘(repaint):元素样式改变不影响布局回流(reflow):也叫重排,当元素的尺寸、结构变化或触发某些属性时,浏......
  • 今天分享一篇Python启动浏览器的文章
    1.首先是浏览器选择,因为我之前自己电脑测试,安装了Firefox浏览器,版本号:45.0.2。但是这个版本号的浏览器找不到对应的驱动,但是本人又不想卸载这个浏览器,所以转而使用谷歌浏览器进行自动化测试了。Firefox驱动下载地址:https://github.com/mozilla/geckodriver/releases,如果有需要的......
  • 一个简单的HTML网页 故宫学生网页设计作品 dreamweaver作业静态HTML网页设计模板 旅游
    家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠......
  • 学生家乡网页设计作品静态HTML网页模板源码 广西旅游景点网页设计 大学生家乡主题网站
    家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠......
  • 【网页设计】期末大作业html+css(音乐网站)
    ......
  • 【期末网页设计】基于HTML学生信息管理系统网页项目的设计与实现
    ......
  • python系列&AIi系列(参考性极强):【完全攻略】Gradio:建立机器学习网页APP
    【完全攻略】Gradio:建立机器学习网页APP【完全攻略】Gradio:建立机器学习网页APP前言一、Gradio介绍以及安装1-1、Gradio介绍Gradio:1-2、安装二、快速开始(初步了解)2-1、简单小栗子2-2、多输入多输出2-3、简易聊天机器人三、关键技术3-1、带有样例的输入3-2、提示弹窗3-......