уменьшите влияние стороннего кода wordpress
SEO 📈 Как оптимизировать сайт на WordPress
Чтобы сайт занял топовые позиции поисковой выдачи Яндекса и/или Google, нужно соблюсти большое количество общепризнанных и негласных правил – SEO оптимизация. Причем никто не способен точно обозначить их все. Связано это с тем, что на сегодняшний день поисковые алгоритмы стали слишком сложными. Однако многочисленные наблюдения SEO-специалистов, их тесты и просто здравый смысл позволили определить факторы, которые положительно сказываются на росте поисковых позиций любого web-сайта в рунете и за его пределами. Один из основных таких факторов – скорость загрузки сайта. И в этой статье я хочу рассмотреть плагины для WordPress, позволяющие ускорить работу сайта В РАЗЫ!🚀
SEO оптимизация WordPress
Итак, если для своего сайта вы выбрали платформу WP (что, безусловно, очень хороший выбор!), то при первичной установке вы получите не самые положительные показатели с точки зрения скорости загрузки страниц. Проверить их можно с помощью инструмента от Google – PageSpeed Insights.
На старте вашему WordPress сайту скорее всего потребуется оптимизировать следующие показатели:
Эти показатели позволяют улучшить следующие мероприятия:
Это основные действия, предприняв которые вы сможете существенно повысить скорость загрузки вашего сайта, а следовательно увеличить шансы на попадание в топы поисковой выдачи. Но встает правомерный вопрос – как это сделать?! Давайте разберемся, как выполнить выше описанные задачи, чтобы оптимизировать WordPress сайт.
Некоторые пункты потребуют вмешательства квалифицированных специалистов, но в тоже время большинство задач решается простым использованием специально разработанных вордпресс плагинов.
Лучшие SEO плагины для WordPress
Если вы внимательно изучите страницу результатов теста PageSpeed Insights, то сможете без труда определить, какие WP плагины подходят для решения той или иной задачи. Но давайте я вам облегчу задачу и сэкономлю время – ведь именно для этого я и пишу данную статью. Для оптимизации WordPress сайта вам необходимо установить и активировать следующие плагины:
Использование этих плагинов на начальной стадии позволяет существенно оптимизировать WordPress сайт. Вот лично мой результат для этого сайта на момент написания статьи:
WP плагины, которые также могу пригодиться
По мере развития вашего проекта, возможно вам понадобятся дополнительные инструменты. Скорее всего прийдётся поиграться с настройками и комбинациями используемых плагинов в целом. Поэтому я считаю правильным перечислить дополнительные решения, которые могут вам пригодиться.
Итак, помимо указанных выше, с задачами по ускорению WP сайтов так же неплохо справляются следующие плагины:
Итак, считаю, что теперь вы вооружены по полной и сможете достичь максимальной скорости загрузки вашего сайта. Буду крайне признателен, если в комментариях под этой статьёй поделитесь впечатлениями/опытом от использования этих плагинов, а так же если расскажете о других, которые используете в работе. Благодарю и удачи в делах!
Как улучшить Google Page Speed: оптимизация WordPress за 10 минут
Тотальный туториал
Содержание:
Почему это важно?
Ingredients
Directions
Кому на Руси жить хорошо? Конечно же сайтам с адаптивным дизайном на премиум-шаблонах. Но думать, что разработчики всё сделают за тебя достаточно наивно, у WordPress в принципе есть много проблем с логикой (при открытии главной страницы может происходить до 20 запросов в базу данных). Сейчас мы на своем примере покажем, как реально бустануть твой блог — пару-тройку минут и мы на танцах.
Дисклеймер: все изменения вы делаете на свой страх и тем более риск. Все указанные способы тестировались на платформе WordPress версии 5.2.4. Перед началом лучше сделать бэкап и решить для себя, какого результата вы ждёте. Если вы совсем не представляете как работает JS, CSS и HTML, то совет один — «Руками ничего не трогать, кнопки не нажимать»
0. С чего мы начинаем
Сам сервис показывает нам какие ресурсы и сколько времени загружаются на нашем сайте, давая рекомендации по их устранению
1. Устраните ресурсы, блокирующие отображение
1.1 Плагин Autoptimize
После установки плагин может сыпать ошибками «Autoptimize не может записать в каталог кэша».
Ему не хватает прав для создания этой папки — можно исправить через FTP-менеджер, создав директорию cache в каталоге wp-content и назначит ей соответствующие права
Собственно, основные настройки всего две: оптимизация JS и оптимизация CSS-кода. В остальные вкладки можно не ходить. Хорошая новость состоит в том, что плагин переведен на русский язык, а плохая в том, что неопытному пользователю всё равно будет непонятно. Мы рекомендуем оставить галочки в чекбоксах, как показано на скрине ниже:
Раздел CSS делаем аналогично
Теперь переходим к следующему плагину
1.2 Плагин Hummingbird
Один из самых крутых плагинов, который помогает улучшить скорость WordPress, но, к сожалению, только на английском языке. Hummingbird встречает нас дашбордом, где мы видим, в принципе, всё тоже самое, что показывал нам Google Page Speed. Не забудьте переключиться на мобильную версию, по дефолту нам показывается десктопный тест
Как и Autoptimize, у Hummingbird есть своя настройка кеширования. На нём мы останавливаться уже не будем, благо мы уже настроили это в предыдущем плагине, тем более, что при включении кэширования опять начнутся проблемы с правами (победить это можно создав файл advanced-cache в директории wp-content):
Сразу переключайтесь в расширенный режим ( Enable advanced mode). Напротив каждого файла есть несколько иконок.
Compression — Сжатие позволяет оптимизировать файлы CSS и Javascript, удаляя в них ненужные символы и пробелы, уменьшая их вес.
Combine — поможет объединить небольшие файлы, чтобы уменьшить количество запросов при загрузке страницы
Move to Footer — перенести загрузку файла в футер сайта
Defer — функция для скриптов JavaScript, включение которой означает, что они будут загружаться только после загрузки всего остального на вашей странице. Это позволит загружать наиболее важные файлы и контент в первую очередь.
Don’t load file — включение этой позволит не загружать этот файл
Так же доступен выбор для оптимизации — можно редактировать не только файлы темы, но и плагины:
В итоге после работы над файлами у нас получилось оптимизировать файлы на
2. Отложите загрузку скрытых изображений
Сделать это можно с помощью так называемой «ленивой» загрузки ( lazy load ). Эта функция позволяет подгружать изображения, только когда основные ресурсы (текст) будет загружены, что позволит пользователям начать работу с контентом, не дожидаясь, пока подгрузятся все изображения. после завершения загрузки всех критически важных ресурсов, чтобы уменьшить время до интерактивности. Такая настройка может быть в настройках вашей темы WP
2.1 Плагин Smush
Данный плагин можно использовать для включения Lazy Load
а так же оптимизировать изображения с его помощью.
К сожалению, бесплатная версия сможет оптимизировать лишь часть изображений, поэтому, если встроенная тема WP даёт вам возможность включить Lazy Load без дополнительных плагинов, то для сжатия изображений лучше обратиться к разделу «Используйте современные форматы изображений»
3. Удалите неиспользуемый код CSS
Браузер выдаст вам разбивку файлов JavaScript и CSS, которые были использованы на странице. Каждая полоса имеет вес и цвет — красный — неиспользованный код, а зеленый — код, который запускался.
Побродите по вашему сайте в режиме «записи» (браузер будет генерировать данные) — узнаете много нового. В том числе, что CSS может не использоваться до 90% от всего его кода.
4. Используйте современные форматы изображений
Это JPEG — весит 36 кбайт
Аналогичное изображение в webp «весит» всего 16 кбайт
Таким образом выбор webp сильно ускорит загрузку изображений — однозначный must have, если в ваших материалах огромное количество изображений (обзоры девайсов, инструкции по настройке и/или ремонту, различные гайды по сервисам и так далее)
О том, как настроить wepb на своем сайте читайте в нашей отдельной статье. Учтите, что если вы будете использовать CDN (см. конец этой статьи), то плагин WebP Conveter работать не будет
5. Настройте подходящий размер изображений
[adace-ad >Чтобы привести размеры ваших изображений в соответствие с требованиями, загрузите их в библиотеку файлов. Затем вставьте их на сайт прямо из библиотеки или используйте виджет изображений.
К тому же, в настройка темы WordPress обычно имеются настройки
6. Уменьшите влияние стороннего кода
С нашей стороны был отключен виджет «Инстаграма», который подгружал картинки с нашего неофициального аккаунта. Решили ограничиться виджетом иконок социальных сетей, который почти не потребляет трафика. Как вариант, можно отключить показ сайдбара в мобильной версии. В нашей теме для WP такого функционала, к сожалению, не оказалось.
7. Задайте правила эффективного использования кеша для статических объектов
ExpiresActive On
ExpiresDefault «access plus 6 month»
ExpiresByType text/css «access plus 6 month»
ExpiresByType text/plain «access plus 6 month»
ExpiresByType image/gif «access plus 6 month»
ExpiresByType image/png «access plus 6 month»
ExpiresByType image/jpeg «access plus 6 month»
ExpiresByType application/x-javascript «access plus 6 month»
ExpiresByType application/javascript «access plus 6 month»
ExpiresByType application/x-icon «access plus 6 month»
Почему мы не использовали для кэширования W3 Total Cache или WP Super Cache?
Два данных плагина часто мелькают в различных обзорах о повышении скорости WordPress. Но проблема в том, что данные решения не работают «из коробки». Вот, например скрин при установке WP Super Cache:
При этом все советы, которые дают разработчики в логе на скрине всё равно не помогают. Изменение прав доступа, удаление advanced-cache.php, прописывание параметра WPCACHEHOME в файл wp-config, создание файла wp-cache-config — ничего не сработало.
Здесь помимо проблем чисто с WP добавились проблемы с файлом ngnix.conf
В совокупности всех танцев с бубном мы решили остановиться на Autoptimize в качестве кэширующего плагина
8. Initial server response time
Время ответа сервера — важнейший параметр, не только для Google Page Speed. В 2021 году тот же самый Гугл вводит новый фактор для ранжирования сайтов — Page Experience, который включает в себе метрики Web Vitals. Они изменяют оценку удобства пользования сайта. Конкретно оцениваются те факторы, которые присутствуют в Google Page Speed. Речь про Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS)
Причем тут скорость загрузки сайта? При том, что LCP и CLS непосредственно относятся к параметрам отрисовки и верстки страницы
Что может тормозить рендеринг на стороне сервера?
Официальная справка Google Page Speed гласит о том, что на время отклика сервера в WordPress влияют темы и плагины. Если точнее, то их CSS, HTML, JS-код. Но как точно узнать, что именно из всей плеяды установленных дополнений так сильно тормозит прорисовку? В этом поможет режим разработчика в Google Chrome. Запускаем браузер, нажимаем F12. Переходим в открывшемся окне на вкладку Network (чуть ниже должно стоять All). Теперь зайдите на страницу вашего сайта — на вкладке Network отобразятся все элементы и время их выполнения
Смотрим на последний столбик Watterfall: какой-то запрос обрабатывается целых 19(!) секунд. Об этом свидетельствует метрика TTFB — time to first byte, т.е. время, которое проходит от запроса пользователя, до начала отдачи страницы сервером. Получение первого TCP пакета с сервера в качестве ответа – является именно получение первого байта.
Как уменьшить TTFB?
Время TTFB включает в себя доставку пакетов до пользователя и генерацию страницы. Первое можно решить с помощью CDN (см. следующий пункт). Про генерацию страницы мы написали выше — это темы, плагины, скрипты, база данных. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером.
Проблема здесь в том, что со своей стороны (пользовательской) что-либо сделать представляется мало возможным, кроме оптимизации темы и плагинов. TTFB может проседать даже из-за таких файлов как wp-login.php, favicon.ico или даже из-за админки (wp-admin/admin-ajax.php). В целом, советы по уменьшению этого времени выглядят так:
proxy_connect_timeout 600;
proxy_send_timeout 600;
proxy_read_timeout 600;
send_timeout 600;
Также рекомендуется увеличить max_execution_time в php.ini:
Тесты, где можно проверить скорость параметра TTFB:
https://webpagetest.org/
https://gf.dev/ttfb-test
https://kinsta.com/blog/ttfb/
Проблема с файлом admin-ajax.php
Если у вас проседает параметр на файле admin-ajax.php, то это тоже признак того, что какой-то плагин работает некорректно. Причём этот файл всё равно загружается вместе с остальным контентом, даже если вы не авторизованы. Фактически, советы будут те же, что и описаны выше. Но есть еще один лайфхак. Отчасти проблему может решить плагин Heartbeat control, который контролирует частоты AJAX запросов из браузера для админки, который генерирует большое количество вызовов PHP.
Как в итоге увеличить скорость?
Чтобы окончательно решить проблему и с кэшированием, и с защитой, и с временем отклика сервера, рекомендуем использовать сервис Cloudflare. Это специальный прокси-сервер (reverse proxy, если точнее) через который пойдет трафик с сайта. CloudFlare загружается вдвое быстрее, потребляет на 60% меньше трафика, получает на 65% меньше нагрузки на сервер и при этом является более защищенным. Работает это всё через платформу Content Delivery Network (CDN) — это сетевая инфраструктура, позволяющая оптимизировать передачу данных до конечного пользователя. В сети CloudFlare хранятся копии статических файлов в географически близких к веб-посетителям местах, что означает быструю их загрузку. CloudFlare кэширует такие ресурсы, как CSS, JavaScript и изображения.
Для регистрации в сервисе необходимо пройти по ссылке Sign Up на главной странице сервиса (https://www.cloudflare.com/)
Вводим данные для аккаунта:
Выбираем бесплатный тарифный план
Дальше потребуется изменить корневые DNS. Нас интересуют те, которые
Для этого убедитесь, что в столбце Status напротив записей типа A и/или AAAA с адресом сайта и www отображается оранжевое облачко. Остальные облачка должны быть серыми. Нажмите кнопку Continue для перехода к следующему шагу.
DNS меняется у вашего регистратора. В NIC.RU это делается в панели управления в категории Услуги — Мои домены.
В карточке сайта в пункте DNS-серверы нажимайте на кнопку «Изменить»
Указываем два DNS-сервера, которые нам предлагает Cloudflare (Nameserver 1 и Namserver 2)
Выглядеть в панели регистратора это будет так:
После того, как вы поменяли DNS в вашем регистраторе, для закрепления результата можно установить плагин на WordPress
Чтобы плагин заработал, необходимо получить API Token в Clouflare
Настройки, которые выставлены сервисом, оставляем без изменений
Копируем ключ и вставляем в соответствующее поле в плагине
9. Итоги нашей оптимизации:
Для улучшения результата можно так же отключить автопроигрывание gif-анимации и/или видеофайлов (такие настройки так же есть в настройках темы) и другие функции из серии nice-to-have (украшательства), можно убрать все featured-изображения, сосредоточив внимание на текстовом контенте. Однако, стоит ли превращать блог в унылый HTML-гроб, ради нескольких поинтов Page Speed — это большой вопрос.
Сторонний код
Чтобы «разогнать» сайт, проведения одного аудита, а ещё хуже — простого замера скорости,совсем не достаточно. Будучи инструментом со сложной конструкцией, он требует всесторонней работы и изучения возможных ошибок. Наша команда проводит многоступенчатое тестирование и только на основании собранных из нескольких источников данных делает выводы. Затем, исправляется каждый недочёт. Стоит учитывать, что одна ошибка может повлечь за собой целый ряд. Это как в автомобиле, когда неисправность одного узла, тянет за собой поломки в других, а ремонт наиболее очевидной ничего не даёт. Так и при оптимизации сайта — далеко не факт, что проблема кроется в наиболее явной ошибке. Поэтому, корректировки нужно проводить взвешенно и аккуратно. В результате нашей работы — заказчик получает сайт оптимизированный на максимум и с правильными настройками для дальшейшей работы. Это уже не просто страничка в интернете, а полноценный инструмент маркетинга.
Но что делать, если вы уже провели все оптимизации самостоятельно, а сайт всё-равно загружается медленно. Проводя тестирование при помощи сервиса Google PageSpeed Insights, в результатах аудита может отобразиться строка «Сторонний код». Разбираемся, что это значит и как сделать так, чтобы сторонние коды не мешали загрузке страницы.
Что такое сторонние коды и чем они могут навредить
Сторонние коды это всё, что не имеет прямого отношения непосредственно к вашему сайту: реклама, аналитика, трекеры, кнопки социальных сетей, переход на Youtube и так далее. Эти сторонние сценарии могут иметь решающее значение для функциональности сайта или потока доходов. К примеру — рекламные ссылки и банеры. Но сторонние сценарии также сопряжены с целым рядом рисков, на которые нельзя не обращать внимание. А значит, необходимо свести эти риски к минимуму, при этом не потеряв пользы от них.
Чем могут навредить сторонние коды и почему стоит быть с ними внимательным:
● Снижают производительность сайта
● Снижают уровень конфиденциальности пользователей
● Могут нести в себе вредоносные файлы
● Могут быть непредсказуемыми и меняться без вашего на то согласия
● Последствия их использования могут быть непредвиденными
Применяя сторонние коды необходимо полностью удостовериться, что они не влияют на критический путь рендеринга.
Сторонние коды в JavaScript
Мы уже выяснили, что к сторонним кодам относятся любые скрипты, которые встраиваются в сайт от стороннего поставщика. Размещая у себя ссылки на Facebook, VK, Instagram вы тем самым ставите сторонние сценарии, не говоря уже о рекламе и другом контенте. Тем не менее, они увеличивают конверсию и являются полезными.
Одним из наиболее частых является использование видео с Youtube. Вполне логично, что нагружать свою страницу видео файлами не разумно, гораздо логичнее встроить ссылку на видео на абсолютно законном основании. И поскольку это происходит сплошь и рядом, именно на этом примере мы и рассмотрим использование сторонних кодов.
В скриптовом отображении это будет выглядеть таким образом:
Встраивая подобный код мы вполне обоснованно рассчитываем, что отсутствие тяжёлых файлов ускорит процесс загрузки сайта. Но, сторонние сценарии являются основной причиной снижения производительности и часто вызываются не подконтрольными вами ресурсами.
Среди проблем, которые могут всплыть:
● Они могут отправлять слишком много сетевых запросов к нескольким серверам. Чем больше запросов должен сделать сайт, тем дольше он будет загружаться.
● Могут отправлять слишком большое количества JavaScript, который занимает основной поток. Стоит учитывать, что в JavaScript останавливает процесс построения DOM, задерживая скорость отображения страниц.
● Файлы, изображения, видео могут быть не оптимизированы. Это не только негативно влияет на скорость загрузки, но и съедает трафик пользователей.
● Сторонние скрипты, загруженные без осторожности, могут быть единственной точкой отказа.
● Устаревшие API, которые они могут использовать, наносит вред пользовательскому интерфейсу.
Для начала необходимо выявить какие сторонние коды есть на сайте и сколько ресурсов требуется для их загрузки. Как известно — найти проблему, равно половине её устранения. Делается это при помощи специальных инструментов, которые позволяют выявить скрипты, провести их бейнджинг и аудит времени загрузки маяка. Только одним инструментом здесь обойтись невозможно. Необходимо применять все и в определённой последовательности.
Как эффективно загрузить сторонний скрипт?
Без сторонних кодов на сайте зачастую обойтись сложно и тому есть несколько вполне разумных объяснений. Соответственно, необходимо данные скрипты использовать эффективно. Для того, чтобы повысить производительность существует несколько вариантов:
● Загрузите код, используя атрибуты «async» или «defe»r, во избежание блокировки анализа документа.
● Рассмотрите возможность самостоятельного размещения кода, если сторонний сервер работает медленно.
● Удалите скрипт, если он не приносит пользы сайту, а только впустую потребляет ресурсы
Все сторонние коды и сценарии необходимо запускать асинхронно, чтобы они не блокировали DOM, и анализ HTML-документа продолжался. При этом, не подавайтесь на уловки поставщика сторонних кодов, которые предполагают синхронную загрузку. Это негативно скажется не на их, а на вашем сайте. Корректные настройки произвести можно всегда. Для этого потребуются грамотные специалисты, которые разберут коды на составляющие и встроят их так, как нужно.