4种改善2021年网站加载时间和性能的方法

世界瞬息万变。

当新的iPhone推行时，无数人争先成为*个看到，播放和评论它的人。

当有突发新闻时，人们被粘在电视屏幕上等待更新，而记者争先恐后地发布。人们在浏览Web时期望具有同样的敏捷性和速度也就不足为奇了。

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

网站加载时间的重要性

如今，用户已对加载速度较慢或性能不足的网站失去了耐心。

在Akamai进行的一项研究中，大约一半的Web用户期望网站在2秒或更短的时间内加载完毕。假如3秒钟之内未加载该网站，则这些用户倾向于放弃该网站。

更为令人震惊的统计数据是，对在线商店的体验和加载时间不满意的购物者中有64％会将其业务转移到其他地方。

这意味着您不仅会失去当前的访问者并减少转换率，并且还冒着网站失去来自那些可能将您的网站推荐给其他客户的流量的风险。

在这*，几秒钟就变得不走寻常路。您不再允许未优化的图像和文件使您的网站陷入困境。您的用户希望您的网页能够速度快加载，假如不加载，他们将不会留下来。

考虑到这一点，让我们看一下优化网站以取得*性能的方法。

最小化HTTP请求

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

通过Yahoo的说法，这些请求通常会占用网页加载时间的80％。浏览器还将每个域的请求限制在4-8个同時连接之间，这意味着无法一次加载30个以上的资产。

这意味着您需要加载的HTTP请求越多，该页面进入并检索所有请求所花费的时间就越长，从而增加了Web页面的加载时间。

1.怎样降低HTTP请求

尽管似乎根据简化页面来限制页面设计，但是您可以使用各种策略来降低HTTP请求以减轻浏览器的负担。

合并CSS/JS文件-尝试将CSS文件合并为一个更大的文件（与JS一致），而不是强制浏览器检索要加载的多个CSS或Javascript文件。要是样式表和脚本因页面而异，这可能会提供挑战，但从长远来看，设法将它们合并将最终帮助您缩短加载时间。使用查询仅加载需要的内容-假如发现只需要在台式机上加载某些图像或仅需要在移动设备上运行特定脚本，则使用条件语句加载它们可以是提高速度的好方法。那样，您就不会强迫浏览器加载对某些设备或视口无用的多种脚本或图像。降低使用的图像数量-倘若发现某些页面上的图像非常繁琐，请尝试删除一些页面，尤其是当它们的文件大小很大时。这不仅可以帮助降低图像HTTP请求，并且可以根据移除与您的书面内容不符的分散图像来改善用户体验。CSSSprites-适用时，将您在网站上经常使用的图像组合到一个Sprite工作表中，并使用CSSbackground-image和background-position来访问图像可防止您的浏览器每次加载网站上的某些页面时都不断尝试检索多张图像。那样，浏览器仅根据将正确的图像正确放置在页面每个区域的视图中，才能检索页面上可以多次使用的图像。2.通过CDN并删除未使用的脚本/文件

您的许多用户很可能不会非常靠近您的Web服务器。

根据将内容分布在多种地理位置分散的服务器上来缩小距离并不是一个可行的选择，而且实施起来有点太复杂了。

这便是内容交付网络（CDN）进入的地方。CDN是分布在多个位置的Web服务器的集合，所以可以将内容更合理地交付给用户。CDN通常用于静态内容或上传后确实需要触摸的文件。

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

较大的企业倾向于拥有自己的CDN，而中型公司将使用EdgeCast等CDN带来商。

较小的企业可能会发现CDN不必要或超出其预算，所以使用CNDjs之类的网站，该网站具有JS和CSS文件库以及框架，可以帮助您防止在自己的服务器上托管某些文件，同時增加了加载时间。

假如您发现企业的网站可以从使用CDN中受益，请花时间评估您的网站，以识别整个网站上是否有未使用的脚本或CSS文件。虽然最简易（但最耗时）的事情是让研发人员浏览您的网站并检查每个页面，但还有一些工具（例如UnCSS）可以从您的网站中删除未使用的样式并减小CSS文件的大小。

3.浏览器缓存

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

前Yahoo!的TenniTheurer解释说，您网站的每日访问者中有40-60％的人拥有空的缓存。所以，当用户访问网站时，您需要进行设置，以使他们看到的*页加载速度足够快，以便他们不可避免地继续浏览网站的其余部分（加载时间更快）。

静态资产的缓存生命周期至少为一周，而第三方項目（例如小部件或广告）仅持续*。

CSS，JS和图像以及媒体文件的合理期应为一周，但理想情况下为一年，由于紫色RFC准则不再适用。

您可以在此处了解有关启用缓存的更多信息。

4.压缩图像并优化文件

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

如前所述，请删除您认为无需的任何资产图像。这包括仅使用其中两种图标的图标库，您认为可能会使用但未使用的那三种额外字体，以及可以用CSS复制的图像（例如彩色背景或渐变）。

清除这些资产后，请查看整个站点中的图像并查看其大小。通常，无数人倾向于从库存图片站点下载图像并将其上传到他们的服务器上并使用它们，而不需要费心为网络进行优化。

假如您发现使用大图像，尤其是英雄图像，请根据Compressor.io或ImageOptimizer之类的优化软件运行它们。将所有图像的平均质量/中/72dpi的水平保持在150KB以下，宽度不超过1920px。要是更大，您会注意到页面渲染后很晚才加载图像，以及对用户行为的响应时间很慢。

当涉及到什么文件扩展名时，可以将其用作基本公式：

SVG适用于要接收大批细节的矢量图像。某些图标可以根据诸如FontAwesome之类的字体库来呈现某些图形，而不是保存单个图像。对于需要透明背景的图像，请使用PNG，例如人的圆形图像或Facebook的“F”徽标。JPG最适合照片或其他细节不重要的应用。

尽管图像仍将占据您的HTTP请求的大部分，但优化它们和其他资产最终将使它们的大小减小并提高网站的整体性能。