Google pagepeed говорит использовать встроенный JavaScript

Question

Google pagepeed говорит использовать встроенный JavaScript

В моем проекте ( https://preloaders.net/) у меня много скриптов, так как это веб-приложение. Там нет никакого способа иметь "некоторые" CSS и JS. Я объединил все в один файл, но Google Pagespeed все еще говорил "удалить блокировку рендеринга CSS и JS". Поэтому я просто сделал CSS и JS встроенными в HTML. Google pagespeed теперь доволен встроенным CSS, но на самом деле выглядит глупо - поскольку теперь JS и CSS не будут кэшироваться на всех других страницах. Разделять CSS и JS практически бесполезно и невозможно, так как все это необходимо для работы веб-приложения.

Так что теперь я разрываюсь - что лучше для производительности пользователя: Google "глупость" или блокировка рендеринга css и js?

Заранее большое спасибо.

2

google-pagespeed render-blocking

Источник

user958381 24 мар '17 в 16:00

1 ответ

Другие вопросы по тегам google-pagespeed render-blocking

user2044706 05 авг '17 в 01:03 2017-08-05 01:03 · Answer 1 · 2017-08-05 01:03

Вместо того, чтобы вставлять JavaScript, просто загрузите его с отложенным флагом или async:

<script src="whatever.js" async></script>

Это решит проблему с JS.

Что касается css - вставьте только то, что выше сгиба для каждой страницы, и загрузите остальные стили асинхронно (из https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery):

<html>
  <head>
  <style>
    .blue{color:blue;}
  </style>
  </head>
<body>
  <div class="blue">
    Hello, world!
  </div>
  <noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="small.css"/>
  </noscript>
  <script>
    var loadDeferredStyles = function() {
      var addStylesNode = document.getElementById("deferred-styles");
      var replacement = document.createElement("div");
      replacement.innerHTML = addStylesNode.textContent;
      document.body.appendChild(replacement)
      addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
        webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
  </script>
</body>