Оптимизация сайта не достигается простым набором инструментов. При проведении аудита к примеру от Google, будут выданы рекомендации, что нужно исправить. И здесь палка о двух концах. С одной стороны ошибки действительно нужно устранить, чтобы заслужить высокую оценку поисковой системы. А с другой, всё не так просто. Во-первых, не всегда стоит им доверять. Во-вторых — эти рекомендации не дают прямых инструментов для работы. Ну и главное, саму ошибку ещё придётся найти, а для этого одного тестирования не достаточно. Необходимо провести целую серию.
Если вас убеждают, что полностью настроить сайт и повысить его ранжирование поисковыми системами можно за день — это не соответствует действительности. На скорость загрузки влияет множество факторов. И тестирование необходимо проводить в несколько этапов, минимум в течении недели по 5-7 раз в день. Порой, результаты сильно удивляют даже опытных веб-разработчиков.
Наша команда проводит настройки сайта не влияя на его текущую работоспособность и доступность для пользователя. Выявив недостатки, мы в первую очередь исправляем критические, чтобы максимально быстро повысить скорость загрузки. И уже потом, разрабатываем модель, которую используют разработчики для проведения полномасштабной оптимизации. Только такие действия позволяют действительно повысить ранжирование страницы по скорости загрузки и снять все претензии поисковых систем.
Одним из элементов, которые влияют на скорость загрузки страницы и взаимодействие с ней, является прорисовка элементов. Без этого обойтись просто невозможно. Но опытные веб-мастера знают, как её упростить и сократить без потерь для внешней оболочки к которой привыкли пользователи.
Что такое прорисовка и почему она необходима
Прорисовка — это ряд действий при которых пиксели заполняются, компонуются и после этого выводятся на экран устройства пользователя. Другими словами, если этот процесс не будет происходить, то кроме белого экрана человек ничего не увидит. Довольно часто происходят ситуации, когда эта работа выполняется длительное время и этого следует избегать всеми возможными способами.
Прорисовку вызывает внесение корректив в любые свойства. Исключения составляют только «opacity» и «transform». Область прорисовки можно сократить. Наиболее простым решением является использование разных слоёв для размещения элементов и полная оптимизация изображений. Сложность прорисовки можно оценить применяя инструмент профилирования DevTools.
Стоит учитывать, что прорисовка всегда запускается в случаях:
- Когда происходит перерасчет макета. Это связано с изменением геометрии, а значит необходимо и навести порядок в пикселях
- Если меняются свойства, которые не связаны с геометрией, однако влияют на отображение страницы — цвет шрифтов, фон, наличие теней и прочее. При этом, сам макет пересчитываться не будет
Выявление проблем с прорисовкой при помощи DevTools
Качественная оптимизация сайта даже опытными разработчиками невозможна до тех пор, пока не будут найдены все ошибки. В случае с прорисовкой, всё обстоит аналогично. Для начала, необходимо выявить все области, на которые прорисовка будет распространяться. Как это происходит в DevTools. Перейдя в инструмент требуется нажать Escape. Откроется панель где нужно зайти в прорисовку и выбрать Show paint rectangles. При установке данного параметра, во время работы в Chrome, области прорисовки каждый раз будут подсвечиваться зелёным.
Казалось бы всё просто, но это не совсем так. Обычному пользователю эта информация ничего не даст. Здесь нужен действительно опытный веб-разработчик, который не только может настроить сайт, но и настроить сайт правильно. А всё потому, что зелёным может подсвечиваться весь экран, или те области, которые теоретически не должны этого делать. И тогда необходимо проводить серьёзную аналитику и искать «корень зла».
DevTools позволяет получить и более детализированные данные прорисовки при помощи профилировщика. Но, стоит учитывать, что он потребляет дополнительные ресурсы, поэтому использовать его нужно только по делу, поскольку результаты могут быть существенно искажены. Применив его и осуществив запись, можно получить данные об прорисованных объектах, затраченном времени, сложности и дополнительных вызовах. С этими данными специалисты по сайтам могут полноценно работать.
Перемещение элементов на отдельные слои
Стоит учитывать, что в процессе прорисовки далеко не всегда в памяти формируется одно изображение. Браузер может создать себе столько изображений или слоёв из которых он будет его компоновать, сколько ему требуется. И второй вариант значительно выгоднее.
А всё потому, что отдельные элементы, которые постоянно прорисовываются, становятся доступны для обработки каждый отдельно, а не в отношении всех элементов. Это схоже с работой в Photoshop, или другом редакторе, где можно упражняться с отдельным слоем, не трогая другие.
Чтобы создать новые слои эффективнее всего использовать функции CSS «will-change». Если добавить к нему значение «transform», то данное свойство создаст новый слой. Выглядит это таким образом:
.moving-element {
will-change: transform;
}
Если же браузер не поддерживает «will-change», придётся воспользоваться принудительным созданием нового слоя, путём трёхмерного преобразования:
.moving-element {
transform: translateZ(0);
}
Стоит учитывать, что создание большого количества новых слоёв — это тоже не совсем хорошо, так как они занимают место в памяти.
Как сократить области прорисовки
Вне зависимости от того, на одном или отдельном слое размещены элементы, прорисовку периодически выполнять всё-равно приходится. И очень часто, браузеры могут объединить несколько существующих областей в одну большую. Таким образом, они могут прорисовывать даже весь экран. Чаще всего это происходит в ситуации, когда есть заголовок вверху страницы и внизу и прорисовать нужно оба. В таком случае, браузер решит, что лучше всего прорисовать всё и сразу, хотя его об этом никто не просит.
Поэтому, требуется либо избежать анимации переходов и других элементов там, где это возможно. Либо сделать так, чтобы эти области не сильно перекрывались. В этом и будет состоять сокращение.
Как снизить сложность прорисовки
Вполне логично, что одни элементы будут прорисовываться быстрее, а вторые — медленнее. К примеру, событие «blur» с помощью которого вызываются тени и другие эффекты, требует больше времени, нежели просто прорисовать чёрный квадрат. Но, для CSS это понятно далеко не всегда.
Поэтому, проанализировав данные по загрузке, необходимо либо найти другие способы достижения желаемого результата. Либо принять решение, а так ли отдельные элементы нужны. Если для получения желаемого можно использовать другие средства или стили — это стоит сделать.
И отдельно стоит коснуться прорисовки в процессе анимации. Её следует избегать всегда. Для эффективной загрузки, на каждый кадр у вас есть не более 10 миллисекунд, а этого времени слишком мало. Особенно, если речь идёт о мобильных устройствах или не стабильном соединении.
