Оптимизация веб-страницы: подробное руководство
Путеводитель по тому, как проводится оптимизация загрузки веб-страницы в современных реалиях, подробно рассмотрены все приемы.
Интернет развивается с невероятной скоростью, как и разрабатываемая нами веб-платформа. Зачастую мы не задумываемся о том, как обстоит дело у наших клиентов. Лишь бегло взглянув на сегодняшнее состояние веба, можно заключить, что мы абсолютно забыли, насколько он изменчив.
Так что же есть современный интернет?
Только у 46% из 7.4-миллиардного населения Земли есть доступ в интернет. Средняя скорость соединения — 7Мб/с. Что более важно, 93% пользователей сидят в интернете с мобильных устройств, поэтому сегодня непростительно забывать о мобильных платформах.
Наши сайты не в лучшей форме - сегодня среднестатистический сайт весит столько же, сколько оригинальный Doom (порядка 3 Мб). Справедливости ради стоит заметить, что для статистики лучше использовать медианы (прочтите статью Ильи Григорика «Идеальная средняя статья — это миф»). Медианный сайт весит около 1.4Мб. Изображения занимают примерно 1.7Мб, JavaScript — 400Кб. Этой проблеме подвержены не только веб-платформы. Не лучше обстоит дело и с нативными приложениями.
Как люди, связанные с технологиями, мы чувствуем свое превосходство. С современными ноутбуками, телефонами последних моделей и быстрым интернетом просто забыть, что это есть не у каждого.
Как учесть эти нюансы в дизайне и разработке, не нанеся при этом ущерб представлению?
Оптимизация статики
Один из наиболее эффективных, но редко используемых способов увеличения производительности состоит в том, чтобы понять, как браузер анализирует и хранит статику. Современные браузеры весьма успешно анализируют приоритет ресурсов прямо во время их парсинга. И именно здесь на сцене появляется критический запрос.
Запрос является критическим, если в нем содержится статика, необходимая для рендеринга контента в рамках пользовательского рабочего окна.
Для большинства сайтов это будет HTML, стили, логотип, шрифты и, возможно, изображения. Но на деле оказывается, что в это же время помимо них запрашиваются множество других, второстепенных вещей (JavaScript, трек-коды, реклама и т. д.). К счастью, мы можем контролировать это поведение, указывая приоритет подгрузки статики.
Благодаря <link rel="preload"> можно напрямую предписать высокий приоритет в очереди загрузки статический файлов, что может значительно оптимизировать UX.
Для многих критические реквесты до сих пор остаются черным ящиком, и на этом в большой степени сказывается недостаток в свободном доступе материалов на данную тему. Однако, недавно Бен Шварц (Ben Shwartz) опубликовал невероятно исчерпывающую и доступную статью по этому предмету. Также рекомендуется к прочтению материал Preload, Prefetch and Priorities in Chrome.
Для отслеживания приоритетов запросов можно использовать Lighthouse performance tool и Critical Request Chains audit, или следить за запросами во кладке Network в панели разработчика Chrome.
Оптимизация изображений
Картинки зачастую составляют львиную долю материалов веб-страницы, поэтому их оптимизация может в значительной степени повлиять на улучшение производительности пользовательского интерфейса. Существует множество стратегий и инструментов для устранения лишних байтов, но давайте зададим себе главный вопрос: «Существенна ли эта картинка для передачи идеи или достижения эффекта, которого я добиваюсь?» Если есть возможность обойтись без нее, вы сэкономите не только на пропускной способности, но и на запросах.
В некоторых случаях один и тот же результат достижим несколькими способами. CSS богат художественными инструментами: тени, градиенты, анимации, фигуры. Все это позволяет надлежащим образом стилизованным элементам DOM служить достойной заменой статическим изображениям.
Выбор правильного формата
Если избежать использования статики невозможно, важно правильно определить для нее наиболее подходящий формат. Первая ступень — выбор между векторной и растровой графикой:
- Вектор: не зависит от разрешения, как правило значительно компактнее. Идеально подходит для логотипов, иконок и простых изображений, основанных на геометрии.
- Растр: подходит для высоко детализированных изображений, например, фотографий.
После принятия этого решения, вам откроется широкий выбор: JPEG, GIF, PNG-8, PNG-24, или новейшие форматы, такие как WEBP или JPEG-XR. Как не ошибиться в выборе из такого широкого спектра?
- JPEG: для изображений с богатой цветовой палитрой (например, тех же фотографий)
- PNG-8: для изображений с малым количеством цветовой
- PNG-24: для изображений с прозрачными участками
- GIF: для анимаций
Экспериментальные форматы
В последнее время на арене появились несколько новых форматов: WebP, JPEG 2000 и JPEG-XR. Все они были созданы разработчиками браузеров.
WebP – самый популярный из них. Он поддерживает сжатие с потерями и без потерь, что делает его невероятно гибким. Сжатый без потерь WebP весит на 26% меньше PNG и на 25-34% легче JPG. Он поддерживается 74% браузеров, а Photoshop позволяет конвертировать в этот формат JPG и PNG.
Оптимизация инструментами и алгоритмами
Даже использование самых эффективных графических форматов не оправдывает игнорирования последующей оптимизации. Это — ключевая ступень.
Если вы выбрали SVG, который сам по себе относительно мало весит, он тоже должен быть сжат. Для этого существует ряд неплохих инструментов, таких как SVGO или SVGOMG. Также, поскольку SVG – формат, основанный на XML, его можно сжать с помощью GZIP на стороне сервера.
Для большинства других форматов прекрасным выбором будет ImageOptim. Еще в этом году Google представил Guetzli - открытый алгоритм, происходящий из прошлого опыта с WebP и Zopfi. Он позволяет добиться сжатия JPEG до 35%. Единственный его недостаток — низкая производительность: около минуты CPU на один мегапиксель.
Адаптивность
Десять лет назад можно было обойтись одним разрешением на все случаи жизни. Сегодня же, в эпоху адаптивного веба, оптимизация играет ключевую роль. Благодаря Responsive Images Community Group, веб-разработчики прекрасно подкованы и вооружены.
Оптимизация шрифтов
Возможность использования кастомных шрифтов — невероятно мощный дизайнерский инструмент. Но большая сила сопряжена с большой ответственностью. По статистике шрифты являются главными врагами производительности примерно на 68% сайтов.
Выбор правильного формата
Существует четыре веб-формата: EOT, TTF, WOFF и более новый WOFF2. TTF и WOFF используются чаще всего и поддерживаются более чем 90% браузеров. В зависимости от поддержки браузерами, самым оптимальным считается WOFF2, а для старых браузеров — WOFF. Достоинство WOFF2 заключается в том, что он подразумевает ряд кастомных препроцессорных и сжимающих алгоритмов, что позволяет уменьшить итоговый вес файла на 30% и существенно повысить возможности парсинга.
Ограничьте количество шрифтов
Вне зависимости от того, где хостятся шрифты, их количество, разновидности и стили существенно влияют на ресурсы производительности.
В идеале можно было бы обойтись одним шрифтом с обычным и жирным начертаниями.
Обозначьте стратегию загрузки шрифтов
Сначала браузер строит DOM и CSSOM; шрифты не будут подгружаться до тех пор, пока не встретятся в CSS-селекторе уже существующего узла DOM. Такое поведение ощутимо замедляет рендеринг текста, часто приводя к эффекту FOIT (Flash of Invisible Text).
Наиболее простым и эффективным решением может стать FOUT (Flash of Unstyled Text).
Font-display – новое свойство CSS, предоставляющее возможность решить проблему без использования JS. К сожалению, он поддерживается лишь частично (в Chrome и Opera) и все еще находится в процессе разработки в Firefox и Webkit.
Оптимизация JavaScript
Оптимизировать получение JavaScript – это только полдела. После того, как код будет загружен, он будет подвергнут парсингу, скомпилирован и запущен в браузере. Беглого взгляда на несколько популярных сайтов достаточно, чтобы понять, что gzipped JS после распаковки становится как минимум в три раза больше.
Избавьтесь от лишних зависимостей
В современных менеджерах легко проследить количество и размер всех зависимостей. Хорошими инструментами являются webpack-bundle-analyzer и Bundle Buddy. Визуальные инструменты позволяют обнаружить дублирование кода, самые большие затраты производительности, ненужные зависимости.
В VS Code и Atom есть расширение Inport Cost, делающее вес импортируемого пакета более наглядным.
В заключение немного о разделении кода
По возможности нужно всегда стремиться хранить и загружать только необходимое. Поэтому код должен быть максимально разделен и структурирован. Также стоит обратить внимание на динамический импорт и ленивую загрузку.
В данной статье были рассмотрены основные приемы оптимизации современных веб-приложений. Сегодня, в эпоху стремительного развития интернет-технологий, громоздкие веб-сайты прошлого уходят в небытие, и на смену им приходят новые принципы и парадигмы веб-разработки.