Блог

Избегайте сложных макетов и их подтормаживания

Как оптимизировать сайт таким образом, чтобы его «любили» и поисковые системы, и пользователи? Ни первым, ни вторым не нравятся медленные страницы. И уже не важно насколько актуальный контент, если его загрузки приходится ждать вечность. Терпение — не конёк современного человечества и терпеливых находятся единицы. А из-за этого снижается конверсия, и как следствие — страдает бизнес.

Сайт — это не просто картинка с красивым наполнением, каким видит его среднестатистический пользователь. Это сложный набор инструментов, файлов, программ, модулей и прочих инструментов, которым его наполняют веб-разработчики, чтобы человек увидел на экране своего устройства именно то, что ему нужно. И даже одна незначительная ошибка в любом из них может привести к подтормаживанию. И если сайт не оптимизирован, то таковых на нём набирается большое количество.

Мы не только разрабатываем страницы, но и проводим оптимизацию сайта в соответствии с требованиями пользователя и поисковых систем. Для этого требуется выявить все проблемы и устранить их. Оптимизировать сайт качественно нельзя, если поиск ошибок осуществлялся единожды или для этого применялся только один инструмент. Необходимо проводить тестирование как минимум в течении недели и в разное время. Только после этого можно составлять алгоритм работы на основании полученных данных. Мы работаем именно таким образом, а потому, после нашей оптимизации, минимизации и проведения всех необходимых настроек, повышается ранжирование страницы и конверсия.

Одной из причин медленной загрузки могут быть слишком обширные, сложные и подтормаживающие макеты. Этого необходимо всячески избегать. Каким образом это сделать мы и разберёмся.

Что такое макет на сайте и каковы его функции

Макет является источником для браузеров, откуда они и берут всю информацию о геометрии сайта, а точнее — его элементов. Это значит, что именно макет даёт понять, каким образом на странице будет располагаться тот или иной контент и каков его размер. При этом, каждый элемент имеет открытую и скрытую информацию о размере. Она основывается на CSS, которые использовались, содержимом самого элемента или данных о родительском файле. Стоит учитывать, что во всех браузерах кроме Firefox, макет имеет название «Layout», что значит «перепасчёт макета». В Firefox он обозначается «Reflow» – «перерасчёт дерева отрисовки». На самом же деле — это не просто идентичный процесс, а один и тот же.

При этом, стоит учитывать целый ряд факторов:

  • Установить выборочный перерасчёт невозможно, он выполняется для всего документа в целом
  • На производительность влияет число элементов DOM, поэтому если перерасчёта можно избежать, то нужно это сделать
  • Всегда обращайте внимание какова производительность модели макета. Необходимо помнить, что обновлённая версия Flexbox работает быстрее старой, а также тех моделей, которые основаны на float
  • Лучше избежать синхронного перерасчета, который осуществляется в принудительном порядке. Для этого, сначала изучите значения стилей и только после этого вносите в них корректировки.

Когда требуется перерасчёт макета и что сделать, чтобы процесс не тормозил систему

В процессе проведения перерасчета, макет потребляет ресурсы. Их количество зависит от сложности, а также числа элементов, которые требуется рассчитать. Если меняется стиль, браузеру необходимо провести проверку на предмет пересчёта любого изменения для дерева визуализации. Любые геометрические свойства, такие как влево, вправо, вверх или вниз требуют перерасчета макета.

В подавляющем большинстве случаев, при перерасчете задействован весь документ, а не только та часть, которая была изменена. И если в документе множество элементов, то системе потребуется много времени, чтобы обнаружить и обработать все эти элементы.

В случае, когда перерасчет является неизбежной мерой, требуется точно определить время, которое понадобится для проведения данной операции. Сделать это можно используя Chrome DevTools. С точностью определив период работы, можно проанализировать является ли именно перерасчет причиной недостаточной производительности.

Для этого:

  • Откройте DevTools
  • Выберите вкладку Timeline

После этого, проводите на своём сайте любое взаимодействие — открывайте вкладки, переходите со страницы на страницу, просматривайте видео и т.д. Спустя время, остановите запись и программа сам выдаст вам данные о работе сайта.

Flexbox для предыдущих моделей макета

В сети Интернет можно найти различные модели макетов. В зависимости от из разновидностей, поддержка будет более или менее обширной. Наиболее старой моделью макетов является CSS. Она позволяет при отображении страницы на экране использовать три типа позиционирования — относительное, абсолютное либо плавающие элементы.

Если использовать данные CSS в чистом виде, то на из перерасчет потребуется гораздо больше времени, нежели при запуске с помощью Flexbox. Стоит учитывать, что использование Flexbox возможно не всегда и возможно, потребуется воспользоваться Float, который имеет более широкую поддержку. В любом случае, необходимо протестировать все доступные модели и только после этого определиться, какая из них влияет на сайт наилучшим образом и при какой тратиться наименьшее число ресурсов.

Не стоит использовать синхронный перерасчет макета

При выводе информации на экран устройства, порядок действий системы таков:

  1. JavaScript
  2. Style
  3. Layout
  4. Paint
  5. Composite

Соответственно, первоочередной в этой цепи JavaScript. После него появляются стили и только следующим этапом идёт перерасчёт макетов. Задача любого веб-разработчика этот процесс ускорить. JavaScript позволяет провести настройки таким образом, чтобы перерасчёт макета оказался на первом месте. Это так называемый, принудительный синхронный перерасчёт макета.

Казалось бы, всё правильно и это позволит провести загрузку скорее. Но, на самом деле — это не так. Если все данные известны и применяются значения из старого кадра, то запрашивать их синхронно можно. А вот если, к примеру стиль, был изменён до того, как запросили его высоту — то всё гораздо сложнее. Получается, что сначала браузер запускает перерасчёт, потом видит, что стиль изменён и определяет правильное положение. Эта работа никому не нужна и слишком ресурсозатратная.

Как избежать подтормаживания макетов

Любой квалифицированный веб-разработчик, взглянув на код приведённый в примере сразу скажет, что он в корне неправильный. А такие коды встречаются сплошь и рядом:

function resizeAllParagraphsToMatchBlockWidth() {

// Puts the browser into a read-write-read-write cycle.

for (var i = 0; i < paragraphs.length; i++) {

paragraphs[i].style.width = box.offsetWidth + ‘px’;

}

}

Это всего лишь запись, которая рассказывает браузеру, какой должна быть ширина абзацев. Но проблема в том, что при подобном коде, значение box.offsetWidth будет считываться каждый раз. А это ещё хуже, чем синхронный перерасчёт. Поэтому, при написании любых, даже самых незначительных на первый взгляд кодов, необходимо быть максимально внимательным и перепроверять всё по несколько раз различными инструментами.

Похожие записи