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


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!

85 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

    • Hi Munir, did you get any response from jetpack...I had a problem with images vanishing from site and maybe ewww image optimiser (cant remember it was a awhile ago). ALso involved posts that I would put on facebook and then simply put into blog as the "post on facebook concerning" and so on. When I sorted put images I see the facebook posts gone.

      Anyway interested hearing what jetpack had to say about photon... as I had it all sorted and now recently it has all gone awry again. They keep asking me If I am removing images from the media library.

  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

  15. Sorry for jumping around numerous topics...

    I frequently search the web trying find information on "the best coded wp themes", but I rarely find anything of value. Is there such a thing as a best coded WP theme? ... as in PHP version, forward thinking, seo streamlined, etc etc?

    I use GeneratePress almost exclusively. Love it. Love this article. Question: Can GP be tweaked in future releases to maximize above-the-fold code placement? I've found that after adding a few plugins, it always negatively effects the above-the-fold code as html is reformed - and thus is "graded" negatively in speed tests.

    And finally, although this article does a great job, I'd love to a new article surrounding GP harnessing ALL the best speed and performance tweaks, practices, plugins(recommended plugins), htaccess, avoiding bloat, removing bloat, common mistakes, "Most things WP dev's forget to do", ... etc etc

    Thanks for all you do. Hope 2017 is treating you well.
    Ron

    • Hi Ron,

      Thanks for your comment and suggestions!

      I'm constantly working on improving GP when it comes to code efficiency and speed.

      Above the fold code is tough, as CSS typically needs to be loaded before anything else or else your website would show up un-styled until the browser reached the CSS files at the bottom of the page. I'll definitely look into this more to see if there's anything I can afford to move to the bottom 🙂

  16. Real powerful stuff here. Just converted to paid GP owner and loving it. Have purchased many other themes that are bloated and glad I was introduced to GP.

    Thanks for sharing

  17. Glad i found this page. Looks like i have a few more tweaks to perform, but the core of my current ecommerce project is already pulling some high stats off of pingdom. The site has images designed for 4k viewing hence 25%+ of the data is images. I hail from the UK so i thought i would bounce it off of dallas to get a more rounded comparison.

    https://1drv.ms/i/s!AkmyF7o2B-NGhlQXbiWE1-1HXfsH

    Wherever possible i have added code as opposed to plugins - the site is running GP Premium / Statement with Yoast SEO, WooCommerce, Elementor, Code Snippets, Simple CSS and some security features. Theres a little more image optimisation to perform but ill do this off site rather than have a plugin do the job. Next steps for me will be leveraging caches, removing fontawesome and emoji's. After that and the site is backed up ready for live testing i will spend some time consolidating the CSS and JS.

    One major improvement, particularly in the back end when editing is to 'specify a vary: accept-encoding header'. It requires editing your .htaccess file and is advisable to check with your host before you do it (or at least make a backup beforehand!) - but honestly if this isn't on as default you will notice a massive difference in your dashboard.

  18. Hello Tom,

    Nice work over there.

    I was wondering if something happened with your site since I did a test today and the performance has downgraded a little bit. PageSpeed Score = B (87%) and Ylow Score C (71%).

    Hope you can tell me something so I can improve myself.

    • Thanks!

      Here's a test I just took:

      Looking at 100% page speed and 97% YSlow.

      The tips on this page should definitely help you achieve better scores 🙂

  19. 1. I've added the Autoptimize plugin and made the recommended setting changes, however, when I check the "Also aggregate inline CCS?" checkbox, my main navigation menu comes up multiple times

    2. Setting up Async JavaScript plugin. Looks like the setting page has changed, can you repost what the setting page should look like,?

  20. Hi Tom!
    These tips helped me bring the final result to 97/84 by GTMetrix and 96 by Pingdom.
    Thanks for the excellent support for the GeneratePress!

  21. Hi, Tom,

    Always great needed article for any WP theme. Thanks for writing it!

    After working with GeneratePress and Elementor and testing different optimization plugins, the results were showing that WP Fastest Cache was doing pretty good job. I didn't tested your suggestion yet but I really would like to compare against the WP Fastest Cache.

    The last project I was testing on has the following frame:
    - GeneratePress Pro
    - Elementor Free
    - Woocommerce
    - WMPL with 2 languages
    - Smart Slider 3 free
    - Wordfence free
    - Limit login attempts
    - Captcha

    (All latest versions as of writting this comment.)

    All worked good with WP Fastest Cache. Many css and js files could be also combined. Nothing broke - like slider or layout, etc. It managed to take almost 3 secs down from the loading time on a very general shared hosting running with PHP7 but no SSD disks.

    Hope that can help someone else too.
    Cheers,
    Milena

  22. Hi Tom. Thank you for all the amazing work! I use GP and got about 85/90 in GPI. This is a great score. The only remaining gap of 15 + 10 points is due to a problem "Prioritize visible content". common in GP and some other themes (but doesn't happen on starter themes). I so wish to have these extra points and so love GP and have no plans to use any other theme in my site.

    We talked about this privately and you told me it should be fixed in one of the updates but I till then, I would like to try to fix it myself anyway. If there is a quick fix, I'd be glad if you could update this article and I would gladly try it.

    Maybe something I could add to my custom.js file.

    • Hi Ben,

      I believe you're getting that message due to your top headline sliding up (using JS). If you look at your screenshot in PageSpeed Insights, you'll see they see your site without the headline faded in, causing the rest of the text to fall out of the initial viewport.

      Might be worth testing 🙂

  23. hi Tom,

    please clarify:
    - will added PHP be erased with Theme update if Child theme is not used?
    - what about if Code Snippets is sued for adding PHP - will PHP be erased in that case with Theme update if Child not used?

    thanks

    • Hi there,

      1. Not if it's added in a child theme theme or a plugin like Code Snippets.
      2. No, if you add your PHP to Code Snippets, theme/plugin updates won't affect it.

  24. Hi Tom, it's Ben from the post above again (couldn't replay there).

    I checked all other webpages of the site (that doesn't have this fade-in effect or any other dedicated JS). The "PVC" problem still occur... 😐 When I tried to change GP just for testing, to some starter themes, I didn't have these problem (for example, I tested with BlankSlate). I consulted Frank from Autoptimize and understood from him that this is something Autoptimize doesn't cover and comes from a theme. I also tried to delete my custom.js file and truncate the cache, yet after all that I still have the same PVC notification in Google which is basically the only problem preventing 100/100... I will cherish any advice.

    • Hi there,

      It looks like your problem is mainly coming from serving images that are too large for their container. The images you display on your website should fit snug within their containers. If they're too big, the browser has to download the entire image which gives you a bad score.

      You also need some sort of browser caching. A caching plugin would help a lot - WP Rocket is great.

  25. Thanks for this great article! It is gold! But I am having an issue with Autoptimize each time I activate the plugin, then the reCaptchas in my Contact Form7 forms dissapears. Then I refresh the site with F5 and it appears, then I refresh again and it appears... it is very random and weird. Is there any known issue between your plugin and reCaptcha? Previously I was using ReallySimpleCaptcha and it worked fine.

    Any clue will be really appreciated. Best , Paco.

  26. Hey Tom, you answered a few guys here that you would research a caching solution that works best with Generatepress. Any news about this? 🙂

  27. Heya Tom,

    Thanks for all your nice work, both the plugins bus also the answers you are giving everywhere. Most of it is absorbed and put into action! Great work.

    I don't know what happened, but when I finished 99% of my site, I went ahead and turned WP-Super Cache on and Autoptimize and Async JavaScript. Also added PHP code with CodeSnippets as you suggested to Removing Query Strings.

    My MapsMarker plugin protested a bit an I had to make some adjustments: I cannot check: Also aggregate inline JS?

    But it ended in great results.

    Now... I needed to change some design stuff on some pages in Elementor and I run into big troubles. Everything I touch will result in loosing all padding and margins on the previewed pages. In Elementor still everything looks good.

    I went ahead and deactivated all plugins and isolated the culprit as to the: Removing Query Strings code.

    Why would that mess up my Elementor paddings and margins?

    Adventurous greetings,
    Coen

    • Hi Coen,

      Query Strings are kind of a necessary evil - they let the browser know when to clear the cache so changes are displayed.

      They do hurt speed test rankings, but I don't think they actually hurt your page speed much at all. I choose to keep them enabled on my sites, as dealing with caching issues can get really annoying.

Leave a Reply to Jesd Cancel reply