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

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

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

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

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Георгий
    1
    комментарий
    0
    читателей
    Георгий
    3 месяца назад
    Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html,  оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
    -
    1
    +
    Ответить
  • Guest123
    1
    комментарий
    0
    читателей
    Guest123
    3 месяца назад
    Вот какой смысл писать бесполезную с точки зрения практики статью, что ссылку просто проставить на NickLeRoy, ну поставьте тогда и на меня заодно pyatilistnik.info
    -
    2
    +
    Ответить
  • 1qa
    1
    комментарий
    0
    читателей
    1qa
    3 месяца назад
    87
    Performance
    95
    Accessibility
    79
    Best Practices
    95
    SEO
    аудит точнее будет
    -
    0
    +
    Ответить
  • Vova Dren
    1
    комментарий
    0
    читателей
    Vova Dren
    4 месяца назад
    Такое ощущение, что статья написана ради ссылки в конце. Сеоньюс, сделайте уже раздел "реклама" ...
    -
    0
    +
    Ответить
    • Марина Ибушева
      0
      комментариев
      0
      читателей
      Марина Ибушева
      Vova Dren
      4 месяца назад
      Здравствуйте! Все рекламные материалы на SEOnews помечаются. В данном случае мы решили перевести и опубликовать эту статью совершенно бесплатно, так как она показалась нам интересной и вызвала бурное обсуждение среди западных SEO-специалистов.
      Ссылки мы ставим в конце ко всем материалам, если у них есть первоисточник.
      -
      1
      +
      Ответить
  • Alex Beglov
    1
    комментарий
    0
    читателей
    Alex Beglov
    4 месяца назад
    Еще достаточно важный пункт по ускорению - оптимизация и сжатие картинок на сайте. Можно оптимизировать вручную каждую картинку (через Photoshop к примеру), можно автоматически (через специальные сервисы). Вот интересная статья на эту тему: pr-cy.ru/news/p/6831-kak-i-zachem-optimizirovat-izobrazheniya-na-sayte
    -
    1
    +
    Ответить
  • Влад
    1
    комментарий
    0
    читателей
    Влад
    4 месяца назад
    Статья ни о чём.
    1) Ускорение сайта и переделка с нуля - две разные вещи.
    2) Если его переделали с нуля, почему сразу было не перенести и не оптимизировать css и js.
    3) Где с равнение с другими 500 хостингами, которые предоставляют все эти стандартные функции и стоят дешевле. И зачем писать про CDN, если ей не пользовались.
    4) Есть множество статей, которые более подробно рассматривают проблемы оптимизации и на примере российских сайтов.
    -
    11
    +
    Ответить
  • Дарья Пынзарь
    4
    комментария
    0
    читателей
    Дарья Пынзарь
    4 месяца назад
    98 или 99 на мобильной и 100 на пк. www.rusguardsecurity.ru/
    Сайт на  вордпресс, некоторые страницы ещё не доделаны, но вы ещё покликайте на нем, думаю вам понравится
    -
    -6
    +
    Ответить
    • Дарья Пынзарь
      4
      комментария
      0
      читателей
      Дарья Пынзарь
      4 месяца назад
      Непонятно почему заминусили)) вы попробовали хоть переходить по страницам?
      -
      -4
      +
      Ответить
    • Михаил Букатый
      3
      комментария
      0
      читателей
      Скорость высокая, как на турбо-страницах от Яндекс. Как вы добились?
      -
      0
      +
      Ответить
      • Дарья Пынзарь
        4
        комментария
        0
        читателей
        Посмотрите в коды, может быть поймёте как работает.
        Интересно будет посмотреть как повлияет на сео, ведь поведенческие факторы должны быть очень высокие . Это Тестовый сайт и он ещё наполняется,  поэтому пока результаты получить не удастся, пока его не залью на постоянный сайт
        -
        0
        +
        Ответить
      • DeepOD
        6
        комментариев
        0
        читателей
        DeepOD
        Михаил Букатый
        4 месяца назад
        Сайт без дизайна, плагинов, шрифтов, анимации. Сайт где только картинки и текст. Естественно будет грузится очень быстро.
        -
        1
        +
        Ответить
        • Дарья Пынзарь
          4
          комментария
          0
          читателей
          Дарья Пынзарь
          DeepOD
          4 месяца назад
          Шрифты подгружаются Robots, анимация есть, видео тоже присутствуют, плагинов штук 15, просто над сайтом проведена очень серьёзная работа и много допиливалось вручную, а не бралось из коробки как есть.
          -
          -2
          +
          Ответить
  • Михаил Букатый
    3
    комментария
    0
    читателей
    Михаил Букатый
    4 месяца назад
    Вот бы оценивать скорость не в попугаях различных сервисов, а в фактической скорости загрузки страниц как было и стало. Google признает, что данные рекомендации и факторы ранжирования это разные вещи.
    -
    5
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
#SEOnews14: мы празднуем – вы получаете подарки!
Анна Макарова
0
комментариев
0
читателей
Полный профиль
Анна Макарова - Гость, добрый день! С победителями мы связывались сразу после розыгрыша. Если мы вам не написали, значит, ваш номер не выпал. Но не расстраивайтесь, у нас обязательно будут новые розыгрыши!
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
9
комментариев
0
читателей
Полный профиль
Михаил Мухин - Дожидаться 100 попыток не будем - не дождемся :) Подведем итоги и опубликуем решение 13 Декабря
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
Война с дубликатами. Как нужно и как не нужно канонизировать URL
Ann Yaroshenko
5
комментариев
0
читателей
Полный профиль
Ann Yaroshenko - Дмитрий, добрый день! Если вы проставили на странице с автозапчастями rel=canonical ( а я вижу в коде, что не проставили) или в HTTP хедере, то бот, как правило: выберит ту страницу главной, которую вы указали в rel=canonical ссылке. Eсли же вы этого не сделали, то бот сам выберит оригинал (алгоритмы, по которым бот это делает, скрыты Googl-ом)
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Воообще, на самом деле здесь двоякое впечатление от таких аудитов. Конечно, для полного глубокого анализа и подготовки рекомендаций по сайту - нужны доступы к системам аналитики и инструментам вебмастера. Но если оценивать подобные аудиты с точки зрения чистого SEO (которое все больше и больше становится лишь малой частью digital-маркетинга, лишь одним из каналов) - они имеют место быть. Но с оговоркой, что они сделаны с учетом анализа конкурентов/отрасли. Современные инструменты и алгоритмы позволяют делать это маркетологам в автоматическом режиме, и даже давать рекомендации - возможностями машинного обучения уже никого не удивишь. Да, полное перечисление "мифического" списка ошибок, построенного по предикативным правилам, да еще и с учетом устаревших особенностей ПС - это явный признак некачественного аудита. В первую очередь потому, что эти "ошибки" следует рассматривать в качестве рекомендаций от ПС (как и говорится в справочнике вебмастера у Яндекса/Google). Однако если эти данные даются с отсылкой на данные о конкурентах, об отрасли, используются методы ML и Natural language processing для обработки исходных данных, кластеризации запросов, классификации страниц/запросов/сайтов, определения структуры документа - такие отчеты имеют право на существование. Но ключевым моментом является то, что подобные инструменты достаточно сложны в разработке, а значит требуют квалифицированных специалистов для их разработки. Которых просто нет у студий рассылающих подобные "сео отчеты". Подобные отчеты по "ошибках" тоже неплохой источник информации, но лишь на 0 этапе анализа сайта. И в принципе, теоретически, возможно почти полное составление "хороших аудитов" без участия маркетолога, на основе лишь открытых данных сайта/внешних источников, но только при соответствующем применении всех современных возможностей анализа данных и рекомендательных систем. И в любом случае подобный "хороший отчет" требует конечного заключения от эксперта.
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Kosta Bankovski
4
комментария
0
читателей
Полный профиль
Kosta Bankovski - Спасибо за приятные слова! Буду и дальше делиться наработками ;)
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Как вывести сайт в ТОП 10 Google в 2019 году
Ирина
8
комментариев
0
читателей
Полный профиль
Ирина - Работают. Как естественные, так и закупные. >Мои сайты в первую очередь заточены на яндекс Соболезную. >Насколько поисковые алгоритмы с гугловскими у него. Разница в 10 лет. Вон в Яше все долбят на ключи, на вхождения и прочий трэш из древностей. А у Гугла, вон почитайте про eat, ymyl Не все понятно но спасибо за ответы. Я так понимаю что с ссылками деть никто точно не знает) Ну это и хорошо вообщем. Самому разбираться как то интересней. Но не всегда. Есть к примеру 2captcha.com/ru и на него 100к ссылок есть. Ну а смысл какой?
Как улучшить репутацию сайта недвижимости с помощью крауд-маркетинга
Евгений
2
комментария
0
читателей
Полный профиль
Евгений - а у вас какое впечатление от статьи?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
360
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
107
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
79
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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