Показываем фейковый контент, пока не загрузился основной (перевод)

Показываем фейковый контент, пока не загрузился основной (перевод)

За последние несколько лет, я был испорчен высокоскоростным интернетом, который позволяет просматривать сайты без стресса. Но по факту, не у всех есть оптоволоконный интернет, и много людей пользуются интернетом со скоростью 3G.

Что с этим можно сделать?

Об этом мы и поговорим в моей статье.

Содержание статьи:

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

Есть способы обеспечить более быструю загрузку видимого контента, как например описано в Critical CSS. Так же не стоит забывать о ленивой и динамической загрузке контента. При этом содержимое страницы загружается частями и создается впечатление, что страница открывается моментально.

Прогресс бар

Вы можете сомневаться в том, что прелоадер, имитирующий загрузку контента лучше, чем просто пустая страница.

Ну что ж, давайте рассмотрим инструмент, показывающий процесс загрузки: прогресс бар.

Прелоадер, по большому счету, бесполезен в веб приложении. Тем не менее, он позволяет показать пользователю, что приложение работает и не зависло.

На мой взгляд, одна из самых неприятных вещей на сайте связана с загрузкой файлов. Когда мы выбрали нужный файл, но приложение не реагирует на это несколько секунд. Это заставляет меня думать, что мои действия были проигнорированы приложением. Тот же самый вывод напрашивается во время загрузки страницы. Если при нажатии на ссылку, открывается сайт, на котором в течении 5 секунд ничего нет, я начинаю переживать, загрузится ли страница вообще.

Facebook решили проблему созданием прелоадера в виде анимированного градиента, по форме напоминающего элементы страницы - фото, имя, дату и параграф с текстом. (прим переводчика: это и представляет из себя плейсхолдер макет - placeholder layout):

facebook.gif

Плейсхолдер макет

Совсем недавно, я заметил, что на сайтах Gumtree и Slack перед каждой загрузкой страницы появляется плейсхолдер макет.

Gumtree грузит основной контент сразу, а плейсхолдер макет использует для рекламных объявлений:

gumtree.gif

Другая хорошая реализация плейсхолдер макетов реализована в Slack. В качестве прелоадера Вы будете видеть более традиционный спиннер, а так же схематичную разметку страницы:

slack.jpg

Цвет прелоадера для картинки

Многое из того, что я говорил до сих пор, ведет себя очень предсказуемо. Facebook, Gumtree и Slack знают заранее, какой контент будет появляться. Это помогает им создать точное представление о загружаемом контенте.

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

Например Google и Pinterest используют в качестве цвета для прелоадера доминирующий цвет из исходного изображения:

pinterest.gif

Большинство реализаций такого способа написаны на JavaScript. К счастью на manu.ninja есть большое руководство как это сделать.

Для получения более подходящего цвета в качестве фона прелоадера для картинки, Вы можете использовать Color Thief. Вы просто указываете, какую картинку необходимо загрузить, а он делает всю тяжелую работу за Вас. В качестве результата предоставляет цвет, который является доминирующим на картинке. Вы можете обернуть исходную картинку в div и применить полученный цвет в качестве его фона:

See the Pen Fake it ‘til you Make it CSS by Alexandr (@login2030) on CodePen.

Бронирование пространства

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

Если Вы знаете, что объявления на сайте грузятся дольше основного содержимого, то можно провернуть тот же трюк, что и с изображениями. Оборачивая объявления в div не забудьте задать ему ширину и высоту, чтобы соседние элементы не зависели от скорости загрузки объявлений.

Хотя предсказать высоту элемента с адаптивным дизайном может быть затруднительно. Однако, для таких вещей как образы, которые имеют очевидное соотношение сторон есть фантастический гид от Кристиана Миллера, который рассказывает о всех методах поддержания соотношения сторон.

Запасной шрифт

Несмотря на все наши усилия, загрузка веб-шрифтов всегда занимает некоторое время. И пока используемый шрифт не загрузился, мы должны показывать максимально похожий шрифт:

fallback.gif

Используя FFFFALLBACK bookmarklet, Вы можете подобрать похожий шрифт, а так же изменять CSS свойства текста, пока не получите максимальное сходство с оригиналом. Так же Вам нужно помнить, что как только нужный шрифт загрузится, нужно заменить запасной вариант на основной.

Автор: Kenan Yusuf

Оригинал: Fake it 'til you Make it CSS