Как отследить логику подключения js и css в шаблоне wordpress?

Question

[mUchenik]

Всем привет!
Уважаемые специалисты, подскажите как проследить и отредактировать логику подключения всех CSS и JS?
Гугл спид ругается на некие блокирующие скрипты, но в файле heder ни чего похожего на link rel нет... И мне теперь вообще не понятно, каким образом эти стили и скрипты подключаются...
вот ссылка на сайт

Answer 1

[Evanre]

1. ВК Аналитика настроена криво.
2. Устраните ошибки в js коде, с ними сайт в принципе работать не будет. У меня даже прелоадер на главной не удалился.
3. Оптимизируйте загрузку скриптов: уберите не нужное, по максимуму опустите все скрипты из шапки в футер. Читайте доки по wp. Ищите функцию wp enqueue script в теме, там есть аргумент который определяется в каком месте сайта будет грузиться скрипт, так же оберните скрипты в в условные операторы, например если скрипт нужен только на главной то используйте что-то вроде этого:

if ( is_front_page() ) {
    wp_enqueue_script( $handle, $src, $deps, $ver );
}

Этот сайт Вам очень пригодится wp-kama.

Comments

[mUchenik]

Евгений, спасибо за советы.
Не затруднило бы вас подробнее ответить на вопросы:
1)

Устраните ошибки в js коде, с ними сайт в принципе работать не будет.

Как определить ошибку? У меня сайт работает, но иногда выдает ошибку 500
2)

Оптимизируйте загрузку скриптов

Это для меня вообще головная боль. Ни как не могу понять что делать с ними. В function.php нашел блок, в котором (на сколько я понял) прописаны все подключения, но до меня ни как не доходит, как прописать некоторые JS и CSS в футер...
На всякий случай, прилагаю участок кода с подключениями:

/**
 * Enqueue scripts and styles.
 */

function zerif_scripts() {    

	wp_enqueue_style('zerif_font', zerif_slug_fonts_url(), array(), null );

    wp_enqueue_style( 'zerif_font_all', '//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600italic,600,700,700italic,800,800italic');
    
    wp_enqueue_style('zerif_bootstrap_style', get_template_directory_uri() . '/css/bootstrap.css');
	
    wp_style_add_data( 'zerif_bootstrap_style', 'rtl', 'replace' );

    wp_enqueue_style('zerif_fontawesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), 'v1');

    wp_enqueue_style('zerif_style', get_stylesheet_uri(), array('zerif_fontawesome'), 'v1');

    wp_enqueue_style('zerif_responsive_style', get_template_directory_uri() . '/css/responsive.css', array('zerif_style'), 'v1');

    if ( wp_is_mobile() ){
        
        wp_enqueue_style( 'zerif_style_mobile', get_template_directory_uri() . '/css/style-mobile.css', array('zerif_bootstrap_style', 'zerif_style'),'v1' );
    
    }

    wp_enqueue_script('jquery');

    /* Bootstrap script */
    wp_enqueue_script('zerif_bootstrap_script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true);

    /* Knob script */
    wp_enqueue_script('zerif_knob_nav', get_template_directory_uri() . '/js/jquery.knob.js', array("jquery"), '20120206', true);

    /* Smootscroll script */
    $zerif_disable_smooth_scroll = get_theme_mod('zerif_disable_smooth_scroll');
    if( isset($zerif_disable_smooth_scroll) && ($zerif_disable_smooth_scroll != 1)):
        wp_enqueue_script('zerif_smoothscroll', get_template_directory_uri() . '/js/smoothscroll.js', array("jquery"), '20120206', true);
    endif;  
	
	/* scrollReveal script */
	if ( !wp_is_mobile() ){
		wp_enqueue_script( 'zerif_scrollReveal_script', get_template_directory_uri() . '/js/scrollReveal.js', array("jquery"), '20120206', true  );
	}

    /* zerif script */
    wp_enqueue_script('zerif_script', get_template_directory_uri() . '/js/zerif.js', array("jquery", "zerif_knob_nav"), '20120206', true);

    if (is_singular() && comments_open() && get_option('thread_comments')) {

        wp_enqueue_script('comment-reply');

    }

    /* parallax effect */
    if ( !wp_is_mobile() ){

        /* include parallax only if on frontpage and the parallax effect is activated */
        $zerif_parallax_use = get_theme_mod('zerif_parallax_show');

        if ( !empty($zerif_parallax_use) && ($zerif_parallax_use == 1) && is_front_page() ):

            wp_enqueue_script( 'zerif_parallax', get_template_directory_uri() . '/js/parallax.js', array("jquery"), 'v1', true  );

        endif;
    }

	add_editor_style('/css/custom-editor-style.css');
	
}
add_action('wp_enqueue_scripts', 'zerif_scripts');

add_action('tgmpa_register', 'zerif_register_required_plugins');

function zerif_register_required_plugins() {	
	
	$wp_version_nr = get_bloginfo('version');
	
	if( $wp_version_nr < 3.9 ):

		$plugins = array(
			array(
				'name' => 'Widget customizer',
				'slug' => 'widget-customizer', 
				'required' => false 
			),
			array(
				'name'      => 'Pirate Forms',
				'slug'      => 'pirate-forms',
				'required'  => false,
			)
		);
		
	else:
	
		$plugins = array(
			array(
				'name'      => 'Pirate Forms',
				'slug'      => 'pirate-forms',
				'required'  => false,
			)
		);
	
	endif;

    $config = array(
        'default_path' => '',
        'menu' => 'tgmpa-install-plugins',
        'has_notices' => true,
        'dismissable' => true,
        'dismiss_msg' => '',
        'is_automatic' => false,
        'message' => '',
        'strings' => array(
            'page_title' => __('Install Required Plugins', 'zerif-lite'),
            'menu_title' => __('Install Plugins', 'zerif-lite'),
            'installing' => __('Installing Plugin: %s', 'zerif-lite'),
            'oops' => __('Something went wrong with the plugin API.', 'zerif-lite'),
            'notice_can_install_required' => _n_noop('This theme requires the following plugin: %1$s.', 'This theme requires the following plugins: %1$s.','zerif-lite'),
            'notice_can_install_recommended' => _n_noop('This theme recommends the following plugin: %1$s.', 'This theme recommends the following plugins: %1$s.','zerif-lite'),
            'notice_cannot_install' => _n_noop('Sorry, but you do not have the correct permissions to install the %s plugin. Contact the administrator of this site for help on getting the plugin installed.', 'Sorry, but you do not have the correct permissions to install the %s plugins. Contact the administrator of this site for help on getting the plugins installed.','zerif-lite'),
            'notice_can_activate_required' => _n_noop('The following required plugin is currently inactive: %1$s.', 'The following required plugins are currently inactive: %1$s.','zerif-lite'),
            'notice_can_activate_recommended' => _n_noop('The following recommended plugin is currently inactive: %1$s.', 'The following recommended plugins are currently inactive: %1$s.','zerif-lite'),
            'notice_cannot_activate' => _n_noop('Sorry, but you do not have the correct permissions to activate the %s plugin. Contact the administrator of this site for help on getting the plugin activated.', 'Sorry, but you do not have the correct permissions to activate the %s plugins. Contact the administrator of this site for help on getting the plugins activated.','zerif-lite'),
            'notice_ask_to_update' => _n_noop('The following plugin needs to be updated to its latest version to ensure maximum compatibility with this theme: %1$s.', 'The following plugins need to be updated to their latest version to ensure maximum compatibility with this theme: %1$s.','zerif-lite'),
            'notice_cannot_update' => _n_noop('Sorry, but you do not have the correct permissions to update the %s plugin. Contact the administrator of this site for help on getting the plugin updated.', 'Sorry, but you do not have the correct permissions to update the %s plugins. Contact the administrator of this site for help on getting the plugins updated.','zerif-lite'),
            'install_link' => _n_noop('Begin installing plugin', 'Begin installing plugins','zerif-lite'),
            'activate_link' => _n_noop('Begin activating plugin', 'Begin activating plugins','zerif-lite'),
            'return' => __('Return to Required Plugins Installer', 'zerif-lite'),
            'plugin_activated' => __('Plugin activated successfully.', 'zerif-lite'),
            'complete' => __('All plugins installed and activated successfully. %s', 'zerif-lite'),
            'nag_type' => 'updated'
        )
    );

    tgmpa($plugins, $config);

}

Если не затруднит. подскажите на примере как некоторые из CSS перекинуть в FOOTER.
Или быть может, проще все стили перекинуть в один файл SYLE.CSS?
Спасибо.
Не сочтите за наглость мою просьбу.

[Evanre]

1. Из инструментов разработчиков бразурзеа. В консоли все отображено. Например в Хроме жмете F12 и кликаете по цифре с красным крестиком.
2. Ссылка на подробную документацию по функции wp_enqueue_script. Функция может принимать до 5ти параметров. Вот в 5й и нужно передать true, чтобы скрипт оказался в футере. Перечитайте доки.
А вообще там что-то не чисто. Судя по строкам, что Вы скинули, многие скрипты и так должны грузиться в футер. Тема очень мудреная у Вас. Multipurpose темы никогда не бывают быстрыми из-за миллиона настроек и визуальных редакторов. Так что не думаю, что вас спасет перенос скриптов. Устраните ошибки в аналитике и коде скриптов и все.

[mUchenik]

Евгений Жученко: Спасибо. Сейчас всезнающий гугл ругается не на JS а именно на css которые грузятся... пишет:

Количество блокирующих ресурсов CSS на странице: 15. Они замедляют отображение контента.

Если правильно понимаю, то мне надо перенести некоторые CSS в футер, за это отвечает та же самая функция?

[Evanre]

mUchenik: Нет, в футер не стоит, потому что при загрузке может мигать сперва не стилизованный html. Просто объедените файлы.

[mUchenik]

Евгений Жученко: Ок. Спасибо!