提高页面的加载速度的几个小技巧[每日前端夜话0x3F]

翻译：疯狂的技术宅原文：https://likegeeks.com/improve-website-speed-tips-tricks/

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会有 40％的用户放弃访问你的网站（https://www.optimumsystemsonline.com/business-success/5-stats-that-will-make-you-monitor-web-performance/）。

如果开发人员急于浏览网站的编码部分，问题的发生只是时间问题。各种各样的编码错误可能会导致网站加载速度非常慢，从而用户离开的网站。在页面加载时间与跳出率的争论中，你可以清楚地看到加载速度较慢的网站的参与率较低。

同时提高网站加载速度也是提高网站排名的必要步骤之一。以下是避免页面加载速度缓慢时需要考虑的一些事项。

为你的页面元素选择正确的加载顺序

你的页面中 <head> 部分中的所有元素都需要以正确的方式预加载。用户在你的网站上看到任何内容之前，所有这些元素都必须按顺序加载。在 <head> 部分中使用 JavaScript 会导致页面在尝试呈现信息时变慢。

如果没有对页面加载元素的顺序进行优化，那么用户可能会在加载过程中看到白屏。通过优化页面加载元素，可以大大的加快页面加载的速度。虽然优化页面加载元素非常耗时，但这种付出还是很值得的。

服务器性能可能会导致页面加载问题

只要有人点击你的网站，它就会激活从服务器开始的一系列事件。浏览器所做的最重要的一件事就是向你的服务器发送请求。

如果服务器响应缓慢，就会导致页面加载问题，所以你必须排除网络故障。如果这类问题经常发生，你可能需要重新寻找其他 Web 服务商，要考虑它能为你的网站提供多少速度，即使你需要为可靠的网络主机支付更多费用。

优化代码很重要

压缩 JavaScript 代码也是解决页面加载速度缓慢问题的好方法。使用代码压缩工具，你可以摆脱逗号、注释甚至不需要的空格。使用 Google Closure Compiler 等程序是不错的选择。

优化之前：

 1function test(node) {  2    var parent = node.parentNode; 3 4    if (0) { 5        alert( "Hello Everybody" ); 6    } else { 7        alert( "We love Websites" ); 8    } 9    return;10    alert( 1 );11}

优化后：

1function test(){alert("We love Websites")}

正如你所看到的，优化工具删除不会用到的变量，还删掉了死代码。

优化服务器端代码同样非常重要，就像我们在处理大文件一文中看到的那样，而不会损失性能。

了解延迟和异步标记

JavaScript 中最常用的同步加载机制之一是异步加载。基本上此机制可确保你的网站以多流方式加载。

在使用浏览器找到一串如 <script src =“some.js"> </ script> 的代码后，将立即停止创建 CSSOM 和 DOM 模型。所以将 JavaScript 代码放在主 HTML 代码之后可以加快页面加载速度。

此代码可让你更好地理解异步标记的功能：

1<html>2    <head>3        <script src="big.js"></script>4    </head>5    <body>

在加载 big.js 之前，下面的代码不会处理。

1    </body>2</html>

向此代码添加 async 标记可确保立即创建 DOM 模型，并且不会干扰正确加载和执行的 JavaScript。以下是正确使用 async 标记的示例。

1<html>2    <head>3        <script src="big.js" async></script>4    </head>5    <body>

这段代码会被处理，并且不依赖于big.js加载进度。

1    </body>2</html>

需要注意的是，如果你的 JavaScript 必须进行 HTML 或 CSS 操作，则使用 sync 标记可能不是最好的方法。必须以强制的顺序加载脚本时，应避免使用 sync 标记。

注意复杂的文件格式和大图像

虽然编码错误是页面加载速度缓慢的主要原因之一，但大图像和复杂文件格式等也会导致问题。一旦你使用的服务器被浏览器请求，它会开始将需要的每个字节都加载到用户的移动设备或计算机上。

如果你有许多大图像，那么加载它们需要更长的时间。这就是你需要使用文件压缩软件和插件的原因。虽然压缩这些图像的大小可能会有所帮助，但在某些情况下，你可能需要删除一些图像。

未使用的 .JS 库组件

许多开发人员按原样使用 jQuery UI 之类的库，而根本不去优化它。这样做可能会导致你根本不需要的代码组件。如果可以选择从 JavaScript 库中排除哪些组件，那么你一定要抓住这个机会。通过修改这些库中的代码，可以为用户提供更好的体验并加快你的网站速度。

使用 GZIP 模块是理想的选择

虽然 gzip 是一个相对古老的发明，但在加快网站加载速度时绝对值得使用。这个程序能够压缩 Web 服务器上的文件大小，甚至可以将一些静态文件压缩到原始大小的 99％。

由于 JavaScript 被视为文本文件，因此可以通过用 gzip 压缩来减少页面加载所需的时间。

使用 Node.js 对文件压缩也是一个好主意。以下是进行设置的方法：

const zlib = require('zlib');

你可以通过以下几种方式使用：

1const gzip = zlib.createGzip();23const fs = require('fs');45const inp = fs.createReadStream('input.txt');67const out = fs.createWriteStream('input.txt.gz');89inp.pipe(gzip).pipe(out);

在gzip的帮助下，你可以找到并消除代码中的重复元素。这些重复的元素也可以用归档字典中的小符号进行替换。剩下的最终代码将不会那么笨重，并且完全针对性能进行了优化。

Be Aware of Code Density

意识到代码密度

当你的网站中包含大而密集的元素时只会减慢它的速度。像 Facebook 这样的大型网站拥有超过 6000 万行代码。虽然你的站点没有这么多代码，但还是需要找到优化代码的方法，以确保能够快速加载。

不断审查自己的代码并对其进行优化是避免问题的唯一方法。从长远来看，在代码优化方面投入的时间和精力肯定会得到回报。

处理太多文件请求

每次新用户访问时，你网站上的每个 CSS 文件、社交分享按钮和 JavaScript 元素都会生成一个新的文件请求。即使是最强大和最可靠的服务器也只能在处理这么多请求时开始减速。

你需要考虑的是删除页面上的某些文件请求，而不是试图弄清楚如何提高服务器的速度。

放任此此问题会导致在吸引用户访问你网站时遇到很多问题。你的主要目标应该是尽一切可能加速你的网站，并让人们轻松浏览它。

避免使用太多插件

即使你使用 WordPress 网站，在页面加载速度方面也可能会遇到问题。大多数企业主使用 WordPress 模板，因为它可以与他们的新网站一起运行。但是，你通常还需要使用许多不同的插件来使网站具有更多功能。

这些插件可能是有用的，但是有太多插件会产生问题。如果有插件太多又试图同时运行，那么它将大大减慢你的网站速度。

客观地看待正在使用的插件可以帮助你找出哪些插件是可以不用的。减少插件的数量将使你的 WordPress 网站更快。

适当的用 CSS3 效果而不是 JavaScript

一些程序员没有意识到 CSS 的新版本可以比以旧版本做得更多。在过去 CSS 1.0 和 2.0 需要大量的 JavaScript 辅助才能实现高级样式效果。但是用 CSS3 不仅可以为你提供更大的灵活性，还可以降低你的 CPU 使用率。

下面是一些代码，你可以用 CSS3 实现滑块效果而无需使用 JavaScript：

HTML:

1<!DOCTYPE html> 2<html lang="en"> 3    <head> 4        <meta charset="UTF-8"> 5        <title>CSS Slider</title> 6    </head> 7    <body> 8        <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> 9        <div id="slider">10            <figure>11                <img src="austin-fireworks.jpg" alt>12                <img src="taj-mahal_copy.jpg" alt>13                <img src="ibiza.jpg" alt>14                <img src="ankor-wat.jpg" alt>15                <img src="austin-fireworks.jpg" alt>16            </figure>17        </div>18    </body>19</html>

CSS

 1@keyframes slidy {  2    0% { left: 0%; } 3    20% { left: 0%; } 4    25% { left: -100%; } 5    45% { left: -100%; } 6    50% { left: -200%; } 7    70% { left: -200%; } 8    75% { left: -300%; } 9    95% { left: -300%; }10    100% { left: -400%; }11}1213body { margin: 0; } 14div#slider { overflow: hidden; }15div#slider figure img { width: 20%; float: left; }16div#slider figure {17    position: relative;18    width: 500%;19    margin: 0;20    left: 021    text-align: left;22    font-size: 0;23    animation: 30s slidy infinite;24}

学习如何使用更新的工具将帮助你实现所追求的页面加载速度。

定期更新内容管理系统

大多数企业会使用提供内容管理功能的网站平台，比如 Wix 和 WordPress 这样的平台，无需花费大量时间和金钱。如果你用的是其中之一的话，则必须定期去更新它。