加快 Bootstrap 网站速度的 3 个技巧

[account_disabled]

网站优化是一组技术，包括服务器端和客户端，旨在加快网站的加载时间和在浏览器中的呈现速度，以获得更好的用户体验。如今，访问者已经习惯了本机应用程序典型的即时性和反应性。他们期望网页在 1000 毫秒内加载。如果花费的时间比这长得多，他们可能会离开该网站。 搜索引擎无疑已经赶上了这一趋势，并在很多方面对此做出了贡献。事实上，谷歌已经使用页面速度作为桌面搜索中网站的排名因素有一段时间了。谷歌宣布，从 2018 年 7 月开始，移动搜索对于在其结果列表中取得领先位置也将变得非常重要。 Bootstrap 经常因给网站添加不必要的臃肿而受到批评，因此，如果您在项目中使用这个流行的前端 UI 库，请确保特别注意页面重量和页面速度。 在本文中，我将介绍您可以采取的三个前端优化步骤，以确保基于 Bootstrap 的网站快速渲染并得到良好优化。 只下载您需要的Bootstrap包 Learn to Code with JavaScript 如果您决定使用Bootstrap 的预编译下载包，您应该认真考虑一下您真正需要库的哪些部分。



下载文件夹包含完整的 CSS 库 (bootstrap.css和) 和 JavaScript 组件库及其除 jQuery (和)bootstrap.min.css之外的所有依赖项，以及许多独立的 CSS 文件，其中包含此流行 UI 套件特定部分所需的代码。bootstrap.bundle.jsbootstrap.bundle.min.js 如果您只需要为您的项目 WhatsApp 号码数据 进行良好的 CSS 重置，只需使用 如果您只需要一个灵活且易于使用的网格系统，那么就选择bootstrap-grid.min.css. 无需下载整个框架。另一方面，如果您知道您将使用库中的所有内容，那么至少请确保包含缩小版本。 JavaScript 代码也类似。如果您知道项目中不会有下拉菜单、弹出窗口和工具提示，请使用bootstrap.min.js而不是bootstrap.bundle.min.js因为您不需要包含Popper.js。 选择源代码而不是预编译的下载包 尽管最新版本的 Bootstrap 允许您选择其中的一部分以包含在您的项目中，但预编译文件可能仍然包含您可能实际上不需要的内容。 浏览器仍然必须下载和处理未使用的代码，这可能会影响网站性能，尤其是在网络连接速度较慢的情况下。



更好的主意是下载Bootstrap 源代码，因为： 您将能够准确地包含项目中所需的组件 自定义库的任何部分变得更干净、更高效，无需一遍又一遍地覆盖样式 最终投入生产的样式表通常更精简。 利用经过验证的客户端优化技术 Learn to Code with JavaScript 除了上述几点之外，优化基于 Bootstrap 构建的网站的性能仍然需要像其他网站一样结合前端性能技术。 以下是您可以关注的一些关键因素，以便有效地优化您的网站前端。 编写精益 CSS 和 JavaScript 代码中的每个字符加起来就是网页的最终权重。编写干净、简洁的 CSS 和 JavaScript 代码，同时保持其可读性并不总是那么容易。然而，这应该是每个项目都应该努力实现的目标。 良好的 CSS 实践包括摆脱未使用的选择器、重复的代码和过度嵌套的规则。在项目开始时保持代码组织良好是件好事。例如，使用样式指南确实可以使您的开发过程和代码质量受益。 此外，还有一些很棒的工具可以帮助您清理代码。像CSS Lint和JSLint这样的 linter可以检查文档是否有语法错误、低效的编码模式、未使用的代码等。