Хороший сайт-быстрый сайт

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

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

• Для 52% пользователей скорость загрузки влияет на лояльность;

• 47% посетителей ожидают загрузки страницы не дольше двух секунд;

• 40% пользователей уже после трёх секунд ожидания покинут сайт;

• Лояльность клиентов уменьшается  на 16% уже после трёх секунд ожидания загрузки;

• 88% утверждают, что после неудачной попытки зайти на сайт больше на него не вернутся;

Другими словами, ваши потенциальные клиенты могут не дождаться полной загрузки страницы и уйти с сайта.

Рассмотрим три основных стадии для определения скорости сайта

• Загрузка первой значимой информации
  

Информация, видимая на первом экране должна загружаться в кратчайшее время и содержать самую важную часть сайта (логотип, информация о компании, навигационное меню, важный с точки зрения маркетинга контент и тд)

• Время с которого можно взаимодействовать с элементами сайта
  

Скроллить страницы, взаимодействовать с кнопками, листать слайдеры и т.д.

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

Отображение полного контента и возможность задействовать весь функционал сайта

Вот несколько способов ускорения каждой стадии:

1. Стараться сделать быстрый продукт

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

2.Подумать о необходимости готовых библиотек

Каждый раз, разрабатывая какой-то модуль для сайта, нужно оценить, есть ли возможность использовать готовый компонент, пусть даже и немного переделав его под себя. Эта неплохая практика, которая в разы ускоряет разработку и помогает избегать такой частой ошибки, как “изобретение велосипеда”. Однако каждый раз необходимо анализировать степень необходимости той или иной библиотеки. Даже подключение того же jQuery не всегда оправданно, если на сайте можно обойтись ванильным JS.

3.Mobile first

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

И сейчас имеется в виду полный спектр спецификаций мобильной платформы, начиная от производительности мобильного устройства и заканчивая скоростью мобильного соединения. Но, к сожалению, нельзя заниматься разработкой сайта на мобильном устройстве. На помощь к нам придет включение в Google Chrome десятиразрядного троттлинга. Ведь мощность даже самого топового мобильного девайса составит всего десятую часть от производительности среднего десктопного компьютера. Так же помогут включение эмуляции 3G соединения и всё же постоянные проверки на мобильном устройстве.

4. Бенчмаркинг

Есть много сервисов позволяющих определить производительность вашего сайта. На большинстве из них дают очень дельные советы для увеличения показателей не только скорости, но и многих других аспектов правильной работы сайта. И какими бы нелепыми, ошибочными, в разы усложняющими и замедляющими разработку они не казались - они правы. Для начала советуем пройти проверку сервиса Google Speed Insight, что несомненно положительно скажется на работе сайта и поднимет ваши позиции в Google.

5.Сокращайте DOM элементы

Если на сайте очень много DOM элементов - значит, скорее всего, их количество можно сократить, не потеряв при этом контент. Внимательно проанализируйте html-разметку и css стили сайта на предмет ненужных элементов (вложенных таблиц, слоев, добавленных исключительно для удобства верстки и т.д.).

6.Рендеринг на стороне клиента - дорогое удовольствие

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

7. Не рендерите ничего на сервере! 

Время, которое уходит на рендеринг на стороне сервера, тоже крайне важно и составляет такую величину как “время ответа сервера”, которая в свою очередь влияет еще и на поисковое продвижение. Как тогда быть? На стороне клиента ресурсозатратно делать рендеринг, на стороне сервера тоже. Размещать голые HTML страницы? Да именно так. Не все конечно, всегда надо искать золотую середину, но те страницы что можно сделать обычными HTML - лучше сделать. В этом кстати очень помогает технология композитного сайта в CMS Битрикс, переводящая большую часть страниц сайта в статичные ресурсы

8. Нагруженные шрифты

Все любят красивое оформление и хотят чтобы их текст как-то оригинально выделялся на фоне остальных. На обработку таких шрифтов уходит много лишних ресурсов. У большинства операционных систем (Windows, MacOS, Android) уже есть красивые шрифты, поэтому на сайте достаточно использовать Helvetica, Calibri, Sans-serif, Roboto

9. Кэширование

Правильно настроенное браузерное кэширование в паре со сжатием в разы уменьшит количество запросов к вашему ресурсу со стороны клиента. Так как большая часть информации будет уже в его браузере. Кэширование лучше всего настраивать в самом конце, так как на этапе разработки оно может сильно тормозить процесс.

10. Service Workers

Очень полезный инструмент, позволяющий вашему сайту работать даже в оффлайн-режиме, проводить синхронизацию данных в фоновом режиме и позволяют использовать функцию популярных сейчас push-уведомлений.

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