优化前端性能的9个最佳做法 2021-11-04 默认分类 暂无评论 2371 次阅读 ![1_gPi5YEByNckem2aTSOcQUA.jpeg][1] **你有50毫秒的时间来给你的潜在访问者留下第一个好印象。所以，是的，用户只需要50毫秒就能对你的网站形成意见，以决定他们是停留还是离开。** ----------------------------------------------------------------------- 大多数网站由于前台优化不佳而无法提供令人满意的用户体验。而且，最常见的是由于不理想的数据加载和图像优化。 因此，在这篇文章中，我将讨论对优化前端数据加载有帮助的九个最佳做法。 **1. 缩小资源** ----------- 资源的最小化是指从你的HTML、CSS和JavaScript中删除不必要的、多余的、不需要加载的数据的过程。这包括消除代码注释和格式化、空白字符、未使用的代码、换行字符等等。 > HTML、CSS和JavaScript的最小化将加快前端的加载时间，因为它减少了需要从服务器上请求的代码量。 查看以下工具，以生成你的HTML、CSS和JavaScript代码的优化版本。 - HTML: PageSpeed Insights, HTML Minifier. - CSS: cssmin.js, Coverage tool in Chrome Dev Tools, YUI Compressor. - JavaScript: JSMin, Coverage tool in Chrome Dev Tools. **2. 减少服务器调用的次数** ----------------- 一般来说，你的前端对服务器的调用越多，它的加载时间就越长。这是因为向服务器发送任何请求都需要在页面被渲染之前进行充分的沟通。你可以遵循多种方法来减少页面加载所需的服务器请求的数量。 - 使用CSS Sprites - 这是减少服务器调用次数的最简单的方法之一。与其向网站加载十个单独的图像，sprite加载一个使用图像- 集合的单一图像文件。你可以在CSS中使用background-image和background-position属性来显示所需的图像段。通过这样做，你就减少了所需的服务器请求的数量。 - 减少发出大量外部请求的第三方插件。 防止指向不存在的文件的破碎链接。 **此外，你还可以关注服务器端渲染，以加快应用程序的初始加载速度。** 如果最低限度的数据也能在第一页加载时出现，这将对感知性能产生真正的影响。 **3. 删除不必要的自定义字体** ------------------ 自定义字体已经变得非常流行，因为它有助于增加网站的个性化。然而，它们也是有性能成本的。 自定义字体的尺寸可能相当大，而且谷歌字体等网络字体会向外部资源添加HTTP请求。这损害了页面渲染的速度。 以下是你在网站中使用字体时可以采取的一些措施。 - 将字体转换为最有效的格式。加载像WOFF2这样的现代格式可以达到比其他格式减少30%的文件大小。 对字体进行子集，删除未使用的字符。全面的字体文件包含许多语言的字符，但可能永远不会使用。通过对字体进行子集，我们可以从字体中删除不需要的字符，只保留我们在网站上编写内容所需要的字符。 - 预先加载页面明确要求的字体。 **使用几个自定义字体可能不会造成伤害，但过多地使用它们会对你的前端加载时间产生相当大的影响。因此，请确保你不断地重新评估你所使用的自定义字体的影响和必要性。** **4. 压缩文件** ----------- 带宽的数量限制了在特定时间内传递的数据量。文件大小越大，加载的时间就越长。现代网站通常有大的HTML、CSS和JavaScript包。 通过使用合适的方法压缩文件，你可以很容易地使你的前端的加载时间有很大的不同。以下是两个不错的文件压缩选项，你可以遵循。 - Gzip - 最流行的数据压缩和解压方法，目前所有的现代浏览器都支持这种方法。Gzip在将网站的HTML、CSS和JavaScript捆绑发送到浏览器之前，在服务器端对其进行压缩，而在客户端，它对文件进行解压并提供内容。 - Brotli - 与目前可用的压缩方法相比，它提供了最好的压缩率。根据CertSimple的研究，Brotli压缩的JavaScript文件比Gzip小14%，而HTML和CSS的压缩率则比Gzip好21%和17%。 **5. 优化图像** ----------- 谈到网站，图像是一个重要的部分。互联网上93.7%的网站至少使用一种图像文件格式，因为它们有助于提高用户参与度。 然而，使用图像的消极一面是，除非对其进行优化，否则会对前端加载时间产生不利影响。然而，有几种方法可以优化图像。 **使用WebP或AVIF** 使用新的图像格式如WebP和AVIF比旧的格式如JPEG和PNG有更好的性能。 > WebP比PNG小26%，比JPEG小25-35%。AVIF比JPEG小50%，比WebP小20%。 然而，缺点是对浏览器的支持。WebP最近获得了浏览器的支持，所以旧版本可能不支持它。另一方面，AVIF只在Chrome和Opera支持。因此，你需要在本地HTML中使用带有回退支持的<picture>元素的格式。 **提供正确尺寸的图片。** 另一个减少图像传输时间和提高网站性能的方法是使用响应式图像。超过50%的流量来自智能手机和平板电脑。按照流行的设备尺寸缩放图像，并使用srcset提供它们，将进一步优化前端加载时间。 除了选择合适的格式和尺寸外，还有其他几种方法可以遵循，以通过图像优化减少前端加载时间。以下是一些额外的最佳做法，你可以使用。 - 图像压缩。 - 使用渐进式JPEGs。 - 为慢速连接的用户提供更小的图像。 - 使用HTTP/2而不是HTTP/1.1。 - 使用图像集。 **6. 应用懒加载** ------------- 懒加载有助于进一步改善前端加载时间。通过懒加载，网页只先加载所需的内容，当用户需要时再加载剩余的内容。 例如，在谷歌图片结果中，首先只加载一小部分图片。它为隐藏的内容加载占位符图片，而不是实际的图片，减少了加载时间。如果用户向下滚动页面，实际内容将被呈现。 > 除了懒惰的占位符加载，还有其他几个选项，如 "本地懒惰加载 "和 "模糊的图像效果"，你可以选择。 **7. 缓存** --------- 每次有一个独特的访问，从HTML到CSS到JavaScript都需要单独下载。这导致了较慢的数据加载时间。 防止这个问题的最好方法是使用缓存选项。如果配置得当，浏览器会将文件存储在本地缓存中，避免在随后的页面访问中从服务器加载相同的资产。 除了浏览器缓存外，还有一些其他的缓存选项可以用来改善加载时间: - 缓存服务器--用户的请求被发送到最近的缓存服务器上，这是一个缓存服务器的集合。(例如：内容传递网络，将在第9点中详细介绍）。) - 内存缓存 - 通过将数据的某些部分存储在内存中（例如：JavaScript变量），而不需要在路由变化时重新加载它们。 - 磁盘缓存 - 类似于内存缓存，只是它利用了通常由浏览器处理的传统文件存储。 **8. 启用预取功能** ------------- 资源预取是另一种提高性能的技术，你可以用来优化前端的数据加载。 > 作为开发者，你比浏览器更了解你的应用程序。因此，预取使用这些信息来提示浏览器它在未来可能需要的资源。 预取是在预期需要的情况下加载资源，以减少资源的等待时间。主要有三种类型的预取方式。虽然链接预取是最流行和广泛使用的方法，但DNS预取和预渲染也是有用的选择。 **链接预取** 链接预取使浏览器能够收集用户在最近的将来可能会请求的资源。因此，开发人员可以假设用户可能会访问一个特定的网页。 然而，链接预取只适用于图像和JavaScript等可缓存资源。 **DNS预取** 每当用户请求托管在特定IP地址的资产时，就会进行DNS查询以找到该IP地址所属的域名。 DNS预取允许浏览器在用户浏览当前页面时，在后台对网页中的链接进行DNS查询，以便在用户点击启用DNS预取的链接时，将延迟降到最低。 **9.使用内容交付网络** -------------- > 当用户在地理上远离服务器时，延迟会增加。此外，请求负载也可能影响内容服务时间。 前端内容的加载速度，包括HTML页面、样式表、JavaScript文件和图像，可以使用CDN进行优化。内容交付网络（CDN）是一组分布在几个地理位置的服务器，存储内容的缓存版本，以快速交付给最终用户。 > CDN将用户请求重定向到最近的服务器。 还有一种特殊类型的CDN，称为图像CDN，在优化你的图像方面非常出色。有了这些，你可以产生40-80%的图像文件大小的节省。鉴于图像通常占页面重量的一半以上，为图像整合CDN可以使你的加载速度得到显著提升。 **结论** ------ 性能黄金法则：80-90%的终端用户响应时间是用于下载前端组件，如图片、样式表、脚本等。 因此，优化前端数据加载对于降低跳出率和增加访问者在网站上的时间至关重要。 [1]: http://guobacai.com/usr/uploads/2021/11/3145173375.jpeg 标签: javascript, css, html, 性能优化
评论已关闭