Страницы

Поиск по вопросам

пятница, 14 июня 2019 г.

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

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

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

Не понимаю что может быть причиной, как можно исправить?
Если дело в количестве подключаемых библиотек, то проверяла другую подобную страницу (с десятком подключаемых скриптов) и все в порядке. async не помогает, да и проблем с ним много.
footer.tpl:

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


Ответ

Как разобраться с блокирующим 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); });

Комментариев нет:

Отправить комментарий