你是否有过这样的经历:访问一个网站，然后耐心地等待它永远加载?可能不会，因为没有人等待永远用于加载一个站点。我们只需关闭浏览器选项卡，然后继续前进。时间很重要。
说到吸引用户的注意力，我们只有非常短暂的机会。据伊利亚·格里戈里克所说，在他的“速度、性能和人类感知”基调，你只有1秒。一秒!
在第一秒钟之后，就会发生精神情境转换。在用户的脑海中，时间太长了，他们开始想其他的事情。
后,对10秒，用户已经感到无聊，可能会关闭浏览器标签，继续他们的一天。
我将在这篇指南中介绍一个优化网站性能的过程。我将以我自己的网站为例。如果你没有做本指南中讨论的事情，你将得到保证网站速度提升在完成我将要讨论的步骤之后。
最初的基准测试
首先要做的是测试站点的当前性能。这将帮助我们看到与web性能相关的问题，并帮助我们确定工作的优先级。谷歌的性能分析工具是一个很好的前端性能基准测试工具，PageSpeed见解．它将检查您的站点，并根据一组性能指南和最佳实践给您一个分数。
以下是我在手机领域得到的第一个结果:
和桌面:
谷歌开发人员提供了另一个有用的测试，称为为移动设备设计的测试．该工具将向您展示需要改进的潜在领域。对于这个测试，在我的网站上一切正常:
提高性能
有两种使用开发工具来提高网站性能的一般方法。
- 你可以使用在线工具
- 您可以在您的计算机上使用开源web开发工具
第一种方法很简单:获取所有文件，并使用在线工具做它需要做的任何事情(lint、最小化、连接等)。完成了。嗯…不。
如果你有50个文件要缩小呢?还是200年?如果更改了代码会怎样?
你会一遍又一遍地重复这个任务吗?这就是为什么我要介绍第二种方法，因为它更加灵活和可扩展。然而，这是一种更复杂的方法，尤其是在开始阶段。
我们将使用狼吞虎咽地吃，一个JavaScript任务运行器(类似于Grunt)，它将为我们完成所有的工作。(如果你不知道像Gulp、Grunt、Bower和Yeoman这样的开发工具是什么，可以查看我的博客文章，在那里我给出了关于它们的简要介绍。)为了提高网站的速度和性能，我们将这样做:
- 设置杯
- 最小化CSS和JavaScript文件
- 连接CSS文件和JavaScript文件
- 检查我们的JavaScript代码以检查错误和问题
- 优化图片
- 缩小HTML文档
设置杯
首先要做的是建立一个项目工作环境。我所做的只是从我的网站上抓取所有文件并将它们转移到一个名为src在我的电脑。
顺便说一下，你需要安装Node(和npm)才能以我将要描述的方式使用Gulp。
看到如何安装Node.js．首先，我们需要在全球范围内安装Gulp，以便在计算机的任何地方都可以访问它。打开终端/命令提示符，输入:
NPM安装-全局gulp然后转到项目文件夹，将其安装到开发依赖项中。
NPM安装——save-dev gulp在此之后，您将看到一个自动为您创建的新文件夹node_modules．
Gulp和项目的所有其他Node模块将存储在这里。
在运行Gulp之前，还有一个步骤需要执行:我们需要设置一个配置文件，以便Gulp知道要对我们的文件执行什么任务。这很简单，只要创建一个文件gulpfile.js在根文件夹中使用任何文本编辑器或源代码编辑器。
这是最初的内容gulpfile.js：
Var gulp = require('gulp');饮而尽。Task ('default'， function () {});现在它什么也不做，但你仍然可以运行它。类型:
狼吞虎咽地吃你应该得到一个这样的输出:
(14:12:14)开始“默认”……[14:12:14]在72秒后完成'default'现在Gulp已经准备好了，下一步是创建Gulp任务来为我们完成所有的工作。
最小化CSS和JS文件
好了，让我们用Gulp做点事情吧!第一个任务:缩小CSS和JS文件。缩小过程，基本上就是从文件中去掉所有空白、制表符、回车符、换行符、注释和其他不必要的字符。
对于JavaScript，它还会将对象名称更改为更短的名称。为了得到一个非常小的文件大小，同时仍然保留我们所有的样式规则和JS功能，我们进行了缩小。为了缩小我们的文件，我们需要安装节点模块来帮助我们完成任务。
让我们安装gulp-minify-css它将缩小我们的CSS文件。然后我们将使用gulp-uglify我们的JavaScript文件的包。
NPM install——save-dev gulp-uglify . css现在我们有了所需的模块，我们必须为每个模块创建任务。我们可以在我们的默认的任务，但我更喜欢为每种类型的文件单独执行一个任务。
通过这种方式，我们可以使代码更简洁、更容易阅读和维护，并且，如果我们愿意，我们可以分别为CSS或JS文件运行任务。让我们添加minify-css而且gulp-uglify模块的顶部gulpfile.js．
Var minifycss = require('gulp-mini -css');Var uglify = require('gulp-uglify');让我们创建几个任务。他们会这么做:
- 读取所有的。css和。js文件
- 缩小文件的源代码
- 将输出导出到另一个名为
经销
// CSS缩小任务饮而尽。任务('css'，函数(){返回gulp.src('src/css/*.css').pipe (minifycss ()).pipe (gulp.dest (dist / css));})；// JS的缩小任务饮而尽。Task ('js'，函数(){返回gulp.src('src/js/*.js').pipe(糟蹋()).pipe (gulp.dest (' dist / js '));})；所有处理过的文件都将放在经销文件夹中。发出狼吞虎咽地吃在终端/命令提示符中再次执行命令，将创建经销文件夹,css而且js里面的文件夹将包含我们的精简文件。
连接CSS和JS文件
只发送几个文件而不是一堆文件就可以使整个加载页面的过程快得多。我们接下来要做的是将所有CSS文件合并到一个。CSS文件中，将所有JS文件合并到一个。JS文件中。为此，我们将使用模块gulp-concat-css而且gulp-concat．
$ NPM install——save-dev gulp-concat-css我们使用不同的模块，因为gulp-concat-css更适合于CSS文件，因为它会自动对url进行重基。Gulp是一个基于流的构建系统，因此如果您想在此之后应用另一个流程，您只需继续管道化。
两个模块都需要一个带有连接文件名称的字符串参数。在这种情况下，我在使用semeano.min.css而且semeano.min.js．(实际上，我没有在我的网站上使用任何JS，但我将这样做只是为了教程的缘故。)首先，让我们在顶部添加依赖项:
Var concatcss = require('gulp-concat-css');Var concat = require('gulp-concat');然后是任务的附加管道:
// CSS拼接+缩小任务饮而尽。任务('css'，函数(){返回gulp.src('src/css/*.css').pipe (concatcss (semeano.min.css)).pipe (minifycss ()) .pipe (gulp.dest (dist / css));})；// JS拼接+缩小任务饮而尽。任务(js,函数(){返回gulp.src (src / js / * . js) .pipe(糟蹋()).pipe (concat (semeano.min.js)).pipe (gulp.dest (' dist / js '));})；产品毛羽JS文件
Linting实际上不会帮助减少文件的大小，但它将帮助您检测JavaScript代码中的错误和潜在问题。如果我们要扩展它，JavaScript错误可能会导致功能中断或性能低下，进而导致糟糕的用户体验。所以在我看来，对代码进行检测是必须的。
JSHint是另一个类似的工具JSLint的分支。那么为什么要使用JSHint呢?基本上，这都取决于你喜欢什么。
(如果你想知道JSHint分叉背后的原因，请阅读这篇文章)。让我们安装JSHint:
NPM install——save-dev gulp-jshint添加依赖关系:
Var jshint = require('gulp-jshint');在丑化我们的源代码之前，我们需要管道代码检测过程，否则如果JSHint发现一个错误，将很难调试:
// JS linting + minification +拼接任务饮而尽。Task ('js'，函数(){返回gulp.src('src/js/*.js').pipe (jshint ()).pipe (jshint.reporter(“违约”)).pipe(糟蹋()).pipe (concat (semeano.min.js)) .pipe (gulp.dest (' dist / js '));})；的记者方法将在终端/命令提示符上输出警告。我们正在使用默认的报告器，但您可以将其更改为另一个．
优化图片
当我们运行PageSpeed Insights时，它会检查我们正在使用的图像是否比它们需要的要大。我们可以从图像中去掉所有的元数据，这将使文件的大小减小一点。为了优化图像，我们将使用gulp-imagemin对于光栅图像(例如。
JPG, PNG和GIF)和gulp-svgmin分别为SVG文件。
—save-dev gulp-svgmin下面是最小化图像和SVG文件的任务。我认为这是不言自明的:
Var imagemin = require('gulp-imagemin')， svgmin = require('gulp-svgmin');.．.//图像优化任务饮而尽。任务(img, function(){返回gulp.src (src / img / *。*).pipe (imagemin ()) .pipe (gulp.dest (dist / img));})；// SVG优化任务饮而尽。Task ('svg'， function(){返回gulp.src('src/svg/*.svg') .pipe(svgmin()) .pipe(gulp.dest('dist/svg'));})；在我的例子中，这实际上对图像没有太大的影响，它只是节省了543字节:
gulp-imagemin:缩小1张图像(保存543 B - 0.2%)但我记得图像是测试中的主要问题:
这是因为我在电脑和手机上使用了相同的图像。
在桌面测试中一切正常，但在移动设备上，因为我使用的是原始图像并调整了它的大小，我浪费很多像素。解决这个问题的方法是为每个媒体查询断点提供不同的图像大小。这样，如果您需要200x200px的图像，浏览器将只下载这个大小的图像，从而节省网络带宽。
Minifying HTML
缩小我们的HTML文件也很重要，在这里您可能会看到最大的文件大小节省。为了缩小HTML文档，我们将使用gulp-minify-html．此外，为了自动地对资源进行更改，可以从src文件夹的经销文件夹，我们需要安装gulp-useref．
$ NPM install——save-dev gulp- miniify -html这是任务:
Var minifyhtml = require('gulp- miniify -html')， useref = require('gulp-useref');.．.//将uri转换为dist文件+最小化HTML任务饮而尽。任务('html'，函数(){返回gulp.src('src/*.html').pipe (useref ()).pipe (minifyhtml ()).pipe (gulp.dest(“区域”));})；此任务需要对HTML文件进行少量更改(在本例中只有一个更改，即index . html)．我们需要添加一个特殊的注释gulp-useref模块引用资源文件上的块(html5reset-1.6.1.css而且semeano.css)，将生成一个单一文件(semeano.min.css)级联和缩小后。
<！——build:css css/semeano.min.css——> 这种方式,index . html在经销文件夹将只有一个链接标签:
.注意:现在我们已经声明了所有这些任务，我们需要调用它们。只需将创建的任务添加到默认的任务依赖性,即。
任务名称数组作为第二个参数:
/ /默认的任务饮而尽。任务(“违约”,[css, js, img, svg,“html”),函数(){});这基本上意味着在运行默认的任务，Gulp需要首先运行所有这些任务。
结论
经过这些改变，我们可以看到分数上的一些进步。这看起来是一个很小的变化(只有12%)，但在我们的文件缩小后，我们发送的KBs比以前减少了33%。这是!
这并没有花很多时间来实现。
这里有一些其他的东西可以帮助提高你的网页的加载速度:
- 使用spritesheets。不要下载一组图像，只需将它们放在一个图像文件中，并使用CSS指定每个图像的区域。该解决方案也适用于svg。
- 将图像转换为WebP．WebP是一种新的图像格式，为web上的图像提供无损和有损压缩。WebP无损图像的尺寸比png小26%。
但与PNG、GIF和JPEG相比，WebP浏览器的支持程度较低。
- 内联CSS。如果您的CSS文件很小，只需使用
<时尚>标签。这将为您节省一些服务器请求，并有助于避免页面呈现阻塞CSS。这是一个练习谷歌PageSpeed Insights建议．
在以后的指南中，我将分享更多中高级的网站性能优化技巧和策略，比如改变我们的HTML标记的结构，优化内容传递的其他解决方案，甚至一些服务器配置，将给我们最终的速度提高!如果这对你有帮助，欢迎在Twitter和Facebook上分享这篇指南。同样,如果你有提高网站速度的想法和技巧，请在评论中分享。
相关内容
