电子书《Designing for Performance —— Weighing Aesthetics and Speed》为性能而设计——平衡美学与速度
http://t.cn/A6HSreeB
关于网站设计与性能的书,2014年的,不过里面很多经验和原则还可以参考。作者 Lara Callender Hogan
“如果你在决定网站的外观和体验,即使你的职位名称中没有包含“设计师”这个词,你也在做出直接影响网站性能的决策。性能是一个责任,应该由各个学科共同承担,因为组织中的每个人都影响着它。无论是说服高层管理者将性能作为优先事项,还是在日常工作中权衡美学与页面速度的选项,或者是教育和赋能组织内的其他设计师和开发人员,你都有大量的工具和技术可以帮助你提升网站速度。
设计师在影响整体页面加载时间和感知性能方面处于独特的位置。设计过程中的决策对网站的最终结果有着巨大的影响。我认为设计师了解页面速度的基础知识以及优化标记和图像的选择是很重要的。我还认为,设计师在改善最终用户体验方面必须平衡美学与性能之间的关系,并且每个对网站进行更改的人都应该有能力衡量这些更改对业务指标的影响。
在多年来进行前端性能相关的演讲、研讨会和主题演讲后,我意识到与观众交谈时,文化变革是性能问题的核心。没有人喜欢成为性能“警察”或“清洁工”;这些角色在长期改进网站性能方面往往不成功,因为网站用户体验的责任涉及到许多其他人。尽管本书的大部分内容集中在提高性能的技术和方法上,但最后一章专门讨论了无法单纯通过技术解决的文化问题。文化变革可能是提高网站性能最难的部分。
因为我在Etsy担任工程经理,所以本书将包含一些关于Etsy及其工程团队实验的参考。我目前管理性能工程团队,之前管理移动网页工程团队。在我的职业生涯中(包括在Etsy),我与许多出色的设计师紧密合作,非常高兴能为他们开发这个资源。
本书的组织结构
本书将涵盖各种在线工具和软件,帮助你在进行性能改进时使用。在涉及图像生成的章节中,我们将使用Photoshop作为示例,而不是其他类型的图像编辑软件。
第一章将讨论页面加载时间对你的网站、品牌和受众整体体验的影响。页面加载时间是构成用户体验的许多因素之一,研究表明,性能不佳会对网站的参与度指标产生负面影响。随着越来越多的人使用移动设备访问互联网,性能问题的重要性将会增加,因为移动网络和硬件对页面加载时间有负面影响。设计师在改善页面加载时间和整体用户体验方面处于独特的位置。
第二章介绍页面加载时间的基础知识。了解浏览器如何检索和呈现网站内容是非常重要的,因为这是你可以用来提高网站性能的主要手段。我们还将讨论感知性能及其与总页面加载时间的不同;用户体验你的网站并感知他们能多快完成他们想做的唯一事情的方式也是一个同样重要的指标。
第三章将逐一介绍当今网页上使用的主要图像格式。我们将讨论每种文件类型的最佳使用和优化实践。本章还包括优化图像加载到网页中的技术,如雪碧图或用CSS或SVG替换它们。最后,我们将讨论如何延长优化图像解决方案的寿命,包括实施样式指南或图像压缩的自动化工作流程。
在第四章中,我们将讨论如何优化你网站上的标记和样式。全面清理HTML和CSS是非常重要的,之后是优化你网站上使用的任何网页字体。专注于创建干净、可重复使用的标记并记录任何设计模式,将在未来编辑或改进网站时节省开发时间和页面加载时间。我们还将讨论加载顺序、压缩和缓存文本资产的重要性。
响应式网页设计以“对性能不利”而闻名,但它不必如此!在第五章中,我们将讨论为访客在不同屏幕尺寸上选择加载的内容(包括图像和字体)有多重要。本章还讨论了如何进行响应式网页设计:按断点创建性能目标,使用移动优先的设计方法,并在各种屏幕尺寸下测量响应式设计的性能。
为了了解你网站当前的用户体验状态以及随时间的变化,定期基准测试主要性能指标是必不可少的。第六章将详细介绍各种浏览器插件、合成测试和真实用户监控工具,以及它们如何帮助你测量网站性能。随着你的网站不断发展,持续使用这些工具测量性能变化并记录这些变化发生的原因,可以帮助你和其他人了解什么影响了你网站的性能。
第七章将概述在权衡美学与性能时会遇到的各种挑战。需要考虑的运营成本、用户行为的测量,以及在做出这些艰难决定时要问的许多开放性问题。然而,拥有性能知识、可靠的工作流程和实验,你可以做出设计和开发决策,从而获得出色的整体用户体验。
创造和保持卓越网站性能的最大障碍是你组织的文化。无论组织的规模或类型如何,教育、激励和赋能设计师、开发人员和管理层都可能是一项挑战。我们将在第八章讨论如何塑造组织的性能文化,并创建性能倡导者。”
