让产品加载得更快，这三个优化小技巧学到了吗？

数字性能管理平台Dynatrace研究，当您打开网站时，等待其加载内容的时间，近一半的人最多等待3秒，如果网站不能在3秒内加载内容，许多人会失去耐心，甚至选择离开，这意味着在任何行业都会失去很多业务和经验。据HTTPArchieve统计，图片内容已占互联网内容总量的62%，即超过一半的流量和时间用于下载图片。从性能优化的角度来看，图片绝对是优化的热点和重点之一。GooglePageSpeed或Yahoo的14条性能优化规则都将图片优化作为一种重要的优化手段。我们负责的大部分产品都是网络企业用户。由于行业原因，我们实际用户的计算机和网络环境远不如大数据统计中计算机设备的良好性能。而且大部分企业的计算机设备更新周期长，导致大部分员工使用的计算机老旧性能差。为了使产品运行顺畅，产品本身性能的重要性不言而喻。作为一名产品设计师，我们如何在不影响系统运行正确性的前提下更快地运行，如何在不失去用户体验的情况下既美观又有才华？性能优化的目的是什么？我们如何优化性能？性能优化的目的是什么？（Optimize），简而言之，在不影响系统运行正确性的前提下，使其运行得更快，完成特定功能所需的时间更短。性能优化的目的是为Web端产品：从用户的角度来看，优化可以更快地加载页面，更及时地响应用户的操作，为用户提供更好的体验；从服务提供商的角度来看，优化可以减少页面要求，提高服务器性能，减少流量，节省可观的成本。对于网络产品，性能优化的目的：从用户的角度来看，优化可以使页面加载更快，对用户的操作响应更及时，为用户提供更好的体验；从服务提供商的角度来看，优化可以降低页面请求，提高服务器性能，减少流量，节省可观的成本。简言之，适当的优化不仅可以改善网站的用户体验，还可以节省大量资源。1.图片了解图片格式图片格式，其自身的优缺点决定了使用场景和环境，在什么情况下使用什么图片格式，是我们的第一步，首先从了解他们开始。我们对常用的图片格式进行了简单的比较和总结：尽量减少图片数量之前的web图片调用是逐个调用，这将增加服务器的要求次数，降低界面响应速度。建议使用以下两种方法来优化图片：CSSSprites，将产品相关图片集成到图片文件中，是一种网页图片应用处理方法，这样，输入的图片就不会像以前那样逐一显示，这是减少图像请求的有效方法。通过CSS的backgroundimage和background-position属性显示图片的不同部分。合并后的图片总量小于单个分离的图片总量。优点是可以减少网页加载图片时对服务器的请求次数，减少服务器存储和请求压力，提高页面加载速度。通过CSS的backgroundimage和background-position属性显示图片的不同部分。合并后的图片将小于单个分离图片的总和。其优点是可以减少在网页上加载图片时对服务器的请求次数，减少服务器存储和请求压力，提高页面的加载速度。缺点是维护更复杂。Opacity，设置div元素的不透明水平，通过透明度处理，我们只能使用一张图片来处理控制器的各种状态，从而减少图片的使用和网络要求。缺点是IE8及以下浏览器不支持此属性。Mac平台下优化图片大小的优化图片优化工具，只需将需要优化的图片拖入Imageoptim，即可完成图片的优化。目前支持JPG和PNG优化的设置选择也很丰富。这是我写文章时最常用的工具。把网站上使用的图片拖进去，优化就完成了。以微平台主页界面为例，如果使用图片的方法，将使用的图片集成到png格式中，并直接应用。使用原图(4.03MB)「智图」优化压缩，保持最高质量，尺寸40.4KB，压缩100倍，优化效果明显。2.iconfonticonfont，矢量图标库将图标处理成字体并显示在屏幕上。同样，浏览器也会将其视为字体进行抗锯齿处理。有时效果并不像预期的那么清晰和尖锐（与纯图片效果相比）。iconfont，作为一种字体，它的位置和大小也会受到CSS属性的影响，同时需要生成TTF，以获得最大范围的浏览器支持。、WOFF、EOT、阿里UX矢量库可以完成SVG四种字体格式。矢量图标库不仅可以提高产品的整体性能，还可以同步跨部门合作的资源和信息，还可以作为项目资源的备份，方便产品以后的维护和使用。如果你想用font的类型将自己画的svg引入网页，可以使用以下方法。首先，点击购物车按钮添加Iconfont阿里巴巴矢量图标库上需要的图标「暂存架」。选择所有需要使用的图标后「存储为项目」，给它命名。然后在「图标管理」-「图标应用项目」找到该项目，获取在线链接，并将其代码复制到CSS中。当需要在HTML中使用图标时，使用iconfont类名。Unicodee写在你想用的图标下面：然后您可以通过控制iconfont属性来改变图标的样式，比如：.iconfont{font-family:”iconfont”;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;padding-left:页面上可以引用和修改20px}。矢量图标库在「移动端」该应用程序具有许多超过位图的高级特性，这些特性的好处会影响您的设计流程和产品的最终质量。矢量图标库在「移动端」该应用程序具有许多超过位图的先进特性，这将影响您的设计流程和产品的最终质量。由于屏幕尺寸和分辨率不同，移动终端的设计变得越来越复杂。Iconfonts是可缩放自适应设计的惊人解决方案：可缩放性（Scalability）：icon是一种与分辨率无关的技术，可以在不考虑retina的情况下缩放到任何想要的程度，HDPI，根据目标设备自动调整XHDPI等屏幕。尺寸（Size）：当icon使用iconfont时，您不需要根据不同的设备准备不同的图片，您的应用程序只需在启动时加载iconfont文件即可。可维护性（Maintainability）：通过管理字体文件，您可以自然地组织您的icon集合，任意修改或扩展，您只需要维护此单个字体文件。灵活性（Flexibility）：操纵iconfonts，改变颜色和大小，只需几行代码即可瞬间改变外观。可交互性（Interactivity）：由于灵活性和方便的代码操作，您可以很容易地在不同的状态下显示相应的不同效果，并创建动画。3.CSSWeb的许多风格实际上都可以通过CSS实现，如圆角、渐变、阴影、简单的几何图形等。毕竟，代码属于文本模式，要求资源小，加载和渲染速度是图片无法比拟的，因为每个图片的加载都需要http请求，浏览器同时对同一域名下的请求有一定数量的限制，超过限制的请求将被阻塞，从而延长用户的感知时间，从而减少请求次数，从而提高页面的呈现速度。另外，通过css实现，在任何屏幕上都能显示出良好的视觉效果，无需多分辨率、多端适应。此外，通过css，良好的视觉效果可以在任何屏幕上显示，无需多分辨率和多端适应。如果软件具有定制外观的功能，css的优势就会更强大，可以修改属性。修改后期维护比修改图片更方便、更容易。css实际案例应用-css圆角、渐变、阴影、线条、背景等，通过cs实现完全兼容的良好视觉效果，自适应多分辨率。iconfont产品使用iconfont产品 css 图片优化。图片：Logo用智图压缩优化。iconfont：iconfont用于单色图标。例:返回、消息、设置、下拉、模块图标、文件类型图标、搜索、新文件夹、上传、删除、文本、文件夹、下载、编辑、checkbox等。CSS：CSS风格。例:圆角、背景、彩色图片、甘特图表、圆角按钮、背景、输入框、表格、隔行色差、圆角按钮、线条等。使用iconfont使用iconfont css 图片优化，第一界面应用图片2张，总尺寸38.9KB，其他的都是iconfont css。结论是，在产品设计过程中，应仔细选择设计方法，减少径向渐变和不规则渐变引起的大图片元素的使用，避免用户因等待加载时间长而易怒或选择离开，从而影响产品的整体体验。作为一名产品体验设计师，你必须为用户着想。你需要真正使用和操作你设计的产品。「用户体验」意识贯穿整个产品环节。总结性能优化的方法有很多，本文选择的方法只是其中之一，我们的目的是提高网络产品的响应速度，确保页面的快速呈现，因此，减少图片的使用频率，减少界面元素的要求，可以有效地减少用户的等待时间，从而提高产品的性能。基于图片的CSSSprites集成和智图工具的压缩优化，到iconfont字体化应用，再到CSS风格呈现，无需增加硬件成本和人力投入。只要应用方法，就可以减少产品界面的图片应用数量，提高用户的操作响应速度。良好的设计是产品成功的基础。产品优化应从设计开始。在后续工作中，我们将继续优化和使用这些方法，不断总结沉淀改进，为产品设计贡献价值。