源码巴巴_国内著名的精品源码分享论坛

标题: 提升网站速度的网站优化方式 [打印本页]

作者: 最穷的小三 时间: 2020-2-19 00:39
标题: 提升网站速度的网站优化方式
　　网站内容显示的速度会决定网站的排名。你需要优化网站来获得更高的排名。除此之外，你的用户也会因此而感谢你，当然他们可能压根没注意到你的网站速度加快了——这是好事。
　　在这篇文章里，我会告诉你一些提升网站速度的方法。
　　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中，使得所有的样式都能立马生效。
　　
　　{{-$style:=resources.Get"/css/style.css"-}}
　　<style>
　　{{($style|minify).Content|safeCSS}}
　　</style>
　　在footer中，我将压缩过的lazysizes.min.js注入到<script>中，让它尽快被加载，因为它决定了网站的剩余部分将以何种方式加载。
　　
　　{{-$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建议的图片大小。

欢迎光临源码巴巴_国内著名的精品源码分享论坛 (https://www.yuanmababa.com/)