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ый способ заменяет небезывестный виджет Ракета от ТТ? Или это разные методы.
А как сделать так, чтобы на дисплеях ретина прелоадер отображался корректно? 


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

© Мувилаб 2016-2017