Angular 4 加载微调器导致“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”答案

【问题标题】：Angular 4 loading spinner causes 'Eliminate render-blocking JavaScript and CSS in above-the-fold content'Angular 4 加载微调器导致“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”
【发布时间】：2017-05-19 21:21:03
【问题描述】：

我刚刚为我的应用程序编写了一个加载微调器，一个简单的 div 应该在 angular 尚未启动时显示，它工作得非常好，但 Google 的 PageSpeed Insights 现在分别给了我 81 和 91/100用于“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”。

如果我删除微调器，它会回到 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 分？

【问题讨论】：

标签： html css angular optimization pagespeed

【解决方案1】：

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

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

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

【讨论】：

非常感谢！我用 base64 对图像进行了编码，将其作为background:url 包含在内，这似乎已经成功了，我现在又回到了 100。