WordPress snippets to reduce page load

One of the best ways to improve the sustainability of a website is to speed it up. Reduce the load and therefore reduce the amount of carbon used. Here are some of my favourite snippets for WordPress in order to reduce the bloat and load that page quicker!

Remove Gutenberg from the front-end

// Remove Gutenberg Block Library CSS from loading on the frontend

function susdev_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
 wp_dequeue_style( 'wc-block-style' );
}
add_action( 'wp_enqueue_scripts', 'susdev_remove_wp_block_library_css', 100 );

Remove WP default styles from the front-end

// Remove Global Styles and Classic Themes styles CSS from loading on the frontend

function susdev_remove_wp_default_styles_css(){
 wp_dequeue_style( 'global-styles' ); // remove global styles added in v5.8
 wp_dequeue_style( 'classic-theme-styles' ); // remove classic themes styles added in v6.1 
}
add_action( 'wp_enqueue_scripts', 'susdev_remove_wp_default_styles_css', 100 );

Remove Emoji’s from WordPress

// Disable the emojis

function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 *
 * @param array $plugins
 * @return array Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

/**
 * Remove emoji CDN hostname from DNS prefetching hints.
 *
 * @param array $urls URLs to print for resource hints.
 * @param string $relation_type The relation type the URLs are printed for.
 * @return array Difference betwen the two arrays.
 */
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
	if ( 'dns-prefetch' == $relation_type ) {
		/** This filter is documented in wp-includes/formatting.php */
		$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
		$urls = array_diff( $urls, array( $emoji_svg_url ) );
	}
	return $urls;
}

Remove WP Embed JS

// Remove WP Embed JS

function leap_deregister_scripts(){
	wp_deregister_script( 'wp-embed' );
}
add_action( 'wp_footer', 'leap_deregister_scripts' );

Native lazy loading images – added in WordPress v5.5

Since WordPress 5.5, images use native HTML lazy loading by default, (hoorah!) using the native HTML loading attribute which became a web standard in 2020. This will drastically save bandwidth on both servers as well as user agents across sites where images further down the page used to be loaded right away, even in the case the user might never scroll towards them.

While there aren’t any specific snippets for this function, as it will be added by default to images with width and height attributes, there are further filters coming to help facilitate its implementation. Such as the wp_filter_content_tags() filter. You can find out more about the WordPress native lazy loading feature by heading over to the Make WordPress Core docs.
 

 
I hope you found these useful, check back soon for more snippets and info to help speed up WordPress!