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

世界发展很快。

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

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

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

网站加载时间的重要性

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

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

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

这意味着你不仅失去了你现在的访问者和降低的转化率，而且你还面临着从那些可能把你的网站介绍给其他人的客户那里流失流量的风险。

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

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

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

1.减少HTTP请求

HTTP每当浏览器从网络服务器获取文件、页面或图片时，请求都会被计算。

根据雅虎，这些请求往往占网页加载时间的80%左右。浏览器还将每个域的请求限制在4-8个同时连接之间，这意味着不能同时加载30多个资源。

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

如何减少HTTP请求

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

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

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

• 减少图像的数量，你使用-如果您发现一些页面的图像相当多，请尝试删除一些，特别是当它们的文件大小很大的时候。这不仅可以帮助减少图像HTTP请求，还可以通过删除不符合你的书面内容的分散注意力的图像来改善你的用户体验。

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

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

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

通过将您的内容分散到各种地理上分散的服务器来减少这种距离并不是一个可行的选择，而且实现起来也太复杂了。

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

cdn通常用于静态内容或文件，这些内容或文件在上传后确实需要被触摸。

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

大型企业往往拥有自己的CDN，而中型企业将使用CDN提供商，如埃杰卡斯特．

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

如果您发现您公司的网站可以从使用cdn中受益，请花时间评估您的网站，以识别您的网站中是否有未使用的脚本或CSS文件。

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

3.浏览器缓存

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

Tenni Theurer前雅虎(Yahoo!)，explains says that 40-60% of daily visitors to your site come in with an empty cache. So when users visit, you need to make it so the first page they see load quickly enough so they will inevitably continue through the rest of your website (with even faster load times).

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

CSS、JS、图像和媒体文件应该有一个星期的有效期，但理想情况下是一年，因为更长时间将会破坏RFC准则．

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

4.压缩图像并优化文件

图像目前占据了每页平均加载字节数的60%,大约1504 kb。与脚本(399KB)、CSS (45KB)和视频(294KB)等其他页面资产相比，图像占用了相当多的HTTP请求。

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

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

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

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

如果您发现自己使用的是大图像，特别是英雄图像，请通过优化软件运行它们，如Compressor.io或图片优化．

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

当谈到应该使用什么文件扩展名时，请将此作为基本公式：

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

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

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