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 章专门介绍了性能文化。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言:指针详解(5)

目录 一、sizeof()函数和strlen()函数的对比 1.sizeof()函数 2.strlen()函数 3.sizeof()函数和strlen()函数的对比 二、数组和指针笔试试题解析 1.一维数组 2.字符数组 (1)代码1 (2)代码2 (3)代码…

pytorch训练的时候 shm共享内存不足,导致训练停止

1.查看shm情况 df -h /dev/shm内存已经满了,因为之前训练多次训练意外停止到shm中的缓存不能及时被清理 2、手动清理shm 依然没被释放 3、查看关联的进程,一个一个kill lsof |grep deletedkill -9 46619 44618 44617 。。。。。4、搞定

vue中父子传递属性值

1、父传子属性值 自定义图库组件 在add.vue中应用tuku组件并给默认值 效果 2、 子传父,逆向赋值 add.vue和第一问中一样 修改tuku组件,传值给add.vue 3、多个传递 效果: 点击两个修改按钮后 4、使用defineModel简化父子传值 其他代码跟…

python作业三

1.使用requests模块获取这个json文件http://java-api.super-yx.com/html/hello.json 2.将获取到的json转为dict 3.将dict保存为hello.json文件 4.用io流写一个copy(src,dst)函数,复制hello.json到C:\hello.json import json import shutilimport requests #使用requests模块获…

OceanBase:引领下一代分布式数据库技术的前沿

OceanBase的基本概念 定义和特点 OceanBase是一款由蚂蚁金服开发的分布式关系数据库系统,旨在提供高性能、高可用性和强一致性的数据库服务。它结合了关系数据库和分布式系统的优势,适用于大规模数据处理和高并发业务场景。其核心特点包括: …

【C/C++积累技巧】实现 连续播放文件图片+逐帧文本显示, 同时 可以按任意键退出(基于easyx小游戏编程)

技巧一、使用 IMAGE数组循环&#xff1a;实现【连续播放图片】 &#xff08;1&#xff09;一张图片如何放映在 图形化窗口上&#xff1a;借用两个函数 #include<graphics.h> // 函数的头文件IMAGE imgMy; // 图形变量 loadimage(&imgMy, "写入你想显示的图片路…

软件开发面试题(C#语言,.NET框架)

1. 解释什么是委托&#xff08;Delegate&#xff09;&#xff0c;并举例说明它在C#中的用法。 委托是一种引用类型&#xff0c;它可以用于封装一个或多个方法。委托对象可以像方法一样调用&#xff0c;甚至可以用于创建事件处理程序。委托是C#中实现事件和回调函数的重要机制。…

Hive表【汇总】

提前必备 1、内部表和外部表的区别 概念讲解&#xff1a; 外部表&#xff1a;1、存放他人给予自己的数据2、当我们删除表操作时&#xff0c;会将表的元数据删除&#xff0c;保留数据文件 内部表&#xff1a;1、存放已有的数据2、当我们删除表操作时&#xff0c;会将表的元数据…

Unity 优化合集

1️⃣ 贴图优化 1. Read/Write Enable 这个属性勾选后允许你在运行时读取和写入纹理数据&#xff0c;这对于需要实时生成内容或者需要动态修改纹理的场合非常有用但在大部分情况下这是不必要的。如果打开这个属性&#xff0c;会使运行时贴图大小翻倍&#xff0c;内存中会额外…

缓存与分布式锁

一、缓存 1、缓存使用 为了系统性能的提升&#xff0c;我们一般都会将部分数据放入缓存中&#xff0c;加速访问。 适合放入缓存的数据有&#xff1a; 即时性、数据一致性要求不高的&#xff1b;访问量大且更新频率不高的数据。 在开发中&#xff0c;凡是放入缓存中的数据我们都…

Git 命令行快速入门

前言 &#xff08;1&#xff09;新手个人建议使用TortoiseGit这类图形化界面来上手学习。 &#xff08;2&#xff09;如果一定需要用命令行进行操作&#xff0c;可以按照B站&#xff1a;程式与网页开发者必备技能&#xff01;Git 和 GitHub 零基础快速上手&#xff0c;轻松掌握…

构造与操作链栈

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍+ 收藏⭐ + 留言​📝心态决定高度,细节决定成败! 链栈是数据结构中栈的一种实现方式,它利用链表(通常是单链表)来存储栈中的元…

【触摸屏】【红十字会学习系统】功能模块:视频 + AI拍照合成

项目背景 提升公众急救能力&#xff1a;确保每个人都能在紧急情况下采取正确的急救措施&#xff0c;减少伤害&#xff0c;挽救生命。培养人道主义价值观&#xff1a;通过教育和培训&#xff0c;传播红十字精神&#xff0c;促进社会对弱势群体的关注与支持。建立社区响应网络&a…

1. InternLM - 入门岛

第1关 Linux 基础知识 1. 完成SSH连接与端口映射并运行hello_world.py SSH连接配置 # wsl2中生成密钥对&#xff08;~/.ssh/id_rsa, ~/.ssh/id_rsa.pub&#xff09; ssh-keygen -t rsa# 将id_rsa.pub在internStudio作为公钥导入SSH登录 $ ssh -p 38871 rootssh.intern-ai.o…

5.SpringBoot核心源码-启动类源码分析

目录 概述技巧spring boot 如何启动应用程序run方法里面核心逻辑 SpringApplicaiton.run(xxx.class,args)结束 概述 SpringBoot核心源码-启动类源码分析 技巧 如何给外部源码加注释&#xff0c;想要在源码中添加自己的注释&#xff0c;会弹出 file is read only&#xff0c;代…

Java核心技术【二十二】Java的I/O流处理:深入文件读写操作、缓冲流、序列化与NIO

Java的I/O流处理&#xff1a;深入文件读写操作、缓冲流、序列化 在Java编程中&#xff0c;I/O流是处理输入输出操作的基础&#xff0c;特别是在文件读写、网络通信等领域。本文将在前文的基础上&#xff0c;进一步探讨缓冲流、序列化以及NIO&#xff08;New I/O&#xff09;在…

从0开始的STM32HAL库学习2

外部中断(HAL库GPIO讲解) 今天我们会详细地学习STM32CubeMX配置外部中断&#xff0c;并且讲解HAL库的GPIO的各种函数。 准备工作&#xff1a; 1、STM32开发板&#xff08;我的是STM32F103C8T6&#xff09; 2、STM32CubeMx软件、 IDE&#xff1a; Keil软件 3、STM32F1xx/ST…

01- 收入数据集【Pytorch入门实战】

目录 一、机器学习基础 二、实战例子 1.数据集分析 2.实战训练 3.总结 三、参考资料 一、机器学习基础 为了解决这个问题&#xff0c;人们想到数据驱动方法&#xff0c;也就是让计算机从现有的大量的带标签图片电学习规律&#xff0c;一旦计算机学习到了其中的规律&…

sip协议栈简介

SIP协议栈简介 SIP协议栈流程 数据链路层&#xff1a;当SIP消息从网络中传输到达TCP/IP协议栈时&#xff0c;首先被接收到的是数据链路层的数据帧。数据链路层会对数据帧进行解封装&#xff0c;得到网络层的IP数据报。 网络层&#xff1a;网络层会对IP数据报进行解析&#xf…

1.27、基于径向基神经网络的曲线拟合(matlab)

1、基于径向基神经网络的曲线拟合简介及原理 1)原理简介 基于径向基神经网络(Radial Basis Function Neural Network, RBFNN)的曲线拟合是一种常用的非线性拟合方法,通过在输入空间中使用径向基函数对数据进行处理,实现对非线性关系的拟合。 RBFNN的基本原理是将输入空…