Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Россия +7 (495) 139-20-33
7 Августа 2019 в 09:34

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

Россия +7 (495) 139-20-33
15 35658
Подпишитесь на нас в Telegram
Марина Ибушева
Выпускающий редактор SEOnews

В январе 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

15 комментариев
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
  • Usy_dobra
    1
    комментарий
    0
    читателей
    Usy_dobra
    больше года назад
    Это все прекрасно, но, если чекнуть сайт этого типа, то там оказывается как бэ 50/82 prntscr.com/qumqnf, а на словах-то Лев Толстой..
    -
    5
    +
    Ответить
  • Георгий
    1
    комментарий
    0
    читателей
    Георгий
    больше года назад
    Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html,  оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
    -
    0
    +
    Ответить
  • Guest123
    1
    комментарий
    0
    читателей
    Guest123
    больше года назад
    Вот какой смысл писать бесполезную с точки зрения практики статью, что ссылку просто проставить на NickLeRoy, ну поставьте тогда и на меня заодно pyatilistnik.info
    -
    4
    +
    Ответить
  • 1qa
    1
    комментарий
    0
    читателей
    1qa
    больше года назад
    87
    Performance
    95
    Accessibility
    79
    Best Practices
    95
    SEO
    аудит точнее будет
    -
    0
    +
    Ответить
  • Vova Dren
    1
    комментарий
    0
    читателей
    Vova Dren
    больше года назад
    Такое ощущение, что статья написана ради ссылки в конце. Сеоньюс, сделайте уже раздел "реклама" ...
    -
    0
    +
    Ответить
    • Марина Ибушева
      64
      комментария
      0
      читателей
      Марина Ибушева
      Vova Dren
      больше года назад
      Здравствуйте! Все рекламные материалы на SEOnews помечаются. В данном случае мы решили перевести и опубликовать эту статью совершенно бесплатно, так как она показалась нам интересной и вызвала бурное обсуждение среди западных SEO-специалистов.
      Ссылки мы ставим в конце ко всем материалам, если у них есть первоисточник.
      -
      1
      +
      Ответить
  • 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/
    Сайт на  вордпресс, некоторые страницы ещё не доделаны, но вы ещё покликайте на нем, думаю вам понравится
    -
    -10
    +
    Ответить
    • Дарья Пынзарь
      4
      комментария
      0
      читателей
      Дарья Пынзарь
      больше года назад
      Непонятно почему заминусили)) вы попробовали хоть переходить по страницам?
      -
      -8
      +
      Ответить
    • Михаил Букатый
      3
      комментария
      0
      читателей
      Михаил Букатый
      Дарья Пынзарь
      больше года назад
      Скорость высокая, как на турбо-страницах от Яндекс. Как вы добились?
      -
      0
      +
      Ответить
      • Дарья Пынзарь
        4
        комментария
        0
        читателей
        Дарья Пынзарь
        Михаил Букатый
        больше года назад
        Посмотрите в коды, может быть поймёте как работает.
        Интересно будет посмотреть как повлияет на сео, ведь поведенческие факторы должны быть очень высокие . Это Тестовый сайт и он ещё наполняется,  поэтому пока результаты получить не удастся, пока его не залью на постоянный сайт
        -
        0
        +
        Ответить
      • DeepOD
        7
        комментариев
        0
        читателей
        DeepOD
        Михаил Букатый
        больше года назад
        Сайт без дизайна, плагинов, шрифтов, анимации. Сайт где только картинки и текст. Естественно будет грузится очень быстро.
        -
        3
        +
        Ответить
        • Дарья Пынзарь
          4
          комментария
          0
          читателей
          Дарья Пынзарь
          DeepOD
          больше года назад
          Шрифты подгружаются Robots, анимация есть, видео тоже присутствуют, плагинов штук 15, просто над сайтом проведена очень серьёзная работа и много допиливалось вручную, а не бралось из коробки как есть.
          -
          -6
          +
          Ответить
  • Михаил Букатый
    3
    комментария
    0
    читателей
    Михаил Букатый
    больше года назад
    Вот бы оценивать скорость не в попугаях различных сервисов, а в фактической скорости загрузки страниц как было и стало. Google признает, что данные рекомендации и факторы ранжирования это разные вещи.
    -
    4
    +
    Ответить

Отправьте отзыв!
X | Закрыть