如何让你的网站更快地提供页面？

我一直在寻找我可以添加到我的操作系统主机文件中的垃圾服务域名，CNN提供了许多。浏览他们的源代码时，我发现了一条消息，询问改进网站速度的想法。CNN实验室团队已经实施了几种速度改进技术，如CDN、DNS预取、异步加载和代码精简，并且对任何好奇的开发人员能够深入研究他们的代码并提供的内容感兴趣。以下是我提出的一些建议：

• 首先加载HTML。所有其他内容都应在之后加载。当CSS和JS与HTML一起加载时，它们将至少阻塞页面内容显示一两秒钟。要正确执行此操作，请从您的CMS预压静态HTML页面，并将这些静态HTML页面提供给您的访问者。不要将您的HTML内容放在数据库中，并在每次有人请求文章时都使用服务器端脚本提供它们。静态HTML页面在没有任何服务器端处理延迟的情况下提供。像图像文件一样，静态页面无需任何处理即可复制到浏览器。它们不会像PHP或ASPX脚本那样被解析和解释。（预编译的脚本可能更快，但不如简单的文件复制到输出响应流快。）将服务器端脚本用于它们最初的用途——真正的动态内容，例如Ajax请求、数据库搜索和更改、处理实时数据和处理用户输入。
• 在静态HTML页面中使用JavaScript代码，延迟加载JavaScript文件、CSS样式表、图像和视频。（我尚未发布的CMS已经完成了这两件事——请查看www.vsubhash.com。虽然这个CMS的目标是个人网站用户，但这两个想法可以减少任何类型网站的等待时间。）
• 不要使用自动从您的网站甚至Google字体库下载的自定义字体。（CNN使用自己的“CNN”字体。）请改用通用样式表。如果浏览器可以使用设备上已安装的字体，它们可以更快地渲染网页。这会让您的网页在不同设备上看起来不同吗？天哪！您将如何生存？真的吗？不，先生，我们不太在意您的企业/品牌字体。它几乎没有在我们的脑海中留下印象。您正在向讲英语的受众提供英文文本。您不需要自定义字体。自定义字体适用于没有通用设备支持的语言，或者文本采用与某个旧字体绑定的非Unicode非标准编码。在购物网站上显示条形码是自定义字体的一个很好的用例。表情符号不是。您的EOT字体下载很可能会与页面同时下载的所有其他垃圾一起卡住。访问者会看到文本位置到处都是空白，想知道出了什么问题。这对您的企业形象有利吗？不要惊吓用户。请了解最少惊喜原则（PLS）。
• 不要认为带宽充足的人就没有问题。无论您使用的是PC还是移动设备（好的Linux计算机除外），都有数百个进程一直在与基站通信并下载/上传文件和数据。您的网页正在与此以及浏览器中已打开的其他标签页竞争。（Google的政策规定，Android会与基站通信，即使没有应用程序运行，即使处于睡眠模式，即使您已关闭无线网络……所以，想象一下设备正在积极使用时的情况。）
• 当可以通过CSS实现相同的效果时，不要使用图像。但是，当一个简单的图像可以完成任务时，不要使用CSS或JavaScript框架。
• 不要为高流量网站使用第三方CMS或大型JavaScript框架。这类软件会因为CMS开发人员试图塞入更多功能或试图使某些功能在所有情况下都能工作而导致代码臃肿。编写您自己的CMS，并使用针对您的网站优化的自定义JavaScript和CSS。最大程度的控制和效率应该是目标。（CNN网页，典型的现成CMS驱动网站，包含大量的JS和CSS，而HTML很少。）流行CMS程序的另一个问题是，精通它们的网站管理员不容易找到。即使您找到了他们，他们也可能很难确定一段代码在做什么。您最终会雇佣开发人员，他们可以在CMS生成的Javascript和CSS之上添加额外或定制的功能。优秀的开发人员会编写自己的代码，但许多人会求助于使用更多的第三方CMS插件。随着时间的推移，代码臃肿将变得无法控制。网站团队中很少有开发人员会熟悉网站代码并能够有效地排除故障。
• 当您使用广告网络时，不可避免地会失去一些控制。但是，您
  • 可以异步加载他们的脚本（CNN已经这样做了）。
  • 确保他们的代码在限制范围内。许多广告网络会下载大量的（相同的）JavaScript库来完成最简单的事情。
  • 在同一页面服务中不要使用一个以上的广告网络。您可以在不同的浏览器请求上轮换不同的提供商。如果您像CNN一样为一个请求访问这么多第三方网站，您将获得什么效率？

    

• 不要使用自动播放视频，即使您是电视新闻频道。您是否向广告商虚报了视频播放量？什么？顶级科技公司也这样做？嗯，这不仅仅是道德问题，也是金钱问题。请放心，当访问者只想阅读您的文章或已经听音乐时，自动播放视频是浪费带宽。即使统计数据被夸大，您仍然会赔钱……随着时间的推移。
• 为什么要使用第三方服务来提供您自己网站的相关文章？确保您的文章被适当标记和分类，并在侧边栏提供它们的链接，按日期和/或受欢迎程度排序。确保这些“相关”内容不是您的CMS生成的静态HTML的一部分。也要延迟加载相关内容。
• 限制您在线发布的链接中的重定向数量。CNN在Twitter上的链接在稳定下来之前会经过一个域名迷宫。这些跳转很耗时，因为它们是在https连接上进行的。以下是其中一个链接的重定向列表（https://cnn.it/2DtZSme）。
  • t.co (Twitter) 到 cnn.it
  • cnn.it 到 bit.ly
  • bit.ly 到 trib.al
  • trib.al 到 www․cnn.com
  • www․cnn.com 到 edition.cnn.com
• 您的网站对无障碍性友好吗？当您创建一个无障碍网站时，您默认就创建了一个快速网站。如果您在“查看源代码”中看到比HTML更多的CSS+JS，那么您的网站就不是无障碍的。它也不利于搜索引擎。
• 不要使用自动重新加载的页面。您是傻瓜吗？（不是您，先生/女士，但我可以列出十几个网站，其中一个著名的聚合新闻网站就羞耻地这样做，这个问题是反问他们的。）请不引人注意地使用Ajax只更改更新的内容。
• 理解Ajax背后的原理。您首先显示一个页面，然后使用Ajax将数据注入其中而无需重新加载。Gmail反其道而行之。它会让您等待，直到它加载几兆字节的XML数据，其中包含您所有的电子邮件，然后才显示您的收件箱——这完全违背了XML请求背后的理念。一开始，只加载需要显示给用户的数据。不要永远下载您认为用户可能从一开始就想看到的东西。
• 不要原封不动地使用社交媒体插件。它们通常会阻止页面加载。研究它们的无脚本版本，并使用您的JavaScript动态生成有效链接。
• 分析代码会增加冗余，降低网站响应速度，并增加带宽使用。您真的需要它们吗？有许多免费的服务器软件可以处理服务器日志文件并生成有洞察力的访客统计数据。检查您的CMS或询问您的托管服务提供商。如果您需要研究点击密集区域以提高网站效率，请暂时使用它们，并在收集到足够数据后将其移除。
• 不要认为JavaScript引擎如此之快，浏览器就能够轻松处理您网页中包含的所有垃圾。不，不是这样的！JavaScript引擎可能声称很快，但HTML和CSS渲染仍然很慢。不相信我吗？请查看我的JavaScript基准测试。之后，再将网络延迟（您无法控制）添加到其中，并自行判断。
• 随着时间的推移，您的页面会变得臃肿和迟钝。要么重新设计您的网站，要么重新开始。如果不能，定期进行瘦身。衡量网页的干重和湿重。真的值得吗？定期代码审查有助于识别不再需要的部分，并提供优化CSS和JS的想法。