2020年提高网站加载时间和性能的4种方法

世界发展很快。

当新的iPhone问世时，许多人都急于成为第一个看到、体验和评价它的人。

当有突发新闻时，人们都会紧盯着电视屏幕等待最新消息，而记者们则争先恐后地抢先发布。人们在浏览网页时也希望有同样的敏捷性和速度，这一点也不奇怪。

他们希望他们的用户体验不受阻碍，这样他们就可以毫不费力地接收到他们正在搜索的信息。

网站加载时间的重要性

如今，用户对加载速度差或性能不佳的网站没有耐心。

在一项由Akamai关于一半的网络用户希望网站在两秒钟或更短的时间内加载。如果在3秒内没有加载，这些用户往往会放弃该网站。

更令人担忧的统计数据是，64%的购物者对在线商店的体验和加载时间不满意，他们会去别处做生意。

这意味着你不仅失去了现有的访问者，降低了转化率，而且你的网站也面临着从那些可能将你的网站推荐给他人的客户那里流失流量的风险。

在这一天，每一秒都能改变一切。你不能再让你的网站陷入未优化的图像和文件。你的用户希望你的网页加载快，如果他们不这样做，他们不会停留在你的网页上。

考虑到这一点，让我们看看如何优化您的网站以获得最佳性能。

相关的：我们需要重新设计网站还是整容?

1.减少HTTP请求

HTTP（超文本传输协议）每当浏览器从web服务器获取文件、页面或图片时，都会对请求进行计数。

根据雅虎，这些请求往往会占用网页加载时间的80%。浏览器还限制了每个域4-8个同时连接的请求，这意味着一次加载30多个资产是不可能的。

这意味着您需要加载的HTTP请求越多，页面去检索它们所需的时间就越长，从而增加了web页面的加载时间。

如何减少HTTP请求

虽然保持页面简单似乎会限制页面设计，但您可以使用一些策略来减少HTTP请求，以减轻浏览器的负担。

• 结合CSS/JS文件-不要强迫浏览器检索要加载的多个CSS或Javascript文件，尝试将CSS文件合并到一个更大的文件(JS也是如此)。虽然如果您的样式表和脚本因页面而异，这可能是一个挑战，但从长远来看，设法合并它们最终将有助于您的加载时间。

• 使用查询仅加载所需内容-如果你发现你只需要在桌面上加载特定的图像或只需要在移动设备上运行特定的脚本，请使用条件语句加载它们是提高速度的好方法。这样，您就不会强制浏览器加载对某些设备或视口不有用的各种脚本或图像。

• 减少使用的图像数量-如果你发现你的一些页面相当重，试着删除一些，尤其是当它们的文件大的时候。这不仅有助于减少图像HTTP请求，还可以通过删除与书面内容不符的分散注意力的图像来改善用户体验。

• CSS精灵-当可适用，将你在网站上经常使用的图片组合到一起雪碧表以及使用CSS访问图像背景图像和背景位置防止您的浏览器不断试图检索几个图像，每次特定的页面在您的网站加载。通过这种方式，浏览器只检索可以在页面上多次使用的图像，方法是为页面的每个区域在视图中正确定位正确的图像。

2.利用cdn并删除不使用的脚本/文件

更有可能的是，您的许多用户不会接近您的web服务器。

通过在地理位置分散的各种服务器上传播内容来缩短这种距离是不可行的，而且实施起来有点太复杂。

这就是内容交付网络(CDN)发挥作用的地方。CDN是分布在多个位置的web服务器的集合，因此内容可以更有效地传递给用户。

CDN通常用于上传后确实需要触摸的静态内容或文件。

服务器是根据用户对网络邻近度的测量来选择的。例如，选择响应时间最快和/或网络跳数最少的服务器。

大公司倾向于拥有自己的CDN，而中型企业将使用CDN提供商，如EdgeCast．

较小的公司可能会发现CDN没有必要或超出了他们的预算，所以使用网站，如CNDjs它有一个JS和CSS文件和框架库，可以帮助你防止在自己的服务器上托管某些文件，同时增加它们的加载时间。

如果你发现你公司的网站可以从使用CDN中获益，那么花点时间来评估你的网站，以识别你的网站上是否有未使用的脚本或CSS文件。

虽然最简单（但最耗时）的事情是让开发人员浏览您的网站并检查每个页面，但有一些工具，如UnCSS它可以删除网站上未使用的样式，并减少CSS文件的大小。

3.浏览器缓存

浏览器缓存允许将网站上的资产下载到硬盘驱动器，然后将其放入缓存或临时存储空间。这些文件现在存储在本地系统中，这样可以提高后续页面加载的速度。

坦尼提乌尔，前身为雅虎！，解释说，每天访问你网站的40-60%的访问者都有一个空的缓存。因此，当用户访问时，您需要使他们看到的第一页加载足够快，这样他们将不可避免地继续浏览网站的其余部分（加载时间更快）。

静态资产的缓存生存期至少为一周，而小部件或广告等第三方项目仅持续一天。

CSS、JS、图像和媒体文件的过期时间应为一周，但理想情况下为一年，RFC指南规定的过期时间更长．

您可以了解有关启用缓存的更多信息在这里．

4.压缩图像和优化文件

当前占用的图像每页平均加载字节数的60%，约1504KB。与脚本（399KB）、CSS（45KB）和视频（294KB）等其他页面资产相比，图像占用了发送的大量HTTP请求。

正如我之前提到的，删除任何你认为不需要的资产图像。

这包括你只使用其中两种的图标库，你认为可能会使用但没有使用的额外三种字体，以及可以用CSS复制的图像（如彩色背景或渐变）。

清除这些资产后，查看站点上的图像，查看它们的大小。

通常情况下，许多人倾向于从图片库网站下载图片并上传到他们的服务器上，然后使用这些图片，而不去为网站优化它们。

如果您发现自己在使用大型图像，尤其是英雄图像，请通过优化软件运行它们，如压缩程序或图像优化．

保持你所有的图片在150KB以下，宽度不要超过1920px，质量等级为平均/中等/72dpi。再大一点，你就会注意到图片在页面渲染后加载得很晚，而且对用户行为的响应也很慢。

当涉及到你应该为什么使用什么文件扩展名时，使用这个作为一个基本公式:

• SVG适用于希望获得大量细节的矢量图像。
• 某些图标可以利用字体库，如FontAwesome渲染某些图形而不是保存单个图像。
• 你需要透明背景的图片应该使用PNG，比如一个人的圆形图像或Facebook的“F”标志。
• JPG最适用于照片或任何细节不太重要的地方。

虽然图片仍然会占据大部分的HTTP请求，但优化它们和其他资产最终会使它们的大小变小，并提高网站的整体性能。

相关的：一个网站策略应该花费我们公司多少钱?