Kadzi
@Kadzi
Ом

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

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

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

5a72406997735168287997.png

Дизайнер должен верстальщику предоставить в том числе макет загрузки? Когда реально оправдан такой подход? Как это влияет на скорость страницы?
  • Вопрос задан
  • 211 просмотров
Решения вопроса 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.com
Подход с UI placeholders оправдан тогда, когда контент для готовых контейнерных блоков загружается JS-скриптом после загрузки основной разметки через AJAX в синхронном или асинхронном режимах.
Например, контент загружается через includeHTML.
Так можно сделать холдеры: https://jsfiddle.net/d1pzay6k/

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

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

Войти через TM ID
Похожие вопросы
от 100 000 до 200 000 руб.
TechOps Москва
от 3 000 usd.
Infotech Group Москва
от 170 000 до 200 000 руб.
17 нояб. 2018, в 21:59
1000 руб./за проект
17 нояб. 2018, в 21:01
2000 руб./за проект