Как удалить неиспользуемые CSS/JS и улучшить время отклика сервера для сайта WordPress?

Question

Я оптимизировал производительность своего сайта WordPress, а также проверил его производительность с помощью web.dev.

Но все же есть следующие проблемы, которые я не смог решить:

1. Удалите неиспользуемый CSS
2. Удалить неиспользуемый JS
3. Первоначальное время ответа сервера было коротким

Как я могу решить эту проблему?

Answer 1

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

Удалите неиспользуемые CSS и JS

Во-первых, вы должны определить, какие файлы CSS и JS вы действительно загружаете на каждой странице, выяснить, откуда они берутся, и подумать, действительно ли они вам нужны или нет. Часто бывает, что много тяжелых файлов CSS и JS загружаются только ради простой анимации, которая используется один раз где-то на веб-сайте. Вы можете увидеть все файлы, загруженные в консоли браузера или с помощью таких сервисов, как GT Metrix. Если вы обнаружите ресурсы, которые вам не нужны, но они все еще загружаются, сначала попробуйте найти источник (например, тему или плагин), который их загружает. Популярные темы и плагины имеют настройки для отключения некоторых частей ресурсов, так что это очень просто. Для тех, у кого нет никаких настроек, вы можете попробовать этот фрагмент кода, просто заменив имена файлов на свои.

      add_action( 'wp_print_styles', 'remove_styles' );
add_action( 'wp_print_scripts', 'remove_scripts' );

// Remove styles from plugins we don't need
function remove_styles() {
    if ( $GLOBALS['pagenow'] != 'wp-login.php' && ! is_user_logged_in() ) {
        wp_dequeue_style( 'coblocks-frontend' );
        wp_dequeue_style( 'coblocks-frontend-css' );
        wp_dequeue_style( 'wp-editor-font' );
        wp_dequeue_style( 'duplicate-post' );
        wp_dequeue_style( 'thickbox' );
    }
}

// Remove scripts from plugins we don't use and don't need
function remove_scripts() {

    // just in case we use those in wp-admin, exclude only from front-end loading
    if ( ! is_user_logged_in() ) {
        wp_dequeue_script( 'coblocks-animation' );
        wp_deregister_script( 'coblocks-animation' );
        wp_dequeue_script( 'thickbox' );
        wp_deregister_script( 'thickbox' );
        wp_deregister_script('jquery');
    }
}

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

Время первоначального ответа сервера

Большое время ответа означает, что ваш сервер слишком долго возвращает какие-либо данные. В 99% случаев это связано либо с плохо оптимизированным веб-сайтом, либо со слабым сервером. Последнее можно легко решить, перейдя к другому хостинг-провайдеру или изменив тарифный план.

Оптимизация веб-сайта сложнее и может потребовать профилирования, особенно если у вас уже установлено правильное кэширование всей страницы. В общем, все общие случаи я могу описать так:

1. Медленный ответ сервера + отсутствие кеширования = сначала попробуйте кеширование. WP Super Cache, WP Rocket или аналогичные плагины.
2. Медленный ответ сервера + кеширование = попробуйте хостинг-провайдеры с поддержкой nginx-кеширования (в основном обслуживают статический контент при каждой загрузке страницы). Могу порекомендовать Kinsta или Pressjitsu.
3. Медленный ответ сервера + много динамического контента = вы не можете кэшировать вещи так же, как обычные веб-сайты. Здесь вам понадобится опытный разработчик, который сначала должен профилировать ваш веб-сайт с помощью таких инструментов, как xhprof или blackfire.io, а затем постепенно работать над оптимизацией производительности наименее эффективных функций.