0
Заголовок темы

Особенности загрузки страниц в Adobe Muse версий 2015.2.х - 2017.х

Сегодня хочу обсудить такую тему, как поведение сайта Muse в момент загрузки страницы.

Я помню времена, когда в сети то и дело были обсуждения о том, что страницы Muse загружаются "криво", а именно, при загрузке документа происходили подёргивания, подпрыгивания и разрушение вёрстки, пока страница полностью не загрузится (пока не подгрузятся все файлы и скрипты). Особенно это проявлялось у начинающих юзеров, когда вёрстка макета создана как попало, не последовательно.
Боролись мы с этим при помощи виджетов "прелоадеров", которые скрывали всю эту вакханалию.

С тех пор, как вышла версия программы с инструментами адаптивной и респонсив вёрстки, и начиная с версии Muse 2015.2, все заметили, что при загрузке сайты стали вести себя по-другому. Теперь все эти подёргивания и подпрыгивания не видны, а страница появляется резко и полностью, но спустя некоторое время. В результате, посетитель сначала видит белый экран, который появляется от долей секунд, до 3-7 секунд. Иногда (особенно, если страница довольно большая и "тяжёлая") этот эффект настолько неприятен, что посетитель сайта даже может не дождаться и закрыть страницу.
Такой эффект связан с тем, что сейчас контент (всё, что внутри тега body в документе) не показывается, пока не подгрузятся все скрипты и чем больше виджетов установлено (а значит, как правило и больше скриптов), тем больше мы получаем такой негативный эффект.

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


Показываем контент сразу, не дожидаясь загрузки скриптов

Нам потребуется вставить небольшой код в секцию head сайта. Он принудительно переназначит css-правило, которое изначально скрывает контент до полной загрузки скриптов. В результате, мы получим эффект, будто страница загрузится мгновенно. Эффект будет именно визуальный и на самом деле это не ускорит скорость загрузки страницы, тем не менее, мы избавимся от длительного показа "белого экрана".

Код очень простой:
<style>.js body{visibility:visible!important;}</style>

Вставляем его в head через "Свойства страницы":

Как визуально ускорить скорость страницы сайта Adobe Muse?

Нажимаем "ОК" и готово. Проверяем в предпросмотре в браузере.

Пример того, что у вас должно получиться: muwilab.ru/uroki/siteload

 

Создаём прелоадер без специальных виджетов и смягчаем эффект появления конетента

Этот способ рекомендую применять, если на сайте используются разные виджеты (особенно, на первом экране), если используются нестандартные веб-шрифты (для которых требуется некотрое время на подгрузку), в результате чего, могут наблюдаться подёргивания объектов и текстовых фреймов при загрузке.
Во-первых мы избавимся от "немого" белого экрана, во-вторых мы визуально смягчим появление контента на странице.

Нужно вставить следующий небольшой код:
<style>
html{height:100vh!important}
body,img{
-webkit-animation-duration:3s;
              animation-duration:3s;
-webkit-animation-name:load;
              animation-name:load;
}
@keyframes load{
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes load{
    from {opacity:0;}
    to { opacity:1;}
}
</style>
Вставляем его, опять-же, в head:

Делаем прелоадер стандартными средствами Adobe Muse

Нажимаем "ОК" и переходим к следующему шагу.
Далее, нам нужно загрузить gif-анимацию прелоадера (картинка, которая будет показываться на время загрузки страницы). Хотя это не обязательно должна быть gif-анимация, а может быть любая статичная jpg/png картинка.

Загружать её будем очень просто, используя стандартные средства:

Подключаем gif прелоадер на сайт Muse


Пример того, что у вас должно получиться: muwilab.ru/uroki/siteload/load2.html

Анимированные картинки для вашего прелоадера можно скачать на сайте preloaders.net — на данном сайте вы сможете подобрать анимацию для прелоадера на любой вкус и цвет, их там просто тонна.
Таким образом, вы сможете сделать собственный прелоадаер на сайте Muse, стандартными средствами и без дополнительных виджетов. Более того, это будет работать в разных версиях программы и на 100% совместимо с остальными виджетами, которые используются у вас на сайте.

Внимание! Вышеописанные два метода не могут использоваться совместно. Т.е. применяйте либо то, либо другое, в зависимости от того, что хотите получить.

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

А чтобы не забыть код, добавьте эту страницу в закладки, или поделиться в соцсетях у себя на стене.

 
Обновлено 4 Фев 2017, 15:15
Ребята, вы читаете мысли!!!! Сижу я и пытаюсь решить именно проблему с загрузкой сайта и тут от вас уведомление!!! Захожу и там как раз то, что нужно именно сейчас. Вы просто молодцы!!!
У меня второй вариант не подходит, т.к. заливка в браузере стоит уже .
Прелоадер даже не нужен. Всё и так показывает плавно и красиво. А если есть заливка в браузере, так это лучше чем прелоадер даже.
Вот сделал по 2-му варианту. Всё класс!!
Google PageSpeed Insights показывает 79 для мобильной версии и 86 для ПК. Чётко!

http://scorpion.makart-design.ru
Обновлено 4 Фев 2017, 19:09
makart, на сайте все равно белый экран, пока не загрузится контент. что-то не то вы настроили там...
Спасибо. Уже лучше.
 
Добрый день! А код на каждую страницу надо вставлять?
Добрый день! А код на каждую страницу надо вставлять?
На какую страницу вставите, на той и будет работать. Если надо на все, то вставляем в страницу-шаблон.
1ый способ заменяет небезывестный виджет Ракета от ТТ? Или это разные методы.
А как сделать так, чтобы на дисплеях ретина прелоадер отображался корректно? 
Огромное спасибо! Вопрос очень актуальный! Из-за него предпочитаю работать в 2015.0.2 (там такой проблемы нет). Первый способ реально помогает в больших сайтах!
Спасибо, друг! Одной строчкой решил проблему, пока остальные умничают. 
Создал адаптированный, резиновый одностраничник, но эффект белого листа почему то появляется на некоторых мобилках, при чем с нормальным железом. Сделал все вышерекомендованные методы, не помогло. Хотя другие лендинги не адаптированные и некоторые даже довольно тяжелые, отрываются на этих же мобилках отлично. На смарте Meizu M1 note, прелоадер крутится бесконечно и сайт не загружается, но иногда с 10 раза сайт все же загружается. В чем пролема не могу понять.
Создал адаптированный, резиновый одностраничник, но эффект белого листа почему то появляется на некоторых мобилках, при чем с нормальным железом. Сделал все вышерекомендованные методы, не помогло. Хотя другие лендинги не адаптированные и некоторые даже довольно тяжелые, отрываются на этих же мобилках отлично. На смарте Meizu M1 note, прелоадер крутится бесконечно и сайт не загружается, но иногда с 10 раза сайт все же загружается. В чем пролема не могу понять.
Не видя вашего конкретного примера, сложно сказать. Может быть всё, что угодно. Начиная от тяжелых, неоптимизированных картинок, большого кол-ва лайтбоксов и заканчивая ошибками js, вызываемых какими-либо виджетами.
Ответа нет, ладно.
Обновлено 16 Июн 2017, 15:10
Спасибо огромное) Так просто, оказывается, решается эта проблема с белым экраном при загрузке... yes
1-й вариант - то, что я так долго искал. Лучей добра автору)
Подскажите, пожалуйста, подходит ли первый способ, если на лендинге установлены два виджета ("Простая форма 2.0" и ещё один типа галереи)?
Сделал лендинг очень нагруженный картинками + Fixlightbox + Конструктор анимации + паннели вкладок. Грузился сек 10....... 1 варинт ничего не дал. 2  вариант нормально сработал. загрузка плавная, но прелоадер так быстро исчезает. что его не заметно. ( пол секунды наверно) Регулировок продолжительности, как понял, нет.   http://rogov.bclas.ru/
Вообще считаю прелоадер очень полезной штукой для усиления УТП. 
Обновлено 29 Авг 2017, 22:43


Сообщение
Ник *
Ваш e-mail *
Защитный код *
 
Опрос
Каких виджетов, по вашему мнению, до сих пор не хватает (не достаточно раскрыта тема)?
Мувилаб рекомендует: быстрый хостинг с защитой от DDos атак!