我们最近更新了我们的网站，该网站已经过全面的设计验收。但实际上，作为软件开发人员，我们会关注很多与技术相关的点点滴滴。我们的目标是性能控制，以性能为中心，未来可扩展，并且向站点添加内容是一种乐趣。然后我会告诉你为什么我们的网站比你的快（对不起，这是真的）。性能设计在我们的项目中，我们每天都与设计师和产品所有者讨论平衡美学和性能的问题。对于我们自己的站点，这样做很简单。简而言之，我们认为良好的用户体验始于快速的内容交付，这意味着性能>美学。好的内容、布局、图形和交互是吸引用户的重要因素。这些因素中的每一个都会影响页面的加载时间和最终用户体验。在每一步中，我们都在讨论如何在获得良好的用户体验并确保设计美观的同时，将对性能的影响降到最低。内容优先我们希望尽快将核心内容呈现给用户，这意味着我们必须处理基本的HTML和CSS。每个页面都应该服务于一个基本目的：传达信息。JS、CSS、网页字体、图片、网站分析等优化都在核心内容之下。可控性在定义了一个理想网站的标准之后，我们得出的结论是，要想达到理想的效果，就必须能够对网站的方方面面进行控制自如。我们选择构建自己的静态站点生成器，包括资产转移，并自行处理。静态站点生成器我们在Node.js中实现了一个静态站点生成器。它使用带有简短JSON页面描述标签的Markdown文件来生成整个站点结构及其所有资源。还可以附加HTML文件以包含特殊页面脚本。下面是一个简化的博客发布的描述标签和markdown文件，用于生成真正的HTML。JSON描述标签：{"keywords":["performance","criticalrenderingpath","staticsite","..."],"publishDate":"2016-07-13","authors":["Declan"]}markdown文件：#WhyyourwebsiteisfasterthanyoursWe'verecentlyupdatedoursite。是的，它有一个完整的...##DesignforperformanceInourprojectswehavedailydiscussions...图片传输平均而言，2406kb的网页中有1535kb是图片。正因为图片在网站中占据了如此大的比重，所以也是性能优化的重点之一。WebP格式WebP是一种现代图像格式，可为网络图像提供出色的低损失、有损压缩。WebP格式的图像比其他格式的图像小得多，有时比相同的JPEG图像小25%。WebP被大多数人忽略并且不经常使用。在撰写本文时，WebP仅在Chrome、Opera和Android上受支持（仍有超过50%的用户），但我们可以优雅地降级为JPG/PNG。使用元素，我们可以优雅地将图像从WebP降级为其他广泛支持的图像格式，例如JPEG：我们使用ScottJehl的picturefill来让不支持元素的浏览器，达到一致跨浏览器的结果我们使用![]()
作为不支持或JS的浏览器的后备元素。使用图像的最大实例可确保它在后备中可行。Generation虽然图像传输方式已经确定，但是我们仍然需要思考如何高效地实现它。我喜欢元素的功能，但我不喜欢写上面的代码片段，尤其是我在编写内容时必须包含它这一事实。我们不想做这么费力的事情：每张图片要写6个instance，所以优化这些图片，写在markdown文件的中。所以：生成图片在构建过程中，原始图片的多个实例，包括JPG、PNG和WebP格式，我们使用gulpresponsive来生成。最小化图片在markdown文件中写入[图片描述](image.jpg)。在构建过程中使用自定义Markdown渲染器为完全成熟的元素编译传统的Markdown图像声明。SVG动画我们为我们的网站选择了一种特定的图标类型，其中SVG插图占主导地位。这有几个原因：首先，SVG图像比位图小；第二，SVG图片响应式，可扩展性强，不需要图片生成和元素；最后重要的是，我们可以通过CSS不断地改变它，赋予它新的生命！我们所有的投资组合页面都有一个自定义的动态SVG图像，可以由概览页面重复使用。此图像用作我们所有投资组合页面的循环样式，允许集成页面设计而几乎不会影响性能。看看这个动画，看看我们如何用CSS改变它。自定义Web字体在开始之前，这里有一个关于在浏览器中设置自定义字体的简短介绍。当浏览器发现CSS中有@font-face的定义，但用户的电脑不支持该字体时，就会尝试下载该字体文件。下载时，大多数浏览器根本不会显示这种字体的文字。这种现象称为“不可见文本的闪烁”或FOIT。如果你留心，你会发现这种情况在整个网络上都有发生。如果你问我，我会告诉你，这会影响用户体验。它延迟了用户阅读所需内容的时间。我们可以强制浏览器将此行为更改为“flashunstyledcontent”或FOUT。我们告诉浏览器首先使用普通字体，如Arial或Georgia。下载自定义字体后，它会替换标准字体并重新呈现。这样，即使自定义字体下载失败，也不会影响内容的可读性。然而，人们可能会认为这是一种妥协，但我们认为自定义字体只是一种优化。即使没有自定义字体，该网页看起来也完好无损并且可以100%工作。勾选/取消勾选复选框以切换我们的网络字体，您自己看看：切换下载的字体类使用自定义网络字体可以改善我们的用户体验，只要您优化它们并负责任地服务。字体子集子集子集是迄今为止提高网络字体性能最快的方法。我会向所有使用自定义字体的Web开发人员推荐它。如果您可以完全控制网页的内容并且知道它将显示哪些功能，则可以完全使用子集。但即使只是将字体设置为西方语言也会对文件大小产生很大影响。比如我们的NotoRegularWOFF字体，默认是246KB，设置成西文后，大小降到31KB。我们使用Fontsquirrelwebfont，确实很好用。字体监听器BramStein的字体监听器是一个很棒的脚本，可以帮助检查字体是否已加载。至于你如何加载字体，是通过网络字体服务还是自己上传是不可知的。在这个监听器告诉我们所有自定义字体都已经下载之后，我们可以在元素中添加一个字体加载类，我们的页面将重新使用新字体：html{font-family:Georgia,serif;}html.fonts-loaded{font-family:Noto,Georgia,serif;}注意：为了简洁起见，我没有在上面的CSS中为Noto添加@font-face声明。我们可以设置一个cookie来记住所有的字体都已经加载过，这样就可以缓存在浏览器中。我们使用这个cookie进行重复浏览，我将在后面解释。在不久的将来，我们可能不需要BramStein的脚本来侦听此行为。CSS开发团队提出了一个新的@font-face描述符，也叫font-display。它的属性值控制可下载字体在加载之前如何在页面上呈现。这是font-display的CSS描述：它将为我们提供与上述方法相同的行为。您可以在此处阅读有关字体显示属性的更多信息。JS和CSS懒加载一般来说，我们会以最快的速度加载需要的资源。我们删除了一些阻塞请求以加速页面渲染，优化首屏，并使用浏览器缓存来处理重复页面。JS懒加载设计，我们的网站没有大量的JS。我们开发了一个JavaScript工作流来处理我们目前拥有的js，以及未来将要使用的js资源。JS在块内渲染，这就是我们想要的。JS应该只用于增强用户体验，不应该对访问者的需求至关重要。处理JS阻塞渲染的一种简单方法是将脚本放在页面末尾。这样网页就不会加载JS，直到整个HTML渲染完毕。另一种可以在头部执行脚本的方案是在我们把这个小脚本放在页面的头部，用来检测浏览器是否支持原生JavaScript的document.querySelector和window.addEventListener属性。如果支持，我们通过Apache服务器端逻辑看起来像一行一行的注释，一般以如果为真，我们假设这是用户的第一次访问。在第一个视图中，我们添加了一个
