当前位置: 首页 > news >正文

优化 Web 性能:管理第三方资源(Third-Party Summary)

在现代 Web 开发中,第三方资源(如分析工具、广告脚本、字体服务)为网站提供了丰富的功能,但也可能成为性能瓶颈。Google 的 Lighthouse 工具在性能审计中提供了“第三方资源概要”(Third-Party Summary),帮助开发者识别和管理这些外部依赖。本文将基于 Chrome 开发者文档,探讨第三方资源的影响、分析方法及优化策略,助你在2025年的 Web 项目中提升性能。


1. 什么是第三方资源?
1.1 定义

第三方资源是指由非网站主域名提供的脚本、样式、字体或其他内容,通常通过 <script><link><iframe> 引入。常见的例子包括 Google Analytics、字体服务(如 Google Fonts)和社交媒体插件。

1.2 Lighthouse 的关注点

Lighthouse 的“第三方资源概要”总结了这些资源对页面加载时间和渲染的影响,包括:

  • 总加载时间:第三方资源的下载和执行耗时。
  • 阻塞时间:主线程被占用的时间。
1.3 常见第三方资源
  • 分析工具:Google Analytics、Hotjar。
  • 广告网络:Google AdSense。
  • CDN 内容:jQuery、Bootstrap。

2. 第三方资源的影响
2.1 加载时间延长

第三方资源通常涉及额外的 DNS 解析、连接建立和下载,可能延迟“首次内容绘制”(FCP)和“可交互时间”(TTI)。

2.2 性能瓶颈
  • 同步脚本:阻塞主线程渲染。
  • 网络依赖:第三方服务器故障或延迟影响页面。
2.3 性能得分下降

Lighthouse 的性能评分因第三方资源的加载和执行时间而降低,尤其当阻塞时间过长时。


3. 如何分析第三方资源?
3.1 使用 Lighthouse
  1. 打开 Chrome 开发者工具(F12)。
  2. 切换到“Lighthouse”选项卡。
  3. 选择“性能”类别,生成报告。
  4. 查看“诊断”下的“第三方资源概要”(Third-Party Usage),列出每个资源的加载时间和阻塞时间。
3.2 使用开发者工具
  • 在“网络”面板中,过滤“第三方”请求,查看域名和耗时。
  • 在“性能”面板中,分析主线程阻塞情况。
3.3 外部工具
  • WebPageTest:提供详细的第三方资源分析。

4. 优化第三方资源的策略
4.1 异步加载

为非关键脚本添加 asyncdefer

<script src="https://analytics.example.com/script.js" async></script>
  • async:下载不阻塞,完成后立即执行。
  • defer:下载不阻塞,DOM 解析后执行。
4.2 延迟加载

仅在需要时加载第三方资源:

window.addEventListener('load', () => {const script = document.createElement('script');script.src = 'https://analytics.example.com/script.js';document.body.appendChild(script);
});
4.3 使用 rel=preconnect

提前建立第三方域名连接:

<link rel="preconnect" href="https://analytics.example.com">
4.4 自托管资源

将第三方资源下载并托管到自己的服务器:

  • 示例:从 Google Fonts 下载字体文件:
    <link rel="stylesheet" href="/fonts/roboto.css">
    
  • 优点:减少外部依赖,提升控制力。
4.5 减少使用
  • 评估必要性:移除非必需的第三方脚本。
  • 轻量化替代:用小型库替代臃肿的框架。
4.6 监控和限制
  • 预算:设置第三方资源的时间预算(如总耗时 < 200ms)。
  • 超时处理
    const script = document.createElement('script');
    script.src = 'https://slow.thirdparty.com/script.js';
    script.onerror = () => console.log('加载失败');
    setTimeout(() => script.src = '', 2000); // 2 秒超时
    document.head.appendChild(script);
    

5. 示例:优化前后对比
优化前
<head><script src="https://analytics.example.com/script.js"></script><script src="https://ads.example.com/ad.js"></script>
</head>
  • 总加载时间:800ms。
  • 主线程阻塞:300ms。
优化后
<head><link rel="preconnect" href="https://analytics.example.com"><script src="https://analytics.example.com/script.js" defer></script><script>window.addEventListener('load', () => {const ad = document.createElement('script');ad.src = 'https://ads.example.com/ad.js';document.body.appendChild(ad);});</script>
</head>
  • 总加载时间:200ms。
  • 主线程阻塞:0ms。
效果
  • FCP 从 2 秒降至 1.5 秒。
  • TTI 从 3 秒缩短至 2 秒。
  • Lighthouse 性能得分提升 10-15 分。

6. 注意事项
  • 功能权衡:确保优化不影响第三方服务的核心功能。
  • 兼容性:测试异步或延迟加载后的行为。
  • 监控:定期审查第三方资源的使用情况。

7. 总结

第三方资源是 Web 性能优化的双刃剑,合理管理可以显著提升页面加载速度和响应性。Lighthouse 的“第三方资源概要”为我们提供了分析工具,而本文介绍的策略(如异步加载、自托管、减少使用)则是实践指南。

相关文章:

优化 Web 性能:管理第三方资源(Third-Party Summary)

在现代 Web 开发中&#xff0c;第三方资源&#xff08;如分析工具、广告脚本、字体服务&#xff09;为网站提供了丰富的功能&#xff0c;但也可能成为性能瓶颈。Google 的 Lighthouse 工具在性能审计中提供了“第三方资源概要”&#xff08;Third-Party Summary&#xff09;&am…...

第六章、 系统级 I/O

真题考点 考点一&#xff1a;Unix I/O 所有的 I/O 设备(例如网络、磁盘和终端)都被模型化为文件&#xff0c;而所有的输入和输出都被当作对相应文件的读和写来执行。这种将设备优雅地映射为文件的方式&#xff0c;允许 Linux 内核引出一个简单、低级的应用接口&#xff0c;称为…...

Jetpack Compose 自定义标题栏终极指南:从基础到高级实战

Jetpack Compose 自定义标题栏终极指南&#xff1a;从基础到高级实战 本文将带你彻底掌握 Compose 标题栏开发&#xff0c;涵盖 5 种专业级实现方案 性能优化技巧 完整可运行代码。 &#x1f4da; 核心方案对比 方案特点适用场景复杂度基础Row布局完全自定义&#xff0c;灵…...

晶晨S905-S905L-S905LB_S905M2通刷_安卓6.0.1_16S极速开机_线刷固件包

晶晨S905-S905L-S905LB_S905M2通刷_安卓6.0.1_16S极速开机_线刷固件包 线刷方法&#xff1a;&#xff08;新手参考借鉴一下&#xff09; 刷机工具版本请用2.2.0以上&#xff0c;导入固件后&#xff0c;刷机工具右侧两个擦除打勾&#xff0c;然后点开始。插上刷机神器&#xf…...

tkiner模块的初步学习

文章目录 一、前言二、概念2.1 安装2.2 窗口 三、小部件3.1 概述3.2 常用小部件3.2.1 Label3.2.2 Button3.2.3 Entry3.2.4 Text3.2.5 Listbox3.2.6 Checkbutton3.2.7 Radiobutton3.2.8 Scrollbar 3.3 更多小部件3.3.1 Scale3.3.2 Spinbox3.3.3. Progressbar 3.4 主题小部件 四、…...

Java常用数据结构操作方法全面总结

目录 一、List接口及其实现类二、Set接口及其实现类三、Map接口及其实现类四、Queue/Deque队列五、Stack栈六、树形结构七、注意事项与最佳实践总结 一、List接口及其实现类 核心实现类 ArrayList&#xff1a;基于动态数组LinkedList&#xff1a;基于双向链表 常用操作方法…...

Java的Selenium的特殊元素操作与定位之select下拉框

如果页面元素是一个下拉框&#xff0c;我们可以将此web元素封装为Select对象 Select selectnew Select(WebElement element); Select对象常用api select.getOptions();//获取所有选项select.selectBylndex(index);//根据索引选中对应的元素select.selectByValue(value);//选…...

STM32单片机入门学习——第15节: [6-3] TIM输出比较

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.05 STM32开发板学习——第15节: [6-3] TIM输出比较 前言开发板说明引用解答和科普一…...

力扣经典算法篇-9-跳跃游戏(贪心算法,反向递推)

题干&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 …...

java面向对象 - 封装、继承和多态

1.封装 定义 封装是把对象的属性和操作(或服务)结合为一个独立的整体,并尽可能隐藏对象的内部实现细节。通过访问控制修饰符(如private、protected、public)对属性和方法的访问进行限制,以此提升代码的安全性与可维护性。 要点 访问控制:运用private修饰属性,防止外部直…...

铁电液晶(FLC)与反铁电液晶(AFLC)

### **铁电液晶&#xff08;FLC&#xff09;与反铁电液晶&#xff08;AFLC&#xff09;的原理、区别及应用** --- ## **1. 基本原理** ### **&#xff08;1&#xff09;铁电液晶&#xff08;Ferroelectric Liquid Crystal, FLC&#xff09;** - **分子结构**&#xff1a; …...

经典算法 a^b

原题目链接 问题描述 求 a 的 b 次方对 p 取模的值&#xff0c;即计算&#xff1a; a^b mod p输入格式 输入一行&#xff0c;包含三个整数 a、b 和 p&#xff0c;中间用空格隔开。 输出格式 输出一个整数&#xff0c;表示 a^b mod p 的值。 数据范围 0 ≤ a, b ≤ 10^91 …...

Python解决“组成字符串ku的最大次数”问题

Python解决“组成字符串ku的最大次数”问题 问题描述测试样例解题思路代码 问题描述 给定一个字符串 s&#xff0c;该字符串中只包含英文大小写字母。你需要计算从字符串中最多能组成多少个字符串 “ku”。每次可以随机从字符串中选一个字符&#xff0c;并且选中的字符不能再使…...

ubuntu22使用TrinityCore搭建魔兽世界服务器

目录 一、Ubuntu22工具下载二、服务端编译配置1. 从 git 上拉取服务端代码2. 编译客户端3. 修改配置文件4. 加载sql语句5. 下载客户端6. 下载必要sql文件 三、客户端连接配置四、游戏启动 一、Ubuntu22工具下载 下载所有需要的工具 sudo apt-get update sudo apt-get install…...

LeetCode - 739.每日温度问题单调栈解法

目录 问题描述 方法思路&#xff1a;单调栈 核心思想 为什么用单调栈&#xff1f; 算法步骤 代码实现与逐行解析 示例解析 复杂度分析 总结 问题描述 给定一个整数数组 temperatures&#xff0c;表示每天的温度&#xff0c;返回一个数组 answer&#xff0c;其中 answe…...

GESP:2025-3月等级8-T1-上学

时间限制 : 1 秒 内存限制 : 128 MB C 城可以视为由 n个结点与 m条边组成的无向图。这些结点依次以1,2,....n标号&#xff0c;边依次以 1,2...m标号。第i条边&#xff08;1<i<m &#xff09;连接编号为ui 与vi的结点&#xff0c;长度为li米。 小 A 的学校坐落在 C 城中…...

宏碁笔记本电脑擎7PRO搭载的 NVIDIA RTX 5080 显卡安装pytorch

宏碁笔记本电脑擎7PRO搭载的 NVIDIA RTX 5080 显卡是一款高性能移动 GPU&#xff0c;基于 NVIDIA 最新的 Blackwell 架构设计&#xff0c;通过修正架构&#xff08;Blackwell&#xff09;、显存类型与带宽&#xff08;GDDR7、960GB/s&#xff09;、Tensor Core 与 RT Core 全面…...

Qwen-7B-Chat 本地化部署使用

通义千问 简介 通义千问是阿里云推出的超大规模语言模型&#xff0c;以下是其优缺点&#xff1a; 优点 强大的基础能力&#xff1a;具备语义理解与抽取、闲聊、上下文对话、生成与创作、知识与百科、代码、逻辑与推理、计算、角色扮演等多种能力。可以续写小说、编写邮件、解…...

数据结构,顺序存储线性表

//线性表顺序存储 #include<stdio.h> #include<stdlib.h> #define MAXSIZE 100 #define ElemType int //定义结构体 typedef struct LinearList{ElemType elem[MAXSIZE];int last; }LinearList; //初始化链表 void InitList(LinearList &L){L.last-1; };…...

Matlab轴承故障信号仿真与故障分析

1.摘要 本文介绍了一个基于Matlab的轴承故障信号仿真与分析程序&#xff0c;旨在模拟和分析轴承内圈故障信号的特征。程序首先通过生成故障信号、共振信号和调制信号&#xff0c;添加噪声和离散化处理&#xff0c;构建模拟的振动信号&#xff0c;并保存相关数据。通过快速傅里…...

Git三剑客:工作区、暂存区、版本库深度解析

一、引言&#xff1a;为什么需要理解Git的核心区域&#xff1f; 作为开发者&#xff0c;Git是日常必备的版本控制工具。但你是否曾因以下问题感到困惑&#xff1f; 修改了文件&#xff0c;但 git status 显示一片混乱&#xff1f; git add 和 git commit 到底做了什么&#x…...

stack和queue

1.stack的使用 函数说明接口说明 stack() 构造空的栈 empty 检测stack是否为空 size 返回stack中元素的个数 top 返回栈顶元素的引用 push 将元素val压入stack中 pop 将stack中尾部的元素弹出 void test_stack() {stack<int> st;st.push(1);st.push(2);st.push(3);s…...

【补题】Codeforces Round 1011 (Div. 2) C. Serval and The Formula

题意&#xff1a;给两个数&#xff0c;问你存不存在k使nmn异或m 思路&#xff1a; 为了让nmn异或m成功&#xff0c;很明显有两个数在同一位上最多只能有1个1。因为如果有两个就会导致数字变小&#xff0c;很明显nm是不可能成功的&#xff0c;因为你怎么搞都会有至少一个一模一…...

基于javaweb的SpringBoot汉服文化bbs系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

Vision_Robot

import time import tkinter as tk from tkinter import messagebox from PIL import Image, ImageTk import socket import threading from datetime import datetime import logging import subprocess # 确保导入 subprocess 库 import os import pyautogu…...

爬虫练习案例

案例1&#xff1a; 爬取菜鸟教程左侧导航栏的分类内容&#xff1a; 在pycharm中书写代码。 先倒入相关模块。 import requests from bs4 import BeautifulSoup import lxml.etree as le这个案例写两种写法。 第一种&#xff1a; urlhttps://www.runoob.com/html/html-tuto…...

大数据时代的隐私保护:区块链技术的创新应用

一、引言 在当今数字化时代&#xff0c;大数据已经成为推动社会发展的关键力量。从商业决策到社会治理&#xff0c;从医疗健康到金融服务&#xff0c;数据的价值日益凸显。然而&#xff0c;随着数据的大量收集和广泛使用&#xff0c;隐私保护问题也日益突出。如何在充分利用大…...

力扣刷题-热题100题-第31题(c++、python)

25. K 个一组翻转链表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/reverse-nodes-in-k-group/?envTypestudy-plan-v2&envIdtop-100-liked 常规模拟 根据翻转的长度找到头和尾&#xff0c;进入函数进行翻转 主程序里有循环不断找到头和尾并拼…...

(四)数据检索与增强生成——让对话系统更智能、更高效

上一篇&#xff1a;&#xff08;三&#xff09;链式工作流构建——打造智能对话的强大引擎 在前三个阶段&#xff0c;我们已经搭建了一个基础的智能对话&#xff0c;并深入探讨了输入输出处理和链式工作流构建的细节。今天&#xff0c;我们将进入智能对话系统的高级阶段——数…...

Turtle图形化编程知识点汇总:让编程更有趣

友情提示&#xff1a;本文内容由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;创作平台gpt-4-turbo模型生成&#xff0c;仅供参考! 在学习编程的过程中&#xff0c;许多初学者会接触到Python的turtle图形库&#xff0c;它是一种图形化编程工具&#xff0c;通过简单的…...

Social GAN(CVPR2018)

文章目录 AbstractIntroductionRelated WorkHuman-Human InteractionRNNs for Sequence PredictionGenerative Modeling MethodProblem DefinitionGenerative Adversarial NetworksSocially-Aware GANPooling ModuleEncouraging Diverse Sample Generation Conclusion paper Ab…...

0201线性回归-机器学习-人工智能

文章目录 1 程序目标2 代码实现3 关键步骤解释4 示例输出5 注意事项结语 以下是一个使用 scikit-learn、pandas和 matplotlib 实现线性回归的完整程序示例。程序包含数据加载、模型训练、预测和可视化。 1 程序目标 加载数据&#xff08;使用 pandas&#xff09;数据预处理&am…...

2-Visual Studio 2022 NET开发Windows桌面软件并连接SQL Server数据库

引言 今天尝试Visual Studio 2022 NET开发一个NET桌面软件&#xff0c;并尝试连接SQL Server的数据库&#xff0c;此文章为开发笔记。 --------------------------------------------------------------------------------------------------------------------------------- …...

OpenGL学习笔记(简介、三角形、着色器、纹理、坐标系统、摄像机)

目录 简介核心模式与立即渲染模式状态机对象GLFW和GLAD Hello OpenGLTriangle 三角形顶点缓冲对象 VBO顶点数组对象 VAO元素缓冲对象 EBO/ 索引缓冲对象 IEO 着色器GLSL数据类型输入输出Uniform 纹理纹理过滤Mipmap 多级渐远纹理实际使用方式纹理单元 坐标系统裁剪空间 摄像机自…...

第二十九章:Python-mahotas库:图像处理的高效工具

一、mahotas库简介 mahotas是一个功能强大的Python图像处理库&#xff0c;提供了丰富的图像处理算法和工具&#xff0c;包括图像分割、特征提取、滤波、形态学操作等。它以简洁的API和高效的性能著称&#xff0c;特别适合处理大型图像。资源绑定附上完整资料供读者参考学习&…...

【网络安全】 防火墙技术

防火墙是网络安全防御的重要组成部分&#xff0c;它的主要任务是阻止或限制不安全的网络通信。在这篇文章中&#xff0c;我们将详细介绍防火墙的工作原理&#xff0c;类型以及如何配置和使用防火墙。我们将尽可能使用简单的语言和实例&#xff0c;以便于初学者理解。 一、什么…...

关于Linux系统安装和优化的教程

书籍教程 《Linux 就该这么学》&#xff1a;涵盖多种 Linux 发行版的安装知识&#xff0c;从安装前硬件检测&#xff08;如硬盘容量需至少 10GB、内存至少 2GB &#xff09;、软件源选择&#xff0c;到安装步骤&#xff08;如镜像烧录、启动设置、分区操作 &#xff09;都有详…...

还是主题混合程序设计

以下是针对您现有代码的完整主题化改造方案&#xff0c;实现跨QML/Qt Widgets的阴影主题系统&#xff1a; 一、主题管理系统核心 // thememanager.h #pragma once #include <QObject> #include <QColor> #include <QMap> #include <QQmlEngine>class…...

【FPGA开发】利用状态机思想点亮流水灯/初学hdlbitsFPGA教程网站

一、状态机思想介绍 状态机是一种用于描述系统行为的形式化模型&#xff0c;它将系统抽象为有限的状态&#xff0c;并通过状态转移来响应外部输入或事件。其核心思想是&#xff1a;系统在任何时刻只处于一个确定的状态&#xff0c;且在不同状态之间按规则切换。状态机是处理明…...

洛谷 P3214 [HNOI2011] 卡农

题目传送门 前言 再次败在 d p dp dp 手下&#xff0c;但是数据范围这么小应该是可以看出是 d p dp dp 的&#xff08;毕竟对于其他组合数的问题数据范围都是 1 0 9 10^9 109 起步&#xff09;。 思路 题意简化 现有 1 , 2 , 3 , . . . , n − 1 , n 1, 2, 3, ... , n -…...

智能体和RPA都需要程序思维,如何使用影刀的变量?

欢迎来到涛涛聊AI&#xff0c; 不管AI还是RPA&#xff0c;都需要用到编程思想才能完成批量工作。今天研究了下影刀的变量。 变量类型 根据变量值选择相应的类型&#xff0c;可选择任意一种影刀所支持的数据类型 变量值 指定变量中保存的值&#xff0c;会根据不同的类型设置…...

使用OpenFeign实现服务远程调用

在微服务架构中&#xff0c;由于业务功能的分工不同&#xff0c;我们把项目拆分为多个独立的服务&#xff0c;并常常将其部署在不同的服务器上&#xff0c;这个时候如果服务A的某个功能需要借助服务B来实现&#xff0c;那么这个时候如何去调用就成了问题&#xff0c;目前有一种…...

【移动计算】:AndroidStudio安装和项目搭建【2019:版本3.5.2】

文章目录 1. 下载安装包2. 安装包安装2.1 运行完exe进行安装选择Cancel&#xff1a; Unable SdkInstall Type选择Custom可以选择更新最新版本&#xff1a;这里不选择点击Next勾选 Android Sdk Platform API 虚拟设备选项显示已安装否则也需要勾选设置自定义安装地址&#xff1a…...

泡棉压缩对显示模组漏光的定位分析及论述

■背景 液晶LCD受到外力或者挤压后&#xff0c;比较容易出现漏光现象即显示mura。一般从结构设计的角度会做如下措施进行整改 1>控制背光和上铁框平整度 ; 2>合理设计液晶模组的厚度和边框大小 ; 3>承载液晶面板的泡棉选取 ; 4>FPC单双层区的设计 ; 5>合理…...

当AI助理接管云计算-走向智能运维的新时代

目录 时代背景 AI在云计算运维上的帮助 新时代产物&#xff1a;WatchAlert 新时代思考 时代背景 代理人工智能&#xff1a;自主决策的未来--Gartner2025十大顶级科技预测第一名 Gartner将代理人工智能列为2025年的顶级技术趋势。该技术通过快速分析用于药物发现的海量数据…...

Day2:前端项目uniapp壁纸实战

先来做一个轮番图。 效果如下&#xff1a; common-style.css view,swiper,swiper-item{box-sizing: border-box; } index.vue <template><view class"homeLayout"><view class"banner"><swiper circular indicator-dots autoplay…...

使用人工智能大模型DeepSeek,如何进行论文润色和去重?

今天我们学习人工智能&#xff0c;如何协助我们进行论文润色和去重。手把手的学习视频地址请访问https://edu.csdn.net/learn/40402/666422 第一步在腾讯元宝对话框中输入如何协助老师做论文润色&#xff0c;通过提问&#xff0c;我们了解了老师写论文润色的步骤和建议。润色的…...

为招聘推荐系统进行相应修改的 Python 实现方案(含协同过滤推荐算法)

下面是为招聘推荐系统进行相应修改的 Python 实现方案。首先是创建数据分析看板&#xff0c;这里借助 Streamlit 库来实现可视化&#xff1b;其次是将协同过滤推荐算法和其他算法&#xff08;这里采用基于内容的推荐算法&#xff09;结合&#xff0c;以此提升推荐效果。 impor…...

Spring Boot中自定义注解的创建与使用

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

算法思想之双指针(二)

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;算法思想之双指针二) 发布时间&#xff1a;2025.4.5 隶属专栏&#xff1a;算法 目录 双指针算法介绍对撞指针&#xff1a;快慢指针&#xff1a; 例题有效三角形的个数题目链接题目描述算法思路代码实现 查找总价格为…...