首页 > 其他分享 >网站前端性能分析

网站前端性能分析

时间:2023-08-04 17:01:21浏览次数:28  
标签:网站 前端 JS 优化 性能 CSS 页面


一 速度与功能,哪个更重要二 网站性能与收入
三 网站速度与用户流失
四 Web性能优化法则
五 国内性能分析工具—基调系统介绍
六 国际站的优化实践
七 改进建议
八 评分规则及优化

一  速度与功能,哪个更重要



 



1.网站最基本的东西是什么?



 



内容再丰富的网站,如果慢到无法访问也是毫无意义的;



 



• SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭;



 



• UE设计的再人性化的网站,如果用户连看都看不到也是空谈



 

2.网站速度与收入

 



• n500ms20%(google)



 



• n400ms5%~9%(yahoo!)



 



• n100ms1%(amazon)



 



• 500 ms slower = 20% drop intraffic (Google)



 



•100 ms slower = 1% drop in sales(Amazon)



 



二 网站性能与收入



 



1.Amazon:every 100 ms increase in load time of Amazon.com decreased sales by 1% .



 


2.Google:achange in a 10-result page loading in 0.4 seconds to a 30-result page loadingin 0.9 seconds decreased traffic and ad revenues by 20%


三 网站速度与用户流失

网站前端性能分析_CSS


四 Web性能优化法则

网站前端性能分析_性能_02





性能黄金法则

  只有10%–20%的最终用户时间花在了下载HTML文档上,其余的80%~90%的时间花在了下载页面中的所有组件上 (80%-90%用户的等待时间是来自于前端的页面加载)


五 国内性能分析工具—基调系统介绍

 1.什么时基调:

 


   1) 基调网络成立于2007年,是国内最大的互联网用户体验监测服务商。

   2)基调网络拥有最大的遍及全国各地的监测网络,覆盖了全国100多个城市的数据中心及数万个人终端用户


2.基调能做什么?

 


 1)通过基调监测网络可以监测出目标网站在不同时间、不同区域、不同运营商的网民访问的速度、可用性等用户体验数据


 2)能实时生成个性化的报表,以供决策者和运维管理者及时掌握网站的性能、可用性等各项表现,进而为优化调整提供准确的决策依据。

登陆:rpc.networkbench.com

网站前端性能分析_用户体验_03

由故障开始



网站前端性能分析_Google_04


登陆后界面

网站前端性能分析_用户体验_05


 

知名互联网网站当前现状   

   竞争对手—B2B,B2C网站

  B2B对手:慧聪网,环球资源网,中国制造

  B2C对手:淘宝,京东,当当,新蛋

 

六 国际站的优化实践


网站前端性能分析_用户体验_06


 

网站前端性能分析_性能_07

 

 

 

七 改进建议

 


1 . 页面性能评估工具


 


Yahoo!--Yslow


 

–雅虎的页面优化34法则,Yslow选取了能量化的23条

网站前端性能分析_Google_08



 


2. Google--Page Speed


 


–功能同Yslow


 


网站前端性能分析_用户体验_09


 


1. 针对中文站首页


 


–首页大小 建议500KB以内


 


–页面元素 建议70个以内


 


–首页域名数量 建议控制在5个以内


 


–图片,CSS,JS的过期时间问题。


CSS、JS的数量问题,尽可能的整合,减少请求次数。


2.Offer detail


 


–CSS,JS的数量众多,建议css,js的数量控制在5个以内

页面元素众多。仅仅一个detail页面,其元素个数都赶上首页了,建议严格控制页面元素


参考 优化对比

网站前端性能分析_用户体验_10



八 评分规则及优化

-Make Fewer HTTP Requests


 


-Use a Content Delivery Network


 


-Add an Expires Header


 


-Gzip Components


 


-Put CSS at the Top


 


-Move Scripts to the Bottom


 


-Avoid CSS Expressions


 


-Make JavaScript and CSS External


 


-Reduce DNS Lookups


 


-Minify JavaScript


 


-Avoid Redirects


 


-Remove Duplicate Scripts


 


-ConfigureETags

-Make Ajax Cacheable

---------------------------------------------------


网站前端性能分析_CSS_11


---------------------------------------------------

网站前端性能分析_Google_12


---------------------------------------------------

网站前端性能分析_Google_13


---------------------------------------------------

网站前端性能分析_用户体验_14


---------------------------------------------------

网站前端性能分析_网站前端性能分析_15


---------------------------------------------------

网站前端性能分析_网站前端性能分析_16


-----------------------------------------------------

A.尽量减少HTTP请求次数

  1.合并JS
  2.合并CSS文件
  3.CSS Sprites
  4.Image 图片
  5.将图片编码成Base64数据嵌入网页


B.减少阻塞次数、减少阻塞时间

  1.将CSS放在顶部
  2.将JS放在底部
  3.删除重复的脚本
  4.延迟加载渲染页面不需要的脚本
  5.按需异步下载脚本

标签:网站,前端,JS,优化,性能,CSS,页面
From: https://blog.51cto.com/u_2650279/6964906

相关文章

  • 使用Locust进行接口性能测试:安装、命令参数解析与示例解读(一)
    “Locust是一款开源的Python性能测试工具,它可以模拟大量并发用户对网站或者其他接口进行压力测试”一、Locust简介与安装1.使用pip安装Locust:pip3installlocust2.通过GitHub克隆项目并安装(推荐Python3):gitclonehttps://github.com/locustio/locustcdlocustpython......
  • 使用Locust进行接口性能测试:Locust and TaskSet类详细分析(二)
    “Locust是一款开源的Python性能测试工具,它可以模拟大量并发用户对网站或者其他接口进行压力测试”一、Locust类详细说明在Locust中,Locust类是整个负载测试工具的核心。它用于创建并发用户场景,模拟用户行为。示例:fromlocustimportLocust,TaskSet,task#每一个Locust类,......
  • 前端分页和搜索
    需求一般来说,分页和搜索都是后端处理的。但有时候后端没处理,就只能前端处理了。当然这要在数据量不大的情况下,否则会性能消耗很大。分析使用setTimeout(()=>{},1000)模拟接口调用;数据总条数total是符合搜索结果的数据总条数;使用分页组件,搭配arr.slice()返回当前页......
  • 小狐狸GPT付费源码-WEB版前端的监控代码
    今天搭建了下小狐狸的WEB版,里面有个隐藏的js代码调用外部接口可以看到下面的代码 会把当前的域名调用外部接口传递过去  ......
  • 程序员专用网站
    一、学习类1.1学习网站1.1.1文字形式1.1.2视频形式1.2搜题网站1.3技术社区二、电子书三、代码类3.1代码托管3.2源码相关3.3在线运行3.4其他四、刷题类五、工具类5.1软件搜索5.1.1搜索技巧5.1.2搜索引擎5.1.3软件收集5.2本地文件搜索5.3文件下载5.3.1传输下载5......
  • 电子书搜索网站总结
    前言网站免费付费写在后面前言总结一波最近查阅书籍用到的网站,希望能帮到大家。诸如网盘(大力盘、盘搜、如风搜基本够用了,期待度盘搜重新上线)这样的搜出来的结果比较杂,在此就不多说了,下面列举一些技术类书籍搜索网站。网站免费http://www.allitebooks.org/优点:书多,种类全,全为技术类......
  • 歌谣学前端之react三个api之一续集
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣关注公众号带你进入前端学......
  • 7DGroup性能实施项目日记1
    壬寅年 己酉月丁丑日  2022年9月21日  晴 经过上周的7DGroup学员群内部沟通,我们决定启动一个性能实施项目。在这个实施项目中,把RESAR性能工程的每个环节都落地一遍,让所有参与培训的学员都可以参与。在这个项目实施过程中,我打算记录一下项目执行日志,以供大家围观。我们的目的......
  • 7DGroup 性能/测试开发/运维 系列文章更新(2021/8)
    组织织简介1、7DGroup简介性能能闲谈1、浅谈window桌面GUI技术及图像渲染性能测试实践2、杂谈:性能测试的范围到底有多大?3、戏说CPU使用率-驳《CPU使用率度量指标是扯淡!》译文标题4、对性能测试评估分析优化市场的反思5、泛谈系统级跟踪和应用级跟踪6、性能测试分析优化该有的范围7......
  • 7DGroup 性能/测试开发/运维 系列文章更新(2021/10)
    组织织简介1、7DGroup简介2、【付费征文】7DGroup长期征集原创文章性能能闲谈1、浅谈window桌面GUI技术及图像渲染性能测试实践2、杂谈:性能测试的范围到底有多大?3、戏说CPU使用率-驳《CPU使用率度量指标是扯淡!》译文标题4、对性能测试评估分析优化市场的反思5、泛谈系统级跟踪和应......