网址导航网首页

嗨,欢迎来到25Qi网址导航

站长QQ:2598903095

SEO学习

网站SEO技术丨检查网站页面大小占用内存的操作方法

时间:2022-04-07 丨 作者:25Qi网址导航 丨 关键词:网站SEO技术   网站页面内存

网站SEO技术丨检查网站页面大小占用内存的操作方法,本文以25qi导航网的移动端来做演示。


1.打开界面:使用浏览器打开页面(本次选用google chrome),找到developer tools按钮或按F12打开开发者工具,点击手机屏幕按钮,再按F5,打开网页的手机端。


2.找到右侧代码的Network功能选项

image.png

3.所有资源:点击Network-点击ALL,是加载页面上所有内容,包含js,css,img,media等资源


4.页面内存大小:下拉到最后,可以看到3.2MB,4.2MB就是这个页面的内存大小。

image.png

但是实际传输的以左边那个transfered为准。因为有缓存,所以加载了1MB的资源,如果第二次再打开这个页面,缓存的内容就更多,transferred的加载内存就会更少。3.2MB transferred是实际用户打开页面加载的内存大小,因为有些资源是缓存里的,不占用用户加载的内存。有些内容会被压缩后传输,所以这个值总会比实际大小要小。


5.Transferred包含的内存有哪些:如果要查看2.5MB transferred的资源有哪些,可以分别点击头部ALL右侧的各个功能,比如js,css,img,点击到img发现,图片的内存占2.2MB,那如果要优化这个页面的速度的话,就要从img上着手。

image.png


6.查看img里具体内容的size和time数据:

image.png

可对size比较大的产品图片,加载时间比较长的产品图片进行内存的压缩,或采取谷歌推荐的图片格式(JPEG 2000,JPEG XR,and WebP),还可以使用优化图片的工具和插件(ImageOptim工具,squoosh工具,Magento优化图片扩展插件,图像优化WordPress插件,Joomla图片优化插件)。


7.加载时间分析:Loading:5.67s时间,是所有资源加载完的时间,包括第三方的一些东西。


页面内容展示全部主要看domcontentloaded的时间,第三方fb和google ad的,占比不大,但time上显示的加载时间比较长,这个加载是在页面加载完成后,也就是能看到完整页面后,实际上是对用户体验没啥影响的,所以这个页面内容展示需要的时间是1.76s(domcontentloaded)。


第一次访问过后,浏览器会把图片js css这种静态资源缓存下来。你再请求的话,只要缓存不过期,就不再去加载了,直接用缓存,这时的页面加载内存会相比第一次小很多,可能就是300多KB的transferred。


扩充:用memory功能查看的页面内存大小,是电脑加载占用了电脑多少内存资源的,是查看js调用栈的,是看js执行期间电脑系统分配了多少内存,不是说页面有多少size的。这个跟设备和浏览器有关系。


总结:学会查看一个页面的内存大小,找出占内存比较多的资源项有哪些,再进行针对性的优化,一个页面的内存越小,在相同前提下,用户打开的加载速度就越快,特别是在谷歌的核心网页指标(LCP,FID,CLS)即将在6月上线的前夕,网站,页面速度提升应该成为这段时间的首要任务。


在线随机小姐姐图片换一批
最新收录
  • 安庆人事考试培训网

    安庆人事考试培训网:承办公务员、军队转业干部和专业技术人员继续教育培训工作;协助行业主管部门开展专业技术人员继续教育专业课培训和人事培训基地建设;承办机关事业单位技术工人等级考试的培训和各类社会化培训工作;组织培训考务人员;在政策规定范围内,开展人事考试考前培训和其他社会化培训业务。

  • 山东自学考试网

    山东自考网为广大山东自考人提供山东自考资讯、山东自考培训、山东自考历年真题下载,第1时间发布山东自考报名时间、山东自考成绩查询、山东自考网上报名、山东自考网校和山东自考书等相关资料和信息,全心全意为广大山东自考人服务

  • 上海公务员考试网

    上海公务员考试网发布2023年上海公务员考试报名时间、报名政策、职位表、考试大纲、上海公务员考试报名入口以及历年真题等辅导信息、申论热点,上海市公务员考试网承诺每日更新……

  • 浙江公务员考试网

    浙江公务员考试网:2023年浙江公务员考试时间、2023年浙江公务员考试职位表、公告大纲来自浙江省公务员局官网,2023年浙江公务员考试报名入口、报考条件、历年真题、成绩查询

  • 南充市教育考试院

    南充市教育考试院官方网站—咨询电话:0817-2239002

  • 在职研究生网

    在职研究生网第一时间公布在职硕士、在职博士等在职研究生招生信息,并为学员提供在职研究生报名、在职研究生招生简章及同等学力申硕、非全日制研究生、中外合作办学、高级研修班等咨询服务。