206
云计算
负载均衡
产品简介
产品价格
快速入门
用户指南
实践操作
常见问题
购买指南
云服务器
产品简介
计费规则
购买指导
控制台使用指南
常见问题
云数据库
产品简介
计费规则
购买指导
快速入门
连接实例
控制台使用指南
对象存储
产品简介
控制台使用指南
程序员百科
Python
如何使用Chrome浏览器的开发者工具排查ECS实例上的网站加载过慢问题?

产品推荐:

1、安全稳定的云服务器租用,2核/2G/5M仅37元,点击抢购>>>

2、高防物理服务器20核/16G/50M/500G防御仅350元,点击抢购>>>

3、百度智能建站(五合一网站)仅880元/年,点击抢购>>> 模板建站(PC+手机站)仅480元/年,点击抢购>>>

4、阿里云服务器2核2G3M仅99元/年、2核4G5M仅199元/年,新老同享,点击抢购>>> 

5、腾讯云服务器2核2G4M仅99元/年、新老同享,点击抢购>>>   


如何使用Chrome浏览器的开发者工具排查ECS实例上的网站加载过慢问题?

本文介绍使用Chrome浏览器的开发者工具排查网站加载过慢问题的方法。

问题描述

部署在ECS实例上的网站使用Chrome浏览器访问时加载过慢。

问题原因

网站中存在部分脚本或资源(例如网站调用的文件、网站需要使用的网络资源)请求过慢或加载失败。

解决方案

您可以先通过阿里云ECS控制台的实例监控页面,查看该网站所在ECS实例的各项监控指标,具体操作,请参见查看实例监控信息。如果ECS实例的各项监控指标正常,则您可以通过Chrome浏览器中的开发者工具来查找导致网站加载速度过慢的网页资源,然后针对该资源的详细网络请求信息针对性处理。

步骤一:使用Chrome浏览器中的开发者工具查找加载时间较长的资源

  1. 打开Chrome浏览器并访问该网站。

  2. 打开Chrome浏览器的开发者工具。

    • 方式一:

      您可以直接在您的键盘上按F12键。

    • 方式二:

      1. 在Chrome浏览器右上角,单击浏览器设置图标。

      2. 选择更多工具 > 开发者工具打开开发者工具

    • 方式三:

      单击鼠标右键,然后单击检查单击鼠标右键..png

  3. 在开发者工具中,单击Network页签。network页签

  4. Ctrl + F5键,强制刷新网页,然后查看网页资源的加载情况。

    您可以在资源列表中根据Time参数值,找到加载时间较长的网页资源,即Time参数值较大的资源。

    重要

    建议先按Ctrl键不放,再按F5键。

    20230207150949
  5. 获取该资源的网络请求信息。

    1. 鼠标右键单击Name列中的目标资源,然后选择Copy > Cpoy link address20230207152601

    2. 复制并查看该资源的请求URL。

      Headers页签下,您可以查看Request URLStatus Code等详细的网络请求信息,然后对这些信息进行分析。

      网络信息

步骤二:根据目标资源信息处理问题

根据目标资源Headers页签下的Request URLStatus Code等网络请求信息进行分析,本文主要介绍如下几种情况对应的解决方案:

情况一:加载请求时长过大的URL是外部网站URL

如果加载请求时长过大的URL是外部网站URL,您需要检查该外部网站URL地址访问是否正常、网站Web程序中的调用地址是否正确,然后通过优化程序调用来解决该问题。

情况二:加载请求时长过大的URL是一些较大的文件

如果加载请求时长过大的URL是一些较大的图片、视频、压缩包等文件,建议您进行如下操作:

  • 升级网站带宽,具体操作,请参见配置公网带宽最佳实践。

  • 优化下载路径或使用其他下载路径,例如使用阿里云对象存储OSS(Object Storage Service),具体操作,请参见网站与移动应用使用OSS。

情况三:网站本身调用的动态脚本加载时间过长

如果是网站本身调用的动态脚本加载时间过长,您需要结合服务器的weblog日志进行分析、检查请求调用过程中消耗的具体资源所在环境,例如,数据库查询的时间过长,您需要检查数据库服务器的性能情况。同时,您还需要特别关注Timing页签下,Waiting for server response参数时间较长的资源。尤其..jpeg

查看服务器的weblog日志并进行分析的具体操作,请参见Nginx网站访问卡慢排查或Apache网站访问卡慢排查。


这条帮助是否解决了您的问题? 已解决 未解决

提交成功!非常感谢您的反馈,我们会继续努力做到更好! 很抱歉未能解决您的疑问。我们已收到您的反馈意见,同时会及时作出反馈处理!