LoadView

提高网站速度的 15 个提示

| 性能测试, 技术提示

网站速度的重要性

  • 访问者保留。 页面加载时间越长，用户退回的可能性就越高。
  • 谷歌搜索引擎排名。 谷歌将页面加载速度作为用于确定搜索引擎排名的许多排名信号 之一。
  • 击败竞争对手。 如果您的网站的加载速度始终快于竞争对手，则用户更有可能支持您，而不是访问速度较慢的网站。
  • 更好的用户体验。 避免用户对慢速网站的不满，并为他们提供优化的用户体验。
    加快您的网站

    在当今瞬时即逝的世界中，速度就是一切！

如何优化网站性能

在这里，我们有一个列表，你可以做的事情，以优化您的网站的速度。 很多这些技术可能需要额外的知识，例如使用下面提到的 CSS 子画面。 我们不想在这里重新发明轮子，但你可以在网上找到一点谷歌 fu 教程（搜索谷歌的关键字，你不熟悉或想知道最好的实现方式）。 让我们开始吧。

    1.  

     

      1. 托管速度至关重要。 您可以拥有地球上最优化的代码，但如果您使用具有显著延迟时间和缓慢到第一个字节 （TTFB） 的二流提供程序进行托管，则优化工作将大为徒劳。 运行基于指标的性能测试以确定最快的 Web 主机。之后可以设置 性能监控 ，以确保您的托管公司跟上进度。

     

      1. 限制页面所需的请求数。 每次用户从浏览器向服务器发送请求时，都会丢失宝贵的毫秒。 通过将元素合并到单个文件中，例如一个 CSS sprite 文件代替数十个图像文件，可以限制浏览器将发出的请求数

     

      1. 生成 CSS 子画面文件。 CSS sprite 文件不应为站点上的每一页下载数十个图像，而只需一次下载即可。 这将消除为菜单、圆角边框和背景图像等项目设置许多较小图像的用量。 CSS sprite 文件的本质是将站点中的所有图像堆叠到单个 PNG 文件中，并创建对 CSS 中每个图像位置的引用。 现在，当您需要显示图像时，只需在 div 标记中调用 CSS 类即可。

     

      1. 尽可能使用 CSS。 删除在网站上的多个页面中共享的内联样式、图像和其他内容。

     

      1. 合并样式表，以便只有一个 CSS 请求。 下载样式表后，它将消除将来所有样式相关项的请求。
        每个站点一个样式表规则的一个可能例外是，如果您正在优化交互时间或”折叠上方”内容。 当您担心如果页面加载时间过长，用户会退回时，应优先考虑显示在页面顶部允许用户开始与网站交互的内容。 在这种情况下，您可以加载一个 CSS 文件以正确显示在折叠内容上方，然后加载第二个 CSS 文件以优化页面上其他所有内容。

     

      1. 使用内容交付网络 （CDN）。 CDN 将网站内容，尤其是较大的图像、视频和媒体文件尽可能靠近最终用户。 现在，与从 Web 服务器调用元素的所有用户不同，他们现在从 CDN 服务器下载这些元素，该服务器仅托管在地理位置附近的数据中心中几跳之外。
        只要您不要使用多个域，在多个域（如基本域和 CDN）之间拆分元素将最大化浏览器中同时并行下载。 此时，DNS 查找的成本开始计入您。

     

      1. 最小化站点所需的 DNS 查找数。 唯一域托管的每个元素都可能需要额外的查找，这可能会增加加载时间数秒。 即使是相关域（如www.example.com和css.example.com）上的请求仍需要额外的查找。 如果这听起来有悖常理后，我们只是建议使用CDN，这是因为应该有一个快乐的媒体。 只需尝试限制引用的其他域的数量。 极端优化器尽可能消除所有社交媒体按钮，因为它们调用每个域。

     

      1. 请确保您的服务器允许基于文件期限、过期和 Etag 进行浏览器缓存。 这意味着浏览器最近从服务器下载的任何内容（如公司徽标）只要仍然有效，就不再下载。 还要确保每个元素都有适当的 TTL 或文件时间，以便利用浏览器缓存。

     

      1. 将 JavaScript 移动到页面底部。 这可确保在等待较大的 JavaScript 文件加载之前加载内容。

     

      1. 当您有此选项时，请合并或消除尽可能多的 JavaScript 插件。 虽然收集有关访问者如何使用网站的数据很棒，但您不希望收集该数据的脚本会降低网站速度并对用户体验产生不利影响。 如果要向网站添加新插件，请确保不会复制现有插件的功能，如果您是，请删除旧插件。

     

      1. 利用您网站上的压缩。 使用 gzip 可以显著减少从服务器发送到浏览器的文件的总大小。 压缩通常使带宽使用量减少 70% 以上。

     

      1. 仅发送页面所需的最小图像大小来优化文件大小。 将图像编辑为页面上所需的精确像素大小。 为图像选择文件格式时，请使用 PNG 或 JPEG，而不是 TIF 和 BP。 使用图像压缩工具，如蒂尼PNG。 这是一个伟大的工具，缩小文件大小的图像之前，将它们放在您的网站上。 也避免在图像上出现空源标记。 空标记会导致浏览器向服务器发送其他请求。

     

      1. 明化代码。 页面完成后，运行代码明化程序。 谷歌的版本（https://developers.google.com/speed/docs/insights/MinifyResources）删除所有不必要的代码，如空白，空行等，保存KBs的文件大小。

     

      1. 优化数据库。 如果站点使用数据库承载动态内容，则要确保数据库已正确编制索引。 对数据库编制索引后，尽量减少对数据库的调用数。 例如，如果站点从数据库中抓取结果以显示列表产品，则在钻取结果子集时，请重用查询结果，而不是在发送其他查询。

     

      1. 每天监视您的网站有损坏的请求。 如果您的网站包含指向不再存在的元素的代码（无论是服务器上还是来自第三方），则不必要地浪费时间发送和等待 404 个错误。

     

      1. 奖金提示！ 定期测试您的网站 ，在不同浏览器（包括不同的移动平台）中实现兼容性。 移动访问者开始主导浏览器市场。 专注于在桌面之前在移动设备上测试您的网站。

    通过执行这些步骤，您应该能够优化网页加载速度并提高网站的可用性。 确保您的内容质量，以留住网站访问者的注意力，由您决定！

    除了运行网站 速度测试 以清楚地了解您的网站在全球的表现之外 ，Google 页面速度 洞察工具还非常适合分析您的网页，并提供有关如何执行本文中列出的许多优化的建议。 Yslow 插件也是寻找其他方法来优化网页的一个很好的工具。