All of the different emojis with a big red cross

We’ve put together a quick guide on some 3 major tips that no-one is using which is causing page speed loading times to really slack.

 

1) No Thanks Emoji’s!

The Issue:

Although the sound of adding emojis to your website might sound attractive, the reality of emoji’s being used is especially minimal! By default, WordPress brings in a JavaScript file and some inline CSS on every page that is loaded by through WordPress. Below shows a picture of the CSS that is brought in from the core WordPress default.

Emoji CSS

The Solution:

Upload to your functions.php file in the theme you are using. This can usually be accessed by going to Appearance > Editor in your theme or alternatively can be accessed through FTP/SFTP or your cPanel through File Manager.

/**
* Disable the emoji's
*/
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;
}

Code from https://kinsta.com/knowledgebase/disable-emojis-wordpress/

2) Remove Images Where Possible

The Issue: Images Used When Not Needed/Essential

Too many times you see websites using images where it isn’t essential at all, and there are a lot better options out that, that either people simply don’t know about or aren’t sure on how to implement and its easy!

Here’s a list of just 3 common types of images used where they’re not necessarily needed but I’m sure you can think of more:

  • Social media icons
  • Payments accepted icons
  • “As Seen on …”
The Solution

Social media icons can easily be added by doing 2 steps.

    1. Using a CSS link for FontAwesome:
 <link rel="stylesheet" type="text/css" href="https://bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  1. Adding the HTML markup for each icon you want to put in
 - <i class="fa fa-facebook"></i>
 - <i class="fa fa-lg fa-facebook"></i>
 - <i class="fa fa-2x fa-facebook"></i>