Быстрая загрузка баннера. Как лучше реализовать?

Question

[zeaovede]

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

Примеры

https://dving.net/
https://elo-boosters.com/
https://elo-boost.net/

И вот, приведу пример аналогичного сайта, с типичной болячкой присущей всем старомодным сайтам.

Пример

https://eloboost.ru/

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

Answer 1

[KingAnton]

Во первых у них фоновая картинка весит ~50кб, у вас в два раза больше
Во вторых у вас в целом не хватает кэша на сайте, чтобы странички отдавались со скоростью обычного html
На третьем примере картинка загружается с такой же скоростью, как и на вашем сайте

Предзагрузите картинку, может поможет
<link rel="preload" href="image.png" as="image">

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

Comments

[zeaovede]

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

spoiler

https://Elo-Boost.ru

[KingAnton]

zeaovede, имею ввиду его отсутствие. На вашем сайте так вообще проблема ttfb 1.5 сек, это куда более важная проблема отталкивающая пользователей, чем загрузка фоновой картинки на первом экране

[zeaovede]

KingAnton, хорошее замечание. Вообще, это очень странно. По факту там кроме самого WP грузить особо то и нечем. Так как, если погрузить данную вёрстку на html, то загрузка происходит мгновенно. Попробуй теперь пойди разберись какую еще свинью подсунул wordpress

[zeaovede]

KingAnton, а сейчас можете посмотреть ttfb? Интересно, какое теперь показание у вас. Я пофиксил одну функцию на сайте, которая отвечала за прекращение обновление плагинов, тем, и ядра вордпресс. Как оказалось, она с php 7 плохо дружит. Возможно, я ошибаюсь. У меня такие показатели теперь

spoiler

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

[KingAnton]

zeaovede, сейчас в пределах нормы ~500мс

Answer 2

[Виктор Кожухарь]

1. Уменьшайте размер картинок по максимуму, насколько это возможно. Выбирайте форматы, позволяющие хорошо их сжимать. Но, главное тут - не переусердствовать.
2. Все статические ресурсы лучше хранить в CDN, а не на своём сервере. Они очень быстрые, располагаются по всему миру и выбираются ближе всего к пользователю. Есть у Яндекса, у Cloudflare и т.д.
https://yandex.cloud/ru/services/cdn

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