上一篇文章讲到了 前端性能优化之雅虎 35 条军规，这一期我们从 内容、SEO、性能和安全 方面详细展开。
内容
使用简洁的语言编写内容
如果你正在编写面向初学者的博客，请尽量使用简洁明了的语言向读者传递信息，长篇大论往往会让用户感到疲惫，甚至失去兴趣。
为了做到这一点，我们通常可以：去掉不必要的修饰词和重复的句子；将大关店拆分成小观点，一个观点一个段落；必要时解释行业术语，可以用类似 Cumulative Layout Shift (CLS, 累计布局偏移) 的结构。
当然如果你的文章目标读者是专业人士，可以使用行业术语以体现文章的专业性和权威性。
重要信息突出显示
在内容上，如果长篇内容没有一点突出的元素，那么读者/客户很容易疲惫或很快失去兴趣，使用 粗体 或 斜体 可以有效突出页面中的关键信息，引导用户注意。但过度使用会适得其反，因此需要适度。
我们通常要注意的是：只对最重要的词汇或短语加粗，避免整个句子都加粗；斜体通常用于引用、书名或特定词汇的强调，在文章中请不要混用这俩。
图片应具有描述性的 alt 文本
alt 文本不仅有助于搜索引擎理解图片内容，还可以提高网站的可访问性，帮助视障用户通过屏幕阅读器了解图片信息。
如果你有使用过 PageSpeed 测试你的网站，那么你会在「无障碍」下发现它要求每张图片均有 alt 文本以帮助视障用户获得更好的的体验。alt 文本通常应该是短小精悍的（适当使用关键词，一般不超过 150 个字符），对于功能性的内容如按钮，对应的 alt 文本则应该描述功能而不是外观。
确保所有链接都能正常工作
链接是网站导航的重要组成部分，确保所有链接都能正常工作可以提高用户的信任度和满意度，同时提高站点的 SEO。
无论是人还是搜索引擎爬虫都一定不希望在点开某个链接后发现链接的尽头是 404 页面，对此我们需要定期检查页面上的链接，移除或替换已经失效的链接。另外我们还需要避免 [点击这里](link) 以捐赠 的模糊写法，而是 请参考阳帆写的 [捐赠页面](link)。
修改或移除失效的内容
作为站长，我们可以鼓励用户为页面提供反馈，帮助识别需要更新的内容。对于过于久远并确认不再更新的内容，可以醒目的标出 当前文章可能已过时 提醒读者。
过时的内容不仅会影响用户体验，还可能损害网站的权威性和可信度。定期检查和更新内容可以确保网站始终提供最新、最准确的信息。
不要让读者付费获取代码
如果你是一个内容农场 / 资源站的站长，可以无视这一条
理论上如果你全文写了众多代码，而全部的代码需要付费才能获得，我能理解这是让懒人付费。但如果你全文只介绍了功能，却在文末要求读者付费获得（可能还是部分的）代码，这样会打击读者的消费欲望，从而在接下来需要付费的地方选择不付费。
技术
使用 CDN 加速静态资源的加载
内容分发网络（CDN）是提高网站加载速度的有效手段之一。CDN 通过在全球范围内分布的服务器网络缓存和分发静态资源，如图片、CSS 文件和 JavaScript 文件，从而显著减少用户访问网站时的数据传输距离和时间。
当用户请求某个资源时，CDN 会从最近的服务器节点提供该资源，而不是从网站的主服务器获取，这大大减少了加载时间，尤其是在用户和主服务器地理位置相距较远的情况下。此外，CDN 还具备自动缓存功能，可以减轻主服务器的负担，提高整体性能。
选择一个覆盖范围广且提供可靠服务的 CDN 供应商非常重要，这不仅能确保用户无论身处何地都能快速访问网站，还能提供额外的安全保护，如防止 DDoS 攻击。我个人推荐使用 LEDCDN 加速您的网站，具体可以参考我的测评文章。
优化图片大小和格式
图片是网页内容的重要组成部分，但未经优化的图片会显著增加页面的加载时间，影响用户体验。因此，优化图片的大小和格式是提高网页性能的关键步骤之一。
首先，选择合适的图片格式非常重要。现代浏览器广泛支持 WebP 格式，这种格式的图片通常比 JPEG 和 PNG 格式更小，质量更高。使用 WebP 格式可以显著减少图片的加载时间，提高页面的整体性能。使用 avif 等新型格式可以进一步减少 TTFB(Time to First Byte, 首字节时间)，但同时也要注意兼容性！
此外，响应式图片技术可以根据用户的设备屏幕大小提供不同分辨率的图片，避免在移动设备上加载高分辨率图片，从而节省带宽和加载时间。
预加载关键资源
通过预加载关键资源，可以在用户实际需要之前将关键资源提前加载到浏览器中，从而确保这些资源在用户需要时已经准备好。
例如，可以使用 <link rel="preload"> 标签预加载关键的 CSS 和 JavaScript 文件，确保这些文件在用户访问页面时已经加载完毕，从而加快页面的渲染速度。
此外，对于首页或重要页面的关键图片，也可以通过预加载技术（配合缓存）确保这些图片在用户访问时能够快速显示。然而，我们需要避免预加载过多的资源，导致不必要的带宽浪费。
实际上，Google 推荐了这样一种方式来推迟加载 CSS 文件：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
但在真实的生产环境中，Google 建议使用 CSS 延迟函数（例如 loadCSS），这些函数可以封装此行为，并在各种浏览器中正常运行。
SEO
创建 XML 站点地图并提交给搜索引擎
XML 站点地图是一个包含网站所有重要页面 URL 的文件，它帮助搜索引擎更有效地抓取和索引网站内容。
创建 XML 站点地图并将其提交给搜索引擎，可以确保搜索引擎能够找到和索引网站的所有页面，特别是那些通过深层链接或动态生成的页面。站点地图还可以包含每个页面的更新频率、上次修改日期等信息，帮助搜索引擎更好地理解网站的结构和内容。
生成后，可以通过搜索引擎的管理工具（如 Google Search Console）提交站点地图。这不仅有助于提高网站的可见性和索引速度，还能减少因页面未被索引而导致的流量损失。此外，定期更新站点地图，确保其包含最新的页面 URL，可以进一步提升网站的 SEO 表现。
使用结构化数据标记
结构化数据标记（Schema.org）是一种标准化的元数据格式，可以帮助搜索引擎更好地理解网页内容，从而在搜索结果中提供更丰富和相关的展示。通过使用 Schema.org 提供的结构化数据标记，可以为网页中的各种元素（如文章、产品、事件等）添加详细的描述信息。
例如，对于一篇博客文章，可以使用结构化数据标记来指定作者、发布日期、摘要等内容，搜索引擎在抓取这些信息后，可以在搜索结果中以富媒体卡片的形式展示，吸引用户点击。同样，对于电子商务网站，可以使用结构化数据标记来描述产品名称、价格、评分等信息，从而在搜索结果中显示更详细的产品信息。
合理使用结构化数据标记不仅可以提高网站的点击率，还能提升用户体验，增加转化率。此外，许多搜索引擎还支持特定类型的结构化数据标记，如食谱、视频等，合理利用这些标记可以进一步丰富网站的展示效果。
确保网站易于搜索和导航
一个易于搜索和导航的网站可以显著提升用户体验，帮助用户快速找到所需信息。
网站应该有一个清晰的导航菜单，将主要的类别和功能以直观的方式展示出来。导航菜单应该位于页面的顶部或侧边栏，方便用户随时访问。还应该提供一个全局搜索框，让用户可以通过关键词快速查找内容。搜索功能应该支持模糊匹配和自动补全，提高搜索的准确性和便捷性。
此外，网站的内部链接也很重要，通过合理使用内部链接，可以帮助用户发现更多相关内容，增加用户的停留时间和页面浏览量。例如，可以在文章末尾添加相关文章的链接，或者在产品页面中推荐相似产品。
保持内容更新频率
内容是网站的核心，定期更新内容可以提高网站的权威性和可信度，吸引用户回访，同时也有助于提升搜索引擎排名。保持内容更新频率意味着定期发布新的文章、博客、新闻或产品信息，确保网站始终提供最新、最相关的信息。
对于博客，可以设定每周或每月的更新计划，确保用户和搜索引擎都能获得新鲜的内容。对于企业网站，可以定期更新产品信息、公司动态或行业资讯，保持网站的活力。
此外，更新内容不仅仅是添加新内容，还包括检查和优化现有内容，确保其仍然准确、有用。例如，可以定期检查并更新过时的指南或教程，确保读者获得最新、最准确的信息。
简洁且包含关键词的 URL
URL 结构是网站优化中的一个重要方面，它不仅影响用户体验，还对搜索引擎的抓取和排名有着重要作用。一个简洁且包含关键词的 URL 可以提高页面的可读性和可索引性，使用户和搜索引擎更容易理解页面内容。
URL 应简洁明了，避免过长或复杂的路径。例如，一篇关于“如何制作蛋糕”的文章，其 URL 可以是/how-to-make-cake，而不是/articles/food/baking/cakes/how-to-make-a-delicious-cake。简洁的 URL 不仅更容易被用户记忆和分享，还能减少输入错误的可能性。
URL 中应包含关键词，这有助于搜索引擎理解页面的主题，提高页面的搜索引擎排名。URL 应该具有一定的可读性和语义性。避免使用数字 ID 或无意义的参数，例如/article.php?id=123。这种 URL 不仅难以理解，也不利于搜索引擎的抓取。
对此我们可以使用这样的形式 /article/123/how-to-make-cake，这里的 123 是页面 ID，而后面的字符则为内容的概括（移除也应不会影响内容加载，所以这需要程序的适配），让人一眼就能了解文章讲了什么。这种方法在诸如 StackOverflow 上体现的淋漓尽致。
性能
这期我们不展开讲，有兴趣的可以看看上一期的内容。
通过减少重定向次数来加快页面加载速度
重定向是网页开发中常用的技术，用于将用户从一个 URL 重定向到另一个 URL。虽然重定向在某些情况下是必要的，例如当页面内容迁移或域名更改时，但过多的重定向会显著增加页面的加载时间，影响用户体验。每次重定向都会导致浏览器发出额外的 HTTP 请求，增加网络延迟，从而延长页面的总加载时间。因此，减少重定向次数是提高网站性能和用户体验的重要措施。
如果一个页面的内容已经永久迁移到了新的 URL，可以直接将旧 URL 的链接更新为新 URL，而不是依赖重定向。这样，用户可以直接访问新的页面，避免了额外的请求和等待时间。此外，对于网站内部的链接，也应该确保它们直接指向最终的目标页面，而不是通过一系列的重定向到达。
另外，使用 301 永久重定向而不是 302 临时重定向可以提高搜索引擎的索引效率。301 重定向告诉搜索引擎这个重定向是永久的，搜索引擎会将旧 URL 的权重转移到新 URL，从而提高新页面的排名。而 302 重定向则被视为临时的，搜索引擎不会转移权重，可能导致新页面的排名受到影响。
如果你的网站和我一样要求带上结尾的 / 那么你在代码中就应该注意是否带了小尾巴 /，我之前的「下一篇」地方就没有小尾巴导致每次切换都要来一次 308 重定向 QWQ。
减少 DOM 元素数量
DOM（Document Object Model）元素是构成网页的基本单位，每个 HTML 标签都会生成一个 DOM 元素。虽然丰富的 DOM 结构可以提供复杂的页面布局和功能，但过多的 DOM 元素会显著增加页面的复杂性和加载时间。
避免使用嵌套过多的标签，尤其是那些只是为了实现特定布局而添加的冗余标签。例如，如果一个简单的段落可以用一个 <p> 标签表示，就不必使用多个嵌套的 <div> 标签来实现同样的效果。通过简化 HTML 结构，可以减少 DOM 树的深度和宽度，提高浏览器解析和渲染页面的速度。
合理使用 CSS 和 JavaScript 来实现复杂的布局和功能，而不是依赖大量的 HTML 标签。CSS Grid 和 Flexbox 等现代布局技术可以大大简化复杂的布局需求，减少所需的 HTML 标签数量。例如，使用 CSS Grid 可以轻松实现多列布局，而无需使用多个嵌套的 <div> 标签。同样，使用 JavaScript 可以动态生成和操作 DOM 元素，避免在 HTML 中硬编码大量静态内容。
对于大型网站或复杂的应用，可以考虑使用组件化开发方法。组件化开发将页面分解为独立的、可复用的组件，每个组件负责一部分功能和布局。这样，不仅可以减少重复的 HTML 代码，还可以提高代码的可维护性和可扩展性。例如，React 和 Vue 等前端框架都支持组件化开发，可以帮助开发者更高效地管理和优化 DOM 结构。
定期使用浏览器的开发者工具，如 Chrome DevTools，审查和分析页面的 DOM 树，找出不必要的元素并进行优化。例如，可以删除不再使用的标签或者重构复杂的布局以减少 DOM 元素的数量。
对 CSS 和 JavaScript 文件进行合并和压缩
CSS 和 JavaScript 文件是网页中不可或缺的部分，但过多的文件请求会显著增加页面的加载时间。通过合并和压缩这些文件，可以减少 HTTP 请求的数量，减小文件的大小，从而提高页面的加载速度和用户体验。
合并 CSS 和 JavaScript 文件可以显著减少 HTTP 请求的数量。每次浏览器发起 HTTP 请求都会增加一定的延迟，因此，将多个 CSS 文件合并成一个文件，将多个 JavaScript 文件合并成一个文件，可以减少请求次数，加快页面的加载速度。这样，浏览器只需发起两次请求即可获取所有的样式和脚本，而不是五次。
压缩 CSS 和 JavaScript 文件可以进一步减小文件的大小，提高传输效率。压缩工具可以移除文件中的注释、多余的空格和换行符，将变量名和函数名缩短为更短的标识符。例如，使用工具如 UglifyJS（JavaScript 压缩工具），可以将原始文件压缩成更紧凑的形式。压缩后的文件不仅传输速度更快，还可以减少带宽的使用，特别是在移动设备上，这可以显著提升用户体验。
此外，使用构建工具如 Webpack、Gulp 或 Grunt，可以自动化合并和压缩的过程。这些工具可以配置为在开发阶段保留原始文件的可读性，而在生产环境中自动执行合并和压缩操作。这样，开发者可以专注于编写代码，而不必手动处理文件的优化。
最后一定一定要确保合并和压缩后的文件仍然能够正确运行。虽然压缩工具通常会保留文件的功能，但在某些情况下，过度压缩可能会导致语法错误或功能失效。因此，建议在合并和压缩后进行充分的测试，确保页面的所有功能都能正常工作。
别忘了移动端的加载速度
在移动互联网时代，越来越多的用户通过智能手机和平板电脑访问网站。因此，移动设备的加载速度成为影响用户体验和网站性能的关键因素。与桌面设备相比，移动设备通常具有较低的处理能力和网络带宽，这意味着同样的页面在移动设备上的加载速度会更慢。
检查移动设备上的字体和图像加载情况
在优化移动设备的用户体验时，确保字体和图像的加载情况是至关重要的。移动设备的屏幕尺寸、分辨率和网络条件各不相同，因此需要特别关注这些因素对字体和图像加载的影响。
优化字体的加载是提高移动设备性能的关键。使用 Web 字体可以提供更美观和一致的排版效果，但不当的使用会显著增加页面的加载时间。为了优化字体的加载，可以选择轻量级的字体文件，避免使用过多的字体变体。例如，可以使用 Google Fonts 提供的字体，这些字体经过优化，加载速度快，且支持多种格式。
优化图像的加载可以显著提高移动设备的性能。移动设备的屏幕分辨率各不相同，因此需要提供适合不同设备的图像。使用响应式图像技术，可以根据用户的设备屏幕大小提供不同分辨率的图像，避免在移动设备上加载高分辨率图像，从而节省带宽和加载时间。
确保移动设备上的字体和图像加载不影响页面的初始渲染。可以通过预加载关键的字体和图像文件，确保这些资源在用户需要时已经加载完毕。我们还可以使用懒加载技术，对于非关键的图像，只在用户滚动到相应区域时再加载，从而加快页面的初始加载速度。