Всем привет! Как увеличить скорость загрузки сайта? Сегодня этот вопрос волнует многих вебмастеров, ведь в последнее время поисковые системы пессимизируют в выдаче медленные проекты. В этой статье я изложу свое видение оптимизации скорости загрузки и приведу 7 наиболее эффективных методов ее увеличения. Готовы? Поехали…

Как анализировать скорость загрузки сайта

Скорость загрузки сайта — комплексный показатель. Как правило, на него влияют следующие факторы:

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

Проверка скорости загрузки сайта осуществляется с помощью сторонних сервисов, например Google Pagespeed Insights.

Работа на этом сервисе проста: вы вводите нужный URL в форму, нажимаете кнопку и получаете оценку скорости работы сайта и список рекомендаций по ее увеличению.

Хочу отметить, что «зеленая зона» по скорости сайта (от 80% оптимизированности) — это показатель, к которому нужно стремиться, но на который не нужно полагаться как на панацею.

Увеличить скорость загрузки сата, но при этом иметь кучу бесполезных статей или неоптимизированную перелинковку….ну такое себе решение.

Но мы отвлеклись, а я обещал рассказать вам про 7 способов, как увеличить скорость загрузки сайта.

Способ 1. Оптимизировать изображения

Сайту нужны изображения. Это факт. Но качественный графический контент одновременно является мощнейшим фактором, влияющим на скорость загрузки. Обычно Google Pagespeed сам говорит нам об этом:

Коротко, рекомендации по работе с изображениями для увеличения скорости загрузки сайта:

• формат jpg (позволяет сжать изображения без потери качества)
• оптимальный размер — до 200 кб
• использование современных форматов типа webp
• использование отложенной (ленивой) загрузки изображений

Оптимизировать размер изображений можно через сервисы https://kraken.io или tinypng.com

Способ 2. Увеличить скорость загрузки сайта через хостера

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

Коротко, рекомендации по выбору хостинга для увеличения скорости загрузки сайта:

• Возможность включения gzip сжатия контента
• Серверы на SSD дисках
• Достаточный объем ОЗУ от 2 Гб
• Возможность установки последней версии PHP

Способ 3. Оптимизировать СSS файлы

Если HTML — сердце вашего сайта, то CSS — то, что дает этому сайту путевку в жизнь. И как правило, объем CSS файлов для любого мало-мальски нормального проекта получается приличным, в несколько десятков килобайт минимум.

А если сайт использует сторонние плагины и фреймворки типа Bootstrap — количество трафика и время загрузки возрастают значительно.

Рекомендации по работе с CSS файлами для увеличения скорости загрузки сайта:

• Минификация CSS — по максимуму, для всех файлов и сторонних плагинов. Сервисы для минификации — например minifier.org. Или соответствующий плагин для gulp.
• Все CSS — в один файл. Желательно перенести загрузку CSS в конец страницы перед тегом </body>, но это потребует дополнительной оптимизации кода.
• Критические участки CSS рекомендуют вставлять в тег <style> непосредственно в тело сайта.
• Написать свой мини-bootstrap или подгружать только нужные части у фреймворков с использованием препроцессоров CSS.

Способ 4. Оптимизировать загрузку скриптов

JavaScript — мощное средство, без которого немыслима работа современного сайта. Оптимизация JavaScript на сайте — мощный стимул для ускорения его работы.

Рекомендации по работе с JavaScript для улучшения скорости загрузки:

• Минификация кода.
• Использование асинхронной или отложенной загрузки JavaScript.
• Поместить весь JavaScript в конец страницы перед тегом </body>

Кроме этого, важно проверять нагрузку на сайт от плагинов аналитики и интерактивных карт. Это действительно важно:

Если сервисы значительно снижают скорость загрузки, а не использовать их — не вариант, то рекомендую попробовать интегрировать их единым блоком кода через Google Tag Manager.

Способ 5. Проверить сторонние плагины (актуально и для сайтов на WordPress)

А вы когда-то проверяли, какой объем скриптов загружает ваш любимый плагин для WorPress? Недавно я работал с одним клиентским проектом и ужаснулся:

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

Попадаются и неминифицированные CSS файлы, и подгрузка мощных фреймворков (это при учете уже загруженного bootstrap на вашем сайте).

Оптимизировать работу плагинов — кропотливая работа, но она определенно даст свой результат.

Способ 6. Оптимизировать структуру HTML страницы

Под оптимизацией структуры HTML страницы я понимаю:

• Валидный код, прошедший проверку на сайте https://validator.w3.org
• Отсутствие огромной вложенности HTML тегов (оптимально — 4 уровня вложенности)
• Оптимальное размещение дочерних элементов HTML
• Применение спрайтов для мелких изображений

Способ 7. Шрифты. Маленький лайфхак

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

Поэтому лучше использовать современные технологии, а именно предварительный рендеринг шрифтов.

Свойство для такого рендеринга — font-display: swap. Оно позволяет подгружать так называемый fallback-шрифт (шрифт по умолчанию для браузера) до подгрузки семейства.

Применение свойства font-display: swap позволяет увеличить скорость загрузки сайта еще на несколько пунктов.

Заключение

В этой статье мы рассмотрели 7 основных способов, позволяющих ускорить загрузку сайта. Они помогут стать чуть популярнее в глазах поисковиков и заслужить благодарность пользователей. С вами был webmaster_zotov, до новых встреч!