Зависит ли последовательность прорисовки сайта от асинхронной загрузки?

Question

[Deerol]

Здравствуйте.

При анализе сайта https://lampsaz.ua/ я обнаружил, что у него корявая последовательность прорисовки, то есть, видно как сайт "собирается" по-частям - https://imgur.com/a/ivZznV8

Попросил программиста, чтобы он пофиксил последовательность прорисовки, а он мне говорит, что проблема в асинхронной загрузки сайта, которую лучше не отключать.

Так как я не являюсь программистом, подскажите, зависит ли последовательность прорисовки от асинхронной загрузки? Потому что, как я понимаю, асинхронная загрузка наоборот нужна для того, чтобы пользовательский контент быстрее грузился. И исправится ли прорисовка сайта, после отключения асинхронной загрузки?

По прорисовке, мне нравится как грузятся сайты: https://apple.com, https://htmlacademy.ru/.

Comments

[Rustam Bainazarov]

Да, зависит. У вас там ленивая загрузка. Есть разные методы визуального решения проблемы.

Я не знаю, как там с CSS сделано, но судя по всему, они тоже лениво грузятся. И я бы не стал грузить их отложенно, тогда многие проблемы решатся заранее. Более того, смысла особого вообще нет так делать в вашем случае.

Картинки — да, скрипты какие-то — да. CSS на такого размере сайта — нет.

Если там ещё какой-то лютый способ подгрузки контента или ещё чего-то там — то извините, пусть ваш программист лучше скажет, что можно сделать.

В любом случае, я согласен с вами насчёт странного вида загрузки.

Answer 1

[kadurinho]

Расскажите вашему программисту про критический css, который должен быть загружен до отображения контента

Comments

[Rustam Bainazarov]

Да тут даже не нужно этого :))

Ну и плюс обычно это муторно сделать, а тут вообще нафиг не нужно лениво грузить стили: сайт небольшой.

[kadurinho]

Нужно не нужно вопрос другой, есть проблема, это решение. Сайт не смотрел, но по скрину понятно, что ради попугаев в гугле, стили были вынесены в низ

[Rustam Bainazarov]

kadurinho, больше похоже на то, если бы стили грузились скриптом после загрузки. Но точно скажет только исследование, которое я не хочу проводить.

Answer 2

[Mysterion]

Да, зависит. Браузер читает сайт сверху вниз. Стили и скрипты именно в таком порядке загружаются, в каком они прописаны. Прежде чем начать загружать скрипт или стиль, браузер ждет, пока загрузится предыдущий. А если загрузка асинхронная, то браузер не будет ждать и будет просто по списку добавлять в отдельный поток загрузку всех найденных стилей без ожидания. И загружаться будет в таком порядке, в каком загрузится каждый из стилей. Какой быстрее загрузился, тот быстрее и обработался.

Вам следует вынести вверх особо необходимые для прорисовки стили и скрипты, подгружать их синхронно, а остальные асинхронно. Остальные - это те, в которых нет необходимости сразу. Те, без которых сайт не будет "белой портянкой".

Answer 3

[dollar]

CSS стили и некоторые скрипты лучше загружать синхронно. На скорость влияет, но не сильно. Зависит от того, куда ведут ссылки. Если это известные библиотеки, то они закэшированы и практически не влияют на скорость. Если css файлы грузятся с того же сайта с keep-alive, то влияния на скорость тоже практически нет.

Всё "необязательное" типа блоков промо, рекламы, какой-то сложной инфы, которую нужно сначала собрать на сервере, можно и асинхронно вливать в уже загруженный сайт. А меню и ключевой контент - лучше синхронно, а еще лучше не сильно распихивать по файлам на разных сайтах.