В последние годы специалисты по маркетингу ставят скорость загрузки во главу угла любого процесса оптимизации. В 2017 году Google начал подчёркивать важность скорости загрузки и её будущее влияние на ранжирование, но только летом 2018 года Google сделал это заявление официальным.
В этой статье мы хотим помочь вам начать оптимизировать и улучшать скорость загрузки вашего сайта самостоятельно. Как и в любом процессе оптимизации, здесь есть техническая сторона, которая может оказаться сложной. В SEO Alive, когда мы пишем статьи такого рода, мы хотим, чтобы вы могли внедрить всё сами, хотя часть действий требует более высокого технического уровня. Но, честно говоря, давайте не будем сходить с ума в погоне за баллами в инструментах, которыми будем аудировать WPO нашего сайта.
Оптимизация во многом зависит от того, как был спроектирован шаблон, и не каждый шаблон позволяет добиться одинаковой производительности. Это важно учитывать.
Начнём!
Что такое WPO?
Web Performance Optimization, которую мы называем WPO, — это просто оптимизация различных процессов, влияющих на загрузку сайта.
Как измерить скорость загрузки сайта?
Инструментов для измерения скорости загрузки много. Самые популярные:
Прежде чем начинать аудит, важно помнить: скорость загрузки различается у каждого пользователя. На то, как ощущается скорость у пользователя в Куэнке и у пользователя в Оттаве, влияют разные переменные.
Поэтому вместо работы над временем загрузки в секундах мы рекомендуем сосредоточиться на оптимизации:
›
Вес сайта (МБ)
›
Запросы
›
Время ответа сервера
Если улучшить эти 3 направления, скорость загрузки вырастет независимо от того, где находится пользователь.
Мы разберём каждое направление и на примере разных инструментов посмотрим, как с ними работать, чтобы улучшить производительность каждого URL. Почему я говорю о каждом URL? Потому что, хотя это и кажется очевидным, я встречал много случаев, когда оценивались данные только главной страницы, а ведь не все страницы сайта загружают одни и те же ресурсы.
Google Developer Tools
Прежде чем начать, я хочу объяснить некоторые возможности, которые Google предлагает через свои инструменты разработчика. Этот инструмент — один из важнейших для анализа того, как работает сайт. Кликните правой кнопкой мыши по открытой в браузере странице, и появится панель с разными опциями. Переходим в «Просмотреть код» (Ctrl + Shift + I).
Когда инструмент открыт, переходим к опции NETWORK, которая находится сверху. Если снова нажать ENTER в браузере, инструмент покажет загрузку разных ресурсов.
время загрузки в инструментах разработчика Google
Внизу изображения видны данные, которые нас интересуют для общего представления о загрузке сайта.
Если разобрать эту панель сверху и посмотреть на структуру колонок, получаем:
›
Name: название ресурса.
›
Status: код ответа ресурса (200, 301, 404...)
›
Type: тип ресурса (script, font, png, jpg, stylesheet...)
›
Initiator: какой ресурс инициирует запрос.
›
Time: сколько занял запрос.
›
Waterfall: графическое представление времени загрузки ресурса.
Кликнув правой кнопкой мыши сверху, можно добавлять и убирать колонки с этой информацией.
добавление и удаление информационных элементов в network
Включение дополнительных элементов вроде Domain, Scheme или Cookies в отдельных случаях помогает найти ресурсы, которые создают ту или иную проблему, но на этом этапе мы остановимся на тех, что заданы по умолчанию.
Есть один аспект, который я затрону лишь вскользь, но о нём стоит помнить. Скорость соединения, особенно на мобильных, — ключевая часть загрузки сайта. Из этого инструмента можно смоделировать более медленные скорости, например 3G на мобильном.
смоделировать низкую скорость передачи данных
Как узнать вес URL и как его уменьшить?
Вес, в мегабайтах или килобайтах, — одна из главных причин, по которым URL долго загружается. Поэтому мы начинаем именно с этого аспекта: он задаст направление для хорошей оптимизации нашего сайта.
Следующие данные получены из упомянутого выше инструмента GTMETRIX и относятся к сайту, который я собираюсь оптимизировать.
метрики веса сайта
Нас интересуют данные в правой колонке, той, что относится к (Page Details), а именно Total Page Size.
На первый взгляд вес этого сайта сильно выше среднего, но учтите: важен не общий вес сайта, а то, сколько этот вес грузится, потому что существует Lazy Load — функция, которая откладывает загрузку до того момента, когда ресурс понадобится пользователю. О ней мы поговорим позже.
Эту же информацию можно найти в инструментах разработчика, в панели, которую мы смотрели выше и о которой я напомню ещё раз.
время загрузки в инструментах разработчика Google
Если посмотреть вниз, то и 7,5 МБ, и 215 запросов очень близки к цифрам, которые показывает GTMETRIX. Важно понимать, откуда GTMETRIX берёт информацию, на случай если вы захотите использовать другой инструмент.
Теперь посмотрим, что столько весит и как это исправить.
Опция Waterfall даёт визуальное представление о том, как загружаются ресурсы: показывает URL ресурса, статус, домен и колонку Size. Если кликнуть по последней колонке, вес отсортируется от большего к меньшему и от меньшего к большему.
анализ загрузки через waterfall
Глядя на вес, видно — как и в большинстве случаев, — что за избыточный вес URL во многом отвечают изображения.
Формальной спецификации максимального веса изображения нет, но мы рекомендуем не больше 100 КБ и, если есть такая возможность (в Photoshop она есть), настраивать прогрессивную загрузку изображений в JPG и избегать PNG всегда, когда не нужен альфа-канал (прозрачность).
Уменьшив вес изображений, мы заметно улучшим загрузку сайта; для этого есть несколько инструментов. Лично я оптимизирую в Photoshop, но есть интересные онлайн-варианты:
И GTMetrix, и инструмент Google позволяют смотреть ресурсы по типам: только изображения, скрипты, CSS...
Это полезно для более широкого взгляда на то, где работать. На этом URL изображения занимают 4 МБ из 7,2 МБ, так что большая часть проблемы веса именно там. И всё же есть другие ресурсы, которые выделяются чрезмерным весом для своего типа: файл CSS больше 700 КБ и скрипт больше 300 КБ.
Здесь хочу уточнить: когда мы проводим оптимизацию скорости загрузки (WPO), приходится сталкиваться с проблемами, у которых решения есть, но повлиять на них мы не можем.
В этом случае мы видим очень большой файл CSS. Если дизайнер создал CSS больше 700 КБ, оптимизировать именно этот файл будет сложно.
Что мы можем сделать, чтобы уменьшить вес этих файлов?
Минификация (CSS, JS и HTML)
Минификация — это процесс, который уменьшает вес файла за счёт удаления ненужных данных: комментариев, пробелов, повторяющегося и неиспользуемого кода. Инструментов для этого много, кроме части с неиспользуемым кодом: её оптимизировать сложнее, пришлось бы вручную лезть в файл (чего я не рекомендую).
К счастью, речь о WordPress, а в WordPress, как все знают, очень редко не находится плагина для такой операции.
Лично мне нравится использовать полностью бесплатный Autoptimize и платный WP Rocket.
В этой статье я хочу объяснить не столько то, как работают эти плагины, сколько то, как выполнять задачи оптимизации. Потому что в других плагинах такие опции тоже есть, и лучше всего — понимать, что мы делаем.
Минификация с WP Rocket
Эта часть несложная. Просто заходим во вкладку оптимизации файлов и ставим галочку минификации HTML. В WP Rocket эта опция ниже повторяется для файлов CSS и JS. Всё же рекомендую включить эту галочку и протестировать. Повторяйте эту операцию по одной, потому что, если что-то сломается, найти проблему будет проще.
минификация html в wp rocket
Прежде чем проверять эффект минификации, нужно очистить кэш, иначе мы не увидим результат обновлённого HTML.
Как очистить кэш браузера?
В таких плагинах есть опции очистки кэша, их видно сверху.
очистка кэша в wp rocket
Другой способ — через браузер, когда включены Google Developer Tools (Ctrl + Shift + I).
Кликните правой кнопкой мыши по стрелке «обновить страницу» и выберите «очистить кэш и выполнить полную перезагрузку».
очистка кэша в браузере Chrome
Минификация с Autoptimize
В Autoptimize минификацию выполняет действие optimize, с той особенностью, что есть опция сохранить комментарии HTML. Такие комментарии обычно добавляют разработчики, чтобы сохранить информацию, которая может пригодиться в будущем.
минификация html в autoptimize
Чтобы проверить, что оптимизация сработала, зайдём в исходный код URL — там должно быть примерно так:
пример минифицированного html
Код становится нечитаемым, но функциональность у него та же.
Эти опции точно так же повторяются в WP Rocket и Autoptimize для файлов CSS и JS. Как я уже говорил, не рекомендую оптимизировать всё сразу — лучше по 1 файлу за 1 раз. Эти плагины хранят копии минифицированных файлов, поэтому вернуться к оригиналу можно, сняв соответствующую галочку.
Чтобы и дальше уменьшать вес страницы, есть ещё 2 варианта:
›
Убрать или сократить плагины, которые добавляют CSS или JS к загрузке.
›
Удалить или урезать неиспользуемый код в файле CSS.
Эти 2 варианта сложнее и требуют больше знаний: нужно быть аккуратным и убедиться, что с других страниц нет обращений к той части, которую вы удаляете.
Убрать плагины получается не всегда — из-за того ресурса, который они дают, — но одни плагины оптимизированы лучше других: меньше запросов и легче JS. Так что в прекрасной экосистеме WordPress почти всегда есть альтернатива.
Время загрузки vs время ответа
Теперь поговорим о запросах, времени ответа и времени загрузки. Здесь нужно упомянуть фундаментальную часть процесса — сервер. Оптимизация сервера обычно вне нашего контроля, поэтому важно выбрать эффективное решение.
Но пойдём по порядку.
Что такое запрос?
Запрос, или HTTP Request, — это обращение клиента к серверу за определённым ресурсом. Запросы могут уходить на разные серверы.
Запросы бывают HTTP или HTTPS. Если посмотреть на структуру запроса, можно проанализировать, где возникает задержка во времени.
Анализ времени HTTP-запроса
структура HTTP-запроса
Разберём, что мы видим на этой диаграмме времени.
›
Запрос начат, но заблокирован или поставлен в очередь: если блокировка длится долго, причин может быть несколько: запросы с более высоким приоритетом или много запросов к этому источнику.
›
DNS Lookup: браузер определяет IP-адрес запроса.
›
Connecting: время на подключение к серверу для обработки запроса. Если оно большое, это может указывать на проблемы сети, ошибки соединения или перегруженный сервер.
›
Sending: запрос ресурса отправляется.
›
Waiting: это время, за которое сервер обрабатывает запрос и отправляет ответ; если оно большое, проблема на сервере.
›
Receiving: получение ресурса.
В HTTPS-запросе добавляется ещё один шаг, он показан здесь.
анализ HTTPS-запроса
Эти два скриншота относятся к двум разным сайтам: один неоптимизированный (HTTP Request), другой оптимизированный (HTTPS Request).
Если присмотреться и сравнить, наибольшая разница — во времени ожидания. В таких случаях нужно детальнее анализировать сервер.
Запросы к серверу: как их сократить?
Как мы видели, число запросов тесно связано со временем загрузки, поэтому сокращение числа запросов улучшит время загрузки URL. В процессе оптимизации играет роль здравый смысл и понимание, действительно ли ресурс полезен пользователю или нашему бизнесу. Это момент попрощаться с ресурсами, которые ничего не дают, но решать это не мне.
Тем не менее у нас есть варианты улучшить ситуацию с запросами, даже если эти действия не дадут огромных изменений в загрузке сайта. Повторюсь: лучше всего убрать ресурсы, которые ничего не добавляют.
Объединение CSS и JS
Ещё одно популярное действие при оптимизации страницы — объединение ресурсов CSS и JS, но что это значит?
Цель объединения — сократить запросы ценой увеличения веса файла. Объединение означает сведение разных ресурсов CSS или JS в один.
Если время ответа большое, объединение может быть полезно. Если время отправки очень медленное, возможно, лучше другая техника.
Идеально — объединять при хорошем сервере, тогда мы выигрываем с обеих сторон.
Объединение ресурсов в WP Rocket и Autoptimize
Операция объединения в этих плагинах такая же простая, как раньше. Просто ставим соответствующую галочку.
объединение css в wp rocket
В WP Rocket опции объединения CSS и JS одинаковые, панели практически идентичны. Как видно на изображении, есть поле, куда можно добавить путь к файлам, которые мы не хотим объединять.
Autoptimize предлагает больше опций для работы с CSS и сокращения запросов. В отмеченной мной опции он объединяет и предупреждает о возможном эффекте, но в итоге это всегда относительно.
В этой первой части статьи я хотел объяснить, в чём состоят некоторые базовые действия, которые встречаются практически во всех плагинах WPO-оптимизации, но сделать для улучшения запросов и времени загрузки можно ещё много чего.
Настройка кэша
Без сомнения, оптимизация кэша — одно из действий, где заметны наибольшие улучшения в загрузке сайта. В этой статье про SEO для WordPress я объяснял, как работает кэш. Советую заглянуть, чтобы разобраться.
Autoptimize и WP Rocket выполняют действия по кэшированию, но у WP Rocket опций на пару больше. Стоит отметить, что плагины сделали эту оптимизацию проще: опций совсем немного, а процесс быстрый и безболезненный.
настройка wp rocket
Как видите, WP Rocket позволяет работать с 4 вещами:
›
Включить кэширование для мобильных устройств.
›
Сохранять файлы отдельно для мобильных устройств.
›
Включить кэширование для авторизованных пользователей.
›
Указать время очистки кэша.
Какую опцию выбрать, зависит от проекта, но с учётом всего сказанного мой совет такой:
›
Мобильный кэш всегда, потому что, хотя большинство сайтов адаптивные, есть контент, который может быть на мобильном, но не на десктопе.
›
Файлы отдельно.
›
Без кэша для авторизованных пользователей, прежде всего потому, что, если я вношу правки, кэширование мне не нужно.
›
Время кэша зависит от того, как часто вы меняете сайт. Если это ежедневный новостной сайт — короткое; если контент обновляется редко — длиннее.
Lazyload
Функция lazyload помогает показывать ресурсы (изображения и iframe) тогда, когда они нужны пользователю: браузер не загружает эти ресурсы, пока пользователь до них не долистает. Эта функция реализована во многих плагинах и даже предустановлена в некоторых темах WordPress. Начиная с версии Chrome 76 она есть в браузере нативно.
Это значит, что при добавлении атрибута loading="lazy" браузер уже интерпретирует отложенную загрузку изображения, но, конечно, не каждый браузер это поймёт, поэтому рекомендую продолжать использовать плагин. Вот видео с web.dev, показывающее пример отложенной загрузки изображений.
Оптимизация iframe
Если мы используем iframe для встраивания контента с других сайтов, есть два действия, которые улучшат загрузку.
›
Отложенная загрузка через функцию lazyload
›
Или замена iframe изображением, пока пользователь не кликнет по нему.
И первый, и второй вариант можно включить снова через наш излюбленный плагин WP Rocket.
Файлы JS — одна из причин того, что аудиты скорости называют блокировкой рендеринга страницы. Это происходит, когда во время рендеринга браузер останавливается, чтобы скачать файл JS и выполнить его. Цель WPO-оптимизации — доставить информацию пользователю как можно быстрее, поэтому это считается блокировкой: ничего не отрисовывается, пока скачанный JS не выполнится.
Поэтому такие вещи обычно отмечаются в аудите. При использовании сторонних плагинов или плохо оптимизированных тем у нас может быть JS, который блокирует рендеринг, потому что находится, например, в header.
В таких случаях следует использовать два атрибута, которые добавляются в код вызова JS, — Defer и Async. Чтобы эти атрибуты работали, скрипты должны быть внешними.
В SEO Alive мы используем плагин Pre Party Resource Hints, который позволяет выбрать, к каким файлам и какой метод загрузки применить. Чудо!
В чём разница между Defer и Async?
Хотя у обоих атрибутов схожая цель — не дать JS остановить интерпретацию DOM HTML, — между ними есть заметная разница.
С атрибутом Async ресурс скачивается, не останавливая загрузку HTML, но после скачивания загрузка HTML приостанавливается, чтобы выполнить JS; с атрибутом defer ресурс тоже скачивается параллельно с загрузкой HTML, но выполняется, когда загрузка завершится, так что блокировки скриптом нет.
В этом плане между WP Rocket и Autoptimize есть различия. WP Rocket сильно упрощает вам принятие решений и действует полуавтоматически, чтобы JS не блокировал рендеринг; в Autoptimize, напротив, можно включить только опцию Async.
В Autoptimize во вкладке extra есть опция добавить файлы JS, которые мы хотим загружать с Async, но для большей гибкости рекомендуют другой дополнительный плагин — «Async Javascript».
загрузка async в autoptimize
С этим плагином можно работать и с Defer, и с Async, и он даже предлагает варианты в один клик, чтобы упростить дело. Хорошо в этом плагине то, что можно работать со скриптами и исключать те, которые считаем нужными. В WP Rocket, напротив, приходится доверять тому, что делает плагин, хотя делает он это хорошо.
Эта опция находится в той же вкладке оптимизации файлов.
атрибут defer в wp rocket
Что такое CDN и чем он может помочь?
CDN — это так называемая сеть доставки контента. CDN отвечает за хранение части информации и ресурсов, чтобы снять с сервера нагрузку по этим ресурсам и лучше отвечать на неё. У CDN также есть функция географических копий: ресурс доступен в разных точках и отдаётся пользователю независимо от того, откуда он подключается. Обычно такой сервис используют для тяжёлых файлов — изображений и видео.
Подключать такой сервис важно, когда у нас сайты с большим трафиком, хотя не стоит исключать его и для сайтов с небольшим трафиком.
Другие действия, которые дадут ещё немного улучшений
В завершение статьи — ещё 3 улучшения, которые, хотя и не дадут огромных изменений во времени загрузки, помогут сократить запросы, а в итоге именно этого мы и хотим.
Оптимизация шрифтов
Оптимизацию шрифтов можно сделать через плагины или вручную, редактируя и оптимизируя CSS. Идеально — вызывать только тот шрифт, который вы собираетесь использовать, а не скачивать, как это часто бывает, файл со всеми Google Fonts.
В Autoptimize есть опция для работы со шрифтами.
оптимизация шрифтов в autoptimize
Сложно сказать, какую опцию выбрать, не видя проекта, потому что я не знаю, какой шрифт использует ваш шаблон и когда он загружается, так что лучше всего протестировать и посмотреть результат.
Как видите, сразу после опций Google Fonts идёт «Remove Emoji», которая сэкономит нам запрос к серверу. Её функция — просто превращать символы, обозначающие эмодзи, в иконку.
эмодзи в wp rocket
WP Rocket тоже позволяет отключить эти эмодзи и предлагает опцию, запрещающую встраивание контента на сторонних сайтах.
В итоге действий для улучшения скорости загрузки сайта много. Не всегда получается проработать вглубь и оптимизировать каждый ресурс, потому что это зависит от типа бизнеса и его потребностей.
Надеюсь, это руководство по WPO-оптимизации окажется полезным и вы сможете применить его в своих проектах или для клиентов.
Последние 10 с лишним лет я полностью одержим SEO — и, честно говоря, не хотел бы иначе.
Моя карьера вышла на новый уровень, когда я работал старшим SEO-специалистом в Chess.com — одном из ста самых посещаемых сайтов интернета. Работа в таком масштабе: миллионы страниц, десятки языков и одна из самых конкурентных выдач — научила меня тому, чему не научит ни один курс и ни один сертификат. Этот опыт изменил моё представление о том, как выглядит по-настоящему сильное SEO, и лёг в основу всего, что я построил потом.
Из него выросло SEO Alive — агентство для брендов, которые всерьёз занимаются органическим ростом. Мы не продаём дашборды и ежемесячные отчёты. Мы строим стратегии, которые реально двигают цифры, соединяя классическое SEO с новым и захватывающим миром Generative Engine Optimization (GEO): чтобы ваш бренд появлялся не только в синих ссылках Google, но и внутри ответов, которые ChatGPT, Perplexity и Google AI Overviews каждый день выдают миллионам людей.
А поскольку инструмента, который нормально закрывает оба этих мира, я так и не нашёл, я сделал его сам — SEOcrawl AI, платформу SEO-аналитики корпоративного уровня, где в одном месте собраны позиции, технические аудиты, мониторинг ссылок, здоровье краулинга и отслеживание видимости бренда в ИИ. Это та платформа, которой мне всегда не хватало.
