Как ускорить загрузку сайта: 17 способов

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

Составил список основных способов ускорения скорости загрузки.

1. Изображения

2. Скрипты

3. Организация контента

4. Базы данных

5. Сервер

6. Как проверять результаты

Проверьте вес файлов изображений. Файлы весом более 1МБ лучше все убрать и заменить их на более минифицированные версии весом 300-500КБ. Обычно большой вес имеют файлы с большим расширением или с множеством разных красок. Тем больше деталей на рисунке, тем больше его вес.

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

Достаточно часто снимки публикуют в формате png или jpg. Такие расширения имеют больше веса, чем, например, webp или svg. Достаточно воспользоваться конвертером из одного формата в другой и файлы уже потеряют в весе.

Посмотрите, как я прогнал через конвертер 6 изображений и сохранил их в формате webp. У одного и того же файла вес снизился с 4,3МБ до 165КБ. Разница в 26 раз. Качество изображения при этом осталось неизменным.

Конвертация в webp тоже не всегда помогает. Тут на помощь приходит атрибут loading="lazy", который можно добавить к тегу изображений.

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

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

В CSS необходимо внести точные размеры (длину и ширину) всех изображений подо все размеры экрана. Тогда скорость загрузки станет выше.

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

Не забудьте позаботиться о том, чтобы после сжатия файл можно было вернуть в исходный вид, иначе с ним станет невозможно работать. Либо используйте обратную функцию разминификации, либо выкладывайте сжатые скрипты только на боевой сервер, а при разработке используйте стандартный вид (зависит от конфигурации проекта).

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

Опустим компиляторы с npm, речь сейчас не про них.

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

Например, сайты на WordPress могут иметь по 10 библиотек для корректной работы плагинов. Этому движку все равно на чистоту кода, поэтому весь список библиотек подтягивается ко всем страницам сайта (если делать все по правилам, вставляя скрипты в functions.php). А ведь каждую из них браузер полностью обрабатывает и тратит на это время.

Браузер читает код сверху вниз, поэтому можно использовать в тегах скриптов атрибуты async и defer для того, чтобы не блокировать рендеринг контента.

Async позволяет скриптам загружаться асинхронно. То есть, как только строка со скриптом была просканирована, браузер не медлит и разделяется на два процесса. Первый продолжает сканировать скрипт, а второй уже читает следующие за скриптом строки кода. Так строки обработаются быстрее. Главное не попасться в ловушку, при которой еще незагруженный скрипт уже должен использоваться в другом скрипте, который начал обрабатывать браузер. Step by step.

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

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

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

Выводите только несколько товаров/статей/строк, а остальное прячьте под кнопку "Загрузить еще" или переводите на отдельные страницы.

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

Посетителям уже не нужны большие разделы на сайте с тонной заголовков, изображений и функционала, как это было в 2010-м. В тренде - минимализм в дизайне и разговоры о самом главном. Для всего остального можно создавать дополнительные страницы, куда посетители будут отправляться при клике.

Главное помнить, что юзабилити на первом месте. Планируя реорганизацию страниц, нужно сохранить удобство и понятную навигацию. Такое вот искусство.

Частая проблема интернет-магазинов, CRM и аналитических платформ. Данных настолько много, что они разбросаны по разным таблицам. При открытии страницы сервер обращается к ним по очереди и выполняет вычисления. Это лишние расчеты, которых пользователь не видит.

Постарайтесь сократить количество обращений. Если это невозможно, то идем к следующему пункту.

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

При открытии страницы сервер обращается к ним. Там уже все подготовлено и не нужны лишние вычисления. А обновление этих таблиц происходит где-то в другом месте и в другое время.

Проверьте все запросы "SELECT" на то, сколько столбцов они запрашивают и сколько из них нужно пользователю. Если используются только, например, 4 из 10, то именно к этим четырем и надо обращаться. Не надо давать серверу задание на загрузку всех 10, так как это лишнее время. А если при этом нужно получить данные из нескольких таблиц, то объем вычислений увеличивается еще больше.

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

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

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

Чем меньше файлов будет на странице, тем быстрее браузер получит ответ.

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

Для этого можно воспользоваться специальными сервисами. Например, PageSpeed от Google. В нем можно ввести адрес страницы, получить отчет и увидеть проблемные зоны.

Если возникают проблемы со скоростью загрузки сайта, присылайте ссылку нам в firemarketing.ru - проведем аудит и составим чек-лист по оптимизации.