This code snippet demonstrates how to optimize React performance by utilizing memoization and callbacks, which is particularly useful when dealing wit...
Back to Snippets
php
• 43 lines
JavaScript
JavaScript
JavaScript
Enqueue Scripts and Styles Conditionally
Load CSS and JS only on pages that need them — conditional enqueuing by template type for better PageSpeed scores.
Snippet Stats
Lines
43
Characters
1,293
Read
2 mins
/**
* Enqueue assets only where they are needed.
*
* @return void
*/
function mytheme_enqueue_assets(): void {
// Global styles — every page.
wp_enqueue_style(
'mytheme-main',
get_template_directory_uri() . '/assets/css/theme.min.css',
array(),
wp_get_theme()->get( 'Version' )
);
// Homepage only.
if ( is_front_page() ) {
wp_enqueue_script(
'mytheme-gsap',
get_template_directory_uri() . '/assets/js/vendor/gsap.min.js',
array(),
'3.12.5',
true
);
}
// Single snippets — load Prism syntax highlighter.
if ( is_singular( 'snippet' ) ) {
wp_enqueue_style( 'prism-css', get_template_directory_uri() . '/assets/css/prism.css', array(), '1.29.0' );
wp_enqueue_script( 'prism-js', get_template_directory_uri() . '/assets/js/vendor/prism.min.js', array(), '1.29.0', true );
}
// Contact page — load form validation.
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'mytheme-form',
get_template_directory_uri() . '/assets/js/contact-form.js',
array( 'jquery' ),
'1.0.0',
true
);
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );Found an issue with this snippet? Help us improve by reporting it. Report it →
Related Snippets
View allThis React code snippet utilizes memoization to enhance performance in complex, data-intensive components that require frequent re-renders. It showcas...
This React snippet demonstrates optimization techniques using memo and useCallback hooks, ideal for complex components with frequent re-renders. It sh...