网站内容显示的速度会决定网站的排名。你需要优化网站来获得更高的排名。除此之外，你的用户也会因此而感谢你，当然他们可能压根没注意到你的网站速度加快了——这是好事。
在这篇文章里，我会告诉你一些提升网站速度的方法。
1.基准
首先，用你的网站来做示例。
你需要使用Google的PagespeedInsights网站测试工具来测试你的网站，它会告诉你，你的网站需要优化移动端还是桌面端。
Google基于网页的渲染速度来打分。它会计算你的网站需要多久呈现到用户眼前。用户等待的时间越长，网站的得分就越低。
2.使用Lighthouse
你可以通过npm下载Lighthouse到电脑上。它实际上是一个功能更强大的PagespeedInsights测试工具（PagespeedInsights是基于Lighthouse实现的）。
当你在本地使用它时，测试生成的所有信息都可以保存下来。
使用方法如下：
-下载
npminstall-glighthouse
此外需要确保已经下载了某些版本的GoogleChrome。我使用的是ChromeCanary。
-接下来你就可以使用它并生成测试结果了：
lighthousehttps://www.jaredwolff.com--view
--view会在你的默认浏览器中打开测试结果。以下是我之前使用Lighthouse测试的结果：
测试结果不仅包括性能得分，还包括可访问性、最佳实践和SEO建议。它的不足之处是每次只能测试一个页面。我建议你测试内容较多的页面，这样一来，你测得的就是网站中性能最差的一页的结果。当你修复了最差的页面，整个网站的性能也会得到大幅提升。
3.使用静态页面
你还记得网页100%由HTML和CSS组成的年代吗？
在过去的几年里，我们从纯HTML到使用RubyonRails，再慢慢的回到纯HTML。
原因是什么呢？
速度
当你访问使用Flask,RubyonRails或类似框架的网站时，有如下步骤：
-发出网页请求
-服务器将你的网站组合起来
-服务器将内容压缩打包
-服务器把内容返回给浏览器
这本身不会花费太长时间。但是当这个内容乘以1000或者再乘以10时，就会遇到问题了。
如果能够一次拼凑所有的内容呢？
这就是静态网站的优势了。
我们来看看静态网站如何实现这一点：
静态网站生成器如何工作
静态网站生成器包含一系列模板和样式。它们可以组合在一起，生成不同的内容。
作为后端，静态网站生成器使用markdown，偶尔使用JSON。
编译时，模板组合在一起。Markdown被转换成HTML，并注入到模板中。结果呢？一系列“看起来动态”的页面就生成了（就像你在我的网站上看到的那样）。
我的个人博客是基于Hugo实现的，我也尝试过Middleman和Jekyll。无论你的需求是什么，你总能找到一款符合你要求的静态网站生成器。Netlify上有一个根据人气排列的静态生成器列表，可以在https://www.staticgen.com/查看。
丰富的插件
静态网站生成器不仅能编译网站，还能优化、缩小和调整图片大小。这也是我建议使用静态网站生成器的原因。好好利用这些资源能够让你的网站速度得到显著的提升。
举个例子，我原本使用highlight.min.js来高亮代码，自从发现Hugo有自带的代码高亮功能后，我抛弃了highlight.min.js。Hugo在代码块的HTML中注入了CSS，使页面呈现格式正确（且静态）的内容。
4.嵌入JavaScript和CSS
正如我提到的那样，加载任何额外的资源都会对性能造成影响。
最近，Hugo实现了将内容复制到最终的HTML代码中的功能，这对于加载CSS和JavaScript来说真是一个福音。这样一来，所有的资源都会加入到HTML文件中，而不需要任何额外的资源加载了。
举个例子，我把完整的style.css文件放在网站的header中，使得所有的样式都能立马生效。
<!--Css-->
{{-$style:=resources.Get"/css/style.css"-}}
<style>
{{($style|minify).Content|safeCSS}}
</style>
在footer中，我将压缩过的lazysizes.min.js注入到<script>中，让它尽快被加载，因为它决定了网站的剩余部分将以何种方式加载。
<!--LazyLoadScript-->
{{-$lazysizes:=resources.Get"/js/lazysizes.min.js"-}}
<script>
{{($lazysizes|minify).Content|safeJS}}
</script>
注意事项1：style.css和lazysizes.min.js文件都在主题文件夹中的assets文件夹内。Hugo使用assets文件夹来查找这些文件。如果你也使用Hugo，且希望嵌入自己的css和JavaScript文件，我建议你看看https://gohugo.io/hugo-pipes/bundling/#readout。
注意事项2：正如你看到的那样，我使用Hugo自带的minify功能来压缩嵌入的文件，但是这样只有JavaScript文件被压缩了，style.css没有压缩。我会在使用Gulp优化这部分中讲到用别的方法来实现样式压缩。
5.使用内置方法
你或许已经注意到了，引入JavaScript文件会对网站的性能产生负面影响，无论在网站的哪项功能上引入都会降低性能。
比如，我们会使用表单的JavaScript库来完成校验，但是还有更好的方法吗？
其实是有的。
你可以使用HTML5标签，如required，或使用pattern在浏览器中完成校验。你可以在https://www.jaredwolff.com/contact/看看我是如何实现联系表单的。
所有的校验都在浏览器中完成，不用额外引入JavaScript，不会因为加载而出现延迟。
关于如何实现这一点，https://css-tricks.com/form-validation-part-1-constraint-validation-html/这里有一份很好的资料。Chris还提供了一份关于JavaScript校验的详细说明，你可以进一步了解。
6.组织代码
JavaScript和CSS文件的位置也会影响性能。比如，我通常将JavaScript和CSS放在重要位置，主要的样式文件会放在<head>中，其余的则要么放在footer中，要么作为HTML的内联样式。类似的，JavaScript文件则放在页面的底部。这样一来，所有重要的内容都会优先加载。
这是我组织JavaScript文件的例子：
...
</footer>
...
<scriptsrc="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
我希望你能尝试不同的方法来提升你的网站，看看它们效果的不同。如果能够不使用JavaScript库，我强烈建议你不要使用它们。
7.延迟加载
延迟加载能够有效延迟暂时看不见的资源的加载。正如Google所说，它能够提升“互动时间”的体验。此外，如果用户没有滚动页面，部分图片不会被加载。对于高流量的网站来说，这样可以节约带宽和金钱。
延迟加载通过JavaScript来实现，以下是实现延迟加载的一些库：
-Lazysizes（⭐️11k）是实现延迟加载功能的最有人气的库了。它比同类的一些库要大。我试过用它来延迟加载内嵌框架和不会立马使用的JavaScript内容。
-Layzr.js（⭐️5.5k）-只针对图片进行延迟加载。
-lozad（⭐️5.4k）-它能实现Lazysizes的几乎所有功能，是基于IntersectionObserver接口实现的，而Lazysizes则使用了IntersectionObserver和其他接口。
-yall（⭐️800）-这个库也使用了IntersectionObserver接口。
设置延迟加载
设置步骤非常简单，我以lazysizes为例。
在HTML文件中引入：
<scriptsrc="lazysizes.min.js"async=""></script>
（如果你使用Hugo，也可以像我嵌入JavaScript和CSS那样将lazysizes直接嵌入HTML。）
-给所有你想要延迟加载的内容加上lazyload类名
-将src标签改为data-src
见证奇迹的时刻
当用户访问你的网站时，延迟加载器会监控用户访问的每一处。当用户滚动页面时，加载器会立马加载即将显示的内容中被标记了lazyload类名的内容。
下面是在我的网页https://www.jaredwolff.com/homemade-indoor-air-quality-sensor/#you-did-it延迟加载YouTube视频的例子：
<iframeclass="lazyload"width="700px"height="400px"data-src="https://www.youtube.com/embed/IR2W0GmRKk8"frameborder="0"allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture"allowfullscreen></iframe>
这段代码让内嵌框架在用户滚动到内容附近时才开始加载。
8.使用Gulp实现优化
Jekyll或Hugo并不能实现所有的优化，那么你该怎么做呢？
使用gulp。
我选择使用gulp来优化我的Hugo网站，因为gulp有一系列成熟的插件来实现包括优化图片、压缩HTML文件等几乎所有的功能。
以下是我喜欢的一些插件：
-gulp-uglify用来压缩JavaScript。目前我只使用了一个JavaScript库。如果你的项目中有非常多的JavaScript库，那么一定要使用gulp-uglify。
-gulp-htmlmin压缩HTML。它还能够压缩内联JavaScript和CSS。
-gulp-imagemin是对我来说最有用的插件。我用它来调整图片大小、转换图片格式为jpg或渐进式jpeg。它不仅运行速度很快，当配合gulp-cache一同使用时，只用运行一次。尽管看起来有些复杂，但能够生成Lighthouse建议的图片大小。
|
