我如何让我的个人网站速度提高 10 倍⚡

我最近重新创建了我的个人网站，页面加载时间缩短到了不到 1.6 秒 😮。
不信？来看看这里，解开你的疑惑。

注意：虽然我的个人网站是使用 Nuxtjs（Vue.js）构建的，但我将分享的所有技巧都可以在您使用的任何技术/框架中轻松实现。

灯塔报告🚀

不用多说，让我们深入了解一下这些技巧。

1. 延迟加载图片：

图像延迟加载，简单来说就是等待网站内容显示完毕后再异步显示图片。不过，你应该显示一个占位符（比如一个灰色框），通知用户图片即将加载。

为什么要延迟加载图像？

大多数时候，图像会占用很大空间，这可能会对访问者访问您的网站内容之前等待的时间产生负面影响。

如何延迟加载图像

如今，大多数前端框架（bootstrap、materialize、chakra ui）都提供了一个组件，可以轻松地在您的网站上延迟加载图像，请参阅其文档以获取更多信息；如果您只使用传统的 HTML、CSS 和 JavaScript，那么这篇文章可能会有所帮助

下面是使用 BootstrapVue 进行延迟加载的示例

<template>
  <div> 
     <b-img-lazy v-bind="mainProps" :src="getImageUrl(80)" alt="Image 1">
     </b-img-lazy>
  </div>
</template>
  <script>
  export default {
   data() {
    return { 
    mainProps: { 
    center: true, fluidGrow: true, blank: true, blankColor: '#bbb', width: 600, height: 400, class: 'my-5' 
   } 
  }
 },
 methods: {
 getImageUrl(imageId) {
   const { width, height } = this.mainProps
   return `https://picsum.photos/${width}/${height}/?image=${imageId}`
    }
  }
}
 </script>

2. 避免使用未使用的组件

在我的网站的第一个版本中，我使用了vue-ionicons，并且全局导入了一整套图标🤦‍♂️。
你可以想象一下，用户要等多久才能加载出数百个图标组件（这些组件我实际上并没有在网站上使用）。这真的一点也不好笑😬

例如，如果使用图标组件，则避免将整个图标集声明为全局组件。

仅导入您将要使用的图标- 除非您的网站将使用 90％ 的图标，但这种情况不太可能发生。

✔️

import IconName from 'vue-ionicons/dist/js/icon-name'
Vue.component('my-icon', IconName)

✖️

import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
Vue.use(AllIosIcon)

3.删除无用的代码块

90% 的开发者都会犯这个错误——我们都有一堆没用的代码块（虽然有注释），但我们不想删除它们，因为担心它们以后可能会解答我们的问题 😅
我做的一件事就是创建一个temp文件来保存这些代码。这样就不会让我的主文件变得臃肿。

额外：缩小 CSS 和 JS 文件

如果你的网站是用传统方式构建的，没有前端库。最小化资源文件也能显著提升网页加载速度。我使用的 VSCode 扩展minifyAll
非常棒，它能帮你一键压缩文件。速度超快，而且……是目前最好的扩展。

结论

这些技巧仅代表我个人观点（在我看来）。如果您有其他不同的看法、更好的方法，或者类似的其他技巧，欢迎在评论区留言，我非常乐于学习。

还有……我的投资组合源代码已公开托管在GitHub 上。非常感谢您的⭐。

如果有什么我可以帮忙的，您可以随时通过Twitter联系我。

感谢阅读🤝