Этот момент – один из самых важных при разработке сайта. Никто не любит ждать долгой загрузки страницы, и пользователь может уйти, если со стабильной связью страница грузится 3 и более секунд.
⠀
Долгую загрузку и перепотребление трафика не любят и поисковые системы. Яндекс, Google и другие поисковики имеют множество систем по анализу сайтов. Если сайт имеет проблемы с загрузкой, ошибки в верстке, некрасиво отображается на мобильных устройствах – это ведёт к тому, что сайт опустится в поисковой выдаче на несколько страниц ниже, чем он мог бы быть.
⠀
Что делать?
1. Оптимизировать размер изображений. Это самое основное, что нужно проверять на сайте перед выпуском в продакшн. Нужно убедиться, что вы используете правильные форматы (png для картинок с прозрачностью на фоне, jpg или webp для всех остальных). Картинки можно сжимать в Фотошопе или другом графическом редакторе, но лучше воспользоваться сайтами, которые оптимизируют изображения – например, imagecompressor.com или tinypng.com. Так вы обеспечите лучшее соотношение размера файла и качества изображения.
⠀
2. Оптимизировать стили. Минимизировать код с помощью любого из генераторов такого кода (см. minify css), использовать минификатор в Webpack или Gulp, либо автоматически переконвертировать ваш код в минимизированный при сохранении файла – в большинстве редакторов кода есть плагины, которые сделают это за вас.
⠀
3. Оптимизировать скрипты. Использовать только современные методы записи (никаких document.write и другого устаревшего кода), убедиться в том, что скрипты не тормозят и не блокируют загрузку страницы. Можно применить минификацию, если скриптов больше, чем 200-300 строк.
⠀
Также можно применять кеширование, прописав необходимые настройки в файле .htaccess, использовав подходящий плагин для вашей CMS, или начав разработку вашего проекта на генераторе статического сайта.
⠀
С помощью этих нехитрых действий вы можете сохранить пользователям мегабайты трафика и лучше удержать новую аудиторию.
⠀
Как видите, вариантов много, и можно использовать все для лучшего результата.