更多优化技术，提高网站速度

WebFX总统。Bill在互联网营销行业有超过25年的经验，专门从事SEO, UX，信息架构，营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为cloudfx和WebFX的其他关键研究和开发项目的营销提供了基础。

Web性能是用户体验的一个基本元素。在第一部分在本系列的文章中，我谈到了一种自动化一些与web性能优化相关的任务的方法。

这里，在本系列的第二部分中，我们将稍微详细介绍一些先进的技术用于提高前端web性能。

以下是我们将要讨论的内容：

优化HTML结构

  • 在底部引用JavaScript和CSS文件
  • 处理未设置样式的内容（FOUC）的闪烁
  • 内联CSS和JavaScript

服务器配置

  • 浏览器缓存
  • 文件应该缓存多长时间?
  • 如何重写缓存
  • 数据压缩

在应用了所有这些之后优化在我的网站上，我可以得到一个完美的（100/100）PageSpeed见解移动和桌面web性能分析的得分。

优化HTML结构

很长一段时间以来，我认为我的外部CSS和JavaScript引用应该在< >头在HTML文档的开头引用JS和CSS资源对我来说很有意义，因为我需要这些东西来让我的网页看起来和正常工作。

但是有脚本和链接HTML文档开头的元素可能会阻止页面的呈现，这意味着在下载和处理资源之前，浏览器不会处理和显示任何后续HTML元素。

许多JavaScript文件，特别是那些考虑到异步编程而编写的文件，通常不需要在< >头标签，并可以加载到HTML文档的更深处，这样它们就不会阻碍浏览器呈现页面内容。

在HTML文档的末尾引用CSS文件有点棘手。这是因为当您在文档的末尾加载CSS文件时，用户可能会开始看到没有任何样式的页面内容，因为外部样式表的样式规则还没有加载和处理。这种情况叫做无风格内容的Flash(FOUC)。

在底部引用JavaScript和CSS文件

只要有可能，我们应该在文档的底部引用外部资源。就在关门前身体标签。

< html > < >头……主管< / > < >身体…<！——script和link元素理想地放在这里——>< /身体> < / html >

处理无风格内容的Flash

为了解决FOUC，我所做的是身体元素一个不透明度为0%的内联样式属性。

<身体样式=不透明度：0>

然后，在外部样式表中，重置身体元素回到100%不透明度。

身体{不透明度：1！重要；｝

加载和处理外部样式表后，将显示内容。

这种技术的问题是，如果服务器发生故障导致CSS文件无法下载，用户就会看到一个空白页面，因为给身体要素

内联CSS和JavaScript

您还可以在其中包含CSS样式规则