Yet another Conference 2013. Конкурс по ускорению отрисовки страницы. Наши результаты.

07.10.2013

Марина Лебедева

Недавно прочёл на Википедии статью «Теория разбитых окон» и меня она натолкнула на мысль, что это касается и кода. Если наплевательски относиться к нему, то его чистота, качество будет ухудшаться в геометрической прогрессии.

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

О самом задании писали в нескольких постах:

первый пост

второй пост

Итак, начнём. Исходные данные следующие → Задание по оптимизации. Оптимизацию будем проводить по условиям конкурса, тут всё честно.



Что уж тут сказать? В «Яндекс» постарались на славу. Как они писали, здесь включены все ошибки фронтенда какие только возможны, и я им верю.

Проведём оценку скорости для начала. Я думаю, это интересно не только нам насколько же мы продвинемся в процессе работы, но и вам. Скорость будет измеряться на локальной машине с самым простым OpenServer под Windows. Условия оценки в процессе работы будут неизменными.



Перед тем как заглянуть в код, присмотримся к цифрам и таймлайну. Время, мягко сказать, внушительное, загрузка 1.56 сек., 38 запросов, загрузок на целых 3Мб. Как мы видели на скрине выше, страница совсем несложная, но здесь обращаемся к серверу аж 38 раза. По условиям конкурса между запросами будет делэй в 30 миллисекунд. Таким образом, реальное конкурсное время загрузки этой страницы — 1.56+0.030*38 = 2.7 секунд.

  • 11 изображений;
  • 16 скриптов, один из которых с cdn Яндекса;
  • 4 css-файла;
  • 2 шрифта;
  • ну и, конечно же, html-страница с разметкой.

Итого, без просмотра и влезания в код можно прикинуть:

  • 11 изображений можно превратить в 1 спрайт;
  • с уверенностью в 97% можно сказать, что скрипты реально в этой странице не используются вообще;
  • таблицы стилей можно оптимизировать как по содержанию, так и по количеству файлов;
  • можно сжать и шрифты, но вероятность некорректного отображения в различных браузерах увеличится многократно, так что оставим их как есть.

После взгляда в код сразу стало понятно какая тут лапша. Чтобы так написать нужно не просто постараться, а постараться очень и очень хорошо.

Здесь есть всё:

  • пустые мета-теги;
  • комментарии;
  • img в html;
  • скрипты в html: одни — добавляют элементы в DOM, другие — вешают классы, меняют CSS стили элементов;
  • инлайновые стили div’ов и img;
  • ссылки без атрибутов;
  • помимо стилей через link есть ещё стили в style, которые перегружают стили из link;
  • символы через амперсанд;
  • @import в css;
  • скругление углов через css3;
  • body’s background — svg+xml через base64;
  • ссылки через http://www.
  • и так далее.

Даже если отбросить шрифты, то работа колоссальная.

Не буду подробно описывать каждый пункт, из списка выше, но прошёл по каждому из них и в дополнение выполнил сортировку свойств CSS, а так же минимизировал код CSS и html. В итоге получилась идентичная страница, поверьте мне, но со следующими показателями:



Итого мы получили:

  • вместо 38 запросов всего 7;
  • вместо 3Мб всего 1Мб;
  • время загрузки страницы 606мс, а загрузка DOM всего 443мс.

Пересчитаем данное время на конкурсные условия:

Было: 2.7(сек)

Стало: 606мс + 0.030*7 = 0.816(сек)

Таким образом, время загрузки страницы было сокращено на 0.954 сек (по конкурсным условиям на 1.884 сек).

Вот то, что мы получили на выходе → Код оптимизированный в «Devdigital».

Если необходима дополнительная оптимизация, то тут можно выполнить ещё 2 дополнительных шага, а именно:

  • Выставить Gzip / DEFLATE сжатие. (Об этом много статей в сети);
  • Оптимизировать шрифты.
  • Общее

Комментарии

Добавить комментарий

Вы вернулись, чтобы дочитать статью? Кликните на меня, я найду то место, где вы остановились.