网站内容显示的速度会决定网站的排名。你需要优化网站来获得更高的排名。除此之外,你的用户也会因此而感谢你,当然他们可能压根没注意到你的网站速度加快了——这是好事。
  在这篇文章里,我会告诉你一些提升网站速度的方法。
  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建议的图片大小。

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系客服,我们将尽快处理。

上一篇: 如何优化URL才能起到最好的效果?

下一篇: 2020年创作者们需知的短视频运营技巧

用户评论 (0)

暂无评论

嘿,我来帮您!