来源：公众号《前端全栈开发者》在当今世界，JavaScript框架每周都会出现，其他一切都随之发生变化，很容易陷入困境并怀疑您的网站是否表现最佳。哪些做法应该保留，哪些应该放弃。我读过使用实现x可以帮助提高性能。但另一篇文章提到不惜一切代价避免它——事实是什么？使用HTML（最终构成我们的内容），我们可以轻松完成工作。它不像JavaScript页面那样频繁更改。但是，此处提到的某些方面（有时甚至是大部分）经常被忽视，这确实会损害您的网站。最终，它会将最终用户赶走。在进入这些步骤之前，做一个站点报告。无论是灯塔还是其他什么。然后，在应用此处提到的所有内容后取一个。您将很好地比较它到底有多么不同。所以，下次您编写HTML时，请牢记这10条最佳实践。1.编写有效且可读的DOM第一个听起来有点明显。但我想在这里提一下我经常遇到的一个类似的问题：全部小写：很多时候，我看到基础设施都是大写的，比如或
，甚至更糟的是，整个HTML本身。每个标签都应该是小写的，所以请不要在HTML标签中使用任何大写字母。缩进是可读性??的关键：使用它。否则，您的文档看起来会很平淡，里面的所有内容都会显得杂乱无章。增强的可读性也意味着减少开发时间。自闭合标签曾经是强制性的。但对于HTML5，它是可选的，完全取决于开发人员。要么在所有标签上使用它，要么根本不使用它。这里的关键是要保持一致。当然，不要忘记关闭常规标签。避免过度使用注释：除非你有一个构建系统，或者你正在使用一个模板引擎，否则这些确实会增加你的HTML文件的大小。反过来，这会减慢您的初始页面加载速度并让您的用户等待。最终，让他们走。组织DOM：始终考虑是否需要额外的div或额外的元素。尝试只创建绝对必要的元素，并使用语义HTML元素而不是div来划分页面的大部分。在其他地方，如果可以的话，也总是使用HTML5语义元素。它帮助搜索引擎知道页面的哪一部分重要，哪一部分不重要。记住要经常问自己是否真的需要那里的额外div。摆脱多余的东西。2.不要使用内联样式和脚本，否则您的文档很快就会变得混乱且难以阅读。始终使用外部样式表。另外，尽量避免在CSS文件中使用import语句，它们会发出额外的服务器请求。您还应该将它们捆绑在一起以减少请求的数量。对于大型捆绑包，您可以利用域分片并将它们分成2-4个较小的块。内联JavaScript也是如此。除了可读性问题之外，这还会使您的文档变得更重且更难维护。3.内联关键CSS我们讨论了为什么不应该内联CSS。现在让我们讨论为什么要这样做。考虑将关键CSS放在顶部，以便用户更快地看到页面的第一部分。只有关键的CSS是内联的，仅此而已！关键CSS是指呈现页面顶部所需的最小CSS集，即用户登陆您的网站时首先看到的CSS。另外，请记住链接标签的顺序可能会覆盖规则，因此请谨慎放置。如果您有用于重置或第三方库的单独文件，请将它们放在第一位，然后是其余的。4.将脚本标签放在底部将脚本标签放在文档的底部。正式地，script标签位于head中，但如果我们将它们放在文档的底部，就在text标签关闭之前，我们可以延迟它们的下载。这样我们的文档就可以先加载到dom中，展示给用户，然后再请求脚本。这样做的原因是浏览器从上到下逐行解释您的文档。当它到达头部并遇到脚本标记时，它会向服务器请求该文件。如果它是一个巨大的文件，它将继续加载并且用户只会看到一个空白页面，因为它仍在加载标题。所以将它们移到底部。这样，在加载script标签的内容之前加载了文字的所有内容。作为回报，我们可以欺骗用户相信我们的页面加载速度很快。您还可以将defer标签添加到脚本标签中，以确保首先加载HTML。5.照顾无障碍环境您是否知道，根据世界卫生组织的数据，世界上15%的人口患有某种残疾？超过十亿人可能会在使用您的网站时遇到问题。如今我们网站上的互动如此之多，可访问性很容易受到损害。花一些时间用aria属性装饰复杂的UI元素。这带来了对辅助技术的支持，因此您可以覆盖更广泛的受众。6.为图像使用alt标签Alt标签指定图像的替代文本。因此，如果由于某种原因无法显示图像，则会显示此文本。当您的图像缺少alt标签时，搜索引擎不喜欢它，这会降低您的网页排名。7.每页一个h1每页只使用一个h1。将您最重要的文本放在这里以描述页面的内容。喜欢您的博客文章或文章标题。每个页面使用多个h1标签不一定是个好主意，也不推荐这样做，因为它会损害您的搜索引擎结果，而这有助于搜索引擎正确索引您的网站。另外，这是在W3C规范中定义的，无论如何你的页面内容应该用标签来描述，所以每页只保留一个h1。8.正确使用标题和元标记为您的页面元标记使用标题和适当的描述。这些由您当地的搜索引擎人员负责，并用于为您的网站编制索引，因此请通过向他提供有用的信息来帮助他。始终使用metaviewport标签，以便根据设备的屏幕尺寸显示您的网站。此外，考虑使用开放图标签将您的网站链接变成社交媒体平台上的丰富内容。9.压缩一旦你完成了所有的事情并且准备好让你的网站上线，压缩它。您可以使用第三方库、称为构建工具的特殊程序或工具，甚至在线应用程序。这将使您的文档更小，从而加快页面加载速度。要更进一步，请在服务器端启用brotli或gzip压缩。它会对页面速度产生巨大影响。10.验证您的HTML最后但同样重要的是，始终验证您的HTML。验证者可以发现错误或错误代码，从而消除它们。您可以使用w3c验证器。在这里，您可以通过上线前的URL验证您的网站，通过上传，也可以直接输入验证。更好的是，如果您可以设置一个linter，在提交代码之前自动检查此类问题。遵循这10个简单的步骤将帮助您加强HTML，使您的网站排名更高并带来更多流量，同时还可以加快优化步骤。还会导致更多的用户交互。最后，它不仅会奖励您更多的访客，还会奖励更多快乐的访客。这才是最重要的。感谢您抽空阅读本文，祝优化愉快！