Представляем Discourse Splash — визуальный прелоадер, отображаемый во время загрузки ресурсов сайта

Новости и события Объявления
,
1

Discourse — это одностраничное JavaScript-приложение.

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

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

Как это выглядит?

Мы уже какое-то время использовали эту функцию на Meta, так что вы, возможно, уже видели её. Если нет, вот как она выглядит.

Как это работает?

Если пользователь заходит на ваш сайт Discourse, и приложение не будет проанализировано в течение следующих двух секунд, мы покажем экран заставки. Таким образом, это зависит от времени соединения плюс 2 секунды.

Мы не отображаем экран заставки для пользователей с быстрыми устройствами или соединениями.

Как мне получить это?

Это функция в ядре, и настройка включена по умолчанию, поэтому всё, что вам нужно сделать, это обновиться до последней версии. Если, по какой-то случайности, вы экспериментировали с добавленной нами настройкой и не видите её, убедитесь, что у вас включена настройка сайта splash_screen.

В чём преимущества?

Помимо показа чего-либо пользователям на медленных устройствах или соединениях, эта функция также сокращает задержки FCP/LCP на сайтах Discourse. Мы создали внутренние инструменты для отслеживания FCP/LCP на Meta, и вот как выглядят результаты.

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

Есть ли ещё что-то, что мне нужно знать?

Текст «Загрузка», отображаемый на экране заставки, основан на строке перевода preloader_text. Наше сообщество было замечательным, и этот текст уже переведён на многие языки. Если вы предпочитаете другой текст, вы можете настроить эту строку по адресу /admin/customize/site_texts?q=preloader_text на вашем сайте.

Экран заставки никоим образом не замедляет работу вашего сайта и отображается только во время загрузки ресурсов сайта. Как только сайт готов, экран заставки немедленно удаляется. Между моментом готовности сайта и удалением заставки нет задержки.

67 лайков
Google Largest Contentful Paint / LCP Issues - Any Easy Fixes?
Sudden drop in traffic
Google May 4th Core Update impact on Discourse forums
How to optimize loading progress when access integrated forum form APP?
Show a loader starting page for slow connections?
Paid - Pass core web vitals and speed up site
Theme components and Largest Contentful Paint (LCP)
Personal branding for the splash screen
Defer javascript and show interim content on initial page load
What is going on when the site is loading?
Need help improving core web vitals
Personal branding for the splash screen
How to disable "preloader-image" on Discourse instance?
Sudden drop in traffic
Sudden drop in traffic
2

Интересно было бы узнать, совпадают ли ваши внутренние данные с данными, которые есть в Google Search Console по показателям CWV.

6 лайков
3

Мы используем собственную библиотеку Web-Vitals от Google для внутренних метрик, поэтому они будут совпадать. Просто информация в Search Console имеет более широкий цикл обратной связи, поэтому мы зафиксировали эти данные самостоятельно, чтобы быстрее итерировать решение.

Вы также можете проверить новые значения LCP с помощью инструмента WebPageTest.

11 лайков
4

Выглядит отлично!

Знаю, это может прозвучать как деталь для гиков, но можно ли изменить цвета кружков в индикаторе загрузки? :grin:

4 лайка
5

Для тех, кто хочет изменить загрузчик, вот файл:

10 лайков
6

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

После того как изменение будет применено на вашем сайте, точки на сплэш-экране будут использовать цвета из вашей текущей темы.

19 лайков
How to customize the loading splash screen?
Change loading animation
Personal branding for the splash screen
Which color scheme does the preloader use?
7

Я думаю, что вместо этой анимации для единообразия следует показывать стандартный спиннер Discourse. Хотя это просто моё мнение.

2 лайка
8

Отличная функция, теперь она есть в последнем обновлении.

Я бы подумал, что приоритетнее, чем забота о декоре, — это синхронизация с тёмной темой. Внезапный всплеск белого на весь экран при включённой тёмной теме — это настоящее испытание для глаз, особенно в тёмной комнате! :face_with_spiral_eyes:

Пожалуйста, добавьте :sunglasses:, чтобы сохранить согласованность с тёмной темой.

3 лайка
Opening Discourse flashes white when on dark mode
9

Как я понимаю, мы уже синхронизируем тёмный фон, @Johani?

Проблема в том, что серверу может потребоваться несколько секунд, чтобы сообщить нам, что мы имеем дело с тёмной темой. Мы могли бы улучшить загрузку со второй попытки с помощью магии Service Worker, но это очень-очень сложная задача.

4 лайка
10

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

Однако, когда я авторизован как пользователь, для которого тёмная тема включена по умолчанию, экран загрузки возвращается к белому.

Так что, возможно, я прав, утверждая, что это уже на 50% работает как ожидается. :disguised_face:

Я не проверял это, возможно, кто-то другой попробует.

2 лайка
11

Да, я протестировал это сегодня. Такое поведение: работает, когда пользователь не авторизован, но после входа в систему с темной темой отображается белый экран. Если вы сможете сделать так, чтобы поведение было таким же, как при автоматическом определении темной темы ОС, то проблема будет решена.

4 лайка
12

Как ни странно, похоже, что это зависит от того, установлен ли в моей ОС светлый или тёмный режим, и Discourse делает обратное тому, чего я ожидаю. В основном, когда установлен тёмный режим, Discourse мигает белым, а когда установлен светлый режим, Discourse показывает тёмную страницу до загрузки контента.

Вот тёмный режим. Обратите внимание, что он начинается с тёмного (iOS ожидает получения данных с сервера), затем мигает белым (первоначальная загрузка страницы для Discourse, я думаю), затем загружается установленная мной тёмная тема:

А вот светлый режим. Он начинается с белого (iOS ожидает получения данных с сервера), затем становится тёмным (первоначальная загрузка страницы для Discourse, я думаю), затем остаётся в установленной мной тёмной теме:

5 лайков
13

Интересно! Спасибо за видео, @Johani посмотрит и отпишется.

7 лайков
14

Да, именно так, отличный пример с видео!

Я знал, что не схожу с ума! :crazy_face:

3 лайка
17

@Johani Я обновил последний коммит тем, что, как я предполагал, должно было стать исправлением, или, надеюсь, исправлением, но не уверен, что это что-то изменило (iOS, Safari / macOS Safari)

Мое подключение сейчас слишком хорошее, чтобы легко воспроизвести проблему. Позвольте мне найти какой-нибудь модем или что-то в этом роде… :rofl:

3 лайка
18

На компьютере вы можете ограничить скорость соединения с помощью инструментов разработчика браузера: How to perform Network Throttling in Chrome | BrowserStack

Однако насчёт мобильных браузеров я не уверен.

3 лайка
19

Спасибо, я не использую Chrome, но посмотрю на инструменты XCode и настрою ограничение скорости.

У меня появилось немного больше времени, и я могу подтвердить, что ситуация осталась прежней.

3 лайка
20

Это, возможно, связано с белыми вспышками, поэтому я размещаю это здесь.

На iPhone в светлом режиме верхняя панель тёмная. Это ожидаемо, так как она соответствует используемой мной тёмной разметке Discourse.

image
image750×1334 137 KB

На iPhone в тёмном режиме верхняя панель светлая. Это неожиданно и, как и белая вспышка, похоже, указывает на то, что какая-то особенность разметки убеждает телефон, будто страница белая. Я делаю такой вывод, потому что Safari на iPhone пытается окрасить верхнюю панель в основной цвет просматриваемого вами сайта.

image
image750×1334 136 KB

4 лайка
21

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

Я внес несколько исправлений:

Если обычная схема тёмная, используем её. Если светлая — используем светлую схему для светлого режима ОС и тёмную схему для тёмного режима ОС (если она установлена).

Проблема, а также эта:

теперь должны быть исправлены. Спасибо за сообщения :+1:

11 лайков
22

:+1: Круто, с нетерпением жду возможности попробовать это!

Предложение — Брендинг

Возможно ли добавить возможность базовой кастомизации логотипа над анимированными точками или использовать логотип (изображение размером с favicon) для заполнения самих «точек», либо применить фиксированное изображение низкого разрешения фиксированного размера (если возникают проблемы с загрузкой и скоростью)?

Другой пользователь предложил вернуть анимированный круг загрузки — это знакомый элемент интерфейса Discourse. Мне кажется, это отличная идея для обеспечения согласованности UI/UX. Её можно дополнительно улучшить, предоставив возможность указать базовое статическое изображение или логотип сайта. Это поможет пользователю оставаться сориентированным во время переходного состояния загрузки, что повысит качество пользовательского опыта и уверенность пользователя.

Дополнительно: вероятно, хорошим значением по умолчанию будет использование изображения из текущих настроек брендинга, favicon или «логотипа малого размера».

6 лайков