Вопрос #77289

 #  

 #  

WordPress – самый популярный движок сайта в мире. На этой CMS работает более 75-ти миллионов сайтов: блоги, информационные ресурсы, интернет-магазины. И всем им нужна скорость. Причём, чем быстрее будет загружаться ваш сайт – тем лучше.



Наши клиенты часто обращаются в Promodo с просьбой проконсультировать, на каком «движке» лучше создавать сайт. Собрали небольшую базу знаний по этому вопросу и рассортировали самые популярные системы управления под потребности ритейлеров из разных весовых категорий.



Почему так важна скорость загрузки сайта
У вас медленно грузится сайт, но есть отличный блог и User Friendly Interface? Жаль, клиент об этом никогда не узнает. Он закроет его раньше, чем увидит контент. А поисковые роботы после этого ещё и понизят страницу в выдаче. По данным Akamai, низкая скорость загрузки сайта способна испортить мнение о компании у 35% пользователей, а 22% посетителей не вернутся на страницу, которая работает некорректно. Скорость загрузки влияет и на индексацию новых страниц. Медленный сайт дольше отдает контент, а значит поисковые роботы тратят больше времени на обработку всех страниц. Как результат, новые страницы будут позже появляться в выдаче Google.

Плюс, с мая 2021 Google при ранжировании сайтов будет опираться на Core Web Vitals. В этот набор факторов входит три параметра, которые показывают скорость появления самого объемного элемента страницы, её интерактивность и стабильность работы. То есть поисковая система будет отображать в числовом выражении, насколько удобно пользователю работать с сайтом.

Как измерить скорость загрузки сайта
Здесь помогут специальные инструменты:

Google PageSpeed Insights и пункт в консоли Chrome Lighthouse
Pingdom
GTmetrix


Давайте посмотрим на реальном примере, как выдаёт рекомендации по ускорению сайта Google PageSpeed, и какие параметры входят в Core Web Vitals. Вводим нужный URL на странице PageSpeed, нажимаем «‎Анализировать»‎ и выбираем результат для компьютеров. Самые важные показатели выводятся первыми:

First Contentful Paint
Largest Contentful Paint
First Input Delay
Cumulative Layout Shift


как измерить скорость загрузки сайта



First Contentful Paint – скорость первого отклика. FCP показывает, через сколько секунд после клика на ссылку у пользователя на экране появляются первые признаки того, что сайт загружается. Если «‎признаки жизни» появились менее чем через секунду – это отличный показатель. Если на странице ничего не происходит спустя три секунды – это плохой знак. Скорее всего, пользователь уже закрыл вкладку.

Largest Contentful Paint – скорость загрузки основного контента. LCP показывает, как быстро пользователь увидит ключевую информацию на странице и сможет оценить, отвечает ли контент его запросу. Идеальный показатель – загрузка менее чем за 2,5 секунды. Если время загрузки страницы превышает четыре секунды, вы можете потерять потенциального покупателя.

First Input Delay — время отклика на действие клиента. FID показывает, с какой скоростью элементы страницы отвечают, когда по ним кликает посетитель. Значение менее ста миллисекунд говорит, что для пользователя переход на другую страницу или открытие картинки выглядит моментальным. Когда элемент реагирует на клик спустя триста и более миллисекунд, создается ощущение, что сайт подвисает.

Cumulative Layout Shift – показатель стабильности страницы. CLS измеряется в баллах и показывает, как часто пользователь может видеть смещение контента или полей на странице при её загрузке.

Например, вы начали читать статью, а тут внезапно над ней всплывает баннер или сообщение, и строки текста сдвигаются вниз. Или вы готовы поставить курсор в строку поиска, а её сдвигает меню навигации, и вы неожиданно открываете один из разделов. Чем реже такое происходит, тем более стабильной считается страница. При значении 0,25 и выше – страница считается нестабильной.

Последние три параметра – LCP, FID и CLS – это и есть основа Core Web Vitals. Помимо них в отчёте поданы значения параметров, которые имитируют загрузку страницы:

First Contentful Paint
Speed Index
Largest Contentful Paint
Time to Interactive
Total Blocking Time
Cumulative Layout Shift.


Чтобы изучить значение этих параметров, перейдите в сервисе в расширенный режим отображения. Для этого кликните на значок с полосками справа от надписи «‎Имитация загрузки страницы».



core web vitals_имитация загрузки страницы



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

Стандартные способы ускорения сайта на WordPress
Помимо рекомендаций PageSpeed Insights и других сервисов, существуют универсальные способы ускорить сайт на WordPress. Если вы столкнулись с низкой скоростью загрузки страниц, эти пункты стоит проверить в первую очередь.

Серверное и браузерное кэширование
Кэшировать данные можно с помощью браузера и на стороне сервера. При браузерном кэшировании клиент не будет каждый раз обращаться к серверу, чтобы загрузить страницу. После первого посещения сайта данные о нем сохранятся в памяти компьютера, благодаря чему каждая последующая загрузка займет меньше времени. Кэширование в браузере включаем с помощью хедера Expires на стороне сервера.

При серверном кэшировании плагины создают HTML-файлы, которые сохраняются в памяти. Когда к серверу обращаются повторно, ему не нужно заново подгружать скрипты сайта – они уже собраны в HTML-файл.

Популярные WordPress-плагины для кэширования:

WP Rocket
W3 Total Cache
WP Super Cache


Использование CDN
Content Delivery Network (CDN) – это кластер из серверов, которые находятся в разных точках мира и передают информацию о сайте с ближайшей к пользователю машины. За счёт этого территориальная близость между сервером и клиентом помогает ускорить загрузку сайта.

Это затратный способ повысить скорость сайта, если использовать собственное оборудование. Он оправдан для международных компаний с клиентами и дистрибуцией в удаленных друг от друга странах. Местным блогам и интернет-магазинам лучше рассмотреть другие способы оптимизации. Международным компаниям, у которых пока нет больших бюджетов, можно бесплатно настроить CDN для WP с помощью плагина W3 Total Cache и сервиса Cloudflare.

Оптимизация кода
Пробелами и комментариями в коде CSS и JavaScript можно пожертвовать, поскольку они несут мало пользы, но утяжеляют сайт. Уследить за появлением новых строк и лишних пробелов сложно. Автоматизировать процесс помогут плагины:

Autoptimize
WP Super Minify
WP Fastest Cache


Также сайт будет загружаться быстрее, если размещать CSS-файлы в начале страницы, а JS-файлы – в конце. Тогда браузер начнет обрабатывать скрипты после того, как загрузит содержимое страницы.

Плагины оптимизации
Оптимизировать можно не только код и загрузку страниц, но и контент. Для этого используют сторонние сервисы либо плагины для сжатия картинок:

Image Optimizer
WP Smush
TinyPNG


Чтобы облегчить плагинам задачу и повлиять на финальный результат, используйте для фотографий формат JPEG, для иконок – SVG, иллюстраций ‎– PNG. Также приобретает популярность формат WebP, поскольку при аналогичном качестве он «‎легче», чем PNG и JPEG ‎— на 26% и 34% соответственно. Об этом говорят исследования, проведенные Google.

Другие плагины, которые оптимизируют работу сайта, ‎– Clearfy, WP-Optimize, Easy&Fast Optimization. Они действуют по принципу CCleaner, удаляя дубли страниц и устаревшую информацию из баз данных.

Более мощное железо
Низкая производительность сайта не всегда связана с его оптимизацией. Интернет-магазин или блог могут работать медленнее, потому что хостинг не удовлетворяет их потребности в CPU или оперативной памяти. Если вы избавились от лишних плагинов и ненужных запросов в базе данных и не получили желаемый результат, есть смысл перейти на более высокий тарифный план или на другой вид хостинга. Компания HOSTiQ предлагает виртуальный, облачный, VPS и shared хостинг под различные цели.

Способы ускорения сайта, про которые обычно забывают
Если хостинг подходящий, испробовали все перечисленные способы, а скорость загрузки не выросла ‎– попробуйте методы ускорения сайта, о которых вспоминают не сразу.

Снизить количество версий постов
WordPress сохраняет все версии постов и черновиков, которые вы создаёте. Это полезная функция, но вряд ли вам понадобится история публикаций с начала времен.

Ограничьте количество версий 3-5 штуками ‎– в зависимости от частоты обновлений и возможных потребностей. Сделать это можно через файл wp-config.php. Пропишите в нём строку: define( ‘WP_POST_REVISIONS’, 7 ). Где 7 ‎– это количество версий постов.

Если хранить версии вам не нужно, отключите эту функцию с помощью параметра false: define( ‘WP_POST_REVISIONS’, false ).

Разбить комментарии на страницы
Чем больше комментариев под постом, тем интереснее тема, тем популярнее ресурс. Обилие комментариев повышает имидж и снижает скорость работы сайта. Чтобы общение с пользователями и между пользователями не перегружало сайт, разбейте комментарии на страницы:

слева в панели управления выберите меню «‎‎Настройки»;
в настройках нажмите «‎‎Обсуждение» — «Другие настройки комментариев»;
поставьте галочку в графе «‎Разбивать комментарии верхнего уровня на страницы» и впишите, сколько комментариев хотите видеть на одной странице.


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

Настроить защиту от хотлинкинга
Хотлинк ‎— это прямая ссылка на файлы с вашего сайта, размещенная на стороннем ресурсе. Этический вопрос хотлинкинга трогать не будем, поскольку нас интересует другой побочный эффект этого явления ‎– замедление скорости вашего сайта. Когда загружается сторонний сайт, содержащий ссылку на ваши картинки или видео, он обращается к вашему хостинг-серверу за этим контентом. Это создает нагрузку, которая отнимает ресурсы и не приносит выгоды.

Один из способов защититься от хотлинкинга – настроить правила в CDN. Второй способ ‎– использовать плагины для WP:

All in One WP Security and Firewall
Secure Copy Content Protection
WP Content Copy Protection & No Right Click


Запретить индексацию для нежелательных ботов
Попасть в индекс поисковой системы ‎— заветная цель любого сайта. Но чем больше страниц нужно обработать поисковым роботам, тем большую нагрузку они создают на сервере. Чтобы не выпасть из выдачи нужной вам системы и при этом не перегружать сайт, запретите индексацию ненужным сайтам. Например, вы хотите, чтобы ваш сайт попал в выдачу Google, при этом вам ни к чему запросы от Yahoo. Тогда в файле robots.txt либо .htaccess нужно запретить индексацию для нежелательных ботов.

Если сайт находится в разработке или на редизайне, и вам вовсе не нужно, чтобы его индексировали, сделайте его «‎невидимым». Выберите в настройках пункт «‎Чтение» – «‎Видимость для поисковых систем» и поставьте галочку в графе «Попросить поисковые системы не индексировать сайт». Так вы закроете сайт от всех поисковых роботов.

Использовать свежую версию РНР
На производительности сайта больше сказывается сам код, чем версия языка, на котором он написан. Тем не менее, начиная с седьмой версии PHP и выше предусмотрена функция OPcache, которая дает прирост производительности сайта. Поэтому писать оптимизированный и структурированный код лучше на свежей версии PHP.

Перейти на HTTP/2
HTTP/2 протокол построен в бинарном, а не текстовом формате, и создает меньшую нагрузку на канал при передаче файлов. Благодаря этому сайт, работающий по протоколу HTTP/2, быстрее, чем сайт на HTTP/1.

Стоит учесть, что HTTP/2 подходит для сайтов с SSL/TLS и не годится для ресурсов, где идёт работа с большими файлами, видео- и аудиопотоками. Кроме того, использование HTTP/2 будет тормозить загрузку сайта через мобильный интернет.