6 шагов для ускорения загрузки сайта

Я немного завидую, нашим коллегам вебмастерам, работавшим ещё 10-20 лет назад. Они могли себе позволить не париться по поводу оптимизации всего, что можно оптимизировать на сайте. Сейчас уже не прокатит, например загрузить на хостинг не сжатую версию CSS/JS файлов.

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

1) Уменьшить вес изображений

Лучше всего фотографии сжимает формат JPG, а для иконок и иллюстраций, лучше подходит, PNG. Даже после сохранения изображений для web, в фотошопе, можно ещё больше уменьшить их размер, прогоняя через сервисы PunyPNG, TinyPNG.

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

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

2) Уменьшить количество запросов к серверу

Уходит время, пока браузер запрашивает все изображения, CSS/JS файлы по отдельности. Первым делом избавляемся от хлама (неиспользуемые файлы). Потом следует объединить все CSS файлы, в один, то же самое сделать и с JS файлами. Объединить стоящие рядом иконки, в один файл – SVG/CSS спрайт.

3) Сократите размер кода CSS и JS

Сжимать объединенные CSS/JS файлы, надо в рабочий проект, перед загрузкой на хостинг. Ни в коем случае не удаляйте оригинальные CSS/JS файлы, поскольку ужатые версии, уже не подлежат редактированию. Как сжимать файлы? Просто копируете CSS код и вставляете в форму онлайн-сервиса CSS Minify. Для сжатия JS кода, используйте JavaScript Minifier.

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

4) Оптимизировать процесс загрузки шрифтов

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

Шрифты с Google Fonts, лучше перенести к себе на сервер, чем использовать внешнее подключение, чтобы не зависеть от стороннего ресурса. Указания на шрифты в файле стилей, прописать выше, остальных правил.

5) Ленивая загрузка изображений

На длинных лендингах или больших фотогалереях, уместно применять плагин Lazy Load. Узнайте здесь, что это такое.

6) Включить кэширование данных

Нужно настроить сервер так, чтобы при первом заходе пользователя сайт, браузер автоматически сохранял (изображения, CSS- и JS-файлы), тогда при повторном заходе, эти элементы браузер будет загружать не с сервера, а из локального кэша. Этот метод быстрее загружает сайт, только при повторном заходе.

Как включить кэширование

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

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

Итого

Перечисленные 6 шагов, гарантированно, ускоряют загрузку сайта. Практика показывает, что выполнение этих мер, закрывает 90% претензий со стороны Google PageSpeed. На оставшиеся 10%, сервис даст рекомендации, что надо исправить для получения высокой оценки.