3个提示，以加快引导网站的加速

关键要点

• 只下载 Bootstrap 包中必要的组件，不必要的组件会增加网站体积并降低速度。如果未使用某些功能，请将其删除以优化速度。
• 不要使用预编译的下载包，而应选择源代码。这样，您就可以只包含所需的组件，从而为生产环境创建更精简、更高效的样式表。
• 实施经过验证的客户端优化技术，例如编写精简的 CSS 和 JavaScript 代码、压缩和合并 CSS 和 JavaScript 代码以及优化图像文件大小。这些步骤可以显着提高网站的速度和性能。

网站优化是一组服务器端和客户端技术，旨在加快网站在浏览器中的加载和渲染速度，从而提升用户体验。

如今，访问者已经习惯了原生应用的即时性和响应速度。他们期望网页在 1000 毫秒内加载完成。如果加载时间长得多，他们很可能会离开网站。

搜索引擎无疑也赶上了这一趋势，并在许多方面促进了这一趋势。事实上，Google 一直将页面速度作为桌面搜索中网站排名的一个因素。 Google 宣布，从 2018 年 7 月起，移动搜索对于在搜索结果列表中获得顶级排名也至关重要。

Bootstrap 经常因给网站增加不必要的冗余而受到批评，因此，如果您在项目中使用这个流行的前端 UI 库，请确保格外注意页面大小和页面速度。

在本文中，我将介绍三个前端优化步骤，您可以采取这些步骤来确保您的基于 Bootstrap 的网站快速渲染且经过良好优化。

只下载您需要的 Bootstrap 包

如果您决定使用 Bootstrap 的预编译下载包，您确实应该认真考虑一下您真正需要哪些部分。

下载文件夹包含完整的CSS 库（bootstrap.css 和bootstrap.min.css）和JavaScript 组件库及其所有依赖项（jQuery 除外）（bootstrap.bundle.js 和bootstrap.bundle.min.js） ，以及许多独立的CSS 文件，其中包含此流行UI 工具包特定部分所需的代码。

如果您只需要一个不错的 CSS 重置样式，只需使用 bootstrap-reboot.min.css。如果您只需要一个灵活且易于使用的网格系统，则使用 bootstrap-grid.min.css。无需下载整个框架。另一方面，如果您知道要使用库中的所有内容，至少请确保包含精简版本。

JavaScript 代码也是如此。如果您知道项目中不需要下拉菜单、弹出框和工具提示，则使用 bootstrap.min.js 而不是 bootstrap.bundle.min.js，因为您不需要包含 Popper.js。

选择源代码而不是预编译的下载包

尽管 Bootstrap 的最新版本允许您选择要包含在项目中的部分，但预编译的文件可能仍然包含您实际上不需要的内容。

浏览器仍然必须下载和处理未使用的代码，这可能会影响网站性能，尤其是在网络连接缓慢的情况下。

更好的方法是下载 Bootstrap 源代码，因为：

• 您将能够准确地包含项目中所需的组件
• 自定义库的任何部分都变得更简洁、更高效，无需反复覆盖样式
• 最终用于生产环境的样式表通常更精简。

使用经过验证的客户端优化技术

除了上述几点之外，针对性能对基于 Bootstrap 的网站进行优化仍然必须像其他任何网站一样包含前端性能技术。

以下是您可以注意到的有效前端网站优化的关键因素：

编写精简的 CSS 和 JavaScript 代码

代码中的每个字符都会增加网页的最终大小。编写简洁明了的 CSS 和 JavaScript 代码，同时保持其可读性并非易事。但是，这应该是每个项目都应努力追求的目标。

良好的 CSS 实践包括去除未使用的选择器、重复代码和过度嵌套的规则。最好在项目开始时就保持代码井井有条。例如，使用样式指南可以真正使您的开发过程和代码质量受益。

此外，还有一些很棒的工具可以帮助您清理代码。像 CSS Lint 和 JSLint 这样的代码检查器可以检查您的文档是否存在语法错误、低效的编码模式、未使用的代码等。

压缩和合并 CSS 和 JavaScript 代码

一个重要的优化步骤是限制网站必须执行的 HTTP 请求数量才能呈现其内容。每次往返服务器以获取资源都需要时间，从而对用户体验产生负面影响。

压缩（即从文档中删除注释和空格）和合并 CSS 和 JavaScript 文件现在已经成为一种巩固的实践，旨在保持文件大小较小并减少 HTTP 请求的数量。

如果您想深入了解，Gary Stevens 的《如何优化 CSS 和 JS 以加快网站速度》是一篇很好的文章。

注意图像文件大小

网页中最重的部分通常是由图像文件表示的，但音频和视频文件也发挥着作用。因此，优化视觉资产对于网站性能至关重要。

这样做涉及两个方面：

• 确保您为手头的任务使用正确的图像格式。
• 在上传到生产环境之前，从您的资源中压缩多余的字节。有一些很棒的工具可以帮助您。查看 TinyPNG 等在线工具（用于光栅图像（PNG、JPG 等））和 Jake Archibald 的 SSVGOMG（用于 SVG 优化）。此外，请考虑您可以本地安装的工具，例如您最喜欢的任务运行器（Grunt、Gulp 等）。

结论

快速渲染的网站是决定网站用户体验的关键因素。在评估移动设备上的 Web 用户体验时，这一点变得更加重要。

在本文中，我列出了许多技术，这些技术从前端开发的角度来看，在优化 Bootstrap 网站的性能方面发挥着作用。

您有哪些针对快速加载的 Bootstrap 网站的前端优化技术？请在评论中告诉我！

如果您已经掌握了 Bootstrap 的基础知识，但想知道如何将您的 Bootstrap 技能提升到一个新的水平，请查看我们的《使用 Bootstrap 4 构建您的第一个网站》课程，快速轻松地了解 Bootstrap 的强大功能。

关于加快 Bootstrap 网站速度的常见问题 (FAQ)

为什么我的 Bootstrap 网站可能会很慢？

您的 Bootstrap 网站速度慢的原因可能有很多。最常见的原因之一是使用了不必要的组件和插件。Bootstrap 带有很多组件和插件，如果您不使用它们，最好将它们删除。另一个原因可能是使用了大型图像。大型图像会大大降低网站速度。建议您在将图像上传到网站之前对其进行优化。最后，不压缩 CSS 和 JavaScript 文件也会降低网站速度。压缩这些文件可以显著提高网站的速度。

如何优化我的 Bootstrap 网站以获得更好的性能？

有多种方法可以优化您的 Bootstrap 网站以获得更好的性能。首先，您应该删除任何不必要的组件和插件。Bootstrap 带有很多组件和插件，如果您不使用它们，最好将它们删除。其次，您应该在将图像上传到网站之前对其进行优化。大型图像会大大降低网站速度。第三，您应该压缩 CSS 和 JavaScript 文件。压缩这些文件可以显著提高网站的速度。

什么是压缩以及它如何提高网站速度？

压缩是从源代码中删除不必要的字符（如空格和注释）而不改变其功能的过程。这减少了代码的大小，进而减少了需要传输给用户的数据量，从而加快了加载时间。

如何压缩我的 CSS 和 JavaScript 文件？

有几个可用的在线工具可以压缩您的 CSS 和 JavaScript 文件。这些工具会从您的代码中删除不必要的字符，从而减小其大小并提高加载时间。一些流行的压缩工具包括用于 JavaScript 的 UglifyJS 和用于 CSS 的 CSSNano。

如何优化 Bootstrap 网站的图像？

有多种方法可以优化 Bootstrap 网站的图像。最有效的方法之一是在将图像上传到网站之前对其进行压缩。有几个可用的在线工具可以压缩您的图像，而不会显着降低其质量。优化图像的另一种方法是使用正确的图像格式。例如，JPEG 通常更适合照片，而 PNG 更适合具有透明背景的图像。

有哪些特定的 Bootstrap 组件可能会降低我的网站速度？

是的，如果使用不当，某些 Bootstrap 组件可能会降低网站速度。例如，如果您使用大型图像，轮播组件可能会降低网站速度。建议您在将其用于轮播之前优化图像。此外，如果在每个页面上加载模态组件，它可能会降低网站速度。建议仅在需要的页面上加载模态组件。

如何删除不必要的 Bootstrap 组件和插件？

您可以通过自定义 Bootstrap 版本来删除不必要的 Bootstrap 组件和插件。这包括下载源文件，删除不需要的组件和插件，然后将剩余的文件编译成自定义版本。

使用 CDN 是否可以提高我的 Bootstrap 网站的速度？

是的，使用内容分发网络 (CDN) 可以显着提高 Bootstrap 网站的速度。 CDN 从地理位置靠近用户的服务器提供网站的静态文件（如 CSS、JavaScript 和图像），从而加快加载时间。

如何在我的 Bootstrap 网站上使用 CDN？

您可以通过在 HTML 文件中链接到 CDN 上的 Bootstrap 文件来使用 CDN 和您的 Bootstrap 网站。这包括用 CDN 上文件的 URL 替换 HTML 文件中的本地文件路径。

加快 Bootstrap 网站速度还有其他技巧吗？

是的，还有其他一些技巧可以加快 Bootstrap 网站的速度。例如，您应该始终将 JavaScript 文件放在 HTML 文件的末尾。这允许在 JavaScript 文件之前加载页面的其余部分，从而加快感知加载时间。此外，您应该对 JavaScript 文件使用异步加载。这允许文件在后台加载，而不会阻塞页面的其余部分。

以上是3个提示，以加快引导网站的加速的详细内容。更多信息请关注PHP中文网其他相关文章！