Клиентская оптимизация: 10+ способов ускорить фронтенд

В наше время фронтенд-разработчику недостаточно уметь верстать и писать javascript-код. Проекты растут, увеличивается их объем и сложность. Важной частью становится умение оптимизировать работу сайта, делать его быстрее и легче.

В этой статье я расскажу про 10+ способов оптимизировать веб-приложение с точки зрения фронтенд-разработчика. Также предложу Вам инструменты, которые помогут делать это веселее и приятнее.

Если говорить в общем, то вся оптимизация фронтенда сводится к двум типам задач. Первая - это ускорение передачи данных по сети. Состоит из двух подпунктов: уменьшение количества запросов к серверу и уменьшение объема передаваемых данных. И второе - ускорение работы приложения в браузере. А теперь подробнее.

1. Склеивайте js-скрипты и css-стили

Делайте как можно меньше запросов к серверу. js и css-код прекрасно подходят для этой задачи. Забудьте о приемах десятилетней давности, когда на сайте лежало два десятка js-файлов, и на каждой странице подгружались 5-6 из них. В идеале у Вас должен быть один js-файл и 1 css-файл. И этого достаточно.

Сейчас экономия пары десятков килобайт не стоит того, чтобы сделать один запрос вместо 20-ти. Грузите весь код одним разом, только позаботьтесь, чтобы на разных страницах выполнялись отдельные участки javacsript-ов. К тому же помните о кэше: один раз скачав файл, пользователь сохранит его в кэш браузера, и уже на следующих страницах Вашего сайта статика мгновенно загрузится из кэша, а не с удаленного сервера.

2. Сжимайте javascript, стили и html-код

Несмотря на то, что мы сделали всего один запрос на сервер, не стоит забывать, что объем данных тоже имеет значение. Минифицирование кода позволяет уменьшить объем данных до 40-50%, что никогда не будет лишним. Особенно это актуально для мобильных устройств.

Для минификации есть масса онлайн-сервисов, например, minifycode.com. Но гораздо удобнее использовать инструменты сборки фронтенда, например, grunt, gulp или webpack. На тему сборки с помощью gulp на webdevkin-е есть одна статья из целой серии, посвященной сборке фронтенда в веб-приложениях.

3. Оптимизируйте изображения

Часто нам не нужны 10-мегапиксельные фото на сайте. Мало того, что им можно уменьшить разрешение, так еще и дополнительно сжать картинки с минимальной потерей качества. Как правило, для веба супер-качества и не нужно. Также конвертируйте картинки из png в jpg, если Вам не нужна прозрачность.

Помочь в этом могут как графические редакторы вроде фотошопа (в них даже есть специальная опция "сжать для веба"), так и те же инструменты сборки, например плагины gulp-imagemin и imagemin-pngquant.

4. Делайте спрайты изображений

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

Вариантов сделать спрайты масса:

• - руками (фууу)
• - в онлайн-инструментах вроде instantsprite.com (нормально)
• - инструментами сборки (вообще круто)

5. Применяйте lazy load - ленивую загрузку изображений

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

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

Хотя кажется, что реализация ленивой загрузки сложна, на самом деле есть море плагинов, которые сделают всю работу за Вас. Например, плагин lazy load для jquery требует всего лишь подключить библиотеку, заменить в теге img атрибут src на data-original и запустить плагин одной строчкой кода. Усилий минимум - эффект значительный. Рекомендую.

6. Не ленитесь делать превью изображений

Капитанский совет, но просто удивительно, сколько людей пренебрегают этим простым правилам. Смотришь на красивую галерею на сайте с ajax-подгрузкой картинок и думаешь "какие молодцы". А потом замечаешь, что превьюшки на слайдере - это те же здоровенные картинки, только уменьшенные css-ом. И думаешь "ну и на хрена это все?"

Задачу по созданию превьюшек не назовешь фронтовой. Если это приходится делать Вам самим, то могу только посочувствовать. Обычно это делается или средствами специально приставленных людей, которые выполняют эту неблагодарную работу врукопашную или с помощью инструментов пакетной обработки изображений. Или, если Вам не чуждо человеколюбие, на стороне бекенда. Ресайз картинок выполняется как правило плагинами cms/фреймворков при загрузке изображений на сервер или при первом обращении к нужной картинке. В любом случае Вы, как фронтендщик, должны понимать, что именно Ваша забота - обеспечить максимально быструю загрузку клиентской части сайта. И проконтролировать нужных людей тоже.

7. Отдавайте статику с разных доменов/поддоменов

Если у вас небольшой проект, блог или сайт с котятами, не заморачивайтесь - никакого профита не почувствуете. Но если Вы, почем знать, разрабатываете второй ВКонтакт, то массу статики, да тех же фото, стоит разносить по разным поддоменам или, по-царски, доменам. Дело в том, что браузеры имеют ограничения по количеству потоков на загрузку ресурсов с одного (под)домена. Поэтому если у Вас есть громадная масса контента, то лучше позаботиться о ее раскидывании.

8. Подключайте js-код или файлы в конце страницы

А именно перед закрывающим тегом body. В первую очередь браузер должен загрузить контент, а только потом js. Конечно, если у Вас Single Page Application, то профита от этого совета не будет. Но не расстраивайтесь, если Вы занимаетесь SPA, то у Вас и так все хорошо :-)

9. Подключайте стили динамически (но осторожно)

Совет из разряда "на свой страх и риск". Попробуйте подгрузить стили уже после отрисовки голого html. Ускорение загрузки страницы будет, возможно, мизерное. А вот Ваш html может быть настолько страшен, что без стилей пользователям хватит четверти секунды, чтобы сбежать с сайта. В общем, пробуйте и решайте, нужно ли Вам это.

10. Избавляйтесь от лишних dom-элементов

Операции с dom - это одна из самых тяжелых частей работы браузера. Не делайте таблицы там, где достаточно двух плавающих div-ов. Не лепите лишние span-ы для красоты. Не делайте обертки для оберток контейнеров, если конечно, этого не требует javascript-логика.

В общем, делайте проще и стремитесь к минимализму.

11. Используйте нативный javascript вместо jquery

Не будем делать вид, что нам позарез нужен jquery для манипуляции dom. Просто мы к нему привыкли. Гораздо удобнее написать $('#myDiv'), чем document.getElementById('myDiv'). Но времена поддержки седьмых IE прошли, и если для Вас действительно критична оптимизация, переходите на нативный js - выигрыш по скорости работы с dom будет в десятки и сотни раз.

12. Не бойтесь навешивать id элементам dom для быстрого доступа к ним из javascript-кода

Верстайте только на классах, а айдишники оставьте для js. Это максимально быстрый способ получить доступ к нужному элементу. К тому же Вы скоро перестанете путаться в приоритетах применения стилей и всегда будете знать: если на этот элемент навешан id, значит javascript от него что-то хочет. А если навешан класс, то что-то хочет css.

13. Используйте css-анимации вместо javascript

Иногда очень прикольно запилить хитрую анимацию на js, но нужно всегда помнить, что это большая нагрузка на браузер. Не говоря уже о лишнем js-коде. CSS3 давно в почете и можно не стесняться пользоваться transitions и keyframes.

Конечно, стоит брать во внимание поддержку этих свойств нужными браузерами. Часто анимации носят декоративный, дополнительный характер. Если в браузере пользователя css-transitions не поддерживаются, то он просто увидит статичную картинку. Но если реализация анимации крайне необходима, то стоит дублировать ее javascript-ом.

14. Избегайте тяжелых операций с dom при скроллинге/прокрутке страницы и разберитесь с throttle и debounce

Наши любимые клиенты очень любят смотреть, как при изменении размеров окна на экране происходит волшебство: меняются местами блоки, а из-за края монитора выпрыгивают зайчики. К сожалению, восторженные директора и менеджеры при этом не слышат, как начинает завывать старенький кулер на процессоре и не видят, как скачет расход памяти в браузере. А ведь далеко не у всех посетителей сайта на руках macBook с core i7 и 8 Гб памяти.

Конечно, некоторую долю преобразований можно сделать, не вмешиваясь в dom, исключительно стилями и media query. Но часто приходится подключать и тяжелую артиллерию в виде старого доброго js. И чтобы при этом у Вас не взвыл браузер и посетитель сайта, разберитесь с такой темой: Как и зачем использовать throttle и debounce

15. Изучайте ajax-запросы и анализируйте передачу данных с сервера

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

Обсуждайте с коллегами-бэкендщиками обмен данных между клиентом и сервером. Обговаривайте формат данных и api. Стройте REST-сервис вместе. В конце концов, именно Вы знаете, какие данные нужны на клиенте.

Если Вам нужна общая информация, например, о покупателе интернет-магазина, выбросьте из запроса лишние данные о всех его заказах с наименованиями, ценами и скидками. Вынесите это в отдельный запрос. Чем проще и легковеснее будут ваши запросы, тем легче с ними работать и меньше нагрузка на сервер.

Откажитесь от XML - как ни странно, он еще довольно часто используется.

Если проект это позволяет, переносите логику с сервера на клиент. Получайте с сервера сырые данные и обрабатывайте их как Вам нужно на клиенте - это будет максимально быстро. underscore.js и lodash.js помогут в этом деле и очень разнообразят Вам жизнь. Работать с данными интереснее, чем с кнопочками и инпутами.

Не бойтесь сами разбираться с серверной частью проекта. Если у вас mongodb, то тем более флаг Вам в руки - работа с ней это чистый javascript. Возможно, Вы еще сможете предложить лучшие решения по организации коллекций и выборке данных. В любом случае, вряд ли Вас кто осудит, если это произойдет не с первого раза.

16. Найдите и изучите подходящие инструменты

Изучите один или несколько инструментов сборки проектов.
Бродите по закоулкам developer tools Вашего браузера - там невероятно много интересного :-)
PageSpeed Insights от Google даст Вам пищу для размышлений и рекомендации к действию.

17. Останавливайтесь вовремя

Оптимизация скорости это как рефакторинг кода - процесс бесконечный. Всегда найдется, что улучшить еще чуть-чуть. А потом еще. Ну и вот последнее и тогда-то точно все будет зашибись.

Мой совет - останавливайтесь вовремя. Достаточно хорошо и быстро лучше, чем идеально, но долго. Экономия еще нескольких Кб не стоит четырех часов Вашего времени или еще хуже, нервов Ваших коллег и клиентов.

Золотую середину найти сложно, и у каждого она своя. Но нужно как минимум о ней помнить и стараться достичь.

На этом все. С интересом почитаю в комментариях Ваш опыт по оптимизации фронтенда и другим философским вопросам. Велкам!

Что еще почитать о фронтенде

• Вредные советы для фронтенд-разработчика
• Сборка фронтенда с помощью gulp
• throttle и debounce - пора разобраться
• Кроссдоменные ajax-запросы
• Single Page Application без библиотек и фреймворков
• Промисы простым языком