Как и когда использовать прелоадеры?

Question

[Владимир Суворов]

Как и когда использовать прелоадеры? Качественной информации я не нашел, на хабре была статья лишь о создании. Есть по сути 2 вопроса...
1) На каких сайтах стоит использовать, а на каких нет ( SPA, landing-page, интернет-магазин, портфолио ... и так далее)
2) Способы их создания. Я нашел 4 способа решения такого рода задачи задачи, но какой эффективней?:
2.1) Создавать gif или svg анимацию с иллюстраторе или же фотошопе, и впихнуть на сайт... .
2.2) Реализовать с помощью СSS ( animation) ( не буду углубляться, я думаю вы знаете)...
2.3) Разработать с помощью javascript/jquery ( полностью всю анимацию скриптом)...
2.4)Использовать готовый плагин( и какой?)...
Хотелось бы услышать развернутое мнение???

Answer 1

[Александр Таратин]

Никак и никогда.
Пусть лучше пользователь лицезреет раздраконенную страницу без стилей и скриптов, но это лучше чем ничего. (еще лучше сгенерировать критический css для первого экрана, и заинлайнить его прямо на страницу critical css generator )

Контентные картинки вставлять только через img.

По возможности указать width и height для img чтобы страница не скакала при загрузке.

Также для img можно указать в background-color - доминирующий цвет изображения
Либы
https://github.com/thephpleague/color-extractor
https://github.com/ksubileau/color-thief-php

Если картинки в формате jpeg, то только прогрессивный https://habrahabr.ru/post/165645/

Comments

[Владимир Суворов]

Приношу вам огромную благодарность, вы дали много ценной информации про которую я даже не слышал!!! большое спасибо!)

Answer 2

[Сергей Горячев]

1. Можно на любых сайтах, если:
- сайт слишком большой и долго грузится, много скриптов, стилей
- на сайте много анимации, которая должна показываться по порядку
2. Тут я отвечал, нормальное решение Полная загрузка страницы jQuery?
Но лучше не злоупотреблять)

Comments

[Владимир Суворов]

Спасибо за ответ, но еще хотелось бы услышать и про методики разработки))))

[Сергей Горячев]

Владимир Суворов: я написал свою методику, я ее считаю оптимальной, впрочем вам ещё ответят тут.

[Владимир Суворов]

Я очень вам благодарен за то, что выделил мне времени) буду очень надеяться)