Как получить 100/100 в Google PageSpeed Insights с сайтом на WordPress и конструктором страниц Elementor
Я хотел проверить, возможно ли получить идеальный результат 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, включите все опции, но оставьте следующие отключенными:
- Также оптимизировать для редакторов/администраторов входа?
- Сохранять 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 и на мобильных устройствах.