如何建立一个快速的博客

但是事情并不需要这样,因为通过预加载,我们可以强制浏览器下载与CSS并行的字体,从而更快地绘制文本并可能完全消除FOUT。

这里有个小警告:Google Fonts会不断更改字体的URL,所以这就是我自我托管字体的原因-遵循Addy Osmani在其Web Performance Made Easy视频中的建议。 该工具对此有很大帮助。

并且,以防万一连接速度非常慢并且自定义字体需要花费几秒钟的下载时间,我还设置了(当前实验性的)font-display属性以交换,以便浏览器在加载时显示默认字体,并且以后交换它们。

  字体显示 

最后,我们进入了难题的最后一部分:图像!

我希望您现在已经意识到,这里没有技术是火箭科学的材料。 它们是更常识的方法,牢记用户的最大兴趣。 好吧,优化图像也是如此。

我要做的第一件事是确保图像大小适合其预期的用例。 如果我加载巨大的高分辨率图像,但仅以500 x 500像素的格式显示,那是在浪费用户的带宽和时间! 因此,我浏览了所有图像并将其大小调整为当前用例的1.25倍。 您可能会争辩说,我应该将它们的大小调整为恰好与该大小相同,但是如果我更改样式,我希望有一些额外的“空间”。

然后,我将它们转换为新的WebP格式,这实际上是一个字节节省程序 。 Chrome&Opera目前仅支持此功能,这简直是天方夜谭,但对于那些用户来说,体验会更好。 有几个webpack插件似乎可以解决这个问题,但是我无法让它们正常工作,因此我自己为自己写了一个-imagemin-webp-webpack-plugin。

在HTML中,我用新的HTML 5 切换了标签。 这使支持WebP的浏览器可以使用此格式,而其他浏览器可以轻松地回退到JPEG或PNG。

总体而言,WebP图像比JPEG / PNG图像小8.6 MB

至此,图像看起来还不错。 我们节省了通过网络发送的无用字节的负载。 万岁! 但是,我们可以做一件事: lazyloading

延迟加载可能听起来很花哨并且是高科技,但是它的作用是延迟对首屏图像的加载,直到用户将其看到为止。 由于不会下载任何隐藏图像,因此可以节省带宽。

目前,除了活动页面中的图片很少之外,此博客中没有很多图片。 第一次进入页面时,您不会看到所有这些内容,因此让我们只加载您看到的内容,然后在滚动将要到达它们时延迟加载其他内容。 我为此使用了一个名为lazysisez的软件包,该软件包非常好用。 只需导入脚本并更改HTML,如下所示:

到目前为止,我们通过改进客户端确保了负责任地使用每个下载的字节。 现在是我们进入服务器端的时候了,因为可以从那里进行一些其他改进。

第一个是压缩我们发送到浏览器的.css.js文件。 我选择了gzip ,它将文件大小减少了约50%。 该页面的JavaSript最大节省了16 KB(60%)。

最后,我们甚至可以通过管理服务器的缓存策略来避免全部下载资产。

默认情况下,我使用的php服务器带有无缓存策略,该策略强制浏览器每次都从网络获取内容。 但是浏览器具有缓存,因此让我们利用它并将缓存策略更改为30天

  #.htaccess 

标头设置了Cache-Control“ max-age = 2592000,公共”

现在,在后续访问中,该站点将立即(几乎)加载! ❤

性能放在首位并真正关心它是艰难的旅程。 当然,如果一切顺利进行,并且您看到网站的指标正在改善,这似乎很容易! 我也考虑了这个项目几天,直到…

  • 我意识到我正在使用的延迟加载库不支持视频!
  • 或者,我在此页面上拥有500 KB的JavaScript,只是意识到我已经在Highlight.js包中导入了所有176种语言!
  • 或还有另一种我不知道的技术,所以现在我必须在编码之前阅读它!
  • 或者,当您只是想将该站点放到那里,但是脑海中却有声音提醒您,您还没有尝试一切!

但这就是将您带入新境界的原因!

PS:如果您喜欢这个,也许我们可以一起合作!