Kadzi
@Kadzi
Ом

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

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

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

5a72406997735168287997.png

Дизайнер должен верстальщику предоставить в том числе макет загрузки? Когда реально оправдан такой подход? Как это влияет на скорость страницы?
  • Вопрос задан
  • 188 просмотров
Решения вопроса 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
Похожие вопросы
Valoreum Москва
от 80 000 до 80 000 руб.
Save Time Москва
от 90 000 до 150 000 руб.
ИА «Кельник» Санкт-Петербург
от 50 000 до 70 000 руб.
20 авг. 2018, в 19:05
3000 руб./за проект
20 авг. 2018, в 18:36
500 руб./в час
20 авг. 2018, в 18:25
10000 руб./за проект