Web 性能入门指南-1.5 创建 Web 性能优化文化的最佳实践

最成功的网站都有什么共同点?那就是他们都有很强的网站性能和可用性文化。以下是一些经过验证的有效技巧和最佳实践,可帮助您建立健康、快乐、值得庆祝的性能文化。

https://blog-img.speedcurve.com/img/491/performance-team.gif?auto=format,compress&fit=max&w=2000

创建强大的性能优化文化意味着在你的公司或团队中创建一个如下所示的反馈循环:

https://blog-img.speedcurve.com/img/491/88f44aa-perf-culture-feedback-loop.png?auto=format,compress&fit=max&w=2000

换句话说: 让人们关心,向他们展示他们可以做些什么来提供帮助,然后在获得结果时给予他们积极的鼓励。

这是人类的基本心理学,当你在图表中看到它时,它可能看起来很明显。但令人惊讶的是,人们很容易忽略这些步骤,直接跳到投资性能工具的部分,然后想知道为什么你所有的性能努力都感觉像一场艰苦的跋涉。

确定人们关心的是什么

如果你问组织中的不同人员他们今天有多关心性能,你可能会得到一堆茫然的表情。但如果你给他们一份清单,并要求他们在以下任何一项他们关心的事情上打勾,你可能会得到更热情的回应:

  • 跳出率

  • 购物车数量

  • 转换

  • 收入

  • 页面PV

  • 页面浏览量

  • 搜索流量

  • 用户满意度

  • 用户留存

性能可以映射到所有这些指标,以及您能想到的几乎任何其他业务指标。要让不同的人关注性能,您需要了解哪些指标可以激励他们。

例如,高管可能想知道性能改进和性能下降对转化率和总体收入的影响,而营销团队中的人员可能关注性能对从搜索引擎优化到用户参与度等各方面的影响。

**了解了人们关心的内容后,就为他们串联起来。**案例研究(例如 WPOstats.com上精选的案例研究)是实现这一目标的绝佳方式。例如,如果您的执行团队中有人关心转化和收入,您可以引导他们阅读一组研究,这些研究侧重于性能对收入 和 转化率的影响 。您的营销团队中的人可能关心 流量 和 参与度。等等。

案例研究是改变性能怀疑论者的好方法。它们也是让人们热衷于提高网站速度的好方法。例如,当你了解到 Staples 的平均加载时间缩短了 1 秒,并且转化率提高了 10% 时,这非常引人注目。

此外建立页面性能(加载时间)和跳出率的数据,对所有人来说都是一个有意义和参考性的指标。

https://blog-img.speedcurve.com/img/491/55e811b-perf-culture-lux-load-time-vs-bounce-rate-02.png?auto=format,compress&fit=max&w=2000

与竞争对手进行性能对比

让人们关注性能的最快方法之一是向他们展示他们的网站与竞争对手相比有多慢。

综合监控的一大优点是您可以测试网络上的任何页面,而不仅仅是您自己的页面。这让您可以做一些很棒的事情,比如生成并排的幻灯片——甚至更好的是:视频——将您的网站与竞争对手的网站放在一起对比。

https://blog-img.speedcurve.com/img/491/3154407-perf-culture-video.png?auto=format,compress&fit=max&w=2000

让性能可视化

如果你想让非技术利益相关者感到眼花缭乱,那就向他们展示一系列无穷无尽的仪表板和图表。 **你需要了解组织中不同人的动机一样,你也需要定制你的报告。**对于某些人来说,你的性能报告可能只是一个图表或一个非常简单的仪表板,向他们展示他们关心的数据点。(理所当然的是,你应该随时准备好根据要求进行更深入的研究。)

https://blog-img.speedcurve.com/img/491/rum_live_tv_mode.png?auto=format,compress&fit=max&w=2000

像 Lonely Planet 和 Ticketmaster 这样的公司有效采用的一项出色做法是,在办公室的开放区域安装显示器,显示关键性能统计数据和比较视频。Lara Hogan(前 Etsy 工程总监)写了 一篇很棒的博客文章,展示了 Etsy 如何利用展示而非讲述的力量。

协作制定性能指标统计和监控

性能预算是确保您的网站提供良好用户体验的重要工具。其核心理念是确定最重要的指标,然后为这些指标设置阈值,并在超出这些预算阈值时收到警报。

https://blog-img.speedcurve.com/img/491/2024-budgets-vs-goals.png?auto=format,compress&fit=max&w=2000

正如本文开头所提到的,没有一种放之四海而皆准的性能指标能够激发公司内所有人的热情。这意味着在制定性能预算时,您不应该只关注一个通用的指标。相反,您的性能预算可以包括多种不同的指标,例如:

  • 运维团队需要了解首字节时间(Time to First Byte, TTFB),以便他们能够调查后端问题。

  • 开发人员可能关心页面开始渲染的时间,因为他们想了解页面的构建情况——例如,是否存在阻塞脚本或样式表。

  • 您的营销团队想知道从用户角度来看,页面交付最重要内容的速度有多快,因此他们可能想跟踪主要图片的渲染情况。

  • SEO人员希望跟踪核心网页指标(Core Web Vitals)。

为了让人们负起责任,让他们负责自己的性能指标监控,并确保在超出监控阈值时收到警报。

从简单优化开始,快速获取正反馈

如果您对性能不熟悉,或者您正在处理一个对您来说很陌生的网站,那么很有可能有一些容易优化的地方。 首先要查看的是图像和阻止样式表和脚本(尤其是第三方)。

例如, Fanatics.com的团队 进行了为期一个月的性能冲刺,其中最有影响力的改变是简单的图像优化:他们提高了图像质量和压缩率,并修复了阻止页面渲染的图像精灵。结果, 他们的平均加载时间缩短了 2 秒,移动转化率几乎翻了一番 ——这真的是一件大事,因为他们一半以上的收入来自移动设备。这个相对轻松的胜利是让整个公司都认可性能的绝佳方式。

庆祝性能优化阶段性胜利

我们生活在一种不怎么庆祝成功的文化中。因此,请将此视为一个提醒: 每当您在性能方面取得进展时(这会影响用户参与度或收入或贵公司关心的任何方面),请大声宣扬。 或者,如果您的办公室不允许这样做,也可以通过电子邮件。

https://blog-img.speedcurve.com/img/491/dog-party.jpg?auto=format,compress&fit=max&w=2000

分享你所学到的知识

大声欢呼(或发送庆祝邮件)是一个很好的开始。接下来,分享你做了什么以及学到了什么。这可以是全公司或全部门的电子邮件、内部开发博客上的帖子以及内部聚会。我知道一些性能团队会定期每月举行技术聚会,并且每年举行一两次全公司活动,分享他们所有最出色的网络性能统计数据和胜利。

加入健康的性能文化还意味着接受这样一个事实:您属于比公司更大的文化。 参与其中并向其他 webperf 爱好者学习的方法有很多:

  • 在面向公众的科技博客上分享您的案例研究和成功案例(如果您的公司允许的话),例如 Etsy 的Code as Craft、Cars.com 的Tech Blog和金融时报的Engine Room。

  • 将您的成功故事提交给WPOstats.com – 性能案例研究库。

  • 在 Twitter 上关注#webperf 标签。

  • 参加世界各地众多的Web 性能聚会之一 。

  • 参加以性能为导向的会议,例如 performance.now()和SmashingConf。

其他资源

  • Cars.com 解释了 他们如何使用 SpeedCurve 来创建性能文化。

  • 这期 RWD 播客 由 Vox Media 性能团队的几位成员主持。除其他事项外,他们在谈论性​​能文化方面做得非常出色。

  • Lara Hogan 写了一本很棒的书,名为 《为性能而设计》,她还好心地将这本书的文本放在了网上。整本书都很棒, 第 8 章专门介绍了性能文化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/45968.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos7|Linux操作系统|编译最新的OpenSSL-3.3,制作rpm安装包

一、 为什么需要编译rpm包 通常,我们需要安装某个软件,尤其是在centos7这样的操作系统,一般是通过yum包管理器来安装软件,yum的作用是管理rpm包的依赖关系,自动的处理rpm包的安装顺序,安装依赖等的相关问…

交换机和路由器的工作流程

1、交换机工作流程: 将接口中的电流识别为二进制,并转换成数据帧,交换机会记录学习该数据帧的源MAC地址,并将其端口关联起来记录在MAC地址表中。然后查看MAC地址表来查找目标MAC地址,会有一下一些情况: MA…

通过Bugly上报的日志查找崩溃闪退原因

第一步,解析堆栈信息 在bugly上收集到的信息是这样的 0x000000010542e46c 0x0000000104db4000 6792300 OS应用发生崩溃时,系统会生成一份崩溃日志,这份日志中包含了崩溃时的堆栈信息,但这些堆栈信息并非直接指向源代码&#x…

【漏洞复现】某赛通 电子文档安全管理系统 多个接口存在远程命令执行漏洞

免责声明: 本文内容旨在提供有关特定漏洞或安全漏洞的信息,以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步,并非出于任何恶意目的。阅读者应该明白,在利用本文提到的漏洞信息或进行相关测…

【RAG 实践】LlamaIndex 快速实现一个基于 OpenAI 的 RAG

这是 LlamaIndex 官方 Starter Tutorial 中 demo,用很少的代码来使用 OpenAI 快速实现出一个 RAG。 Ref: Starter Tutorial | LlamaIndex 代码:llamindex-rag-demo | Kaggle 1)设置 OpenAI Token 这里使用国内的 OpenAI 中转 API token&…

【Python】数据分析-Matplotlib绘图

数据分析 Jupyter Notebook Jupyter Notebook: 一款用于编程、文档、笔记和展示的软件。 启动命令: jupyter notebookMatplotlib 设置中文格式:plt.rcParams[font.sans-serif] [KaiTi] # 查看本地所有字体 import matplotlib.font_manager a sorted…

802.11ax RU - 传输的最小单元

子载波 无线信号是加载在某个固定频率上进行传输的,这个频率被称为载波。802.11标准中,对传输频率有更新的划分,而这些划分的频率被称为子载波。Wi-Fi 6中,以20Mhz信道为例,20Mhz信道被划分成256个子载波,…

QML 鼠标和键盘事件

学习目标:Qml 鼠标和键盘事件 学习内容 1、QML 鼠标事件处理QML 直接提供 MouseArea 来捕获鼠标事件,该操作必须配合Rectangle 获取指定区域内的鼠标事件, 2、QML 键盘事件处理,并且获取对OML直接通过键盘事件 Keys 监控键盘任意按键应的消…

基于3D感知的端到端具身操作论文导读

DexIL:面向双臂灵巧手柔性操作的端到端具身执行模型 模型架构 输入:   观测Ot: RGB点云,使用PointNet进行编码;   状态St: 双臂末端7x2Dof位姿16x2灵巧手关节位置,只进行归一化,无编码&am…

Linux Win 10 Windows上安装Ollama部署大模型qwen2 7b/15配置启动 LangChain-ChatChat 0.2.10进行对话

Win 10 Window安装Ollama部署qwen2 7b LangChain-ChatChat 环境说明 Win 10 Python 3.11.9 LangChain-ChatChat 0.20 Ollama 0.2.10 Qwen2 1.5b/7b Windows 安装Ollama 下载并安装Windows版Ollama https://ollama.com/download#/ 下载大模型qwen2:1.5b或者qwen2:7b 在命令…

从实时监控到风险智能预警:EasyCVR视频AI智能监控技术在工业制造中的应用

随着科技的不断进步和工业制造领域的持续发展,传统的生产管理方式正逐渐转型,迈向更加智能、高效和安全的新阶段。在这个变革过程中,视频智能监控技术凭借其独特的优势,成为工业制造领域的管理新引擎,推动着从“制造”…

【YOLOv8系列】(三)YOLOv8应用实践:从识别到分类再到分割的全方位视觉解决方案

随着深度学习技术的不断演进,目标检测领域的明星模型——YOLO系列,已经发展到了第八代,即YOLOv8。这一版本不仅继承了前辈们快速与准确的特点,还实现了功能上的巨大飞跃,成为了一个全能型的视觉AI工具箱,支…

maven的settings.xml无法正确配置本地仓库路径

因为以前使用过新版的maven,现在要换个版本使用。 在配置新的本地仓库路径的时候突然发现居然idea居然识别不了我settings.xml里面配置的路径。 我很是震惊,明明之前一直都是这样子配置的。怎么突然间不行了。当我冥思苦想,在网上搜寻资料无果…

WPF学习(5) -- WPF绑定

一、双向绑定 1.代码示例 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expres…

[论文阅读]MaIL: Improving Imitation Learning with Mamba

Abstract 这项工作介绍了mamba模仿学习&#xff08;mail&#xff09;&#xff0c;这是一种新颖的模仿学习&#xff08;il&#xff09;架构&#xff0c;为最先进的&#xff08;sota&#xff09;变换器策略提供了一种计算高效的替代方案。基于变压器的策略由于能够处理具有固有非…

阿里云产品流转

本文主要记述如何使用阿里云对数据进行流转&#xff0c;这里只是以topic流转&#xff08;再发布&#xff09;为例进行说明&#xff0c;可能还会有其他类型的流转&#xff0c;不同服务器的流转也可能会不一样&#xff0c;但应该大致相同。 1 创建设备 具体细节可看&#xff1a;…

Spring源码中的模板方法模式

1. 什么是模板方法模式 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它在操作中定义算法的框架&#xff0c;将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。 模板方法模式的定义&…

驱动LSM6DS3TR-C实现高效运动检测与数据采集(8)----中断获取FIFO数据并应用MotionFX库解析空间坐标

驱动LSM6DS3TR-C实现高效运动检测与数据采集.8--中断获取FIFO数据并应用MotionFX库解析空间坐标 概述视频教学样品申请源码下载开启LED开启INT中断参考驱动程序中断读取传感器数据主程序演示 概述 本文将探讨如何使用中断机制获取FIFO数据并应用MotionFX库解析空间坐标。Motio…

在 PostgreSQL 里如何处理数据的索引碎片整理的自动化?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 PostgreSQL 中数据索引碎片整理的自动化处理 PostgreSQL 中数据索引碎片整理的自动化处理 在数据库管…

接口基础知识2:http通信的组成

课程大纲 一、http协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网中被使用最广的一种网络协议&#xff0c;用于客户端与服务器之间的通信。 HTTP协议定义了一系列的请求方法&#xff0c;例如 GET、POST、PUT、DELETE 等&…