如何查看一个在线页面的内存大小

查看一个在线页面M端内存的操作方法:


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


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


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


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

但是实际传输的以左边那个transfered为准。因为有缓存,所以加载了2.5MB的资源,如果第二次再打开这个页面,缓存的内容就更多,transferred的加载内存就会更少。


2.5MB transferred是实际用户打开页面加载的内存大小,因为有些资源是缓存里的,不占用用户加载的内存。

有些内容会被压缩后传输,所以这个值总会比实际大小要小。


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


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

可对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月上线的前夕,网站,页面速度提升应该成为这段时间的首要任务。


本篇文章来源于微信公众号: 海外SEO营销资讯平台

THE END
分享
二维码
海报
如何查看一个在线页面的内存大小
查看一个在线页面M端内存的操作方法: 1. 打开界面:使用浏览器打开页面(本次选用google chrome),找到developer tools按钮或按F12打开开发者工具,点击手……
<<上一篇
下一篇>>