Как Повысить Скорость Загрузки Страниц WordPress

На случай, если вы еще не в курсе… Google внесла некоторые важные изменения в показатели производительности своего веб-сайта, которые называются Google Core Web Vitals и как влияет скорость загрузки страниц на ранжирование сайта в поисковых системах.

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

Google объявил, что взаимодействие с Next Paint (INP) теперь является стабильной основной веб-метрикой и официально заменила задержку первого ввода (FID).

Как в WPBeginner удалось добиться максимально возможной скорости загрузки страниц

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

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

Почему важна скорость загрузки страницы?

Скорость загрузки страницы — это то, насколько быстро отображается ваш веб-сайт, когда пользователь нажимает на ссылку на него.

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

Вероятность того, что пользователи покинут веб-сайт, если загрузка занимает 3 секунды, на 36% выше. И на 90% выше вероятность того, что они покинут веб-сайты, загрузка которых занимает 5 и более секунд — ThinkWithGoogle

Вот еще несколько причин, почему скорость загрузки страницы так важна:

• Повышает вовлеченность пользователей: быстро загружаемый веб-сайт привлекает посетителей, позволяя им быстро получать доступ к информации. Когда пользователи проводят больше времени на сайте, у них больше шансов потратить или конвертировать.
• Улучшает рейтинг в поисковых системах: Благодаря лучшему взаимодействию с пользователями поисковые системы отдают предпочтение быстро загружающимся веб-сайтам, ранжируя их выше.
• Важно для мобильных пользователей: Скорость особенно важна для просмотра веб-страниц с мобильных устройств. У мобильных пользователей вероятность покинуть медленный веб-сайт в два раза выше, чем у пользователей настольных компьютеров.
• Укрепляет доверие и авторитет: сайт с быстрой загрузкой выглядит более надежным и профессиональным, что может помочь вам убедить пользователей покупать у вашего бизнеса.

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

Как мы повышаем скорость загрузки страницы в WPBeginner

Мы применяем все стандартные рекомендации по оптимизации производительности и скорости WordPress.

Кроме того, мы также предприняли несколько дополнительных шагов для дальнейшего повышения производительности WordPress в WPBeginner.

Вот недавний скриншот нашей оптимизации производительности до и после внедрения методов.

Если вы хотите провести аналогичный тест для своего веб-сайта и посмотреть свой показатель Google Core Web Vitals, то воспользуйтесь инструментом PageSpeed Insights. Просто введите URL, который вы хотите протестировать, и нажмите кнопку ‘Проанализировать’.

Инструмент будет анализировать веб-страницу в течение нескольких секунд, а затем покажет вам результаты тестирования.

Теперь давайте рассмотрим шаги, которые мы предприняли для достижения этого показателя производительности.

1. Более быстрая платформа хостинга

Благодаря многолетнему опыту ведения бизнеса на базе WordPress мы поняли важность выбора лучшего хостинга для WordPress.

Для небольших веб-сайтов вы можете начать с любой из ведущих хостинг-компаний, таких как Bluehost или Hostinger.

Однако WPBeginner — это более крупный веб-сайт с большим объемом трафика. Планы совместного хостинга или VPS-хостинга слишком ограничены в таких масштабах.

Вот почему WPBeginner размещен в корпоративной облачной инфраструктуре SiteGround, которая работает на облачной платформе Google.

Почему мы используем SiteGround

• Инфраструктура хостинга SiteGround корпоративного уровня имеет несколько уровней резервирования, что обеспечивает максимальное время безотказной работы.
• Он работает на облачной платформе Google, которая подключена к современной сети Google, обеспечивая максимальную скорость из всех точек земного шара.
• Это снижает затраты и трудности, связанные с управлением отдельными серверами выделенного хостинга.
• Внутренние усовершенствования SiteGround, такие как сверхбыстрый PHP, более быстрый MySQL и сжатие Brotli, дают дополнительный прирост производительности.
• У нас есть личный опыт работы со службой поддержки SiteGround. Опыт их инженеров, более быстрое время отклика и общая услужливость всегда впечатляли нас.

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

2. Cloudflare DNS

Помимо безопасности, использование Cloudflare DNS дает WPBeginner значительное преимущество в производительности.

DNS (система доменных имен) похожа на телефонную книгу для веб-сайтов.

Когда вы вводите адрес веб-сайта в свой браузер или нажимаете на ссылку, служба DNS ищет доменное имя и перенаправляет ваш веб-сайт на IP-адрес этого конкретного веб-сайта.

Обычно веб-сайты используют серверы имен своих хостинговых компаний для управления DNS. Они не такие быстрые, как Cloudflare, который обеспечивает разрешение DNS на границе сети в каждом из своих центров обработки данных в более чем 310 городах по всему миру.

Почему мы используем Cloudflare DNS

• Самое быстрое разрешение DNS – глобальная сеть Cloudflare позволяет разрешить DNS в ближайшем местоположении для любого пользователя.
• Встроенная безопасность — поскольку весь трафик проходит через DNS Cloudflare, их брандмауэр веб–приложений (WAF) способен быстро смягчать и блокировать DDoS-атаки, спам, ненужных ботов, SQL-инъекции, попытки взлома и многое другое.
• Доставка CDN – их сеть автоматически кэширует статические ресурсы и обслуживает их через свою глобальную сеть, ускоряя загрузку веб-сайтов. И поскольку это происходит на уровне DNS, вам не нужно иметь отдельные поддомены для ресурсов CDN.

Мы используем корпоративный план, но для небольших веб-сайтов Cloudflare предлагает бесплатные CDN и DNS, которые, по сути, делают то же самое с меньшим количеством функций.

3. Оптимизация производительности с помощью WP Rocket

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

Что нам больше всего нравится в WP Rocket, так это то, что это самый полный плагин для оптимизации производительности WordPress, поэтому нам нужен только один инструмент для решения множества различных задач.

Почему мы используем WP Rocket

• Предварительная загрузка кэша – обычно плагин кэширования ожидает, пока пользователь посетит страницу, чтобы создать ее кэшированную копию. WP Rocket автоматически поддерживает ваш кэш наготове, что существенно сокращает время загрузки страницы.
• Кэширование в браузере – хранение статических ресурсов, таких как изображения, JavaScript и CSS, в кэше браузера означает более быструю загрузку при последующих просмотрах страницы.
• Оптимизация файлов – WP Rocket помогает сократить и оптимизировать доставку статических файлов, таких как JavaScript и таблицы стилей. Уменьшение размера этих файлов значительно сокращает общее время загрузки страницы.

Какие настройки мы используем в WP Rocket?

У нас включены следующие настройки WP Rocket:

• Полное кэширование страницы
• Оптимизация файлов (сокращение JS и CSS файлов и предоставление критически важного CSS)
• Отложенный JavaScript (задержка загрузки JS, что помогает устранить проблему с блокировкой рендеринга)
• Отложенная загрузка изображений и медиафайлов

4. Постановка JavaScript и CSS в очередь

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

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

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

В WPBeginner мы удаляем из очереди ненужные скрипты и CSS, а затем помещаем их в очередь там, где это необходимо.

⚠️Примечание: Пользователям начального уровня, не имеющим навыков программирования, будет сложно добиться этого. Попытка сделать это может привести к сбою вашего сайта или вызвать непредвиденное поведение.

Однако пользователи с базовым пониманием кодирования WordPress могут сделать это, выполнив следующие действия.

Сначала вам нужно найти ненужные скрипты. Самый простой способ узнать, какие скрипты и таблицы стилей загружаются, — это использовать плагин Query Monitor.

Программа покажет вам файлы JavaScript и CSS, загруженные на страницу, и вы сможете определить, какие из них не нужны.

Чтобы удалить скрипт из очереди, вам нужно использовать дескриптор скрипта, как показано в Query Monitor. После этого вы можете использовать следующий код для удаления из очереди:

function prefix_remove_scripts() {

    if ( is_front_page() ) {

        wp_dequeue_script( 'plugin-script-handle' );

    }

}

add_action( 'wp_print_scripts', 'prefix_remove_scripts', 100 );

Аналогично, чтобы удалить ненужные таблицы стилей, вы можете использовать следующий код:

function prefix_remove_styles() {

    if ( is_front_page() ) {

    wp_dequeue_style( 'stylesheet-handle' );

    }

}

add_action( 'wp_enqueue_scripts', 'prefix_remove_styles', 100 );

5. Выгрузка стилей редактора блоков

Мы используем в WPBeginner редактор блоков WordPress по умолчанию. Он чрезвычайно быстр, и основная команда разработчиков WordPress тратит много времени и ресурсов на улучшение его производительности.

Для дальнейшего повышения производительности мы убираем некоторые стили редактора блоков, которые мы не используем в WPBeginner.

Это уменьшает размер DOM и ускоряет обработку браузерами запрошенной страницы.

В терминологии браузера DOM подобен карте элементов и подэлементов на странице (заголовки, текст, изображения, таблицы стилей, скрипты и так далее)

Чем больше DOM, тем больше времени браузер потратит на его обработку. Чем меньше DOM, тем быстрее он обрабатывается.

Однако прирост производительности от этого не такой большой, и мы бы не рекомендовали это большинству пользователей с небольшими веб-сайтами WordPress.

6. Различные улучшения производительности

Помимо советов, упомянутых выше, у нас также есть рекомендации по повышению скорости загрузки страницы.

Вот некоторые из них, которые вы можете легко реализовать на своем веб-сайте:

• Оптимизированные изображения – Наша команда следит за тем, чтобы загружаемые нами скриншоты, изображения и мультимедиа были максимально оптимизированы для уменьшения размера файла.
• Оптимизировать задания Cron – задания Cron — это запланированные задачи WordPress, которые выполняются в фоновом режиме для проверки обновлений, публикации запланированных записей и так далее. Плагины WordPress также могут добавлять свои собственные фоновые процессы. Оптимизация заданий cron снижает нагрузку на сервер и повышает производительность.
• Уменьшите количество внешних HTTP-запросов – некоторым используемым вами плагинам и инструментам может потребоваться загрузка файлов из внешних доменов. Слишком большое количество таких запросов может увеличить время загрузки страницы.

Для более подробного ознакомления с этими методами и другими стратегиями увеличения времени загрузки страницы вы можете ознакомиться с руководством по скорости и производительности WordPress.

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

Читайте так же

• Ускоряем Интернет Магазин на WooCommerce: 18 Мощных Способов
• Как Оптимизировать и Ускорить Базу Данных WordPress
• Core Web Vitals — метрики Google с которых следует начать СЕО оптимизацию
• Largest Contentful Paint (LCP) — как добиться отличного рендеринга на сайте WordPress
• Core Performance Team: высокая скорость WordPress теперь в приоритете

Обратная связь

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

• Электронная почта: Пишите нам на info@kowalski.su для подробных запросов или отправки дополнительных материалов. Мы обеспечиваем оперативный ответ и всестороннюю информацию.
• Телефон: Звоните на номер +7 (906) 825 44-41 для немедленной помощи или консультации. Рабочие часы с 7:00 до 15:00 (МСК).
• Telegram: Для быстрой связи используйте наш Telegram-канал @ivan_zh. Идеально подходит для получения оперативных ответов.

Откройте новые возможности с интеграцией WordPress и Bitrix24

Отличных вам сайтов!

1. Переведено с сайта Wpbeginner ↩︎