×
Россия +7 (495) 139-20-33

Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights

Россия +7 (495) 139-20-33
Шрифт:
15 27463

В январе 2018 года Google официально объявил, что скорость сайта является фактором ранжирования в мобильном поиске. И хотя время загрузки страниц всегда имело решающее значение для хорошего пользовательского опыта, именно после заявления Google многие владельцы обратили внимание на скорость своих ресурсов.

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Все владельцы сайтов могут значительно увеличить скорость загрузки страниц, считает Ник и рассказывает, как это сделать.

Как получить оценку 100 в Google PageSpeed Insight

Операция «Ускорить WordPress»

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

Прежде чем приступить к ускорению своего ресурса, Ник Лерой решил понять, с чем предстоит работать. Так как сайт построен на CMS WordPress, были проанализированы следующие области:

  • хостинг,
  • тема,
  • плагины,
  • изображения,
  • ресурсы.

На основе проверки был составлен список того, что можно улучшить. Затем Ник приступил к внедрению изменений.

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кеширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

  • предлагали услуги хостинга специально для WordPress-сайтов,
  • относительно доступны по цене ($25-30 в месяц),
  • предлагали решения для кеширования на сервере,
  • имели встроенную технологию CDN,
  • предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

В итоге было решено остановиться на хостинге FlyWheel. Этот провайдер был немного дешевле и предоставлял локальные решения для разработки новых сайтов на WordPress.

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

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

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

Тема WordPress

Тема, которая изначально использовалась на сайте Ника, была куплена у сторонних разработчиков. Часто такие темы поставляются в комплекте с кучей различных функций. Имеют компоновщик страниц, плагины для слайд-шоу, несколько библиотек JavaScript, библиотеки шрифтов и многое другое. Нередко такие темы используют CSS и JavaScript, чтобы удовлетворять потребностям аудитории.

В результате многие темы содержат большое количество ненужного функционала.

Плагины

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

Изображения

Большинство владельцев сайтов находят изображения, обрезают их в графических редакторах и загружают на свои сайты. Так делал и Ник.

Хотя WordPress сжимает загружаемые медиа-файлы, он справляется с этим не очень хорошо. Большинство изображений обычно весит гораздо больше, чем необходимо. А это, в свою очередь, влияет на скорость загрузки страниц.

Ресурсы

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

На сайте NickLeRoy.com использовалось большое количество ресурсов, даже там, где они не были необходимы. Шрифты, javascript-файлы для ненужных функций, CSS для стилей и эффектов и многое другое, от чего можно было бы избавиться.

Решение: создание нового сайта

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

Тогда Ник принял решение перезапустить сайт с нуля на новом хостинге. Для этого была проделана следующая работа:

  • чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
  • установка облегченной темы,
  • установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
  • перестройка всего сайта,
  • оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
  • установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

После перезапуска сайта скорость загрузки страниц стала значительно меньше

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

  • отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
  • удалить из верхней части страницы код CSS и Inline,
  • оптимизировать файлы JS / CSS,
  • установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
  • улучшить кеширование для ресурсов.

Заключение

Любой владелец сайта на WordPress и другой CMS может значительно ускорить ресурс. Можно последовать примеру Ника и перезапустить сайт или попытаться исправить проблемы на текущем сайте, влияющие на скорость загрузки страниц. Какой бы вариант вы ни выбрали, затраченные усилия обязательно окупятся ростом трафика, снижением показателя отказов и, возможно, повышением позиций в поисковых системах.

Источник: NickLeRoy

(Голосов: 57, Рейтинг: 2.77)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Usy_dobra
    1
    комментарий
    0
    читателей
    Usy_dobra
    6 месяцев назад
    Это все прекрасно, но, если чекнуть сайт этого типа, то там оказывается как бэ 50/82 prntscr.com/qumqnf, а на словах-то Лев Толстой..
    -
    5
    +
    Ответить
  • Георгий
    1
    комментарий
    0
    читателей
    Георгий
    больше года назад
    Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html,  оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
    -
    0
    +
    Ответить
  • Guest123
    1
    комментарий
    0
    читателей
    Guest123
    больше года назад
    Вот какой смысл писать бесполезную с точки зрения практики статью, что ссылку просто проставить на NickLeRoy, ну поставьте тогда и на меня заодно pyatilistnik.info
    -
    3
    +
    Ответить
  • 1qa
    1
    комментарий
    0
    читателей
    1qa
    больше года назад
    87
    Performance
    95
    Accessibility
    79
    Best Practices
    95
    SEO
    аудит точнее будет
    -
    0
    +
    Ответить
  • Vova Dren
    1
    комментарий
    0
    читателей
    Vova Dren
    больше года назад
    Такое ощущение, что статья написана ради ссылки в конце. Сеоньюс, сделайте уже раздел "реклама" ...
    -
    0
    +
    Ответить
    • Марина Ибушева
      0
      комментариев
      0
      читателей
      Марина Ибушева
      Vova Dren
      больше года назад
      Здравствуйте! Все рекламные материалы на SEOnews помечаются. В данном случае мы решили перевести и опубликовать эту статью совершенно бесплатно, так как она показалась нам интересной и вызвала бурное обсуждение среди западных SEO-специалистов.
      Ссылки мы ставим в конце ко всем материалам, если у них есть первоисточник.
      -
      0
      +
      Ответить
  • Alex Beglov
    1
    комментарий
    0
    читателей
    Alex Beglov
    больше года назад
    Еще достаточно важный пункт по ускорению - оптимизация и сжатие картинок на сайте. Можно оптимизировать вручную каждую картинку (через Photoshop к примеру), можно автоматически (через специальные сервисы). Вот интересная статья на эту тему: pr-cy.ru/news/p/6831-kak-i-zachem-optimizirovat-izobrazheniya-na-sayte
    -
    0
    +
    Ответить
  • Влад
    1
    комментарий
    0
    читателей
    Влад
    больше года назад
    Статья ни о чём.
    1) Ускорение сайта и переделка с нуля - две разные вещи.
    2) Если его переделали с нуля, почему сразу было не перенести и не оптимизировать css и js.
    3) Где с равнение с другими 500 хостингами, которые предоставляют все эти стандартные функции и стоят дешевле. И зачем писать про CDN, если ей не пользовались.
    4) Есть множество статей, которые более подробно рассматривают проблемы оптимизации и на примере российских сайтов.
    -
    14
    +
    Ответить
  • Дарья Пынзарь
    4
    комментария
    0
    читателей
    Дарья Пынзарь
    больше года назад
    98 или 99 на мобильной и 100 на пк. www.rusguardsecurity.ru/
    Сайт на  вордпресс, некоторые страницы ещё не доделаны, но вы ещё покликайте на нем, думаю вам понравится
    -
    -9
    +
    Ответить
    • Дарья Пынзарь
      4
      комментария
      0
      читателей
      Дарья Пынзарь
      больше года назад
      Непонятно почему заминусили)) вы попробовали хоть переходить по страницам?
      -
      -6
      +
      Ответить
    • Михаил Букатый
      3
      комментария
      0
      читателей
      Михаил Букатый
      Дарья Пынзарь
      больше года назад
      Скорость высокая, как на турбо-страницах от Яндекс. Как вы добились?
      -
      0
      +
      Ответить
      • Дарья Пынзарь
        4
        комментария
        0
        читателей
        Дарья Пынзарь
        Михаил Букатый
        больше года назад
        Посмотрите в коды, может быть поймёте как работает.
        Интересно будет посмотреть как повлияет на сео, ведь поведенческие факторы должны быть очень высокие . Это Тестовый сайт и он ещё наполняется,  поэтому пока результаты получить не удастся, пока его не залью на постоянный сайт
        -
        0
        +
        Ответить
      • DeepOD
        7
        комментариев
        0
        читателей
        DeepOD
        Михаил Букатый
        больше года назад
        Сайт без дизайна, плагинов, шрифтов, анимации. Сайт где только картинки и текст. Естественно будет грузится очень быстро.
        -
        2
        +
        Ответить
        • Дарья Пынзарь
          4
          комментария
          0
          читателей
          Дарья Пынзарь
          DeepOD
          больше года назад
          Шрифты подгружаются Robots, анимация есть, видео тоже присутствуют, плагинов штук 15, просто над сайтом проведена очень серьёзная работа и много допиливалось вручную, а не бралось из коробки как есть.
          -
          -5
          +
          Ответить
  • Михаил Букатый
    3
    комментария
    0
    читателей
    Михаил Букатый
    больше года назад
    Вот бы оценивать скорость не в попугаях различных сервисов, а в фактической скорости загрузки страниц как было и стало. Google признает, что данные рекомендации и факторы ранжирования это разные вещи.
    -
    4
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
381
комментарий
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Дмитрий
1
комментарий
0
читателей
Полный профиль
Дмитрий - Нейромаркетинговые исследования также могут положительно повлиять на продвижение сайта, я лично убедился обратившись к компании Neorotrack, и результат был отличным
Digital-marketing: как выжить в кризис. Опыт реальной компании
Maks
1
комментарий
0
читателей
Полный профиль
Maks - Спасибо за опыт Вашей компании, Иван Папусь. Интересно получилось! Желаю Вашему бизнесу стабильности и успешно пережить все кризисы))
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
0
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
0
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
381
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!