Kadzi
@Kadzi
Ом

Как называется предварительная загрузка блоков и когда она нужна?

Как это называется?

Например, слабый инет, человек заходит на сайт, и уже видит расположение блоков (фотка с новостного сайта):

5a72406997735168287997.png

Дизайнер должен верстальщику предоставить в том числе макет загрузки? Когда реально оправдан такой подход? Как это влияет на скорость страницы?
  • Вопрос задан
  • 176 просмотров
Решения вопроса 2
  • @MaxKorz
    1. Такой примем называется называется Placeholder UI.

    2. Да, дизайнер должен предоставлять макет с Placeholder UI, если этот функционал было решено реализовывать.

    3. Этот подход оправдывает себя при определенных условиях:
    3.1 Если контент подгружается динамически и не может быть ситуации, когда контента нет.
    Например: на главной странице новостного сайта контент есть всегда. Но на странице поиска контента может не оказаться (не найдено статьей по запросу пользователя). В таком случае placeholder может запутать пользователя (при загрузке будет показывается placeholder, но в итоге ничего не загрузится - выглядит как ошибка)
    3.2 Если необходимо создать видимость быстрой загрузки и улучшить UX. Сайт еще не загружен до конца, но человек уже знает куда ему смотреть. Особенно актуально на медленном интернете.

    4. Это отрицательно влияет на скорость страниц, т.к. подгружается разметка и CSS для реализации данного приема. Но это влияние не значительно (какой-нибудь jQuery слайдер будет влиять раз в 50 больше)

    Учтите, что на статичном сайте реализация этого приема практически не имеет смысла.
    Ответ написан
  • xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.ru
    Подход с UI placeholders оправдан тогда, когда контент для готовых контейнерных блоков загружается JS-скриптом после загрузки основной разметки через AJAX в синхронном или асинхронном режимах.
    Например, контент загружается через includeHTML.
    Так можно сделать холдеры: https://jsfiddle.net/d1pzay6k/

    Дополнительно по оптимизации загрузки:
    1. Грамотный critical CSS инлайном в коде: создать можно этим
    2. jQuery Lazy Load
    3. Подготовить плейсхолдеры для UI в SVG можно трейсером: imagetracerjs.
    Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы