Назад к блогу

Как получить 100/100 в Google PageSpeed Insights с сайтом на WordPress и конструктором страниц Elementor

2021-03-075 минут чтения

Я хотел проверить, возможно ли получить идеальный результат 100/100 в Google PageSpeed Insights с веб-сайтом, созданным с помощью WordPress, конструктора страниц Elementor и темы Astra.
Я решил создать свой собственный веб-сайт https://davidloor.com/, используя WordPress с Elementor, и следуя рекомендациям, которые я опишу ниже, мой веб-сайт получает 100/100, как вы можете видеть на следующем скриншоте.

Это руководство предполагает, что у вас уже работает сайт на WordPress.

Создайте бесплатную учетную запись в Cloudflare

«Cloudflare — одна из крупнейших сетей, работающих в Интернете. Люди используют сервисы Cloudflare для повышения безопасности и производительности своих веб-сайтов и сервисов». У них есть бесплатная версия, которую я использую для своего веб-сайта.
Вы можете создать бесплатную учетную запись здесь: https://dash.cloudflare.com/sign-up

Для получения более подробной информации о Cloudflare вы можете посетить их собственную документацию по адресу https://www.cloudflare.com/learning/what-is-cloudflare/

После завершения регистрации учетной записи перейдите по адресу https://dash.cloudflare.com/profile/api-tokens, в разделе Global API Key нажмите «View», введите свой пароль и скопируйте ключ, который мы будем использовать на следующих шагах.

Установите бесплатные плагины WordPress

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

1. Autoptimize

Плагин можно скачать по этой ссылке.

На этой странице, https://ВАШ-САЙТ/wp-admin/options-general.php?page=autoptimize, включите все опции, но оставьте следующие отключенными:

  1. Также оптимизировать для редакторов/администраторов входа?
  2. Сохранять HTML-комментарии?

На этой странице, https://ВАШ-САЙТ/wp-admin/options-general.php?page=autoptimize_imgopt, включите все опции.

На этой странице, https://ВАШ-САЙТ/wp-admin/options-general.php?page=autoptimize_extra, включите все флажки, и если вы не используете Google Fonts, выберите опцию «Remove Google Fonts» и нажмите «Save».

2. WP Cloudflare Super Page Cache

Плагин можно скачать по этой ссылке.

На этой странице, http://ВАШ-САЙТ/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index, введите адрес электронной почты, который вы использовали для создания учетной записи Cloudflare, и API-ключ, который вы получили, как описано выше.

На этой странице, https://ВАШ-САЙТ/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index, убедитесь, что опция Enable fallback page cache включена, чтобы в случае невозможности кеширования страницы в Cloudflare можно было использовать кеш с диска.

3. Отключите стандартные шрифты из темы Astra и плагина Elementor

Поместите следующие фильтры в файл functions.php вашей темы.

/**
 * Отключить стандартные шрифты Astra.
 */
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
 * Отключить Google шрифты Astra.
 */
add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});
/**
 * Отключить Google шрифты из Elementor.
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Обновление от 02.12.2022

Я переключился с темы Astra на тему Hello Elementor, https://elementor.com/hello-theme/, и это помогло получить 100/100 и на мобильных устройствах.

Категории: