How to Optimize GeneratePress Theme?

In this tutorial, learn to Optimize GeneratePress Theme. Basically, we will use the GP Premium WordPress Theme in this whole optimization process.

If you are regular visitors then you all know that I have been writing lots of GeneratePress Tutorials on my blog. I love GeneratePress Theme and I have been using GP Premium in my other blogs.

so after reading this blog post, implement my strategy in your blog to speed up the GeneratePress website.

In this guide, you will also learn more about

  • GeneratePress and WPLogout Speed Test
  • Steps to Speed Up GeneratePress Theme
  • Use of Premium Plugin in GeneratePress
  • Web Hosting
  • Plugin Optimization
  • Font Optimization
  • Use of Content Delivery Network (CDN)
  • Analytics Optimization
How to Optimize GeneratePress Theme?

GeneratePress Speed Test

Tom Usborne, the founder and lead developer of GeneratePress Theme has created a separate subdomain speedtest.generatepress.com to check the speed of the bare GP Theme using Autoptimize plugin.

The result with GTMetrix and Google PageSpeed Insights is here.

SpeedTest of GeneratePress Theme

Also, the GTMetrix Score and Google PageSpeed Insights of WPLogout are also awesome.

100/100 score in GTMetrix and 97/100 for Mobile, 100/100 for Desktop in Google Page Speed Insights.

GTMetrix Score WPLogout
Google PageSpeed Insights for WPLogout

Also Read: GeneratePress Review

Steps to Optimize GeneratePress Theme

Before starting, you can read my optimize WordPress website article, there are few similar things that are useful for optimizing the GeneratePress website.

Furthermore, this article is based on how I speed up my GeneratePress site. so below are the tips and tricks you can implement in your blog.

First, always try to use less plugin. Less plugin = Less code and Less code = Fast loading and bug-free site.

I always try to avoid plugin but there are few plugins that I am going to list out that helps to achieve our goal.

GeneratePress Settings

Logo: Basically, we upload the logo with jpg or png extension. Here, I am using the SVG logo. I created my SVG’s wplogout logo because SVG has huge advantages over png and jpg. The size of SVG is smaller compared to other image extensions. SVGs icon remains the same no matter the screen resolution.

If possible use SVG logo on your site. For security purposes, WordPress doesn’t permit to upload SVG files. You can use Safe SVG plugin to upload SVG in WordPress.

Icon Type: Use SVG as a Icon Type rather than Font in GeneratePress. For this, go to your Dashboard > Appearance > Customize > General > Choose SVG > Publish

Icon Type in GeneratePress

If possible avoid using FontAwesome or ionicons that add extra requests in your site.

Table of Contents

If you are looking for a TOC plugin then you can find plenty of them in the WordPress plugin repository. You can also create a Table of Contents without a plugin in WordPress easily but if you have a long article then creating TOC manually can be frustrating and time-consuming.

Previously I was using Easy Table of Contents plugin and it was loading TTF font. The size of loading TTF font was small but it was adding an extra request.

Easy Table of Contents Font Issue

so later I migrated to LuckyWP Table of Contents. I use LuckyWP TOC because it has minimal impact on page speed, less memory uses. TOC plugin is best for SEO.

LuckyWP Table of Content

WordPress Caching

Tom is using the Autoptimize plugin while testing his site, the plugin is free to use. I am using the WP Rocket plugin to speed up my site. It is a famous paid WordPress Caching Plugin.

WP Rocket Plugin

WP Rocket Plugin has great features like Page Caching, Cache Preloading, Sitemap Preloading, GZIP Compression, Browser Caching, Database Optimization, Google Fonts Optimization, Remove Query Strings from Static Resources, Minification / Concatenation, Defer JS Loading, etc.

WP Rocket helps to get a higher score on Google Page Speed Insights, GTmetrix, etc.

Web Hosting

Almost the internet is filled with Web Hosting articles :P. so I am not going to write a long article on web hosting.

Hosting is the main reason behind the speed. Previously, I was using Shared Hosting and later I migrated to Cloudways Managed Cloud Hosting. I am using DigitalOcean stack in Cloudways and after whole migration, my site’s page loading time drastically reduces and you can see the result above.

Also Read: Cloudways Hosting Review

Cloudways Hosting

GeneratePress itself is using Kinsta – A Managed Cloud Hosting to host their site. Kinsta is powered by Google Cloud.

There is a day and night difference between cheap shared hosting and managed hosting. so think about Web hosting before anything else and choose wisely.

Content Delivery Network

A Content Delivery Network (CDN) is geographically distributed servers that help to speed up our website by caching the resources like HTML files, images, videos, JavaScript files, Stylesheet, etc. and serving the resources from the nearest server based on the user’s location.

CDN is suitable if you are targeting your site globally. Facebook, Amazon, Netflix, Alibaba, etc. are using CDN. I am personally using BunnyCDN. One of the cheapest and fastest CDN providers to speed up my website globally.

Social Sharing Buttons

Almost every blogger uses social sharing buttons after each post or page and I do that too. Bloggers prefer to use a plugin. Some of the social sharing plugins are good but in most cases, you will find a social sharing plugin that tends to slow our WordPress Website.

Create Social Sharing Buttons in GeneratePress Without Plugin

So, to overcome this issue I wrote a tutorial to create social sharing buttons without any plugin. Also, you can create floating social sharing buttons in your GeneratePress website without a plugin.

Font Optimization

Recently I switched my font back to System Font Stack from one of the Google Fonts. The only reason is that I am obsessed with Web Performance.

Generally when you use Google Fonts in your site then fonts are called from Google’s server every time i.e. there is always extra request from fonts.gstatic.com & fonts.googleapis.com.

Fonts Loading from Google Server

To overcome this issue, you can host Google Fonts locally so that Fonts can be called from your server or CDN. If you can’t live without Google Fonts then I suggest you use 1 or 2 fonts at maximum hosting them locally.

But if you want to speed up your GeneratePress website then you can switch back to System Stack font. There are certain reasons to choose System Stack Font.

  • System Font Stacks are free.
  • System Font Stack is available in your operating system.
  • No Fonts Download is required

How to use System Font Stack in GeneratePress Theme?

  • Go to your site dashboard
  • Go to Appearance > Customize
  • Go to Typography and Choose System Stack from font options.
System Font Stack in GeneratePress

Google Analytics Optimization

Generally, we use Google Analytics tracking code in your site to track visitors. While testing the site in GTMetrix, you see Leverage Browser Caching for Google Tag Manager and Google Analytics.

Google Analytics Leverage Browsing Caching

You will see 2 extra requests and to fix leverage browser caching you can host Google Analytics locally. Optimizing Analytics helps to speed up our WordPress Website.

Optimize Images

I basically use TinyPNG and Squoosh to optimize image before uploading to any posts/pages.

Lazy Load

What if you are embedding YouTube videos in your post or page? Will embedding slow down your site? How to lazy load images below the fold?

Yes, embedding slows down the website since every time visitors have to make an extra HTTP request. So you can solve this issue by lazy loading the YouTube iframe.

Solution: If you are using WP Rocket Paid plugin then go to WP Rocket > Media > Enable LazyLoad for iframes and videos.

Also you can lazy load images below the fold using WP Rocket plugin.

Lazy Loading in WP Rocket

Moreover, you can use WP YouTube Lyte to lazy load YouTube video that is available in the WordPress Repository for free.

[Free] You can also use Lazy Load – Optimize Images or a3 Lazy Load plugin to lazy load images and videos in your GeneratePress site.

Conclusion

You can always improve your site by removing bloated plugins, unused code snippets, etc. Lazy load your images and videos, optimize your images before uploading. Implement CDN, choose the proper hosting.

By default, GeneratePress is one of the fastest themes and by implementing the above tips, you can optimize GeneratePress Theme and make it even faster.

If you have more tips then please feel free to comment below.

Happy Optimizing!!!

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

25 thoughts on “How to Optimize GeneratePress Theme?”

  1. How the images are floating in the blog post? Even I switched to system font and the font-size: 17px, line height: 1.5em But why I’m not getting the same look in my site as yours. also sir, can you tell us how do I add design internal anchor link like you have on your site. It will help others as well.

    Reply
    • Do you mean box-shadow in images?
      Use this code

      .single .wp-block-image img, .wp-show-posts-image img {
          border-radius: 10px;
          box-shadow: rgba(23,43,99,.18) 0 7px 28px;
      }
      
      Reply
  2. Hello bro, I just love your website, it’s very eye-catchy.
    Can you share the ‘read more’ button’s CSS code? I’m trying to create like that but failed..

    Reply
  3. very nice theme. amazing working, i have website same themes trying last 1 week making the same as yours, so i need help in some cases such as, how can i make sticky sidebar

    1:sticky sidebar
    2: as mention in primary menu “Deal” how did you permanent black hover
    3: when we move arrow on the readmore button “underline” hovor comes plss share that code. plz

    Reply
  4. How to add read also links in posts as you have in your posts automatically? Are you using any plugin or you do it manually?

    Reply
  5. Hi Suraj,

    Instead of using a Table of Contents Plugin, would you recommend we manually add code to only those pages that need TOC?

    A jump link
    A jump link
    < a href="" rel="nofollow ugc">A jump link
    < a href="" rel="nofollow ugc">A jump link

    The above code was shared by the Generatepress team for the same question, could you tell me if the LuckyWP TOC plugin adds any further features or functionalities to this? From the security and page load perspectives, it is better we do this without new installs.

    Reply
    • Actually, it’s better to install TOC manually then using a plugin. LuckyWP TOC has some of the features like a smooth scroll, custom font size, colors, etc. which can be done with custom TOC. so, creating TOC without a plugin is the best idea.
      Thanks

      Reply
      • Suraj would you be able to give us a simple code (and the steps) to make a TOC without using the plugin that looks neat and is compatible with AMP?

        Reply
  6. Thanks a lot Suraj. Your guide have helped me to Optimize GeneratePress site. Thanks for updating this amazing guide with additional tips. It’s very useful for us.

    Reply

Leave a Comment