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', 'generate_fontawesome_essentials' );
function generate_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.


Removing Query Strings

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

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:

Recommended Async Javascript settings
Recommended Async Javascript settings

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!

37 thoughts on “Optimizing GeneratePress

  1. Tom, That's an awesome move. I was going to write to you personally, asking to publish a post on GP optimization.

    If you could, please add Cache Enabler (or any other Cache Plugin) to the list which does wonders to the page load time. And with it's advanced mod_rewrite snippet, pages are delivered in lightning speed, as if it's a static html site.

    Plus, if you can provide a separate "critical" CSS would be great, so that users can inline it (optionally), to clear the "Eliminate render-blocking JavaScript and CSS in above-the-fold content" parameter by PageSpeed Insights (PSI)... if someone is looking for 100/100.

    Most theme developers ignore the "critical css" part, that usually the secret to score centum in PSI. Of course, you know this stuff a lot better than anyone else here.

    • Thanks for your reply, Ramesh!

      I'm always skeptical of caching plugins, as someone who supports a WordPress theme, they can be the cause of so many issues if not set up properly.

      I'll do some research on the best caching plugin and will come up with a configuration that won't cause any problems.

      I would love to learn more about "critical" CSS - if you'd like to chat more about it, you can email me at support@generatepress.com.

      Thanks again!

    • Hi Dave,

      I haven't tried it, but I've heard good things.

      Honestly, caching plugins have given me nothing but trouble in the past - they notoriously unreliable.

      However, I will be researching some of the most popular ones and adding a recommendation in this post for the best one I find 🙂

  2. Autoptimize can remove query strings for local CSS/JS. So Query Strings Remover may not be needed if one uses Autoptimize.

    Also, using a caching plugin preferably with rewrite URLs set in .htaccess (pointing to cached static html) is a good idea if no server-side caching solutions (nginx, varnish) are provided by the host. Reduces the database calls to a great deal, and renders pages very fast. Most caching tools such as WP Super Cache, W3-TC, Cache Enabler, support this configuration.

    Thanks for updating this guide with additional tips. It's very useful.

  3. Hi Tom,
    Nice article, Autoptimize worked fine but Async Javascript causes issue with the slider plugin I'm using: https://en-gb.wordpress.org/plugins/smart-slider-3/

    Basically it stops the images in the slider loading, showing just the rotating circle. It's quite a popular plugin so I thought it would be worth mentioning.
    I tried adding all the sliders js files to the exclusion box in the Async Javascript plugin but it had no effect.

  4. Tom, this is awesome. I ran through the settings you suggest above, and then ran Pingdom... 96/100! This is on the full production site https://karmalawyers.com.au.

    I've never had a result this good before, and I'm one who focuses heavily on site optimisation.

    I anticipate using GP as much as possible in future, and making a donation each time. It's worth its weight in gold.

  5. Hi, Tom. Do I need to generate a separate plugin (with Pluginception) for each code-snippet OR is it possible to combine the snippets in ONE plugin? Example: I want to deactivate emojis, header links, query strings, etc ...

    Thanks for your excellent support!!! Bin

  6. Goode morning, Tom. You recommend to activate the Autoptimize option "Force javascript in head". But it unfortunately breaks the "Page-Header"!? Best regards, Bin

    • Interesting - can you post a topic in the forum with some more details (what you're using in the Page Header etc..) so I can dig a little deeper?

  7. Hey Tom

    I was going to look at improving page speed after moving host in the new year.

    I would ditch 99% of font awesome for speed. Currently I use 7 and doubt i would exceed 10

    Can you filter selecting to allow by file name or some other way allow a few additional icons over and above the essentials ?

    • Not by default, but you can always build your own font file using something like icomoon, then remove Font Awesome from GP completely and add your own.

      If you need more info feel free to start a topic on it 🙂

  8. Hello Tom,
    I was looking for your email, as I have spoken to you in the past via email. Couldn't find your email, so I was glad to see this post, whilst essentially looking for a way to contact you.
    As luck would have it, I have spent the last weekend messing around with one of my sites to get speed up (I am in SA... and server is in US- also use ssl so cannot use free cdn- so nothing will get speed up to what I want it in SA, without a cdn). That said I have raised speed significantly. ( when I get time will do it to the site that is supposed to serve from US and what I actually want it for).
    I hope you don't mind long comments. I'll try and explain where I am coming from:
    Firstly, apply a bit of common sense... look at the site. In my mind what one is trying to do is to optimise the home page specifically. The reason for that is, you want to show what you do and have some kind of a call to action (even if simply to get people to look at content and get a subscribe to newletter). Therefore, why have a whole lot of facebook links, lot of shares, etc.- all that creates is avenues for people to click out of the site.
    So, that's step 1: critically look, clean up, simplify and have a reason for everything on your home page. NOTE: do yourself a favour and check the site carefully in mobile. E.g. you would want some kind of a search option coming up early on in mobile (I was/ had used a plugin "asset queue manager" to remove the fontawesome queuing to load... until I realised the search button was gone. So, I was trying to find a way to load the search in menu bar, so it still is available early in mobile. However, I see you mention a method in this article to get rid of awesome fonts not using- makes a big difference in load time ).
    Some of the other methods I have used (just to help those that are currently looking at this):
    Plugin: WP-Optimize... to clear database, sorry clean and reorganise. Is well mentioned. Can run on its own from settings every week, two weeks, etc.
    I do use a cache plugin (sitegrounds supercacher... and with reference to this, it was loading pages significantly faster than using the google page speed tool that they had also set up on their server/ cpanel).
    Theme speed: whilst looking at this... I saw that you are under 1mb zipped in generatepress... so I am still very glad that I found this theme. I remember I must have thought about speed and that all up front- when moving from static). Oh, whilst mentioning static sites... to those that are shifting wordpress from static sites. do not do what I did... wordpress has a 100 page limit (as opposed to posts). After that you load your backend and it moves impossibly slowly... so be careful and use posts more for your structuring. (the date / blogging type relationship means it doesn't matter how many posts you have (as per my current knowledge).
    Autoptimize: I do use this... I messed around with this... so I didn't use your exact configuration (recommended)... but I will mess around some more (hmmm, wonder when one is actually supposed to get any work done?).
    EWWW image optimizer: another really great plugin, really does the work on your images for you. (both autoptimize and EWWW can go through a cdn, so there cache, whatever is also served faster).
    I see you mention plugin "code snippets"... I also found info on this when trawling web. I used for removing query strings (didn't see an option like mentioned in comments post earlier for autoptimize) and to remove the share count from jetpack (also less js queries, big speed improvement not having to go back to share sites to get count. However, if a very social site, I would leave the count in).
    Analytics: at the moment have left the jetpack and the google analytics. Google simply for if I ever get clever and work out how to use for purpose and jetpack because it is so simple to see on dashboard and is conservative (it doesn't have all that referral spam that google does. However, even with admin removed from options, it does overload when you are workingon site... so it does load for admin somehow).
    Oh, I did change to a font in the generatepress list that was not a google font (although "reading" on web seems to be best in a sans font- according to articles on google). Then I removed loading google fonts from autoptimize as well.
    There were also a couple of good ideas in this post:
    https://www.keycdn.com/blog/speed-up-wordpress/

    I haven't done everything yet... but
    https:businessowner-cover.com
    gt metrix.com:pagespeed 98%/YSLOW 88% (no cdn), 0.7s load, page size 254 kb and 14 requests.
    Pingdom: performance grade c (mainly due to analytics and stats from WP for jetpack stats); NY City- load 653 ms.

    So, just thought that I would share... thank you for your article, I wlll do your suggestions as well, may get even faster,
    Kenny
    Ping

    • Hi Kenny,

      Thanks for the awesome comment and all of your suggestions! I'm sure many will find them useful.

      Just wanted to mention that there shouldn't be a 100 page limit in WordPress - pages and posts are structured the exact same in WordPress as post types. They populate the database the exact same, so there really shouldn't be any difference between the two.

      Again, thanks for the extremely informative comment - your site stats are very impressive! 🙂

    • Interesting - I never knew that. Memory issues are quite easy to fix though, you just need to increase the memory on your server 🙂

      Thanks for the info!

  9. Hello Tom,
    Kenny again (i commented earlier in this thread). I was going to email support. However, i suspect that perhaps others are also having this issue.
    I am at 99% for google page speed (with jet pack stats and google anayltics loading).

    The last 1% is irritating me, i am getting the following (it looks theme related... and i am wondering how to fix... so i can get my other 1%... no one said i have OCD).

    In Gtmetrix: under "leverage browser caching:
    https://businessowner-cover.com/wp-content/themes/generatepress/fonts/generatepress.ttf (2 days)
    In Pingdom:
    The requests for the following URLs don't fit in a single packet. Reducing the size of these requests could reduce latency.
    data:application/x-font-woff;charset=utf-8;base ... AAAB//8AAnjaY2BgYGQAgosrjpwF0ZcUq9bCaABTzgdAAAA=

    data:application/x-font-woff;charset=utf-8;base ... nLPPKv8Br9RH5wB4nGNgZgCD/wcYJIEUIwMaAAArwwHdAAA=
    MORE AT GOOGLE DEVELOPERS

    As i suspect i think it is theme related to do with fonts. I would really like to get my 1%.
    (i stopped google fonts from loading via autoptimize and use generate press fonts).

    • It's not so much "theme related" as it is a font icon issue. I did a quick search for this, and I'm not sure there's much that can be done without completely removing font icons from the site. Doing so would break things like the navigation search icon, back to top button, mobile menu bars etc..

      If anyone has any suggestions I would love to hear them 🙂

  10. Hi Tom,

    I am working on optimizing a website and this post really helped me, i have some additional questions if you could help please.

    1) I am using Jetpack photon module and that adds some query string to some images which ends up like this "?fit=130%2C130", "?fit=54%2C45", etc. I followed the snippet provided to remove query strings for css/js. How would we remove the query strings from the images like in my case?

    2) How to fix the "Enable Keep-Alive" error from pagespeed test which causing me issues? I tried this "Header set Connection keep-alive" added in .htaccess file but this seems not working?

    Btw i have not used any cache plugin for now, just your snippets and couple of snippets added to .htaccess file to set expire headers and gzip compression. And result is as good as a cache plugin could do for now [ pingdom: 91, Pagespeed: 89, Yslow: 86 ] but i am looking to hit as near possible to 100 🙂

    Looking forward to help.

    Thanks,
    Munir

  11. Thank you for your quick response.

    I have just sent a support email to Jetpack, let's see what they comeup with.

    I have researched further and that keep alive thing is actually server related and i will need to contact hosting support for this.

    I will update with my results (if i could make it any good )

    Thanks,
    Munir

  12. Hello Tom,
    I am so happy I bought the GeneratePress theme! Having worked with a number of other themes, I can clearly see how much effort you have put into this theme. I love it !!!
    Optimizing for performance though has been an open topic for me for a while, and I'm so happy I found this page now.
    All the best,
    Adrian

  13. But being dependant on these plugins Tom, does that not exposes one to foibles of the plugin makers? Whether they update, let go stale their plugins?

    And what about CODE Deprecation, caused by things "Automatic" does to WPs, confounding good ppl like you and to other Theme/ Plug makers?

    • Autoptimize is super popular - I doubt it's going anywhere soon.

      Other than that most of this is achievable without plugins at all (I provided the necessary code).

      No matter what plugins or themes you use there's a risk of the author stopping support. If that ever happens to any of the plugins above I'll definitely update the article 🙂

  14. Hi Tom
    Thank you so much for this tips.
    I wondered whether there is a mean to add 2 or 3 icons along "the essentials" ?
    I was thinking about the social network ones?
    (by myself for my site only, or everyone if you think other people could find this good too)
    Thanks
    Eric

Leave a Comment