Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы, но скрипты итак внизу

#javascript #оптимизация_сайтов #pagespeed_insights

PageSpeed Insights Рекомендует исправить обязательно:


  Удалите код JavaScript и CSS, блокирующий отображение верхней части
  страницы




Хотя все скрипты итак стоят внизу страницы:



Не понимаю что может быть причиной, как можно исправить? 

Если дело в количестве подключаемых библиотек, то проверяла другую подобную страницу
(с десятком подключаемых скриптов) и все в порядке. async не помогает, да и проблем
с ним много.

footer.tpl:



После скриптов контента нет.
    

Ответы

Ответ 1

Как разобраться с блокирующим CSS я давал ответ вот тут. Дополнительно можете воспользоваться
библиотекой loadCSS для загрузки неблокирующего CSS. 

Куда вы разместите в странице ваши скрипты — в начало или конец документа — не имеет
значения. В вашем случае совет следующий:

Во-первых, объединить все библиотеки-плагины и файл с их инициализацией в один файл,
назовем его, к примеру, main.js.

Во-вторых, загружать jQuery по событию load:

function dlOnload() {
  var jq = document.createElement("script");
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
  document.body.appendChild(jq);
}

window.addEventListener("load", dlOnload, false);


В-третьих, запускать загрузку зависимых от jQuery файлов после его загрузки:

function dlOnload() {
  var jq = document.createElement("script"), mainScript;
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
  document.body.appendChild(jq);

  jq.onload = function() {
    mainScript = document.createElement("script");
    mainScript.src = "scripts/main.js";
    document.body.appendChild(mainScript);
  }
}

window.addEventListener("load", dlOnload, false);


И в-четвертых, всем скриптам, которым не важен порядок загрузки, добавить атрибут async.



UPD: для динамической загрузки скриптов с возможностью кэширования в localStorage
рекомендую воспользоваться basket.js. В вашем случае код будет выглядеть примерно таким
образом:

basket
.require({ url: 'path-to/jquery.js' })
.then(function () {
    basket.require(
    { url: 'path-to/jquery-ui.js' },
    { url: 'path-to/jquery.fancybox.js' },
    { url: 'path-to/jquery.fancybox.pack.js' },
    { url: 'path-to/common.js' }
    );
}, function (error) {
    // Ошибка
    console.log(error);
});