起源：公众号《前端全栈开发者》
在当今世界，JavaScript 框架每周都会呈现，其余所有都会随之扭转，这很容易让人陷入困境，并狐疑你的网站是否以最佳状态执行。哪些做法要保留，哪些要放弃。我读到过，应用 implementation x 能够帮忙晋升性能。但另一个帖子提到要不惜一切代价防止应用它——假相是什么？
应用 HTML（最终形成咱们的内容），咱们能够轻松实现工作。它不会像 JavaScript 页面那样频繁地更改。然而，这里提到的某些方面——有时甚至是大多数——常常被疏忽，这的确会侵害你的网站。最终，它驱使最终用户来到。
在进入这些步骤之前，先做一个站点报告。不论是 Lighthouse 还是别的什么。而后，在利用此处提到的所有内容后再取一个。你会有一个很好的比照，它到底有什么不同。
因而，下一次编写 HTML 时，请牢记以下 10 个最佳实际。
1. 编写无效且可读的 DOM
第一个听起来有些显著。但我想在这里提一下我常常遇到的相似问题：
- 全副小写：很多时候，我看到根底构造写的都是大写，例如
<HTML>或<BODY>，甚至更糟的是，整个 HTML 自身。每个标签都应该是小写的，所以请不要在 HTML 标签中应用任何大写。 - 缩进是可读性的要害：应用它。否则，你的文档会显得很平淡，外面的所有都会显得很芜杂。加强可读性也意味着能够缩小开发工夫。
- 主动敞开标签 已经是强制性的。然而应用 HTML5，它是可选的，齐全由开发人员决定。要么在所有标签上应用它，要么基本不应用它。这里的要害是保持一致。当然，不要遗记敞开惯例标签。
- 防止适度应用正文：除非你有一个构建零碎，或者你应用的是模板引擎，否则这些真的会减少你的 HTML 文件的体积。反过来，这也会拖慢你的初始页面加载速度，会让你的用户期待。最终，让他们来到。
- 组织 DOM：始终思考是否须要额定的 div 或额定的元素。尝试只创立相对必要的元素，并应用语义 HTML 元素而不是 div 来划分页面的大部分。其余中央也一样，如果能够，请始终应用 HTML5 语义元素。它能够帮忙搜索引擎晓得页面上哪一部分很重要，哪一部分不重要。记住，要时刻问本人，你是否真的须要那里多进去的 div。把多余的货色解决掉。
2. 不要应用内联款式和脚本
否则你的文档很快就会变得横七竖八，无奈浏览。总是应用内部样式表。另外，尽量避免在 CSS 文件中应用 import 语句，它们会产生额定的服务器申请。
你还应该将它们捆绑在一起以缩小申请数量。对于大型 bundle，你能够利用域分片的劣势，将它们宰割为 2 - 4 个更小的块。
内联 JavaScript 也是如此。除了可读性问题，这将使你的文档变得更重、更难保护。
3. 内联要害 CSS
咱们探讨了为什么不应该内联 CSS。当初咱们来讨论一下为什么你应该这样做。思考将要害的 CSS 放在顶部，这样，用户能够更快地看到页面的第一局部。仅内联要害 CSS，仅此而已！
要害 CSS 指的是渲染页面顶部所需的最小 CSS 集，即用户在登陆你的网站时首先看到的 CSS。
此外，请记住，链接标签的程序可能会重写规定，所以要小心搁置它们。如果你有用于重置或第三方库的独自文件，请先搁置这些文件，而后搁置其余文件。
4. 将脚本标签放在底部
将脚本标签放在文档的底部。从官网的角度来说，脚本标签是活在 head 外面的，但如果咱们把它们放在文档底部，就在注释标签敞开之前，咱们就能够提早它们的下载。这样咱们的文档就能够先加载到 dom 中，展现给用户，而后再申请脚本。
之所以这样，是因为浏览器会逐行从上到下解释你的文档。当它达到 head 并遇到 script 标签时，它将向服务器发出请求以获取文件。如果它是一个微小的文件，它将持续加载，用户将只看到一个空白页面，因为它仍在加载头部。因而，将它们移到底部。这样，在加载脚本标签的内容之前，将加载注释的所有内容。作为回报，咱们能够诱使用户置信咱们的页面正在疾速加载。你也能够在你的脚本标签中增加一个 defer 标签，以确保 HTML 被优先加载。
5. 关照无障碍
你是否晓得，依据世界卫生组织的说法，世界人口的 15%患有某种残疾？超过 10 亿 人可能会在应用你的网站时遇到问题。现在，咱们网站上的互动十分频繁，可拜访性很容易受到冲击。花一些工夫用 aria 属性装璜简单的 UI 元素。这带来了对辅助技术的反对，因而你能够笼罩更多的受众。
6. 对图片应用 alt 标签
alt 标签为图像指定代替文本。所以万一因为某种原因不能显示图片，就会显示这段文字。当你的图片短少 alt 标签时，搜索引擎是不喜爱的，会因而升高你的页面排名。
7. 每页一个 h1
每页仅应用一个 h1。将最重要的文字放在此处，以形容页面的内容。比方你的博客文章或文章题目。每个页面应用多个 h1 标签不肯定是个好主见，也不倡议这样做，因为它可能会侵害你的搜索引擎后果，这有助于搜索引擎正确地索引你的网站。另外，这是 W3C 标准中定义的，反正你的页面内容应该由一个标签来形容，所以每页只保留一个 h1。
8. 正确应用 title 和 meta 标签
为你的页面应用一个题目和适当的描述性元标签。这些由你的本地搜索引擎人员负责，并用于为你的网站建设索引，因而，通过为他提供有用的信息来帮忙他。始终应用 meta 视口标签，以便依据设施的屏幕尺寸显示你的网站。此外，还能够思考应用 open graph 标签，将你的网站链接变成社交媒体平台上的丰盛内容。
9. 压缩
一旦你实现了所有，你筹备让你的网站上线，压缩它。你能够应用第三方库，非凡程序或称为构建工具的工具，甚至能够应用在线应用程序。这将使你的文档更小，从而放慢页面加载速度。要进一步执行此步骤，请在服务器端启用 brotli 或 gzip 压缩。它会对页面速度产生微小影响。
10. 验证你的 HTML
最初但并非最不重要的一点是，始终验证你的 HTML。验证器能够发现缺点或谬误的代码，从而打消它们。你能够应用 w3c validator。在这里，你能够在上线前通过 URL 验证你的网站，通过上传，或者你也能够通过间接输出验证。
比这更好的是，如果你能在提交代码之前，设置一个主动查看此类问题的 linter。
依照这 10 个简略的步骤，将帮忙你增强你的 HTML，让你的网站排名更高，带来更多流量，同时也从优化步骤中使其更快。也会导致更多的用户互动。最初，它不仅会授予你更多的访客，而且会有更多的高兴访客。而这才是最重要的。感激你花工夫浏览本文，祝你优化欢快！