Медленно работающий сайт требует срочной оптимизации. Проводить её наобум нельзя, она требует выполнения чёткого алгоритма. По большому счёту — это работа для грамотного веб-разработчика, так как корректировать нужно коды, файлы, скрипты и влезать глубоко в «начинку» сайта. Здесь действует в том числе и врачебное правило — не навреди. Наша команда работу с сайтом выстраивает поэтапно — от многоуровневого тестирования, оптимизации, минимизации, устранения прочих проблем, до его перезапуска. Проработанные страницы получают наивысшие балы поисковых систем, что существенно увеличивает конверсию. При создании сайта с нуля, изначально необходимо учитывать все современные требования к структуре и контенту, а также удобство дальнейшей работы с ресурсом.
Потери скорости сайтов всегда происходят на этапе рендеринга — отрисовки страницы. Это может быть связано и с расположением серверов, и с не оптимизированным JavaScript, и со шрифтами и с другими файлами и элементами, которые участвуют в процессе. Чем их больше, и чем меньше они приведены в порядок, тем дольше пользователь будет наблюдать белый экран. Соответственно, вероятность отказа существенно возрастает. Одним из этапов оптимизации является правильная компоновка. Необходимо использовать свойства, которые вызывают исключительно компоновку и тщательно следить за числом слоёв.
Что такое компоновка и что о ней нужно знать
Суть самого понятия «компоновка» понятна из названия. Компоновка — это отдельный процесс, в течении которого все части сайта, которые прорисовываются во время загрузки сводятся в единое целое. И уже таким образом они отображаются на экране устройства в готовом виде.
Данный процесс необходимо сделать максимально эффективным. Поэтому, работая с компоновкой, необходимо помнить о нескольких факторах и хитростях:
- Чтобы достигнуть эффекта анимации, нужно изменить свойства opacity и transform
- Переместить на разные слои движущиеся элементы лучше всего применяя translateZ либо will-change
- Слишком большое количество слоёв использовать не стоит, так как они занимают место в памяти и ими необходимо управлять
Среди вышеперечисленного можно выделить два основных элемента, которые оказывают существенное влияние на производительность. Таковыми является количество слоёв, требующих управления и свойства, использование которых необходимо для анимации. На них стоит остановиться более детально.
Изменение свойств opacity и transform для достижения эффекта анимации
Наиболее производительная версия конвейера пикселей исключает макет и прорисовку. Она предусматривает исключительно изменение самой компоновки. Получается следующий алгоритм:
- JavaScript
- Style
- Composite
Для достижения данного результата потребуется изменять исключительно те свойства, которые может обрабатывать только компоновщик. Для современных веб-мастеров их доступно только два — opacity и transform.
Для того, чтобы данные свойства применить в отношении элемента, он должен быть расположен на отдельном слое. Поэтому, его нужно создать и перенести туда объект.
Перемещение объектов для анимации на отдельные слои
Эффективная работа с элементами для анимации требует их расположения на отдельных слоях. Это в том числе, необходимо для того, чтобы упростить прорисовку и сократить её области. В то же время, не стоит злоупотреблять чрезмерным количеством слоёв, чтобы не перегружать память. Всё должно быть в рамках разумного.
В новых версиях браузеров, которые поддерживают will-change, нужно использовать следующий код:
.moving-element {
will-change: transform;
}
В предыдущих версиях, где поддержка will-change отсутствует, алгоритм будет несколько иным:
.moving-element {
transform: translateZ(0);
}
Что мы имеем в итоге? Браузер получает предупреждение, что ему в скором времени придётся столкнуться с изменениями. Будучи предупреждённым, он получает возможность провести подготовительную работу. И в зависимости от сути и направленности изменений принять решение, что именно нужно сделать. В данном случае — это будет создание отдельных слоёв.
Как управлять слоями почему важно избежать их чрезмерного количества
Понимая, что чаще всего размещение элементов на отдельных слоях позволяет улучшить производительность, вполне обоснованно возникает желание создать их отдельно для каждого. Выглядит это приблизительно таким образом:
* {
will-change: transform;
transform: translateZ(0);
}
Таким образом, браузер должен понять, что вы указываете ему разместить каждый элемент на свой персональный слой. И здесь возникает конфликт. Каждый слой будет требовать и памяти, и управления, а это далеко не всегда проходит бесследно. Не все пользователи просматривают сайт на мощных устройствах. И если у устройства ограниченный объём памяти, то все усилия не просто сойдут на нет, а сделают страницу ещё более заторможенной.
Текстура каждого отдельного слоя должна быть загружена в графический процессор, а пропускная способность между графическим и центральным процессором имеет ограничение по пропускной способности. Подобные ограничения существуют и в объёме памяти графического процессора. Поэтому, каким бы великим не был соблазн, не стоит создавать собственные слои для всех элементов, если в этом нет острой необходимости.
Для того, чтобы провести анализ слоёв, можно использовать Google DevTools. Данный инструмент позволит определить количество слоёв и время на их компоновку. На основании полученной информации делаются выводы почему слои были созданы и как ими правильно управлять.
