Как помочь сайту загружаться быстрее — советы преподавателей EasyCode

Вопрос оптимизации сайтов и увеличения скорости их загрузки в последнее время становится все более значимым. Уже мало сделать просто красивый сайт, который исправно работает — качество продуктов растет, а вместе с ним и требования к frontend специалистам. Мы поговорили с преподавателями курсов школы EasyCode — Денисом Мещеряковым и Юрием Придатко, чтобы узнать о способах увеличения скорости веб-сайтов.

Оба специалиста сходу заявляли о том, что это непростая и массивная тема, которую не уместить в пару предложений. Скорость загрузки сайтов зависит от многих факторов, часть из которых мы упомянули ниже. Юрий Придатко коротко и емко поделился своим опытом: «На самом деле, способов ускорить загрузку сайтов масса. У гугла целые “научные работы” по этому вопросу. Но начинать нужно, естественно, с анализа. Есть замечательный инструмент Flow, который показывает “водопад” загрузки и то, где именно притормаживает сайт.

Если это действительно связано с передачей данных с сервера, то можно использовать Chunks, то есть, разбить код сайта на несколько отдельных элементов. Также можно использовать спрайты, чтобы объединить все маленькие картинки в одну и таким образом сократить количество загружаемых элементов. Хорошо работает минификация, пережатие картинок и прочие вещи, которые мы в EasyCode даем на курсе по frontend. Мы стараемся акцентировать внимание, по крайней мере, на основных способах, чтобы ребята делали сайты с оглядкой на производительность».

Первый контакт с пользователем: что сделать, чтобы сайт перестал отпугивать людей

Пользователям не нравится смотреть в пустое окно или на разваливающиеся элементы веб-страницы. Возникают мысли, что что-то пошло не так — отвалился интернет, компьютер неизлечимо болен или что еще похуже.

«Важнее даже не скорость загрузки сайта, а его отзывчивость, то есть первый контакт с пользователем — как быстро он увидит что-то», — говорит Денис Мещеряков.

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

Скелетоны — изящные и интригующие

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

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

А может, лучше использовать прелоадер

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

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

Оптимизация контента: когда вес имеет значение

Один из ключевых моментов — уменьшение веса самого сайта. Довольно очевидно, что тяжеловесный сайт будет загружаться гораздо дольше, поэтому студенты оффлайн и онлайн курсов от EasyCode сжимают картинки и идут на другие ухищрения. Подробнее об этом рассказал Денис: «Важна оптимизация картинок, чтобы графика весила как можно меньше. Вообще, скорость загрузки зависит только от веса того, что должен прорисовать браузер. Чем меньше этот вес, тем лучше. Для этого мы оптимизируем контент, используем Content Delivery Network для загрузки материалов и минимизируем bundle.js».

Минификация

Minify помогает уменьшить размер файлов с кодом путем удаления всего ненужного: переносов строк, комментариев, пробеллов, лишних табов. Существуют разные оптимизаторы, которые могут сократить количество кода.

Как «ленивая загрузка» спасает людей с мобильным и медленным интернетом

Lazy Load позволяет загружать только то, с чем пользователь собирается взаимодействовать. То есть, сайт не будет загружать сразу все тридцать фото из слайдера, а начнет с пяти и ограничится ими, если человек просмотрит только четыре из них. Денис рассказал и о ней: «Часто используется Lazy Load — это когда у тебя грузится не весь сайт, а только та страница, на которую ты зашел. Он подгружается частями и это обеспечивает быстрое первое отображение, потому что необходимо отрисовать не так много материалов».

Отличие между временем загрузки стандартных и кастомных шрифтов

Как ни странно, но шрифты тоже влияют на скорость загрузки. Не всегда ситуация позволяет использовать стандартные начертания, а что-либо изысканное негативно влияет на время загрузки. «Есть разные лайфхаки со шрифтами. Например, для того, чтобы как можно быстрее произошел первый контакт с пользователем, шрифт сначала подменяется стандартным, пока подгрузится кастомный и заменит его. Также, если нужны только несколько символов из шрифта, можно использовать unicode-range», — уточнил Денис.

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

У программиста нет прямого доступа к Garbage Collection или Event loop, но он может повлиять на их работу. Функционирование этих процессов нарушается из-за неправильно составленного кода, что приводит к утечкам памяти или формированию некорректной очереди выполнения задач.

Полезен ли Garbage Collection

Автоматическое управление памятью позволяет удалять мусор, который стоит на пути к быстрому оптимизированному сайту — подробнее об этом рассказал Денис: «Нужно не допустить утечек памяти в JS. Garbage Collection очищает то, что сейчас не используется, но программист мог сделать ошибку, и сборщику мусора будет казаться, что неиспользуемые данные задействованы и их необходимо хранить».

Как сделать сайт максимально медленным и дерганным: блокировка Event loop

Еще одной ошибкой может стать блокировка Event loop, то есть параллельной модели и цикла событий. «Из-за непонимания как работает Event loop мы можем блокировать выполнение кода — это приведет к тому, что у пользователя все будет жутко тормозить и дергаться. Если мы говорим об анимации, то там тоже нужно использовать специфические вещи, чтобы попадать в шестнадцать миллисекунд на кадр, а анимация происходила по принципу шестьдесят кадров в секунду — только в этом случае она будет плавной. Всю анимацию, по возможности, нужно делать на CSS, но для очень сложной лучше использовать webgl, canvas и svg», — объяснил Денис.

Server side rendering: когда нужна помощь зала

Частичная отрисовка веб-страниц на стороне сервера позволяет существенно ускорить загрузку сайта. Это еще один способ лишить пользователя удовольствия созерцания девственно белой страницы.

«При помощи Server side rendering часть сайта можно рендерить на сервере. Если на клиенте сложные приложения, браузеру нужно потратить много ресурсов, чтобы отрисовать страницу и расположить на ней элементы. В этом случае, часть содержимого может отрисовываться на сервере, а на клиент будет приходить готовый HTML, который отрендерит сам браузер», — говорит Денис.

В качестве вывода можно отметить, что вопрос скорости загрузки сайтов — это очень сложная, объемная, но интересная тема, в которую можно углубляться очень долго. Навыки в этом направлении, полученные на курсах по frontend от EasyCode, не потеряют ценности, так как просто красивый и работающий сайт могут сделать многие, но какой от этого толк, если с него будут уходить из-за медленной загрузки?

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

30.04.2019
208
Автор: Ася Яскер