1) Оптимизация изображений
Совет довольно очевидный, но, даже несмотря на это, многие действительно не умеют оптимизировать изображения на своих веб-страницах. Более того, лишь единицы понимают, что есть разница между графическим файлом, уменьшенным до среднего размера, и тем, который полностью оптимизирован.
Оптимизация не только делает изображение меньшим по размеру, но и удаляет некоторые несущественные метаданные (например, дату создания, информацию о камере и пр.).
С этой целью вы можете использовать много разных инструментов, таких как , или , или .
2) Активация сжатия GZIP
Всего лишь активировав сжатие Gzip, вы сможете ускорить загрузку до 50%. После сжатия на локальном ПК файлы становятся меньше – Gzip работает точно так же: он делает сжатие до того, как отправить файлы в браузер. Таким образом, веб-страница начнет отображаться быстрее, чем до использования сжатия Gzip.
Эту функцию уже активировало абсолютное большинство сайтов из-за использования “тяжелых” файлов. Тем более что в этом нет ничего сложного. Прежде всего, найдите .htaccess своего сайта, а затем, если работа сервера происходит на Apache, просто скопируйте и вставьте его в необходимый файл. Такой маленький фрагмент кода сделает ваш сайт намного производительнее – проверьте сами!
3) Минимизация файлов
С помощью инструментов вроде или , а также CLI, например, , это делается элементарным образом. Главное, помните об этой процедуре, когда завершаете проект.
4) Объединение CSS с JavaScript
Лишние HTTP-запросы сильно тормозят сайт. Так что если вы используете любые внешние элементы (плагины, фреймворки), то у вас имеется сразу несколько файлов JS и CSS. Значит, браузер вынужден постоянно запрашивать целый набор файлов. Исправить такое расточительство можно объединив все CSS-файлы в один, и все JS-файлы в другой. Без особого труда это делается с помощью , и прочим подобным инструментам.
5) Использование спрайтов
Много изображений для 1 веб-страницы – это много HTTP-запросов. Можно просто сделать лист спрайтов, который загружается только раз, а потом всего лишь редактировать положение CSS-фона для каждого отдельного элемента для отображения правильного изображения.
Воспользуйтесь или для создания таких спрайтов.
6) Использование CDN – сети доставки содержимого (контента)
Статические файлы сайты размещают только на CDN, ведь это ускоряет их загрузку. Даже если ваш веб-сайт относительно небольшой, вам все равно стоит настроить загрузку внешних JS и CSS из CDN по максимуму. Обратите внимание на таких помощников, как и .
7) Использование кеширования
Зачем снова загружать уже загруженный файл? Процесс настройки кеширования сильно напоминает сжатие Gzip: делается все в одном и том же файле .htaccess. С помощью mod_headers можно выбрать тип файлов, а также длительность их использования.