网站优化攻略：如何提升网站速度和用户体验？

网站运营最重要的任务之一是确保访问者在其网站上的体验尽可能顺畅。 诸如主页加载所需时间等因素是重要的考虑因素，尤其是随着来自移动设备的流量不断增加。 如果加载时间太长，您的网站将很快失去大量访问者。 要优化速度，您应该牢记您的网站性能：定期努力改进它，您很快就会意识到访问者在您的网站上花费了更多时间并且正在查看更多页面。 提高您网站的性能还将带来对搜索引擎更具吸引力的额外好处，这意味着您最终将受益于更好的排名。

如何优化网站速度和用户体验

您可以使用免费的网站速度测试（例如 Google PageSpeed Insights 或 Pingdom）来衡量您当前的网站速度。 这些工具测量和评估网页性能。 此外，在考虑与网络无关的方面（例如媒体内容或 HTML 代码结构）时，它们也很有用。 例如，Google 工具会分析您网站的桌面版和移动版，为您提供需要改进的概览。

如果您想知道哪些方面会影响网站的加载时间，那么您来对地方了。 在本文中，大眼仔将告诉您哪些因素通常会使网站变慢； 如果您的网站速度确实受到了影响，我们将通过可能的解决方案来改进它。

服务器主机托管

您应该首先问自己：您当前的托管平台是否满足您的 Web 项目的要求？ 大多数网站运营者在选择主机时都希望省钱，并且倾向于选择最便宜的选项。 但这是以牺牲服务器性能和容量为代价的。 节俭有一个缺点：例如，该平台可能缺乏必要的带宽来处理所有用户请求。 使用廉价的托管解决方案，多方共享一台服务器，这不允许特定网站的增长或增加访问者数量。 另一个典型的错误是将您的网站托管在位于国外的服务器上，这实际上会增加您网站的加载时间。

该怎么办：

• 使用具有无限网络空间和流量的灵活托管解决方案

• 只租用与大多数用户位于同一国家/地区的服务器

• 如果您计划面向国际受众，请使用 CDN 内容分发网络

• 自己管理托管，以便您可以根据项目的需要进行调整

HTML、CSS 和 JavaScript

当访问者点击您的网站时，他们的浏览器会请求您服务器上的 HTML 文件，并根据包含的 CSS 格式显示该文件。 这同样适用于集成的 JavaScript 元素，例如横幅或新闻等等。 加载过程可能会持续很长时间，具体取决于文件的大小以及需要读取和转换的代码量。 包含设计表和脚本对于动态网站来说是必不可少的——为了更高的网站速度而放弃 CSS 和 JavaScript 是不可取的。 因此，重点应该主要放在优化网站代码上。

该怎么办：

• 仅将 HTML 用于 CSS 无法完成的任务

• 为 CSS 和 JavaScript 使用单独的文件，并且仅在特殊情况下将 CSS 和 JavaScript 代码包含在 HTML 页面中（JavaScript 应始终出现在文档的末尾，在结束的 body 元素之前）

• 合并和压缩代码文件（更多关于 CSS 压缩的信息）

• 使用最新的编程技术，例如 WebAssembly

图片和外部内容

多媒体内容是一个好网站的重要组成部分。 就像设计和布局一样，它主导着您网站的外观，并有助于构建和上下文化正文文本。 特别是在电子商务中，使用高质量图像展示您的产品非常重要。 每张额外的图像或照片都会增加加载时间——尤其是当它们存储在远程服务器上而不是您自己的服务器上时。 这同样适用于其他媒体文件，例如音乐、视频或 PDF。

该怎么办：

• 从外部站点加载尽可能少的元素

• 避免不必要的图像、视频等。

• 使用工具压缩图像

• 将图像外包给外部服务器

• 指定图像的宽度和高度（否则浏览器将自行计算尺寸）

• 使用 SVG 图标（可缩放矢量图形）

• 使用 jQuery 插件延迟加载，如果图像超出显示范围，它会停止加载图像（它们只会在访问者滚动到它们时才开始加载）

• 使用更高效的图像格式 WebP

缓存

许多网站之所以运行缓慢，是因为它们放弃了缓存。 但一些网站所有者没有意识到的是，配置良好的缓存可以帮助优化您的网站 – 只需很少的努力。 这是因为缓存的内容不需要在每次单击时都由网络服务器调用，这意味着页面加载速度要快得多。 它还减轻了网络服务器的负担，因为它需要处理的请求更少。 可以缓存所有静态元素，例如 JavaScript 和 CSS 文件、图像或文档。 在这里，还可以定义它们保留缓存的时间。

该怎么办：

• 使用访问者的浏览器作为缓存：激活 Apache 网络服务器上的“mod_expires”模块并定义相应文件类型应在缓存中保留多长时间； 其余的由各自用户的浏览器完成

• 设置反向代理服务器并将其用作缓存。 或者，您可以使用内容分发网络，您可以在其中访问全球分布的反向代理服务器的整个网络

• 使用 Memcached 等缓存软件将动态内容临时存储在内存中，这可以让您最大限度地减少数据库访问

更多网站优化提示和技巧

除了上述优化网站性能的方法外，您还可以采取许多较小的步骤来帮助最大程度地减少加载时间。 这些包括：

• 将重定向保持在最低限度

• 在 HTML 文档中指定字符编码

• 删除任何错误的内容

• 避免在 CMS 中过度使用插件

• 限制 cookie 中收集的信息

• 使用网站图标（因为浏览器总是在网络服务器上搜索 favicon.ico 文件）

• 启用 HTTP/2

如果您还没有使用其中一种工具来让您的网站运行得更快，那么您现在应该开始跟上竞争的步伐。 根据谷歌 2017 年的一项调查，如果加载时间超过 10 秒，用户放弃移动网站的几率会增加 123%。 当页面加载速度超过 5 秒时，页面放弃的几率会增加 90%。 因此，网站速度应该成为重中之重。

如果您不想因加载时间不足而失去潜在客户，您应该优化您的网站以在移动时代取得成功。