提升网站加载速度的一些小技巧

时间 2019-11-08

原文原文链接

翻译：疯狂的技术宅
原文： https://likegeeks.com/improve...

为你网站的用户留下良好的第一印象是很是必要的。随着商业领域的竞争，拥有一个吸引人的网站能够帮助你脱颖而出。研究代表，若是加载时间超过3秒，会有 40％的用户放弃访问你的网站（https://www.optimumsystemsonl...）。javascript

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

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

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

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

若是没有对页面加载元素的顺序进行优化，那么用户可能会在加载过程当中看到白屏。经过优化页面加载元素，能够大大的加快页面加载的速度。虽然优化页面加载元素很是耗时，但这种付出仍是很值得的。前端

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

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

若是服务器响应缓慢，就会致使页面加载问题，因此你必须排除网络故障。若是这类问题常常发生，你可能须要从新寻找其余 Web 服务商，要考虑它能为你的网站提供多少速度，即便你须要为可靠的网络主机支付更多费用。node

优化代码很重要

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

优化以前：

function test(node) { 
    var parent = node.parentNode;
    
    if (0) {
        alert( "Hello Everybody" );
    } else {
        alert( "We love Websites" );
    }
    return;
    alert( 1 );
}

优化后：

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

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

优化服务器端代码一样很是重要，就像咱们在处理大文件一文中看到的那样，而不会损失性能。面试

了解延迟和异步标记

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

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

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

<html>
    <head>
        <script src="big.js"></script>
    </head>
    <body>

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

</body>
</html>

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

<html>
    <head>
        <script src="big.js" async></script>
    </head>
    <body>

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

</body>
</html>

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

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

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

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

未使用的 .JS 库组件

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

使用 GZIP 模块是理想的选择

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

因为 JavaScript 被视为文本文件，所以能够经过用 gzip 压缩来减小页面加载所需的时间。

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

const zlib = require('zlib');

你能够经过如下几种方式使用：

const gzip = zlib.createGzip();
 
const fs = require('fs');
 
const inp = fs.createReadStream('input.txt');
 
const out = fs.createWriteStream('input.txt.gz');
 
inp.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:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Slider</title>
    </head>
    <body>
        <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
        <div id="slider">
            <figure>
                <img src="austin-fireworks.jpg" alt>
                <img src="taj-mahal_copy.jpg" alt>
                <img src="ibiza.jpg" alt>
                <img src="ankor-wat.jpg" alt>
                <img src="austin-fireworks.jpg" alt>
            </figure>
        </div>
    </body>
</html>

CSS

@keyframes slidy { 
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite;
}

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

按期更新内容管理系统

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