How to remove dashicons, blocks, emojis and more from WordPress?

My main focus in 2021 is raising the efficiency of the team and improving performance across websites and apps we work on at Clean Commit. This involves updating my team's approach, improving our stack and raising quality assurance standards across the board.

Improving performance on older projects using WordPress

Part of that challange is revisiting past projects experiencing some technical issues lowering the website performance. This week I worked on a WordPress project that had a lot of issues. Some were connected to the server it was using, other where connected to the amount of code being loaded for each user.

What I did to make it a bit faster?

• I removed redundant Bootstrap styles and optimized web pack settings for CSS, which resulted in around 28% reduction of CSS (280kb vs 200kb)
• Surprisingly the JS file was enormous (~1.5mb). The project used Font Awesome (for 3 icons) and Bootstrap which wasn't really needed. After a clean up 1.5mb turned into 115kb (~92% reduction!)

The above seems like a huge overlook in the project. It's possible that some of your projects will have similar issues. Since 2020, we're using Tailwind CSS instead of Bootstrap which results in much smaller file sizes, requires less markup and is much easier to customize.

Removing unnecessary styles and javascript from WordPress

WordPress, beside loading code from your theme, is adding plugins' and internal css and js. The following script will allow you to avoid loading unnecessary code along with your theme.

<?php
// Disable block library
function remove_wp_block_library_css()
{
  wp_dequeue_style('wp-block-library');
  wp_dequeue_style('wp-block-library-theme');
  wp_dequeue_style('wc-block-style');
  // You can dequeue plugins styles if you're using your own
}
add_action('wp_enqueue_scripts', 'remove_wp_block_library_css', 100);

// Removes jQuery Migrate (it might be required if you're using old plugins)
function clean_remove_jquery_migrate($scripts)
{
  if (!is_admin() && isset($scripts->registered['jquery'])) {
    $script = $scripts->registered['jquery'];
    if ($script->deps) {
      // Check whether the script has any dependencies
      $script->deps = array_diff($script->deps, array('jquery-migrate'));
    }
  }
}
add_action('wp_default_scripts', 'remove_jquery_migrate');


// Disable emojis in Wordpress
function disable_emoji_feature()
{
  // Prevent Emoji from loading on the front-end
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');

  // Remove from admin area also
  remove_action('admin_print_scripts', 'print_emoji_detection_script');
  remove_action('admin_print_styles', 'print_emoji_styles');

  // Remove from RSS feeds also
  remove_filter('the_content_feed', 'wp_staticize_emoji');
  remove_filter('comment_text_rss', 'wp_staticize_emoji');

  // Remove from Embeds
  remove_filter('embed_head', 'print_emoji_detection_script');

  // Remove from emails
  remove_filter('wp_mail', 'wp_staticize_emoji_for_email');

  // Disable from TinyMCE editor. Currently disabled in block editor by default
  add_filter('tiny_mce_plugins', 'disable_emojis_tinymce');

  /** Finally, prevent character conversion too
   ** without this, emojis still work
   ** if it is available on the user's device
   */

  add_filter('option_use_smilies', '__return_false');
}

// Disables emojis in WYSIWYG editor
function disable_emojis_tinymce($plugins)
{
  if (is_array($plugins)) {
    $plugins = array_diff($plugins, array('wpemoji'));
  }
  return $plugins;
}
add_action('init', 'disable_emoji_feature');

This script is:

• Removing block styles (you might reconsider if using Gutenberg) and dashicons
• Removing jQuery Migrate (only needed for old plugins)
• Removing emojis from WordPress (does anyone really need that?)

Optimizing WordPress - what should I look at?

When optimizing the front end of WordPress there's a usual list of suspects that you should check out:

• Unused styles and javascript that is added to your bundle that should be removed
• Incorrect image sizes (that's still a huge issue)
• PNGs instead of SVGs (when possible it's better to embed svg into php code directly)
• Fonts and how they are loaded (maybe you're loading unused fonts?)
• The lack of caching or CDN

The main problem with WordPress are plugins. The less plugins you can use that add to code to your front end the better for your visitors.