wordpress - загрузка скриптов с помощью функций = проблемы со скоростью страницы Google

Question

У меня странная проблема.Я пытаюсь получить как можно больше от моей темы WordPress и понимания скорости Google.Все же все мои JS-скрипты упоминаются как блокирующие рендеринг страницы.Так я называю скрипты с помощью functions.php

function custom_styles() {     
    wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
    wp_enqueue_style( 'bootstrap' );

    wp_register_style( 'bootstraptheme',get_stylesheet_directory_uri().'/css/bootstrap-theme.min.css', false, false );
    wp_enqueue_style( 'bootstraptheme' );

    wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
    wp_enqueue_style( 'fontawesome' );

    wp_register_style( 'defaultstyle',get_stylesheet_directory_uri().'/css/default/style.css', false, false );
    wp_enqueue_style( 'defaultstyle' );   

    wp_register_style( 'responsivestyle',get_stylesheet_directory_uri().'/css/responsive/responsive.css', false, false );
    wp_enqueue_style( 'responsivestyle' ); 

    wp_register_style( 'languages',get_stylesheet_directory_uri().'/css/languages.min.css', false, false );
    wp_enqueue_style( 'languages' );

    wp_register_style( 'flags',get_stylesheet_directory_uri().'/css/flags.min.css', false, false );
    wp_enqueue_style( 'flags' );

    wp_register_style( 'owlcarousel',get_stylesheet_directory_uri().'/css/owl.carousel.min.css', false, false );
    wp_enqueue_style( 'owlcarousel' );

    wp_register_style( 'owltheme',get_stylesheet_directory_uri().'/css/owl.theme.min.css', false, false );
    wp_enqueue_style( 'owltheme' );

    wp_register_style( 'flexslider',get_stylesheet_directory_uri().'/vendors/flexslider/flexslider.css', false, false );
    wp_enqueue_style( 'flexslider' );

    wp_register_style( 'datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/css/datepicker3.css', false, false );
    wp_enqueue_style( 'datepicker' );

    wp_register_style( 'settings',get_stylesheet_directory_uri().'/vendors/rs-plugin/css/settings.css', false, false );
    wp_enqueue_style( 'settings' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );


function pr_scripts_styles() {

    if( !is_admin()){
     wp_deregister_script('jquery');
     wp_register_script('jquery',get_stylesheet_directory_uri().'/js/jquery.min.js', false);
     wp_enqueue_script('jquery');
    }

    wp_deregister_script('twitter-indent', '//platform.twitter.com/widgets.js');

    /*   REGISTER ALL JS FOR SITE */
    wp_register_script('vps_bootstrap',get_stylesheet_directory_uri().'/js/bootstrap.min.js');
    wp_register_script('vps_cycle',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');    
    wp_register_script('vps_owl',get_stylesheet_directory_uri().'/js/owl.carousel.min.js');
    wp_register_script('vps_counterup',get_stylesheet_directory_uri().'/vendors/counterup/jquery.counterup.min.js');
    wp_register_script('vps_theme',get_stylesheet_directory_uri().'/js/theme.js');      
    wp_register_script('vps_waypoints',get_stylesheet_directory_uri().'/vendors/waypoints/waypoints.min.js');
    wp_register_script('vps_datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js');
    wp_register_script('vps_flexslider',get_stylesheet_directory_uri().'/js/jquery.flexslider-min.js');
    wp_register_script('vps_themepunch1',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.tools.min.js');
    wp_register_script('vps_themepunch2',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.revolution.min.js');
    wp_register_script('vps_revs',get_stylesheet_directory_uri().'/js/revs.js');
    wp_register_script('google-map-api',get_stylesheet_directory_uri().'/js/gmaps-api.min.js');    
    wp_register_script('vps_gmap',get_stylesheet_directory_uri().'/js/google-map.js');

    /*   CALL ALL JS AND SCRIPTS FOR SITE */
    wp_enqueue_script('vps_bootstrap');
    wp_enqueue_script('vps_cycle');
    wp_enqueue_script('vps_owl');
    wp_enqueue_script('vps_counterup');
    wp_enqueue_script('vps_waypoints');
    wp_enqueue_script('vps_datepicker');
    wp_enqueue_script('vps_flexslider');
    wp_enqueue_script('vps_themepunch1');
    wp_enqueue_script('vps_themepunch2');
    wp_enqueue_script('vps_revs');
    wp_enqueue_script('google-map-api');
    wp_enqueue_script('vps_gmap');
    wp_enqueue_script('vps_theme');

}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );

Что не так с этим подходом?Я думал, что это нормально и сделано в соответствии с лучшими практиками.И еще = страница упоминается как медленная .. спасибо!

Answer 1

Сценарии постановки в очередь - это правильный способ загрузить их в WordPress.Но вы упускаете суть предупреждения.Блокировка рендеринга CSS и JS - это файлы, которые должны быть полностью загружены, прежде чем содержимое сгиба может быть правильно отображено.Если вы хотите уменьшить / устранить проблемы, связанные с блокировкой рендеринга, вы можете встроить критически важный CSS (для содержимого, превышающего сгиб), объединить другой CSS в как можно меньшее количество файлов и отложить любой JS, который не требуется для содержимого, превышающего сгиб.

Несколько замечаний:

• Лично я не рекомендую откладывать jquery, потому что многие другие скрипты часто зависят от него.
• Если вы открыты для использования плагинов, есть некоторые, которые уменьшат и объединят ваши файлы CSS и JS для вас.Мне повезло с Autoptimize Фрэнком Гусенсом.
• Если Revolution Slider является частью вашего содержимого над сгибом, это определенно будет частью проблемы блокировки рендера.По этой причине я перестал использовать его на домашних страницах.

Answer 2

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

Кроме того, в Wordpress это распространенный анти-паттерн для исправления недостатков одной библиотеки / плагина / темы с другой библиотекой / плагином / дочерней темой. Такой подход приводит к вялым страницам, раздутому коду и вечности в аду обслуживания.

Проверьте, действительно ли вам нужны все эти скрипты? Возможно, некоторые из них можно заменить несколькими строками кода js / css.

Answer 3

Просто примечание, вам не нужно wp_register_script и wp_enqueue_script, если только вы не намеренно ставите сценарии в очередь только при определенных условиях, в противном случае вы можете заменить

wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'bootstrap' );

wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
wp_enqueue_style( 'fontawesome' );

только с:

wp_enqueue_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );

Кроме того, мое личное предпочтение заключается в том, что если мне нужно несколько раз вызывать функцию, я бы хотел определить ее как переменную, чтобы она не вызывалась постоянно, например:

$stylesheet_directory_uri = get_stylesheet_directory_uri();

wp_enqueue_style( 'bootstrap', $stylesheet_directory_uri.'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome', $stylesheet_directory_uri.'/css/font-awesome.min.css', false, false );

Наконец, так как у вас так много всего, вы можете просто просмотреть их, чтобы сделать их немного проще:

function custom_styles(){
    $uri = get_stylesheet_directory_uri();

    $stylesheets = array(
        array( 'bootstrap', '/css/bootstrap.min.css' ),
        array( 'fontawesome', '/css/font-awesome.min.css' ),
        // …
        array( 'settings', '/vendors/rs-plugin/css/settings.css' )
    );

    foreach( $stylesheets as $stylesheet ){
        wp_enqueue_style( $stylesheet[0], $uri.$stylesheet[1] );
    }
}

Теперь к источнику вашей проблемы - у вас есть столько таблиц стилей . Для каждого из них ваш сайт должен сделать HTTP-запрос к запрошенному ресурсу и загрузить его. Поскольку вы уже внедрили CSS в свою тему (будьте осторожны с этим, это затрудняет адаптацию к будущим версиям библиотек), вы можете просто объединить их все в один минимизированный CSS-файл вручную или с помощью препроцессора.

Вы также можете посмотреть на такие плагины, как Autoptimize , которые будут комбинировать и кэшировать все ваши таблицы стилей для вас. Он извлекает все их содержимое и объединяет их в как можно меньше файлов .css, обычно от 1 до 3, в зависимости от установленных плагинов.

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

Я бы начал со взвешивания, действительно ли вам 1027 * нужны все эти библиотеки CSS, а затем скомбинировал и кэшировал их.