谷歌推出能自动生成高性能、高可访问性、高SEO博客网站的开源生成器

20-09-13 banq

这是使用Eleventy静态站点生成器构建博客的入门模板库,构建生成的博客符合最通用的性能最佳实践:100分性能、100可访问性、100分最佳实践和100分SEO。该开源项目一周内获得2000个 github红心!点击标题见github项目

演示站点

生成的博客网站有以下特点:

  1. Lighthouse测试中达到完美分数。
  2. 符合First Contentful Paint(connection start stalled)低延迟单个HTTP请求
  3. 高度优化的最大的内容绘图LCP(具体分数取决于图像使用情况,但是图像已优化)
  4. 良好的CLS分数(点击一个链接时,链接移动了,很坏的用户体验)
  5. 良好的首次输入延迟FID(衡量的是从用户第一次与页面进行交互(即当他们单击链接,点击按钮)到浏览器实际上能够开始处理事件处理程序的时间)

图片

  • 为每个图像生成多种尺寸,并在srcset中使用它们。
  • 为每个图像生成一个模糊的占位符(无需添加HTML元素或使用JS)。
  • 将图像转码为AVIF(由于编码器的不稳定,当前默认为关闭)和webp并生成picture元素。
  • 延迟加载图像(使用原生的图片懒加载:loading=lazy)。
  • 异步解码图片(使用decoding=async)。
  • 通过推断并提供宽度和高度来避免CLS对图像的影响(Chrome,Firefox和Safari 14+支持)。
  • 下载远程图像并在本地存储/提供它们。
  • 不可变的网址。

CSS

  • 默认为紧凑的“无类” Bahunya CSS框架。(具有响应式排版,导航栏,语法突出显示等功能的10KB、 无class的CSS框架。)
  • 内联CSS。
  • 使用PurgeCSS在每页的基础上消除死代码/未使用的CSS 。
  • 精缩CSS与CSSO

其他

  • JS的不可变网址。
  • 为图像,字体和JS设置不可变的缓存头(内联CSS)。当前实现Netlify _headers文件。
  • 压缩HTML并对其进行优化以进行压缩。使用带有积极选项的html-minifier
  • 使用rollup 将JS捆绑在一起,并用terser最小化
  • 当可能进行导航时,预取同源导航。
  • 如果存在AMP文件,请对其进行优化

字型

  • 提供相同来源的字体。
  • 制作字体display:swap。

分析工具

  • 支持本地提供Google Analytics(分析)的JS并将其命中请求代理到Netlify代理(可以轻松添加其他代理)。
  • 支持noscript命中请求。
  • 避免阻止分析请求的加载。
  • 要启用此功能,请googleAnalyticsId在中指定metadata.json。

DX功能

  • 用途 作为本地开发过程中的图标。
  • 支持一系列默认测试。
  • 在上运行构建并进行测试git push。
  • 为JS生成的Sourcemap。

SEO和社交

  • 共享按钮优先,navigator.share()并退回到Twitter。使用类似于操作系统的共享图标。
  • 支持OGP元数据。
  • 支持Twitter元数据。
  • 支持schema.org JSON-LD。
  • Sitemap.xml生成。

                   

猜你喜欢