Angular 4 个加载微调器导致 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'

Question

我刚刚为我的应用程序编写了一个加载微调器，一个简单的 div，只要 angular 尚未启动，它就会显示，而且效果很好，但是 Google 的 PageSpeed Insights 现在分别为 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'.

提供了 81 和 91/100

如果我移除微调器，它会回到 100，如果我内联微调器 CSS，它会上升到 85 和 95。我做错了什么？

这是我的 index.html 和内联的 css：

<!doctype html>
<html>

<head>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>Home</title>
  <base href="/">
  <style>
    #loading_spin{
      background:url('assets/misc/loading.png') no-repeat;
      background-size:contain;
      height:100px;
      width:100px;
      position:fixed;
      left:50%;
      top:50%;
      margin-left: -50px;
      margin-top: -50px;
      animation: spin_load 2s linear infinite;
    }

    @keyframes spin_load{
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body id="corp">
   <master_page>
     <div id="loading_spin"></div> //this is the one causing the score
   </master_page>
</body>
</html>

<master-page></master_page> 标签是我的 app.component.ts 选择器：

import { Component } from '@angular/core';

@Component({
  selector: 'master_page',
  template: '<router-outlet></router-outlet>'
})

export class AppComponent {}

我做错了什么？有什么方法可以绕过这个并仍然获得满分 100 分吗？

Answer 1

据我所知，没有办法绕过它。额外的往返 google pagespeed 正在谈论的是您正在加载以显示微调器的图像：'assets/misc/loading.png'。您可以尝试将其设为内联 base64 url，将其替换为类似的内联 svg，或者使用 css 动画自行制作。

消除渲染阻塞 css，显然是您远程 css 显示加载程序。这个 css 非常小，您可以轻松地在初始 index.html 请求中内联使用它。

请注意，使用完整的 JavaScript/Client 应用程序创建完美的 100 pagespeed 分数实际上是不可能的。但是，您可以查看 angular 的服务器端渲染。我在那里没有相应的知识，但我所知道的是您可以使用它在服务器上预编译您的应用程序，这将为您提供预编译的 index.html 和加载的组件。

Angular 4 个加载微调器导致 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'

Angular 4 loading spinner causes 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'

html

css

optimization

pagespeed

angular