Для того, чтобы проект загружался и работал быстро даже при плохом интернет-соединении, мы рекомендуем применить шаги, описанные ниже:
Минимизируйте количество виджетов в проекте. Используйте одни и те же виджеты в разных версиях проекта — десктопной, планшетной и мобильной. А если какие-то из виджетов не нужны ни в одной из версий, удалите их вместо того, чтобы скрыть: в Readymag-проектах загружаются все виджеты, вне зависимости от того, скрыты они или нет. Вы можете быстро избавиться от всех неиспользуемых виджетов, если вы нажмете на кнопку с тремя точками рядом с Layers в панели виджетов и выберете опцию Remove unused. Обратите внимание: если вы изменяете параметры виджета в одной из версий проекта, в остальных версиях эти изменения применяются автоматически. Однако есть параметры, которые могут существовать в разных версиях независимо друг от друга, к примеру, размер и стиль шрифта. Подробнее о синхронизации виджетов в разных версиях вы можете прочитать здесь.
Распределите контент между страницами проекта: чем меньше виджетов на странице, тем быстрее она загружается.
Группируйте виджеты, это позволит не только повысить скорость загрузки проекта, но и сделает процесс работы над ним удобнее. Создать группу виджетов вы можете, вручную перетащив их в панели виджетов, или при помощи горячих клавиш — Cmd+G/Ctrl+G).
Оптимизируйте размер изображений. Все изображения, загружаемые в Readymag, сжимаются автоматически с минимальной потерей качества. Однако если файлы слишком тяжелые, мы рекомендуем дополнительно уменьшить их перед загрузкой в проект: например, при помощи TinyPNG. Readymag поддерживает GIF-файлы, но мы советуем использовать их только в случае крайней необходимости: вес таких изображений обычно больше, поэтому разработчики Google рекомендуют конвертировать GIF в формат .mp4 для повышения производительности сайта. В Readymag вместо GIF лучше использовать анимацию, когда это возможно.
Упростите мобильную версию. На мобильных устройствах чаще возникают проблемы с интернет-соединением. Чтобы минимизировать их, не перегружайте мобильную версию виджетами. Readymag предлагает для этого удобное решение — мобильный авто-лэйаут. Начните с мобильной автоверсии и скройте все ненужные виджеты.
Если в проекте по-прежнему остается большое количество виджетов и сократить его вы не можете, используйте прелоадер. Прелоадер — это изображение, которое закрывает экран целиком до полноценной загрузки проекта. Создать прелоадер вы можете при помощи анимации On Load с эффектом изменения прозрачности (Opacity) и задержкой (Delay).
Чтобы проверить производительность проекта, мы рекомендуем использовать сервис онлайн-аудита от Google — Lighthouse. Подробную инструкцию от Google вы можете найти здесь.