Дорогие топовые фронтендеры, сегодня пост не для вас. Так как вы используете системы сборки и с такой проблемой почти никогда не сталкиваетесь, а в опросе вы выбрали вариант про defer для inline скриптов.
Иногда критически важно ускорить существующий сайт, например на Битрикс, но с выводом скриптов там вечная путаница, потому что тему использовали готовую, и затем долго дорабатывали её. Поэтому нет возможности прописать всем скриптам defer, так как на inline скрипты он не работает, а в коде много вызовов, которые используют тот же jquery или другие библиотеки и плагины.
Например, вот такой фрагмент скрипта
<script>jQuery(document).ready(function(){alert('ok')});</script>
требует наличия загруженного jQuery, и вызовет ошибку, если у подключения jQuery написать defer.
Один из самых простых способов: использовать base64 и тот же defer для всех скриптов. Давайте превратим этот инлайн скрипт в base64 и подключим как через data, на которые этот defer распространяется
<script src="data:text/javascript;base64, alF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigpe2FsZXJ0KCdvaycpfSk7" defer></script>
Да, браузеру придется декодировать base64, однако вам не придется следить за порядком выполнения, это сделает сам браузер. Да, это не самый оптимальный вариант - самый оптимальный переписать все нормально. Но если вы ограничены во времени/бюджете, то это неплохой вариант снять блокировку на первую отрисовку, улучшить #FCP, возможно #LCP и ничего не сломать на сайте.
Да, поддерживать такой код невозможно, поэтому нужно сделать так, чтобы вся работа происходила на бакенд и разгрузить фронт, улучшив первую отрисовку.
🔥 Дайте огня, если было полезно, или 👍 палец вверх, если уже использовал данный метод.
💬 Коммент, если хотите поддержать автора и улучшить его код.