For modern-day websites, speed is one of the success mantras. The first basic step to get speed is to get a powerful server. The next thing to do is to use a well-coded theme. Next comes the careful selection of necessary plugins including a good caching plugin like WP Rocket, LiteSpeed Cache, W3 Total Cache, etc. Finally, you need to perform a lot of optimizations and add a CDN.
When it comes to themes, I am vocal about using GeneratePress. It is one of the very few themes that is designed for speed. I have a full review and setup guide for GeneratePress. Feel free to read.
The question is, how do you further optimize GeneratePress theme for better performance? This guide is going to tell you exactly what you need to know. As before, the guide will use the premium theme, and hence, many of the things you read here will not work if you are using the free theme.
Before I proceed, will you like to know how fast the bare GeneratePress theme is? Well, let’s see!
Speed of the Bare GeneratePress Theme
The developers of the GeneratePress theme created a subdomain called https://speedtest.generatepress.com. The site has absolutely nothing except the bare theme. There is no logo, no image, nothing… It is just the bare theme.
Throw it on Google PageSpeed Insights and this is what you will notice:
That’s the speed on mobile. The optimization plugin that the developers used is Autoptimize.
Now, this test result isn’t showing a lot of info like the number of requests, total page weight, and the fully loaded time. To see that, you need to throw the site on Pingdom. Here is what I found:
Notice the page size. It is 16.8 KB, and the total HTTP requests are only 4. That’s the type of speed you want.
But, but, but…
Things will change when you put it on a real site (production site) that will have several plugins, images, logo, etc.
So, what happens when you put test a real site?
This is what you will find:
The screenshot you see above is for mobile test. What about the desktop? Here is what I found:
And this is what I found on Pingdom:
Here is a comparison of the Pingdom test results:
| Parameter | Sample site | Real site |
| Performance grade | 99 | 95 |
| Page size | 16.8 KB | 116.4 KB |
| Load time | 247 ms | 813 ms |
| Requests | 4 | 18 |
Notice how there is a slight performance decrease in the real site, and a big jump in all three parameters – page size, load time, and requests.
That’s happening because of the images, logo, favicon, Google Analytics, and more. Despite such increase in a few parameters, and a small decay in the performance grade, the actual site still scores extremely well in both Google PageSpeed Insights test and Pingdom test.
That’s possible because of multiple reasons including a great theme with zero bloat. Of course, the real site has several optimizations in place, that helps to ensure that such blazing fast speed is maintained.
Of the various optimization performed on the real site, some of them are for the GeneratePress theme.
I will walk you through the steps of optimizing GeneratePress, so stay with me!
Steps for Optimizing GeneratePress Theme
The theme itself is extremely optimized, but when you start adding content to your site, you need to optimize a few things. What I will be addressing here will include a few settings tweak for GeneratePress.
Let’s begin…
LOGO: USE SVG
By default, every person will have a tendency of uploading a logo in the JPG (JPEG) or a PNG format. That’s perfectly fine. However, if your logo is not really complex and uses very few colors, it is better that you go for the SVG version of the logo.
The problem with SVG version is that you cannot create a very colorful logo in that format. Things get especially awful if you have gradient. Simply put, use clearly distinguishable flat colors to create an SVG logo.
Anyway, if you can, get SVG logo. The reason why I am recommending SVG logo is that the output weight of this format will likely be smaller than the JPG or PNG version. However, that’s not necessarily true. If your logo weight in JPG or PNG format is smaller than the SVG format, it is okay to use JPG or PNG version.
Another advantage of using SVG is that SVG can scale infinitely. So, you don’t have to upload different versions for normal screens and retina screens.
The only problem you will face is that of uploading SVG logo to WordPress. By default, WordPress doesn’t allow SVG images. However, you can still upload it by installing a plugin called Safe SVG.
Yes, the plugin hasn’t been updated for quite some time, but don’t worry, it still works. Just upload the logo and once you are done, remove the plugin. The image will still work.
PRINT DYNAMIC CSS EXTERNALLY
There are two ways of printing dynamic CSS. You can either go for inline embedding, or you can print the CSS as an external fine. The best method is to print it externally for performance enhancements. This opens scope for better CSS combining using a caching plugin.
To do this, go to:
Dashboard >> Appearance >> Customize >> General >> Dynamic CSS Print Method.
Set the method to External File.
STRUCTURE
If you are using Floats grid, switch to Flex grid. The Flex grid system is much more lightweight than the Floats system, and it can help you to eliminate CLS issues.
The option for switching is located right below the Dynamic CSS Print Method option you see above.
ICON TYPE
Switch to SVG instead of Font and enable Cache Dynamic CSS. Switching from Font to SVG will eliminate Preload Key Request warning in Google PageSpeed Insights.
The option for this is located right underneath the Structure option you see above.
TYPOGRAPHY
Typography simply refers to the fonts you are using. Not just the font itself, but also font size and weight come under Typography.
Typography is a fascinating thing. The font you use can attract your visitors or it can repel them. So, using a good font is always important.
Many premium themes including GeneratePress adds Google fonts apart from a few system fonts.
It is natural for anyone to use Google fonts, because they beautiful. However, using Google fonts is desirable only for visual purposes. It is not desirable for speed.
If you are using Google fonts, everytime a person requests your website from a browser, the fonts will load from Google servers, and not from your server. This leads to extra HTTP requests.
The two extra requests are for fonts.gstatic.com and fonts.googleapis.com. These two requests are heavyweight players can they can severely decay your website speed.
I will always suggest that you don’t use Google fonts. If you are hell-bent on using Google fonts, you should host them locally. There are two ways you can host them locally. The first option is to manually upload the fonts to your server and serve them with CSS calls. The second option is to use a plugin called Optimize My Google Fonts (OMGF).
This plugin will localize the Google fonts that you are using. Unfortunately, adding a plugin to localize Google fonts will mean more code on your site. You should not do that. So, manual action is better. Unfortunately, not everyone can take the manual route.
This is the reason why I always recommend rookies to use a system font.
GeneratePress offers something called System Stack Font. The reason why you should be using this option is that System Font Stacks are totally free. These fonts are available on everyone’s operating system. Of course, the System Font Stacks differ for Windows, Linux, and Mac, and hence, people using different operating systems will see different fonts. That’s fine!
At least, with System Stack Font enabled on your website, browsers will not try to download any font from your server or a third-party server, because the system fonts are already available of user’s device.
To enable System Stack, go to Appearance >> Customize >> Typography, and enable System Stack for everything from body, to menu, to widget, heading, buttons, etc.
Trust me, this is one of the best things you can do to your website. Please do not use Google fonts!
TABLE OF CONTENTS
Okay, this is stupid! I know this shouldn’t be in here. It is a completely different topic. However, the reason why I have put is on the list is that there is no out-of-the-box method available with GeneratePress to generate Table of Contents.
Table of Contents is good for SEO, and if your site needs one, you should use one. One easy way to add Table of Contents is to use a plugin. A plugin will automatically insert a Table of Contents in every post you create.
Unfortunately, adding a plugin also means additional code on your site. What happens if the plugin developer(s) suddenly stops developing the plugin? What if the plugin is not well-coded? What if the plugin conflicts with other plugins?
There are too many what-ifs!
So, I will suggest that you stay in tune with GeneratePress. It is a lightweight and fast theme. There is no reason why you should add loads of plugins along with it and dampen your site’s speed.
Instead of using a plugin for Table of Contents, I will suggest that you create one by yourself.
Yes, it will be somewhat laborious, but at the end of the day, speed matters, and some extra work won’t hurt you! Rather, your efforts will pay off!
If want to know how to create Table of Contents manually and beautify it for GeneratePress, read my tutorial.
If you have decided that you WILL use a plugin, I will suggest that you settle for Lucky WP Table of Contents. It is extremely lightweight with very less memory usage, and you can even customize it to suit your site’s needs.
What Else Can You Do?
Okay, whatever you read till now completes everything that you can do to optimize GeneratePress theme. There is nothing more to do with the theme itself.
If you want to speed up your website even further, there are a few more things you should do. That’s totally not related to GeneratePress. The steps you read below apply to just about any theme you use.
Let’s start…
Use a caching plugin
It goes without saying. A caching plugin is a must. It will help you to:
- Minify HTML, CSS, and JS files, and combine them.
- Create cached HTML versions of your dynamic webpages, thereby increasing page speed.
- Activate browser caching so that users’ browsers cache the static elements of your site like the logo, fonts, etc.
- Optimize images and lazy-load them (all caching plugins may not have this feature).
- Preload DNS for external resources (not all caching plugins will have this feature).
- Defer render-blocking JS and CSS files (use this with caution).
- Localize Google Analytics (not all caching plugins have this feature).
- Optimize WordPress Heartbeat or disable it, if necessary (only a few caching plugins can do this).
- Optimize database by removing expired transients, deleted comments and post, etc.
I strongly recommend using LiteSpeed Cache (along with LiteSpeed server). If that is not an option, I will recommend WP Rocket or WP-Optimize. Going for W3 Total Cache is an option, but it is too complex to configure, and hence, I don’t recommend it to rookies.
Use a CDN
A content delivery network can give a significant boost to your website speed by delivering static cached files of your website from servers that are closest to the visitors.
A CDN provider can also offer you a Web Application Firewall for an additional cost that will keep your website protected from hacking attempts, malware injections, and other such online threats.
Such firewalls provided by CDN providers usually work at the DNS-level, thereby reducing load on your server.
Some CDNs can even deliver WebP images to supported browsers – something that Google really wants you to implement.
I will suggest CloudFlare, but you can always go for StackPath or BunnyCDN.
Localize Google Analytics
Google Analytics almost always causes trouble with page speed, because the script is served from Google’s server. The thing is that Google Analytics is cacheable resource, and you can effectively cache it by localizing the code. You can use WP Rocket caching plugin to do that. There are alternatives like Complete Optimization of Analytics Suite or CAOS. It is a plugin that can do the same for you.
Social Sharing
You use social sharing buttons on your website, right? In case you don’t know these are one of the major culprits for causing additional HTTP requests. Well, I am not saying that you should not be using social sharing buttons on your website, but what I am saying here is that choose a plugin wisely. One of the finest plugins you can find today is Grow by Mediavine. It has both free and paid versions available.
Web Hosting
If possible, please ditch your shared hosting or overly hyped VPS hosting solutions. Instead, go for cloud VPS hosting from providers like Vultr, DigitalOcean, Google Cloud Platform, Amazon AWS, etc. They are amazing!
A fast server can reduce the initial server response time and hence, reduce the Time to First Byte, thereby improving your site speed. If you are scared of jumping on to cloud hosting directly, I will recommend you settle for Cloudways, which is a famed managed cloud hosting provider.
Cloudways will give you a choice of selecting severs with Vultr, Linode, DigitalOcean, Google Cloud Platform, and Amazon AWS. It is slightly costly, but you will never regret it. I will recommend that you move your site to Vultr through Cloudways.
Conclusion
You know what? Optimization is a long and continuous process. There is no magic button, no magic plugin. Every site is different and so are its optimization needs. If you are using GeneratePress, all the theme-specific optimization tips mentioned above should work flawlessly for you. For the rest, you just have to experiment and keep finding issues one at a time and resolve them.
I wish you good luck!
