Одним из показателей качественно выполненного сайта является скорость его работы. В первую очередь на нее обращают внимание простые пользователи, их мнение – самое важное для разработчика сайта. Здесь работает простая логика: если страница вашего сайта быстро загружается, вероятность быстрого выхода пользователя значительно снижается. Мало кто хочет ждать несколько минут, чтобы получить информацию или услугу, которые можно было бы быстрее получить у ваших конкурентов.
Если сайт загружается быстро и пользователи задерживаются на нем надолго, то и позиции ресурса в поиске будут выше. Работа со временем загрузки страниц впоследствии положительно влияет на трафик и продажи. Большинство клиентов отдает предпочтение ресурсам, попасть на которые можно быстрее, чем на остальные. В частности, загрузка сайта – важный показатель для клиентов с телефонов. Ускорить загрузку сайта можно самыми разными способами. Для начала необходимо определить текущий показатель с помощью Google PageSpeed Insight, GTMetrix, WebPageTest или другой утилиты, а после приступать к решению проблемы.
1. Уменьшить HTTP-запросы
Для загрузки любой страницы с браузера пользователя на сервер с сайтом отправляются запросы. Соответственно, число подобных запросов напрямую зависит от наполнения документа: код, текст, изображения, стиль, скрипты. Чем больше элементов в странице, тем больше придется обрабатывать HTTP-запросов. Для того чтобы страницы загружались быстрее необходимо определенными способами сократить количество этих запросов. Помимо прямого удаления отдельных элементов в структуре страницы, повлиять на скорость загрузки можно такими методами, как: использование inline-изображений, объединение CSS и JavaScript, объединение SVG-файлов в CSS-спрайт, а также распределить загрузку элементов на разные сервера.
2. Минификация файлов CSS и JS
Качественный код, который будет максимально быстро загружаться, обладает такими важными параметрами как сжатость и чистота. Для ускорения загрузки страниц можно заняться минифицированием стилей и сценариев. Данный процесс представляет собой удаление лишних строк, которые не участвуют в функциональной части кода. Это могут быть комментарии к коду, лишние пробелы или отступы, а также отсутствие множества оптимизирующих функций. Помимо этого хорошим решением будет сокращение переменных. Совершенно логично, что чем код меньше, тем размер файла, который необходимо загрузить пользователю, меньше. К слову минификацию можно проводить с помощью готовых инструментов в автоматическом режиме. Для CSS это такие утилиты, как CSSmin, CSSnano, Pretty Dif, а для JavaScript – это UglifyJS, Ajax Minifier.
3. Оптимизация изображений
В большинстве случай именно графика является самой «тяжелой» частью структуры страницы. Объем изображений от размера страницы может доходить до 45%. Применение в разработке неоптимизированных изображений может замедлить загрузку сайта вполовину. Для того чтобы побороться с этим достаточно снизить качество фотографий и изменить их формат. Конечная цель – уменьшение размера каждого изображения. Сделать это можно множеством способов: сжать файл без потери качества, конвертировать в подходящий формат, который будет меньшего размера, кадрировать изображение (обрезать фото, удалив часть пикселей). Провести оптимизацию возможно также с помощью готовых сервисов по работе с фото и графикой.
4. Загрузка изображений
Еще одна процедура с изображениями, позволяющая ускорить загрузку сайта с сервера. Она называется ленивой загрузкой или Lazy-load. По сути, очень простой метод загрузки, представляющий собой подгрузку контента только, когда он станет видимым пользователю. Lazy-load выполняется тремя способами – скроллингом, кликом или фоновым режимом. Первый – простой метод, представляющий загрузку графики тогда, когда клиент долистывает до участка страницы с ним. Второй метода достаточно устаревший и неудобный, но имеет место быть в некоторых ситуациях – изображения предоставляются в виде миниатюр, нажатие на которых открывает фото в полном размере. Самый незаметный для пользователя способ – это подгрузка изображений на фоне, когда страница уже загружена. Графика, которую не видно сразу после обновления страницы, загружается постепенно, пользователь этого не заметит, а попасть на сайт он может в разы быстрее.
5. Оптимизация кода
Следующая важная часть, которая может повлиять на скорость загрузки сайта – это, конечно, серверный код. Дело здесь именно в качестве написанного кода и не в мощности сервера. Неоптимизированный код будет медленно работать даже с доступом к самым мощным ресурсам. Необходимо правильно настраивать внутренние связи между элементами, создавать эффективно работающие запросы. В частности большое значение оптимизация кода имеет в динамических страницах, когда контент на генерируется с сервера.
6. Кэширование
Один из способов оптимизации загрузки сайта – это сохранение данных страницы в кэше браузера пользователя. Если необходимые файлы будут храниться там, то пропадет необходимость тратить время на загрузку с сервера. Браузерное кэширование значительно повышает скорость загрузки статичных страницы. Настройка кэширования производится через .htaccess или expires, cache-control в HTML. Что касается CMS, то здесь для ускорения работы необходимо подключить плагины Zen Cach, W3 Total Cache или другие. Разработчик сайта сам выбирает, сколько будет храниться кэш.
7. Уменьшение перенаправлений
Перенаправления или редиректы – это удобный инструмент при разработке сайта. Они помогают бороться с битыми ссылками, необходимы для работы зеркал сайта. Но слишком большой объем редиректов в коде нагружает сервер и страница загружается в разы медленнее. Любые лишние HTTP-запросы – это причины медленной загрузки сайтов. Необходимо провести анализ всех переадресаций в коде и удалить те, которые не используются.
8. Сторонние элементы
Такие элементы страниц, как ссылки социальных сетей, плееры, баннеры, отслеживание статистики и прочее, называются внешними скриптами. Их работа нагружает сайт и мешает загрузке основного контента. Важно подобрать только ряд необходимых скриптов, и отключить то, что не нужно. Быстро загружаемый сайт всегда максимально независим от других ресурсов и программ.
Каким бы красивым и удобным не был сайт, если для того, чтобы воспользоваться всем этим, пользователю приходиться долго ждать загрузки страницы, он, скорее всего, не станет трепать себя ожиданием. К тому же, на те медленные сайты, со скоростью которых клиент уже столкнулся, он никогда более не попробует зайти. Заниматься оптимизацией времени загрузки страниц необходимо в самом начале разработки. Это очень важная часть любого продукта.
