Скорость загрузки страниц сайта влияет на качество SEO-продвижения в целом. Оптимальным временем загрузки страницы считается 2 секунды для десктопа и до 4-х – для мобильных устройств. В большинстве случаев, проекты не соответствуют таким значениям – это отличная возможность получить конкурентное преимущество. Рассмотрим главные способы оптимизации скорости сайта.
1. Уменьшение размера кода
Суть способа заключается в уменьшении размера HTML-страницы, путем минификации ее кода. Сделать это можно, удалив из кода лишние символы: пробелы, комментарии, разрывы строк, разделители блоков. Все это не повлияет на целостность файла, но уменьшит его в размере. Однако, файл станет трудночитаемым, т.к. после минификации, вся информация будет располагаться в одну строку.
Сам процесс минификации может быть осуществлен вручную, с помощью сервисов или же с использованием плагинов для CMS, которые обрабатывают HTML-файлы «на лету». Из сервисов выделяются следующие:
HTML-compressor
Сервис Minify Code
Просто вставляем фрагмент HTML-кода, запускаем минификацию и получаем оптимизированный код. Первый инструмент показывает на сколько процентов удалось уменьшить размер кода.
Из плагинов для WordPress, можно рекомендовать следующие:
- Autoptimize – содержит в себе комплекс инструментов для оптимизации сайта, в том числе и возможность минификации кода.
Autoptimize
- WE – Minify HTML – простой плагин, выполняет единственную функцию по оптимизации кода. Проблема заключается в том, что он оптимизирует CSS и JS файлы тоже, отключить это нельзя.
2. Оптимизация изображений
Графика в большинстве случаев является наиболее тяжеловесным компонентом на сайте, именно с нее рекомендуется начинать оптимизацию скорости загрузки.
Формат
- Изображения чаще всего публикуются в форматах JPEG и PNG. Первый подходит для фотографий, второй для графики, которую нарисовал дизайнер. Но в большинстве случаев, лучше отдавать предпочтение изображениям в формате JPEG, он позволяет сильнее сжимать изображения, сохранив при этом оптимальный уровень качества.
- Для изображений, содержащих геометрические фигуры, рекомендуется использовать векторный формат – SVG. Его плюс заключается в том, что такое изображение сохраняет высокое качество при изменении масштаба.
- Современные форматы: JPEG 2000, JPEG-XR и WebP, позволяют сжимать изображение от 20 — 75% практически без потери качества. Однако данные форматы поддерживаются не всеми браузерами.
Как увеличить скорость загрузки сайта используя современные форматы изображений и решить проблему их слабой поддержки браузерами? Укажите на два варианта загрузки: один из современных форматов + JPEG/PNG.
Качество и разрешение
Часто исходник изображения сохраняется в максимально доступном качестве, соответственно, вес файла получается излишне большим. Поэтому перед публикацией на сайте, такое изображение рекомендуется сжать (отслеживая появление артефактов), например, в Photoshop – при сохранении для WEB, установить значение качества от 60 – 80 процентов.
Сжатие изображения в Photoshop
Если говорить про разрешение, то оно также в большинстве случаев больше необходимого. Здесь следует исходить из размера блока на странице, в котором будет публиковаться изображение. Не стоит уменьшать разрешение фотографий с помощью стилей CSS – физически размер загружаемых данных не уменьшится, как и время загрузки, в довесок поисковики будут считать страницу неоптимизированной.
Сервис для сжатия изображений
Онлайн сервисов и программ для оптимизации размера изображений достаточно много. Одним из наиболее популярных выступает . В бесплатной версии действует ограничение на размер исходного файла – 5 МБ.
В качестве теста было загружено изображение размером 4,1 МБ, после оптимизации файл стал весить 1,9 МБ (-59%).
Сервис для сжатия изображений Tinyjpg
Также у данного сервиса есть плагин под WordPress, который позволяет обрабатывать изображения «на лету» при загрузке на сайт.
Другие сервисы и плагины, мы подробно рассматривали в статье про оптимизацию изображений для сайта.
3. Gzip-сжатие
Gzip – скрипт, расположенный на стороне сервера, позволяющий сжимать компоненты страницы перед отправкой браузеру. Схема проста: код сжимается в архив, который отправляется пользователю, на его стороне браузер распаковывает и воспроизводит данные.
В CMS WordPress данная функция включена изначально, также иногда эта функция активирована хостинг-провайдером (если нет, то можно дополнительно через службу поддержки попросить включить ее), в любом случае факт ее наличия можно проверить сервисом .
Включение gzip-сжатия на Apache
Для этого находим файл .htaccess в корне сайта и вносим следующие команды:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml </IfModule>
Включение gzip-сжатия на Nginx
Открываем файл nginx.conf, находим блок http и добавляем в него следующие строки:
gzip on; gzip_static on; gzip_comp_level 5; gzip_min_length 1024; gzip_proxied any; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
После сервер следует перезагрузить.
4. Кэширование на стороне браузера
Суть метода заключается в том, что часть файлов или кода будет кэшироваться на компьютере пользователя и при последующих запросах, в которых участвуют эти данные, не будет совершаться обращение к серверу.
Большинство готовых CMS уже имеют подобный функционал «из коробки», но если такой опции нет, то прописываем в файл .htaccess следующие условия:
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType image/jpeg "access plus 10 days" ExpiresByType image/png "access plus 10 days" ExpiresByType image/svg+xml "access plus 10 days" ExpiresByType text/css "access plus 10 days" </IfModule>
Условия говорят о том, что файлы с перечисленными расширениями будут храниться на стороне пользователя 10 дней.
Аналогично для Nginx в файле nginx.conf прописываются команды (если нет доступа, можно воспользоваться обращением в техподдержку):
server {
location ~* \.(jpeg|png|css|js|txt)$ {
root /var/www/user/data/www/site.ru;
expires 10d;
}
}
5. Использование CDN
CDN (Content Delivery Network) – сеть сторонних серверов, на которых могут располагаться статические файлы с вашего сайта. Т.е. при загрузке страницы, к примеру, часть изображений может находиться на CDN, браузер пользователя определяет собственное местоположение и грузит эти изображения с ближайшего для пользователя сервера. Подобную функцию часто используют крупные межрегиональные или мировые компании, например, Ozon.
6. Сокращение времени загрузки первого байта
Время до первого байта (TTFB) – показатель отзывчивости сервера, другими словами – время, которое требуется браузеру на ожидание получения ответа после отправки HTTP-запроса. На этот параметр влияет то время, которое тратится на отправку данных (эта часть оптимизируется с помощью внедрения CDN) и время, на обработку запроса на сервере (здесь множество вариантов оптимизации, например, распределение нагрузки, настройка баз данных и т.д.).
7. Отложенная загрузка скриптов
Отложенная (асинхронная) загрузка скриптов также позволяет ускорить сайт. По умолчанию, все скрипты на странице грузятся одновременно, увеличивая время появления первого контента. При отложенной загрузке скрипты подгружаются последовательно: от наиболее критичных к дополнительным.
8. Ленивая загрузка изображений
Аналогичным образом можно поступить с изображениями, загружая их последовательно, по мере просмотра страницы. Особенно это актуально, когда страница содержит в себе большое количество графики. Данная технология называется Lazy load.
К слову, если изображений слишком много, то лучше использовать превью, а полное изображение сделать доступным по клику, это значительно повысит скорость загрузки сайта.
9. Работа со шрифтами
Рекомендуется использовать на сайте ограниченное количество шрифтов, помните, чем их больше, тем выше нагрузка на сервер. Не используйте устаревшие шрифты, по типу woff или eot.
Еще большим плюсом будет использование шрифтов, находящихся на серверах Google (Google Fonts).
10. Удаление неиспользуемого кода CSS и JS
Большие проекты часто содержат в себе неиспользуемые фрагменты кода CSS и JS, которые отнимают ресурсы при загрузке. Для поиска подобных фрагментов можно использовать бесплатный инструмент – Chrome DevTools в браузере Chrome:
- Открываем «Инспектор кода» страницы.
- Переходим на вкладку Консоль.
Переходим на вкладку «Console»
- В дополнительном меню пункта находим «Покрытие» (в данном случае «Coverage»).
Нажимаем «Coverage»
- Перезагружаем страницу.
Здесь показываются подгружаемые скрипты на текущей странице, а также процент использования кода из них. Каждый скрипт можно раскрыть и найти интересующие фрагменты кода для дальнейшей оптимизации.
Просмотр всех скриптов
11. Отключение лишних плагинов
Плагины часто несут пользу и закрывают пробелы в функционале CMS, однако, если их активировано слишком много, то это может создавать повышенную нагрузку на сервер, замедляя его работу. Проводя комплексную оптимизацию сайта, обязательно изучите установленные плагины и целесообразность их использования.
12. Сокращение числа запросов
Логично, что чем больше запросов к серверу, тем ниже скорость загрузки сайта (при прочих равных условиях). Если, к примеру, для работы страницы требуется прогрузить 5 различных файлов скриптов, то будет лучше, если их объединить в один.
В WordPress эту проблему поможет решить уже названный выше плагин Autoptimize.
13. Минификация кода CSS и JS
Также как и с HTML-кодом, CSS и JS можно минифицировать. Достигается это удалением лишних символов и пробелов, переименования переменных и т.д. В качестве стороннего сервиса можно порекомендовать .
14. Оптимизация баз данных
Не стоит забывать, что большинство серверов поддерживают кэширования запросов к базам данных. Уточнить этот момент можно через техподдержку хостинга.
Кроме этого, CMS должна уметь грамотно работать с базами данных, не создавать лишние запросы. А говоря про готовые CMS, то рекомендуется периодически обновлять их.
15. Настройка AMP страниц в Google и турбо-страниц в Яндексе
Это относительно новые решения, позволяющие ускорить загрузку страниц сайта.
AMP в Google
Технология загрузки страниц для мобильных устройств, которая реализуется посредствам внедрения на сайте специальных тегов – разметки контента. Минусом выступает ограниченность функционала, т.е. метод подходит для страниц с простым содержимым: блогов, журналов и прочих информационных сайтов. Плюсом же является улучшенное ранжирование таких страниц из-за хорошей оптимизации под мобильные устройства в части размера загружаемого кода.
Турбо-страницы Яндекса
Примерно похожая технология, но уже от Яндекса, нацеленная на увеличение охвата мобильной аудитории. По заверениям разработчиков, скорость загрузки контента может быть увеличена в 15 раз, при этом вес страницы снижается до 10 раз.
В отличии от AMP страниц, Турбо-страницы от Яндекса имеют чуть больший функционал.
Итак, мы ответили на вопрос о том, как ускорить загрузку сайта, перечислив наиболее действенные методы оптимизации. Надеемся что реализация этих способов даст хороший результат для вашего сайта.
