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
Действительно, решили все вопросы одной строкой!
Искренне БЛАГОДАРЮ!
Успехов и процветания!
Большое спасибо, за такую помощь! Отличное решение!
Подскажите пожалуйста, этот вопрос эже был задан, но Вы не оветили)
 1ый способ заменяет небезывестный виджет Ракета от ТТ? Или это разные методы.

Если я использую 1ый способ, то мне не нужно покупать виджет 
Ракета от ТТ?

Или это совсем не этичный вопрос ?

 
Подскажите пожалуйста, этот вопрос эже был задан, но Вы не оветили)
 1ый способ заменяет небезывестный виджет Ракета от ТТ? Или это разные методы.

Если я использую 1ый способ, то мне не нужно покупать виджет 
Ракета от ТТ?

Или это совсем не этичный вопрос ?

 
Да. Это одно и то-же.
Называть простейший css-код виджетом, да ещё брать за это деньги, вот что "не этично", мне кажется)) Ну, да, ладно. Пусть останется личным делом его автора.
Большое спасибо, за ответ! На сэкономленные деньги приобрету у Вас ещё какой нибудь полезный виджет!!!!!

И отдельное спасибо за Ваши работы!
1 способ супер, но как зделать так, чтобы картинка и текст прогружались а после боковые панели, facebook, discus коменти і тп.


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