Optimizing GeneratePress

These days, the speed of your website is crucial to your success.

Search engines like Google rank you much higher if your site is faster and more accessible than your competitors.

Knowing that, it's a no-brainer that you should choose a WordPress theme for your site which lives by those principles - fast and accessible.

As I continue to develop GeneratePress, speed and accessibility are two major factors behind almost everything that I do. From minifying scripts and styles, to removing unnecessary bulk, making GeneratePress faster and perform better is one of my highest priorities.

That being said, there's a handful of things we can do that will help you increase optimization even more. This article will list out some awesome tips for making GeneratePress one of the fastest WordPress themes available.

Removing Font Awesome

Font Awesome is, well, awesome. However, there's a LOT of icons, and if you're not using them, then there's no point in loading all of them.

GeneratePress requires some of these icons for various elements throughout the theme, so we can't full out remove them.

That's why GeneratePress has this nifty little filter to strip the icons down to only the essentials.

add_filter( 'generate_fontawesome_essentials', 'tu_fontawesome_essentials' );
function tu_fontawesome_essentials() {
    return true;
}

To show the difference made here, we can compare the size of the SVG file from Font Awesome (383kb) to the essentials SVG file (7kb).

You can add this filter using the instructions found in our Adding PHP article.


Installing Autoptimize

Reducing the amount of CSS and JS files being loaded on each page load will make a huge difference to your page speed.

Another perk with Autoptimize is it will bundle the CSS generated by your options in the Customizer into an external file, allowing your browser to cache it.

I suggest selecting these options:

Recommended CSS options
Recommended CSS options
Recommended HTML options
Recommended HTML options
Recommended Javascript options
Recommended Javascript options

Note: You'll have to check the "Advanced Options" button to show these extra options.

You'll notice we're excluding some scripts including jquery.js. This is to prevent javascript errors in case plugins aren't listing jQuery as a dependency. However, GeneratePress and GP Premium make sure that jQuery is a dependency when needed, so you can try removing all of those exclusions, and make sure to check the Also aggregate inline JS option.


Removing Query Strings

While this won't make a noticeable difference in your page speed, it will increase your ranking in speed tests.

One issue with this is it removes the version numbers from your static resources, like CSS and JS files. Those version numbers are there to tell browsers to stop caching the file if the version is updated.

Without the version numbers, browsers won't release the cache when you update your theme or plugins, which can result in some weirdness until the cache is cleared.

add_filter( 'style_loader_src', 'generate_remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'generate_remove_cssjs_ver', 10, 2 );
function generate_remove_cssjs_ver( $src ) {
	if( strpos( $src, '?ver=' ) )
		$src = remove_query_arg( 'ver', $src );
	
	return $src;
}

Adding PHP

There's also a plugin which does this for you: Query Strings Remover


Removing Emojis

If you don't use emojis on your site, then there's really no point in loading the scripts for them.

This code will remove the WordPress emojis script from your site:

add_action( 'init', 'generate_disable_wp_emojicons' );
function generate_disable_wp_emojicons() 
{
	// all actions related to emojis
	remove_action( 'admin_print_styles', 'print_emoji_styles' );
	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_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}

Adding PHP

There's also a plugin that can do this for you: Disable Emojis


Async Javascript

This is a simple little plugin which will add some tags to your javascript files, increasing your page speed and giving you better speed scores.

Async Javascript works hand-in-hand with Autoptimize, which is a bonus.

These are the settings I like:

Async Javascript
Async Javascript

Our results

Now that all of the above is done, we can check our speed scores.

Here's a test site for us to work with: GeneratePress Speed Test

It's important to note that this test site is incredibly bare.

Of course, as you add more plugins and content, these scores will change.

This test is useful, as it's super important to build your WordPress site on a fast foundation before you start adding your own content and plugins.

Pingdom

First, we'll look at our results using Pingdom.

Pingdom results for GeneratePress
Pingdom results for GeneratePress

Pretty impressive! Our speed test site is only using the methods explained above, nothing else.

GT Metrix

Now we'll look at our results using GT Metrix.

GT Metrix results for GeneratePress
GT Metrix results for GeneratePress

Final thoughts

Based on these scores, I'm very comfortable using GeneratePress as a foundation to build websites for my clients.

Of course, optimization and speed is something I'm constantly working on and looking to improve. There's always more to do!

Special shoutout to Mike Andreasen. He's helped me a lot when it comes to website/server optimization. If you're interested in server stuff, check out his guides here.

If you have any thoughts please feel free to post a comment!