WP Media Mastery

In this WP Rocket review I will show you just how incredible it is to be able to install and activate some of the most difficult to achieve WordPress speed optimizations in under 3 minutes.

It’s not only one of the most advanced and effective caching plugins, it’s also an optimization tool that will accelerate your WordPress site out of the box while replacing the functionality of at least 5 other plugins.

Furthermore, it’s super easy for beginners to use.

How WP Rocket Boosted My Speed.

Without WP Rocket my test site showed a contentful paint time of 1 second.

But WP Rocket shaved off over 800ms, reducing the contentful paint time to 198ms.

That’s a difference of 80.2%. Incredible!

And I’m going to help you to achieve the same.

NOTE: I always reference speed in terms of contentful paint time or perceived load time. This is the time it takes for users to believe that the page is fully loaded (i.e the time it takes for the first “above the fold” content to appear). Fully loaded time is meaningless.

The ideal WP Rocket settings guide that follows provides a comprehensive explanation of the settings and how they affect website speed. The review therefore, forms part and parcel of the guide.

Let’s dive in.

A Long List Of Features

• Caches straight out of the box.
• Extremely easy to configure (less than 3 minutes).
• SUPERCHARGES YOUR WORDPRESS.
• Server and browser caching.
• Long track record of success.
• Over 700,000 sites optimized with WP Rocket.
• CACHE WARMER (preloader) so even the first visitor gets a cached page.
• DNS prefetch (speeds up calls to external sites e.g. Google fonts).
• Built-in database cleaner.
• CDN integration.
• Integrates seamlessly with Cloudflare
• Host Google Analytics locally.
• WooCommerce compatible.
• Compatible with WP Touch, WordPress Mobile Pack, WP Mobile Detector, WPML, Polylang, qTranslate and bbPress.
• Works with Apache, Nginx, Microsoft IIS and LiteSpeed web servers.
• Varnish cache compatible.
• Multisite compatible.
• Easy to switch from other caching plugins (incl. W3 Total Cache and WP Super Cache).
• Discounted yearly renewals.
• 14 day refund policy.

Installation

WP Rocket is a premium plugin so you’ll have to purchase it in order to install it.

The nice thing with WP Rocket is that after your initial purchase, renewals are discounted.

OK, now hit up the WPRocket website and purchase the plugin.

Download to your local drive. Then install it from the WordPress dashboard by uploading the zip file.

Dashboard

On installation, WP Rocket applies 80% of web performance best practices and the plugin is already working to make your site faster.

Now WP Rocket is designed to automatically purge the cache and preload pages in certain circumstances as you will see later on. However, you can manually purge the cache and preload it direct from the WP Rocket dashboard.

Typically, a cache is built when pages on a site are visited. Preloading is the process of building the cache immediately (cache warming) so that users are always served with cached pages which speeds up delivery immensely.

An OPCache is a PHP extension that stores precompiled script bytecode in shared memory for quick access. To this end, PHP does not need to load and parse script with each request. WP Rocket allows you to purge the OPCache right from within the dashboard. OPCache is built into PHP5.5 and above.

As you can see, the developers have gone out of their way to make it really easy to use the plugin.

From here, we will configure further options to enhance speed even further.

Cache

• Mobile Cache – This creates caching for mobile users which is imperative as Google adopts a mobile first approach in their algorithms and they index their SERPS according to this mobile index. This approach applies to SERPS for all devices. You can also create a separate cache for mobile devices and it’s advisable to keep this option enabled.
• User Cache – Enable this for membership type websites or restricted content where members must log in to see content. The site will be cached as normal for ALL users but a separate cache is created for each member that must log in to the site. This means that their unique user information can only be seen by themselves.
• Cache Lifespan – Time based caching whereby the cache is purged after a specified time period. You must enable preloading (later on) in order to warm the cache again after purging. Cache warming means that the cache is built immediately without users having to access pages to invoke caching. This is a great way of doing things because various forms of action based cache clearing are automatically applied in certain circumstances, as below.

WP Rocket will automatically purge the cache and preload each time new content is added or when content is edited or updated. This ensures that pages delivered to users remain current.

There are also other times when the cache will be cleared automatically:

• Changing or updating child and parent themes and theme options.
• Creating, updating or deleting users.
• Updating site menus.
• Creating, updating or deleting sidebar widgets.
• Creating, updating or deleting categories, tags or permalink structures.
• Creating, updating or deleting terms.
• Creating, updating or deleting links.
• Changing Customizer options.
• When the Avada theme clears its own cache.

It’s possible to prevent automatic cache clearing but I don’t advocate this.

Optimization

All of the above options can potentially break things on your site. I am able to apply everything here but maybe that’s because I use a great theme built by the Genesis Framework (Studiopress). You will, however, need to test these options within your own environment.

• Minify HTML – This removes white space within the HTML code thereby reducing file size. It doesn’t (or shouldn’t) affect functionality.
• Combine Google Fonts – This reduces the number of HTTP requests made to the Google servers, thereby speeding up delivery of fonts. I have read a post which states that fonts are locally hosted by WP Rocket but I assure you that this is not the case.
• Remove Query Strings From Static Resources – Removes the version query string (everything after a ?), e.g. yourdomain.com/style.css?ver2.09, and then encodes the version number directly into the URL, e.g. yourdomain.com/style-2.09.css. This technique is used in a similar way to cache busting. As an example, if you make CSS changes directly within your theme’s style sheet (not in the WordPress additional CSS window within the customizer), users will not immediately see those changes. Neither will you. The CSS file is incremented with a new version number when it is saved. The user’s browser cache will look for the old file and not find it. In order to make those changes immediately visible, the new version number of the file must be removed and replaced with the original version number, thereby “busting” the cache. Removing the query string achieves a similar objective. This speeds up the process because it avoids having to look for a new file.
• Minify CSS – The same as for HTML. Removes white space and reduces file size.
• Combine CSS Files – This starts to add “real” speed by minifying and then combining separate CSS files into one file, thereby reducing the number of HTTP requests. You can exclude certain CSS files from concatenation if anything breaks.
• Optimize CSS Delivery – In order to render a page, browsers must parse all of the HTML content. But if you have a look at your source code you will see that calls to CSS files present themselves in between the HTML content, thereby blocking the rendering of the page until they have been fully parsed (processed). This slows down the page loading time and is known as render blocking. The optimization applied by WP Rocket will defer the parsing of CSS files until after the HTML is parsed. Nevertheless certain critical CSS is still required to render above the fold content, i.e. the content seen by the user on page load. WP Rocket automatically generates this critical code and inserts it where it’s required. If you find that the critical CSS is incomplete, you can add your own. You will need this tool to generate the proper critical CSS code.
• Minify JavaScript – Removes unnecessary white space thereby reducing file size.
• Combine JS Files – Combines internal, third party and inline JavaScript into a single file, thereby reducing the number of HTTP requests.
• Load JS Deferred – This defers the loading of JavaScript until the HTML is parsed. This eliminates render blocking in the same way as described for Optimizing CSS delivery above. You can also exclude any inline JavaScript by specifying string patterns as well as exclude any JS files from merging (concatenation).
• Safe Mode For JQuery – Provides support for inline JS from themes and plugins. Keep this enabled please.

Media

• Lazy Load Images – Images and other media typically slow down page loading times. Lazy loading images delays their loading until they appear in the viewport, i.e. when the user scrolls down so that they come into view. This allows the content to load unhindered thereby improving the “perceived load time” for the user (not total loading time). You would normally have to install an additional plugin to reap the benefit of this feature. There are a few available, none of which I can suggest.
• Lazy Load iFrames And Videos – Same as above.
• Disable Emoji – Reduces the number of external HTTP requests.
• Disable WordPress Embeds – Prevents users from embedding your images on their sites by linking to them directly from your server thereby creating HTTP requests that chew up your bandwidth and slow up your site. This is achieved by embedding the image URL on their site by simply copying and pasting. Enabling this option prevents this and also prevents you from embedding content from external sites and removes all of the JS requests related to WordPress embeds.

Preload

• Activate Preloading – WP Rocket warms the cache by preloading pages, thereby making sure that visitors are immediately served with cached pages. The software starts the preloading process by using links from your homepage followed by Sitemaps that you specify (if not automatically determined). Enabling Preloading triggers cache warming when content is added or updated. You can also trigger this manually from the dashboard (as mentioned before).
• Activate Sitemap Based Cache Preloading – You must enable Sitemap preloading in order for WP Rocket to cache all of your necessary URL’s found in your sitemap files.
• Rank Math XML Sitemap – I use the Rank Math SEO Plugin. Yours may be Yoast, All In One or SEO Framework for example. If WP Rocket did’t find your sitemap automatically, you can add it manually.
• Prefetch DNS Requests – WP Rocket can fetch DNS’s in advance making external files load faster, e.g. font files, Google analytics. Here’s a handy list of URL’s you can add, compliments of Lukecav on Github.

Prefetch DNS URL’s

	//maps.googleapis.com
	//maps.gstatic.com
	//fonts.googleapis.com
	//fonts.gstatic.com
	//ajax.googleapis.com
	//apis.google.com
	//google-analytics.com
	//www.google-analytics.com
	//ssl.google-analytics.com
	//youtube.com
	//api.pinterest.com
	//cdnjs.cloudflare.com
	//pixel.wp.com
	//connect.facebook.net
	//platform.twitter.com
	//syndication.twitter.com
	//platform.instagram.com
	//disqus.com
	//sitename.disqus.com
	//s7.addthis.com
	//platform.linkedin.com
	//w.sharethis.com
	//s0.wp.com
	//s1.wp.com
	//s2.wp.com
	//s.gravatar.com
	//0.gravatar.com
	//2.gravatar.com
	//1.gravatar.com
	//stats.wp.com

view rawDNS Prefetch domains hosted with ❤ by GitHub

Advanced Rules

• Never Cache URL’s – Specify URL’s that you want to exclude from caching such as custom login pages (where sensitive information may otherwise be seen by users who shouldn’t see such information). Enter either the full URL or just the part after the domain name, e.g. /some-page/. If your permalinks are setup to use a trailing slash then you must include it.
• Never Cache Cookies – Specify the ID’s of cookies that should prevent a page from being cached when stored in a user’s browser.
• Never Cache User Agents – WP Rocket’s mobile detection treats tablets as desktop devices, not mobile devices. However, there can only be two versions of the cache, desktop and mobile. If you’ve built pages that have a specific display for tablet devices, these devices may see the wrong page layout. Enabling this option allows you to exclude these devices from seeing cached pages. Here’s a list of devices you can add.

• iPad
• NexusTablet
• SamsungTablet
• HPTablet
• AsusTablet
• BlackBerryTablet
• HTCtablet
• MotorolaTablet
• AcerTablet

• ToshibaTablet
• LGTablet
• FujitsuTablet
• LenovoTablet
• DellTablet
• SonyTablet
• PhilipsTablet
• HuaweiTablet

• Always Purge URL’s – Specify URL’s that you always want purged whenever you update any post or page. An example may be category or tag archives.
• Cache Query Strings – A query string is where a URL contains a question mark followed by a parameter and a value, e.g. yourdomain.com/some-page/?country=usa. In this example, “country” is the parameter and “usa” is the value. WP Rocket doesn’t cache query strings by default. However, if you want this page to be cached, add “country” into this field. This option may apply to product pages, for example, on an e-commerce website.

Database

WP Rocket does a whole lot more than just caching. It’s a speed tool designed to optimize web performance.

Thanks to this feature, you won’t have to install an additional database cleaning plugin such as Optimize Database After Deleting Revisions.

Over time, a database can become quite bloated.

Consider this example. It’s common practice to save draft copies of posts as you work on them. Each time this happens WordPress stores this as a revision in the database. Now you may be thinking that the post is simply updated but in practice WordPress stores the entire post again, each time a revision is made meaning that you may end up with multiple copies of the same post in your database. So a 4,000 word post that is revised 3 times after publishing would lead to 16,000 words in the database.

In short, if you don’t optimize your database your site will become unnecessarily sluggish.

You can clean up your database manually or choose to set a regular schedule to have the plugin do it for you automatically. I prefer to set a schedule to clean up comments and transients but I manually clean up revisions so as not to risk losing a revision that I may need to revert to. Once I’m certain it won’t be needed any more, I will delete it manually.

• Post Cleanup – Clear out revisions, auto drafts and trashed posts.
• Comments Cleanup – Remove spam and trashed comments.
• Transients Cleanup – Transients are temporary options that will be regenerated by plugins as required. Therefore, they are safe to remove.
• Database Cleanup – Optimizes database tables. Rightly or wrongly, I do this manually and periodically.

CDN

WP Rocket provides a way to integrate your favorite CDN. This is really well thought out because you would otherwise have to use a separate plugin such as CDN Enabler.

With WP Rocket you can integrate with:

• Amazon Cloudfront
• Max CDN
• Key CDN
• Others

A content delivery network is designed specifically to deliver static cached assets (e.g. JavaScript, CSS, images and other media) to site visitors.

In essence, you “offload” these assets to the CDN’s server and in turn reduce the number of requests made to your own server which ultimately saves bandwidth, hosting costs (cloud hosting) and may also give a substantial speed boost for sites that are image heavy, like this one. A further advantage (speed wise) is that these assets are served quicker to visitors in close proximity to the CDN’s data centers.

If you’re looking for a really good CDN, I highly recommend Stackpath (was MaxCDN).

Just a heads up – You’re not going to get a reasonable speed boost unless you’re using a really good caching plugin together with good hosting, the likes of Cloudways.

• CDN CNAME – Obtain this from your CDN provider. It should be available in your dashboard. You must choose which files must be rewritten to the CDN.
• Exclude Files – Choose specific files you don’t want to be re-written to the CDN.

Heartbeat

Reducing or disabling Heartbeat activity can reduce server resource usage and will also help to speed up your WordPress backend.

The default heartbeat frequency is 60 seconds. Reducing activity changes the frequency to 2 minutes.

I don’t recommend disabling heartbeat completely unless you are certain that it won’t break plugins and themes that make use of this API.

This is another one of WP Rocket’s ingenious features that will save you having to use an additional plugin (Heartbeat Control). I avoid plugins where possible so as to optimize my speed most efficiently.

Add Ons

These are all one click add ons that don’t require configuration. Cloudflare, however, does require some additional details.

• Google Analytics Tracking – WP Rocket will host your analytics script locally on your server. This reduces the number of external calls (requests) thereby boosting speed. The only other way to do this is with the CAOS plugin.
• Facebook Pixel – Same as for Google analytics.
• Varnish – If you have Varnish caching enabled on your server please enable this add on. This will cause the Varnish cache to be purged each time the WP Rocket cache is cleared.
• Cloudflare – If you use Cloudflare (recommended) enable this to clear the Cloudflare cache each time the WP Rocket cache is cleared. This also assists the plugin in enabling the ideal Cloudflare settings automatically.
• Sucuri – Clears the Sucuri cache.

• Cloudflare Credentials – Global API key can be found on the Cloudflare website at My Profile > API Keys. Zone ID can be found in the Overview tab on the right hand side.
• Development Mode – This is used to bypass the Cloudflare cache when doing development on your site. It ensures that you make changes to your actual site and not the cached version. This is only really needed if you activate a cache all page rule.
• Optimal Settings – Allow WP Rocket to toggle the correct settings within Cloudflare. Personally I prefer to do this myself on the Cloudflare site. Quite a handy feature though.
• Relative protocol – Use only with Cloudflare’s flexible SSL feature. This causes URL’s of static files (JS, CSS, images etc.) to be rewritten as // instead of http(s)://.
• Cloudflare Cache – Allows you to clear the Cloudflare cache manually. Pretty Convenient.

Image Optimization

Unoptimized images suck up a huge amount of bandwidth and are also a major factor responsible for a slowdown in page loading times.

The more image heavy a post, the worse the effect.

WP Rocket suggests the Imagify plugin to compress images when uploading to WordPress. (One can’t blame them because they developed the plugin).

Seriously though, it’s one of the best. But there’s nothing stopping you using any image compression plugin you choose.

But compression is only part of the picture. Serving scaled images also goes a long way in speed optimization. In other words, if your theme specifies maximum dimensions of say 700px wide, then make sure to resize your images to that specification. NOTE: Serving images just 1px larger than the maximum specification will also make images blurred.

Lazy loading images also helps to improve user experience (perceived load time). See the media section.

Tools

• Export Settings – Export your settings for use on other websites. This will save you having to configure the same settings.
• Import Settings – Import saved settings. You won’t have to do any further configuration.
• Rollback – If an update causes any issues on your site, you can roll back to the previous (major) version.

Why You Should Host With Cloudways

As confirmed in this WordPress Optimization support article, hosting is the most critical WordPress speed factor.

All the optimization in the world is wasted unless your hosting is fast and reliable.

I’ve used over 7 hosting providers over the years and I’ve come across just about everything there is to know about hosting. I recommend Cloudways without reservation.

Not only is it blazing fast but it also offers the best value for money and it’s super easy to setup and use.

I stay away from Facebook polls for various reasons but Review Signal turns regular conversations on Twitter into web hosting reviews making them more reliable than any other form of review or poll.

Their data set comprises over 335,000 conversational reviews and this is how regular folk talk about Cloudways.

Sign Up with Promo Code: WPMM25OFF for 25% off your first two month’s hosting fees if you stay with Cloudways.

TRY CLOUDWAYS FREE FOR 3 DAYS NO CREDIT CARD REQUIRED

Over To You

So what makes WP Rocket so attractive that people will pay for a premium caching plugin without batting an eyelid?

I mean there’s certainly no shortage of free ones.

Well all I can say is that you get what you pay for!

WP Rocket works out of the box and configuring some extra settings won’t take you more than 2 minutes.

That’s a huge win.

What do you think?

Leave me a comment.

Studiopress is not only a theme shop but also the creator of the Genesis Framework. In this Studiopress review I’ll explain why the two are inseparable, making your site faster, more SEO friendly and bringing about exceptional user experience through minimalistic design.

Background

Transitioning from Google’s Blogger platform to WordPress, Brian Gardner, founder of Studiopress, became disillusioned with a free theme he’d installed from the WordPress repository.

Without any knowledge of PHP or CSS, he stripped down the theme to it’s files and started playing around.

This transitioned into customizing themes and making them available for free on his site, which then grew into users requesting custom tweaks and hence freelance jobs. Long story short, he eventually started selling themes on his site.

Following talks with Matt Mullenweg, founder of WordPress, regarding a proprietary licence deal and a legal need to rebrand his Revolution theme, Brian founded StudioPress.

A number of themes were developed that shared some of the same code base.

But every time he wanted to change a function within his themes, he found himself having to adjust each theme individually.

Brian had a business relationship with a fellow by the name of Nathan Rice, for whom he did some outsourcing work and in an attempt to alleviate this problem he propositioned him as to whether they could “build something that basically shares the same code base, and then the design is just laid over the top?”

Brian has always drawn the analogy whereby the paint work of a car is the design and the engine is always the same. “You can change the way the car looks without having to change the engine”

Hello Genesis Framework.

He’d found a way to keep the same code base for all themes contained in a framework where functions and changes only needed to be updated once. Each (child) theme simply became a design element – a skin so to speak.

StudioPress themes cannot, therefore, run without the underlying engine to drive them. It’s also the reason why the words StudioPress and Genesis Framework are often used interchangeably.

This site runs on the Infinity Pro theme and I use StudioPress themes powered by the Genesis Framework exclusively on all my sites. It’s a rock solid foundation for any website backed by over 213,000 happy users and recommended by Matt Mullenweg and Yoast. The themes are used on over 500,000 WordPress sites. 

I had some terrible experiences in the past with themes purchased on Themeforest.  Not only did I get sucked into believing some of the hot air regarding speed and SEO friendliness but I landed up having to fork out recurring contributions each year in order to maintain updates and support for some of the most poorly coded themes you can imagine!

I don’t want you to get caught in the same way and that’s why I only use and recommend StudioPress themes.

There are some third party theme developers who make themes for the Genesis Framework but I would tend to steer clear of themes that aren’t specifically listed on the StudioPress website.

Here are some compelling reasons to stick with StudioPress Themes:

• StudioPress do not provide support for third party themes.
• You still need to purchase the Genesis Framework for a third party theme.
• You can’t vouch for the coding quality behind a third party theme.
• Third party themes don’t go through an approval process.
• You can customize your StudioPress theme the way you want to so why take the chance of purchasing a theme that may be of inferior quality?

Bloggers rave about the themes.

And they offer an impressive list of features:

1. Blazing fast and highly optimized.
2. Clean coding + minimalistic and lightweight build.
3. Zero bloat.
4. SEO Optimized.
5. UNLIMITED use on unlimited domains.
6. Lifetime support.
7. Lifetime Updates.
8. No annual recurring fees + themes from $39.
9. Highly customizable.
10. Extremely well supported across the internet.
11. Turnkey themes.
12. Unlimited design options.
13. HTML 5 markup.
14. Cross browser compatible.
15. Mobile responsive.
16. Supports schema.org microdata.

One Theme For All Of Your Sites

Unlike the majority of themes which involve ongoing costs for support and updates, a once-off purchase of a StudioPress theme entitles you to lifetime updates, lifetime support and unlimited use of the theme on as many different domains as you like, in perpetuity. NO ongoing fees. NO questions asked.

Don’t be lured into buying other themes because the developers or platforms on which they’re sold are silent on the issue of updates and support.

If such a theme is not updated to work with the most recent version of WordPress, eventually it’s going to stop working. This is exactly how these developers gently coerce you into paying a regular yearly subscription.

And besides the fact that StudioPress themes are infinitely superior to most, they also work out way cheaper.

You can buy a single theme from $99 which includes the Genesis Framework or buy only the framework for $59 which comes with a really simple sample theme.

And if you build sites regularly you can you can pick up the Pro Plus All-Theme Package which includes all 64 of their current themes + all new themes that they develop + the Genesis framework (valued at over $1,700) for only $499.

And since StudioPress was acquired by WP Engine in 2018, you can now get the Genesis Framework + 36 StudioPress themes for free when you sign up for a hosting plan with WP Engine. That’s over $2,000 in value!

That’s especially super value for developers and agencies.

And the cherry on the cake is that after your first theme purchase, all following purchases are discounted, including the all-theme package.

Unbelievable!

Highly Optimized And Blazing Fast

When I talk about being highly optimized, I mean that all StudioPress themes are:

1. Lightweight.
2. Have ZERO bloat.

You won’t find unnecessary bells and whistles such as Google Maps and bloated sliders to weigh down your site.

The Genesis architecture and code is clean, lightweight and strictly in accordance with WordPress best practice, thereby ensuring speed and enhanced SEO optimization.

Contentful paint time is indicative of perceived load time, This is the time it takes for a user to believe the page is fully loaded. At 371ms, I’d say that’s pretty formidable.

Dom interactive time (432ms) is the time it takes before a user can interact with the content, e.g. start filling out a subscribe form.

Fully loaded time was 0.7sec.

Mobile Responsive, Cross Browser Compatible And HTML5 Compliant

Back in the day when there weren’t as many devices in use, mobile responsiveness wasn’t such a major issue.

It was only in around 2012 (and recognizing that more and more users were accessing the internet via handheld devices) that Google started concentrating heavily on mobile responsiveness.

The development team are constantly keeping abreast of best coding practices and the Genesis framework is actively updated to ensure your theme will always be properly mobile responsive and cross browser compatible.

That’s why all of the newer StudioPress themes are built using HTML 5 markup.

Whereas older HTML standards required additional plugins, e.g. flash to maintain browser compatibility, HTML 5 can teach older browsers to handle and properly display “unknown” HTML elements, without needing any additional plugins and/or extensions.

Truly SEO Optimized

Besides clean, lightweight, optimized code and the very best in architectural design, all themes support schema.org markup.

This enables microdata to be output to the world wide web, thereby positively enhancing SEO so as to ensure the best search engine rankings possible. (Microdata works in a similar way to tags. It helps to tell users what your content is about).

Gutenberg Ready

Our Gutenberg Optimized Themes empower end-users to customize those modules—or combine with others—ensuring font, color, layout, and styling is consistent from the back-end to the front-end, enabling you to do everything from launching twenty simple landing pages in an hour to building a complex new digital experience.

StudioPress

Turnkey Themes With Unlimited Design Options

It goes without saying that you’ll choose a theme design that closely matches your niche and what you have in mind for your website.

With over 64 StudioPress themes to choose from, there’s a theme for virtually everything.

Nevertheless, your outlook could change in an instant. I’ve personally customized and completed a few websites only to find that I didn’t like the design and immediately went about changing it.

Or maybe you build sites regularly or have a propensity to change theme design from time to time.

No problem. The Genesis framework includes a number of classes and hooks allowing you to add and re-design elements on your pages in a flash.

Additionally, there are a number of dedicated, lightweight Genesis plugins designed to make it easy for you to customize your theme. For example, if you’re not a developer or a tech savvy individual, Design Palette Pro enables you to edit and change almost anything in your theme without having to write any code.

Other great plugins include Genesis simple sidebars (add dynamic sidebars to posts), Genesis simple edits (edit footer credits without having to use code) and Genesis eNews extended (email list building).

Theoretically, you could completely overhaul your entire website design as often as you like. There’s no need to reinvent the wheel or use a page builder to achieve this as the Genesis framework includes everything you need, thereby eliminating the need for many additional plugins.

Furthermore, all your SEO efforts remain completely intact, as the only thing you’re changing is the design!

That said, there’s nothing stopping you from using a page builder if you want to. The StudioPress themes play nicely with good page builders such as Beaver Builder.

Even WP Engine use Beaver Builder.

Or you can change your entire design in less than a minute by switching to another StudioPress theme.

Various Layout Configurations

If you prefer to stick with the widgetized home page, your theme includes various different layout configurations.

Layouts for each theme differ.

StudioPress Themes are All About Minimalist Design

Here’s the man behind these great designs.

Plenty of white space, just the elements necessary to get the point across and no distractions is the recipe for great user experience.

Based on a Google study, cxl.com explains that:

• Users will judge websites as beautiful or not within 1/50th to 1/20th of a second.
• “Visually complex” websites are consistently rated as less beautiful than their simpler counterparts.

Here is some of Authentik’s work. Can you recognize any of these themes?

Access To Independent Genesis Developers

It’s hard to find a good and trustworthy developer. If you need one to handle some customizations, just hit up StudioPress. They maintain a list of talented and reliable developers.

Detailed Setup Instructions

On your theme download page you get comprehensive setup instructions.

You can import all the demo content during installation. This is a great help because your installation will look exactly the same as the demo version on the StudioPress website.

Then all you need to do is replace the demo content with your own.

You can access the setup instructions directly on the StudioPress site or download them to your PC.

Take a look at how comprehensive they are.

Easy Theme Settings

Theme settings are easy to configure within a minute and are (now) accessed via the customizer, thereby keeping all you customization settings in one place.

StudioPress themes make it easy to add scripts and other code into the header and footer of your HTML pages without having to make adjustments to template pages (e.g. header.php)

Updating Is A Breeze

An untold number of users neglect to update their sites because they’ve had bad experience involving multiple hours, even days, fixing problems created by updating.

But this lends itself to vulnerabilities and your site could be easily hacked and brought to its knees.

With StudioPress, this will never happen.

Updating to the most recent version of WordPress and Genesis is a breeze as the process is integrated.

You can rest assured that your theme customizations remain untouched while the underlying framework is updated with code changes.

Fort Knox Security

WordPress sites can be vulnerable to those who want to take your site down or exploit it for malicious reasons. Having your site hacked is an expensive, time-consuming hassle — and it can really damage your reputation.

We brought security expert and core WordPress developer Mark Jaquith in to make sure the Genesis Framework has the best security possible. With his guidance, we built our framework to follow all WordPress security best practices.

StudioPress

Built In Accessibility Options

Themes include accessibility options for those who access your site with screen readers.

The theme I use on this site, Affinity Pro, includes support for accessibility options in the functions.php file.

And screen reader css in the stylesheet.

Because this post is a StudioPress review, I’m not going to go into much more detail but Carrie Dils put together a great post about accessibility options.

A Huge Community To Fall Back On

With over 10,00 members on the community forum, there’s no shortage of people to turn to if you need help.

They also have an active StudioPress Facebook page and Genesis group.

Exceptional Support

Backed by WP Engine, support is always there to help you.

Depending on time zone differences, tickets are responded to not later than 24 hours.

Many External Tutorials And Code Snippets

If you need help with something, a Google search that includes the word “Genesis” will normally yield thousands of available resources and tutorials, both written …

… and on YouTube.

Best Selling StudioPress Themes

According to StudioPress, these are their best selling themes as of April 2019.

They are specifically targeted to certain types of businesses purely because of the design of the home page. They are therefore made for convenience as it makes it easier to choose a theme that is geared towards a specific market.

Nevertheless, the home page designs of all themes can changed according to your liking.

This can be achieved by changing the layout and design of the widgetized home page included with the theme or you could build a separate static page with a page builder such as Beaver Builder, in the same way I have done. As a matter of fact, I used a pre-built Beaver Builder template and removed certain elements that I didn’t want.

Layout options may include all or some of the following:

You can also change the default layout for individual posts on the edit page for the post as well as assign custom classes for body and post.

Foodie Pro Theme

Click the image to view the theme.

• Customizable Header
• Custom Page tTmplates
• 3 Home Page and 5 Sitewide Widget Areas
• 6 Layout Options
• Featured Images
• HTML5 Markup
• Mobile Responsive
• Theme Options
• Translation Ready
• 6 Layout Options

See Theme Demo

2. Agent Press Pro Theme

Click the image to view the theme.

• Real Estate Theme
• 6 Homepage Widget Areas
• Color Styles
• Custom Header
• Custom Menus
• Featured Images
• Threaded Comments
• Footer Widgets
• HTML5 Markup
• Mobile Responsive
• Theme Options
• Landing Page
• 6 Layout Options

See Theme Demo

3. Essence Pro Theme

Click the image to view the theme.

• 6 Homepage Widget Areas
• 6 Layout Options
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Pricing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• Advanced Gutenberg Support
• WP Forms Optimized
• AMP-Ready

See Theme Demo

4. Author Pro Theme

Click the image to view the theme.

• 5 Homepage Widget Areas
• Accessibility Ready
• Color Styles
• Custom Background
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• 3 Layout Options

See Theme Demo

5. Mai Lifestyle Pro Theme

Click the image to view the theme.

• 9 Homepage Layouts
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• 6 Layout Options

See Theme Demo

6. Business Pro Theme

Click the image to view the theme.

• A Number Of Homepage Widget Areas
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• 3 Layout Options

See Theme Demo

7. Magazine Pro Theme

Click the image to view the theme.

• 3 Homepage Widget Areas
• Color Customizer
• Custom Header
• ECommerce
• Custom Menus
• Featured Images
• Threaded Comments
• Footer Widgets
• HTML5 Markup
• Mobile Responsive
• Theme Options
• Landing Page
• Gutenberg Optimized
• 6 Layout Options

See Theme Demo

8. Infinity Pro Theme

Click the image to view the theme.

• 13 Different Homepage Widget Areas
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Lead Capture Page
• Team Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• Gutenberg Optimized
• 3 Layout Options

This site runs on Infinity Pro!

See Theme Demo

9. Corporate Pro Theme

Click the image to view the theme.

• A Number Of Homepage Widget Areas
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• 3 Layout Options

See Theme Demo

10. Refined Pro Theme

Click the image to view the theme.

• 6 Customizable Homepage Widget Areas
• Accessibility Ready
• Custom Header
• ECommerce
• HTML5 Markup
• Landing Page
• Mobile Responsive
• Theme Customizer
• Theme Options
• Translation Ready
• 3 Layout Options

See Theme Demo

That’s All Folks

I’ve used plenty of themes in my days but none the likes of StudioPress.

They’re extremely well coded and fully supported by a team of dedicated, long term developers. Furthermore, they support all of the WordPress features and many are also WooCommerce ready.

There are loads of resources available on the internet related purely to the Genesis Framework. I’ve never had a problem finding an answer to something or a code snippet to provide additional functionality.

If you’d like to see how some of the StudioPress themes have been customized, you can check out the StudioPress showcase.

With the full courage of my convictions and without a shadow of a doubt, I believe that the StudioPress themes are head and shoulders above the rest. I’ll personally never use anything else.

If you’re about to purchase a StudioPress theme, you’re making a really good decision. I’d really appreciate it if you use one of my links to do so. I hold nothing back on this site, so what you get here is the real deal and you support help me to keep this site alive. Thanks so much in advance.

If you already use the Genesis framework, then tell me something. Do you love it too? Let me know in the comments.

I hope you’ve enjoyed this StudioPress review as much as I enjoyed writing it.

Cheers for now.

For many, the prospect of cloud hosting had, in the past, seemed completely out of reach. But Cloudways has levelled the playing field so it’s time to take a closer look.

I’ll kick off by saying that it’s not entirely fair to compare cloud hosting with shared hosting.

But while Siteground have just undergone price increases, Cloudways has concentrated on bringing cloud hosting within reach of even the most frugal online operators.

And if you’re anything like me, you’ll be wanting to put your dollars to highest and best use.

Cloudways vs. Siteground -Main Differences

Cloudways

• True cloud hosting provided by multiple virtual servers across the cloud.
• Resources are dedicated.
• Server size scalable (price increase).
• Can handle high traffic (plan dependent).
• Pay as you go costing model. No high renewal costs.
• No contract.

TRY CLOUDWAYS FREE FOR 3 DAYS

Siteground

• Shared infrastructure atop Google cloud virtual machines (since ~ 02/2020)
• Resources are shared.
• Scalability by Siteground only.
• Can handle traffic up to certain limits (plan dependent).
• Fixed pricing, discounted for first year but high renewal costs.
• Upfront yearly paid contract.

SORRY NO TRYING AVAILABLE

When signing up for a Cloudways free trial, enter PROMO CODE: WPMM25OFF for 25% OFF your first two months after the free trial.

Server Speed

I ran a number of tests to gauge which hosting provider servers are faster. We’ll look at the results shortly.

Speed can be measured in a number of ways. If we break down a GTMetrix speed test, we’ll be able to gauge not only the time it takes to fully load a page but also the following important numbers:

• Server Response – the time it takes for the server to send the first byte of information to the user’s browser, known as time to first byte (TTFB).
• First Paint – the first item to appear on the screen – it could be anything, even a background color.
• Contentful Paint – the first bit of “above the fold” content. Simply put, this is the content that appears on a page without having to scroll. Contentful paint is indicative of perceived load time and is the most important number as far as I am concerned. However, for the purpose of determining which hosting provider is fastest, I will not be isolating this number.
• Dom Interactive – the first bit of content that a user can interact with.

Testing Environment

1. 4 tests were performed for each provider.
2. The same page was used for testing on both servers.
3. No page caching was enabled.
4. No domain caching was enabled (e.g. Cloudflare).
5. No CDN’s were active.
6. No code based optimizations were applied, e.g, deferring scripts or CSS.
7. Test Location: Vancouver, Canada
8. Test date: July 2019.
9. Both pages resided on HTTPS and all tests used the same protocol. Therefore no redirects were applicable.
10. Nothing was changed on either server stack.
11. Summarized times are the average of the data set.
12. The test page was not indexed by Google so all tests were performed under zero traffic conditions, ensuring no speed variables.

Test Results

Speed Metric	Cloudways	Siteground
Time To First Byte (TTFB)	167ms	450.8ms
Contentful Paint	650ms	825ms
DOM Interactive	750ms	950ms
Fully Loaded Time	900ms	1225ms

We must remain mindful that:

1. Siteground were using bare metal servers when tests were done.
2. servers are in different locations;
3. the moment traffic is applied, a cloud server will always outperform a shared one.

For the purposes of this particular test though, the fully loaded time is the figure to place emphasis on as this represents the total time that each server takes to fully download and display all resources on the page.

Resources And Scalability

With Cloudways the server size (disk space) can be altered.

If you expect a traffic spike due to an inbound promotion or you simply find that your traffic is increasing and you need more resources other than increased disk space, you will have to clone your server to another one that offers greater resources (unless you are on an AWS or Google Cloud Platform in which case you can scale resources up and down with just a couple of mouse clicks).

Cloudways don’t currently offer automatic scaling. Siteground’s cloud hosting does (N.B. Not their shared hosting running atop Google cloud platform).

Because scaling up for traffic increases and down to curtail costs requires a fine balance, automatic scaling is a useful feature to have but it adds cost to the hosting package.

Nevertheles, Cloudways gives you all the tools you need to monitor your resources and make any timely adjustments.

With Siteground, resources are shared across the server (and obviously cross subsidized) and because each site is allocated a maximum of amount of (non-scalable) resources, Siteground constantly monitors their server resources to ensure their integrity and smooth operation for all users.

This is why Siteground places limits on the number of visitors for each plan.

If you use greater resources than your plan can handle, on a regular basis, you’ll be forced to upgrade your plan.

If you are already on their GoGeek plan, you will have to move up to a cloud plan which starts at $80per month . . . way more costly than Cloudways.

Be that as it may, Siteground’s cloud hosting is auto-scalable which means that it automatically scales according to increases and decreases in traffic. This feature can be turned on and off. It’s great for users but as mentioned above, it does come with additional auto-scale costs.

You can also set up automatic scaling for the RAM and the CPU of your cloud. Our unique auto-scale option prevents slowness and downtime in the event of unexpected traffic spikes. If turned on, it will add more resources if your current ones are no longer enough. The added amount is pre-defined by you, so you have full control over auto-scale related charges.

Siteground

Support

I switched to Cloudways a while ago because I wasn’t prepared to pay Siteground’s high renewal costs for a shared hosting platform when I could come away quite a bit cheaper and get the benefit of cloud hosting with dedicated resources.

What I’m about to divulge below is based on my personal experience of both Cloudways and Siteground.

Siteground built their business on impeccable support.

Cloudways support has, in the past not always been as good as it could have been. But it’s been constantly evolving while Siteground’s support has been slowly deteriorating.

They both offer live chat support and will escalate any issues that can’t be resolved at that level.

However, Cloudways have an intelligent bot based system which asks pertinent questions designed to try and resolve your issue and point you to knowledgebase articles before routing you to a live chat support person. Initially I found this a bit annoying but I came to realize that simple issues can be quickly resolved by following some short, easy to understand instructions without having to involve a technical expert unnecessarily.

In any event, if there’s an article which can easily address your request, the support technician will point you to it accordingly.

Cloudways has always been focused on server support.

First port of call should be Live Chat. Their techies are exceptionally good. Nevertheless, if a problem surfaces that Live Chat can’t handle, they’ll escalate it to level 1, 2 or 3 technical support depending on the complexity of the problem.

If there’s something you can do yourself, say via cPanel, they’ll gladly point you in the right direction.

In addition to server support, their knowledge of WordPress related issues is unquestionable. I’ve never had a problem that they haven’t been able to fix.

Likewise, Cloudways are extremely adept at server side management and their cloud engineers will help you with any server related issues. This extends to some of the more technical things such a domain pointing and DNS, for example.

As with Siteground, advanced server side issues that can’t be handled by live chat are passed on to a higher level of support.

Cloudways’ Live Chat support engineers have become increasingly more knowledgeable with WordPress related issues, especially in recent times.

They take their support a step further with their automated bot which is amazingly intelligent at providing solutions to many known problems and/or questions which reduces unnecessary load on their technicians.

As a matter of fact, all live chats start with bot support but you can transfer to a real person at any time just by typing “person” into the text field. If the bot cannot answer your question, you will be automatically transferred to a human for help.

Interface – cPanel vs Cloudways Control Panel

If you’ve hosted your site on a shared platform in the past, you’ll most certainly be familiar with the graphical interface of cPanel.

Cloud providers don’t use cPanel for the simple reason that it’s extremely resource intensive and is know to slow down load times. It runs on Apache which is slower than NGINX and that’s why cloud hosts don’t use it. They build their own interfaces instead.

Cloudways have designed their stack in such a way that they achieve the best of both performance and stability. Nginx is renowned for performance while Apache is known for stability. Cloudways combines these and then sandwiches Varnish in between creating a perfect combination whereby the static content is served by Nginx, after which the dynamic content is passed to Apache for caching by Varnish in between. This creates stability from back and speed from front. Friggin’ brilliant!

Now during 2019 Siteground switched over to an interface similar to that which cloud providers build with a view to moving all existing clients away from cPanel and onto their new platform. All new signups were supposed to be put onto the new platform.

I was hosting with Siteground at the time and I was advised that I would be switched over to the new platform within the next few months. It never happened.

I went so far as to sign up for a new plan and then migrate my site but still the old interface was in use. So I cancelled the plan.

To date – October 2020 – Siteground have still been unable to migrate all of their existing clients so there are thousands of clients who are unable to enjoy the purported benefits of Siteground’s new interface running atop of Google cloud platform.

That said, let’s move on.

I’ll admit that cPanel makes certain functionality easy but the Cloudways interface is so easy to navigate and use, it’s silly!

I’ve found that the lack of a file manager is often a stumbling block for potential cloud customers but it really shouldn’t be.

File Manager plugins are available from the WordPress repository that offer the same functionality but even better than that is the Filezilla FTP program which is really an advanced file manager that works with both your local machine and your Cloudways server.

And just in case you’ve been misled about email hosting with Cloudways, you most certainly can host email with Cloudways. I’ll cover this shortly.

The truth is that most of the resistance to cloud interfaces comes from cPanel aficionados who don’t like change.

This is the main screen of the Cloudways application interface. It couldn’t be any simpler.

But if you’re still worried about changing what you’re familiar with, my Cloudways review and setup guide goes through everything you could possibly ask for, step by step, including how to migrate your site to Cloudways with just a few mouse clicks.

There’s absolutely nothing you can’t achieve with the Cloudways platform and interface that you can with cPanel. If that were the case, I would never have switched!

Email Hosting

NOTE: I am illustrating this because Siteground still uses cPanel for a vast number of existing clients.

With cPanel, setting up your email inbox/es is real easy. You can have as many email addresses as you wish and there’s no additional cost.

Choose the Email option in cPanel.

Then choose a preferred email address and the domain.

It’s that simple.

That said, it’s just as quick and easy with Cloudways.

They’ve partnered with Rackspace and setting this up is a breeze.

From the main interface, click on the additional features menu.

Select Add-Ons.

Select the Rackspace option.

Add the mailbox after choosing a desired email address and password.

Couldn’t be easier!

PS. If you’re looking for transactional email, e.g. sending out newsletters etc. to your subscribers, Cloudways (or any cloud host) is going to become way too expensive. I would suggest you use Convertkit for that type of email service.

DNS

The moment you point your domain name to Siteground (or any shared host), they automatically take over the management of your DNS entries.

With Cloudways, the DNS function remains with your domain host by default. You simply setup an A record at your domain host (I use Namecheap) and point your domain to your server’s IP address.

However, if you prefer to keep everything under one roof, your can transfer DNS management to Cloudways by installing the DNS add-on.

Choose add-ons.

Select DNS Made Easy.

Choose how many domains to include (up to 5 domains will cost $2.50 per month).

You will receive a success message and because the process is manual, support will liaise with you via their ticketing system to finalize everything.

One further DNS alternative that’s worth mentioning is Cloudflare. Their DNS service is one of the best!

Cloudflare Integration

I’m going to dispel another bit of misinformation.

Cloudflare integrates with both Siteground and Cloudways alike.

The only difference is that Siteground provides the integration through their interface.

(The illustration below relates to their cPanel interface. New clients on the new interface have the same functionality).

Siteground simplifies the process (just a tad) by taking care of nameserver changes so you don’t have to worry about doing that manually at your domain host.

But honestly, it’s just as simple to integrate your Cloudways site with Cloudflare. Follow these instructions. It won’t take you much longer than a few minutes.

On the Cloudflare site, sign up for a new account. (Don’t worry, all of this is totally free).

Add a Site.

Click on the Free Plan and then the Confirm Plan button.

Now confirm.

Cloudflare will query your DNS.

Click Continue.

Go back to your domain host and change the nameservers. Here’s how I do it with Namecheap.

Cloudflare will complete the nameserver check. You may need to click on Re-check Nameservers.

You will receive an email when Cloudflare is done. Then return to the Cloudflare website, click the Overview button and refresh your page.

Go back to the Cloudways Server Management dashboard > Settings and Packages > Advanced. Select Cloudflare under the WAF module. This will allow your server to see the visitor’s real IP address which is great for tracking your traffic.

Simple as that!

Caching And CDN

Both Cloudways and Siteground have built their own caching plugins but they’re significantly different.

Cloudways use Varnish for server side caching and Breeze Cache for Page caching.

Breeze Cache is built by Cloudways and is designed to work perfectly with the Cloudways stack.

Being a page caching utility it also offers optimization features including minification and concatenation of JavaScript and CSS.

It integrates seamlessly with their own CDN which is powered by Stackpath (ex MaxCDN). You’ll need to install the Cloudways CDN add-on.

Then activate the checkbox within Breeze Cache.

A CDN allows you to “offload” your cached static assets (e.g. images, JavaScript, CSS, HTML) to the CDN’s server thereby reducing the load on your server and subsequent hosting costs.

These assets are then distributed across multiple servers in different locations and delivered to users from the data center closest to the user’s location. Naturally this has a very positive effect on speed.

The Cloudways CDN will set you back $1 per month.

Siteground’s SuperCacher is a server side caching plugin comprising three different levels of caching.

1. Static Cache – stores all static assets (e.g. JavaScript, CSS, media, HTML) in the server’s memory. As with all computing devices, this makes access to them real quick.
2. Dynamic Cache – Dynamic content differs from static assets in that it lives within the database of your application, e.g. your posts. The database is queried each time a visitor requests a post. Obviously there is a time factor involved here. The dynamic cache keeps all of your sites resources in its store (cache) including the dynamic content. In other words, it stores entire pages of your website in memory (RAM). There is no preload (cache warming) mechanism that is used to build the cache. It is built and stored in memory only after the first visitor’s request for a specific post. Thereafter, subsequent requests for that post / page will be delivered from RAM which is much quicker than a database query. This mechanism is powered by NGINX and works together with the static cache. The cache is not automatically flushed. It must be manually flushed, meaning that you have to remember to do it at pertinent times.
3. Memcached – (pronounced memcache d). Again RAM is used to store data thereby speeding up database queries and API calls. It is most effective for sites that rely on repeated calls to the database, e.g. e-commerce sites where numerous products are sold. Cache flushing must be manually done.

SuperCacher certainly helps with speed but I’ve personally found that proper page caching is much more effective. As a matter of fact, I always disabled SuperCacher on my Siteground sites (in favor of WP Rocket) because I found it pretty ineffective.

For those who are still on Siteground’s cPanel, here’s what you need to do to activate and use SuperCacher. Go to cPanel and click on Supercacher.

On the next screen, activate Static Cache.

Switch to Dynamic Cache tab.

Switch over to Level 3 Memcached tab and activate.

NOTE: Those on the new interface can also use SuperCacher but I cannot show this because I no longer host with Siteground.

Siteground don’t have an in house CDN. If you want to integrate a CDN I would only recommend Stackpath. It will cost you about $10 per month.

Cost

Cloudways works on a Pay-As-You-Go pricing model. You only pay for the resources you use. Due to this, billing is monthly in arrears and there are no contracts.

Numerous plans are available starting from $10 per month hosted on the Digital Ocean cloud infrastructure to $36.51 per month on AWS (Amazon Web Services).

All plans can accommodate as many sites as you wish as long as you have enough resources to support them.

Your plan choice will depend on the amount of memory (RAM) you need, storage space, data transfer capacity, processor capability and you will also have to consider which infrastructure will provide you with the best server location as this may affect the infrastructure you choose and hence costs.

Siteground plans have recently almost doubled in price and now start from $6.99 per month.

** But there’s a caveat here.  **

1. The Startup plan, which is the most basic and can accommodate only one site, starts at $6.99 per month FOR THE FIRST YEAR ONLY. Thereafter, the price goes up to $19.99 per month.
2. The GrowBig plan comes in at $9.99 per month for year one and $29.99 per month thereafter.
3. The GoGeek plan starts at $14.99 for the first year and $49.99 per month thereafter.

But to put this into perspective, Siteground’s GoGeek plan can handle up to 100,000 visits per month.

Cloudways offers 25GB storage space and data transfer of 1TB for $10 per month on Digital Ocean. These resources can easily handle at least 100,000 visits per month.

The Pros Of Cloudways vs Siteground

Cloudways

• Pay As You Use – NO CONTRACTS!
• Plans From $10 Per Month.
• 5 Cloud Providers (Digital Ocean, Google, Amazon, Linode, VULTR).
• Can change cloud infrastructure at any time.
• Fully Dedicated Resources.
• Latest Speed Technology (SSD, HTTP/2).
• Optimized Stack With Caching (Including Memcached, Apache, Varnish, NGINX, Redis).
• FREE Breeze Inhouse Caching Plugin.
• Multiple PHP Versions And PHP 7.X Ready For Ultimate Speed.
• Cloudways CDN (Stackpath Under The Hood).
• 60+ Data Centers For Superior Performance And Global Response Times.
• 1-Click FREE SSL Certificates.
• No clunky and slow cPanel.
• 24/7 Live Chat And Ticketing For Support.
• Comprehensive Knowledgebase.
• 1 Free Managed Migration.
• 1-Click Automated Or On-Demand Backup And Restore – Frequency From 1 Hour to 7days.
• 1-Click Revert (after restore).
• Extend And Scale Storage In A Few Clicks.
• Vertical Scaling – 1-Click Hosting Feature Scales RAM, CPU And Storage.
• Deploy Over 10 Sites In 1-Click.
• Dedicated 1-click Staging with revert option.
• Git Integration.
• 1-Click Cloning Of Entire Server Or Individual Site.
• FREE Cloudways Migrator Plugin Can Move Your Site Seamlessly To Cloudways.
• FREE TRIAL – No Credit Card Required.

Siteground

• Recommended by WordPress.
• EASY to configure.
• FREE email accounts.
• Latest HTTP/2 and NGINX server technology with SSD storage.
• SuperCacher (static, dynamic and memcached – only static on Startup plan).
• Multiple PHP versions.
• 6 Data centers to choose from (new signups).
• FREE Cloudflare with one-click installation.
• GUARANTEED 99% up-time. I’ve had 100% over last few years.
• Good support and service levels via live chat and ticketing.
• 1-Click staging environment and 1-click push to live.
• FREE SSL Certificates.
• Migration using plugin (not available on Startup plan).
• Daily automated backups.
• On demand backups.
• 30 DAY MONEY BACK GUARANTEE.
• Huge knowledgebase.
• Git.
• Optional auto-scaling selection on cloud plans is real handy.
• Can set auto-scaling limits in order to curtail costs.

The Cons Of Cloudways vs Siteground

Cloudways

• Down scaling on Digital Ocean, VULTR and Linode involves some downtime.
• Changing cloud infrastructure involves some downtime.
• No auto-scaling.

Siteground

• On demand backups must be purchased on Startup plan.
• Additional costs for auto-scaling can be considerable.
• Auto-scaling limits may be inadequate at times.
• Technicians no longer perform migrations. Must be done using Siteground’s plugin.

TRY CLOUDWAYS FREE FOR 3 DAYS

When signing up for a Cloudways free trial, enter PROMO CODE: WPMM25OFF for 25% OFF your first two months after the free trial.

Wrapping Up

I hope you enjoyed reading this post as much as I enjoyed writing it.

I believe I have given you enough to decide which hosting platform is best for your specific needs while clarifying some of the misconceptions out there.

Now it’s over to you. Which host is right for you?

Leave me a comment.

I host Google fonts locally not only to load them faster but also to take advantage of font loading strategies which goes directly to the heart of creating the ultimate user experience.

Hosting Google fonts locally to boost speed is one thing. Knowing how to load them with an effective strategy that strikes a perfect balance between performance and user perception is another.

Unfortunately, browsers are not quite where we’d like them to be in terms how they handle custom fonts which leaves us to our own devices when deciding on a suitable font loading strategy.

While some of these strategies are still nowhere near perfect, one thing remains certain. You’ll need to host Google fonts locally if you want to retain maximum control.

Understanding Font Loading Strategies

Without intervention font loading is primarily handled by the browser.

If your preferred font fails to load due to a slow download, the browser will mitigate this by loading a fallback (system) font.

A system font is a font used by your operating system to display text. Common system fonts include Arial, Times New Roman and Georgia.

A fallback font is basically a preferred system font that you specify.

Here is a table illustrating the behavior adopted by some of the popular browsers.

• Chrome, Opera and Firefox timeout after 3 seconds. At this point, text will be displayed using the fallback font. As soon as the primary font is available, the text will be re-rendered. Herein lies the problem of FOUT and reflows. Text rendered using the fallback font is referred to as a flash of unformatted text (FOUT). A reflow occurs when the primary font becomes available and the text is re-rendered. Not sure about you but I’ve experienced this often and found it to be disruptive.
• Internet Explorer renders text immediately due to a zero second timeout. A fallback font is used if the primary font is unavailable and re-rendering takes place once the primary font is ready. The benefit of FOUT is that, at very least, the user is faced with text immediately. However, this comes at the expense of a perfect user experience.
• Safari has no timeout leaving users without text until such time that the primary font is downloaded and ready for use.

Prior to the 3 second timeout with Chrome, Opera and Firefox (or no timeout in the case with Safari), a slow connection or a delay in the Google font download will likely leave users with a flash of invisible text (FOIT).

To add fuel to the fire, our font loading strategy is limited.

The relatively new font-display: block | swap | fallback | optional | auto descriptor allows you to control how your font renders before it is fully loaded but is by no means a perfect solution.

• block – FOIT + infinite swap period. The invisible fallback text is replaced as soon as the designated font is available.
• swap – FOUT + infinite swap period. The fallback font is replaced as soon as the primary font is ready for us.
• fallback – Almost imperceptible block period (<= 100ms) + small swap period (FOUT + swap).
• optional – Almost imperceptible block period (<= 100ms) + no swap. Great for best user experience where content is preferential to aesthetics.
• auto – based on user agent (browser) strategy.

NOTE: Prior to May 2019 the use of the font-display descriptor could only be achieved when hosting Google fonts locally due to the CSS being hosted on your own server.

OK, with a very basic understanding of font loading, let’s forge on.

What To Do When You Have Text Over Images

What I’ve learned from experience is that FOIT is not always FOIT.

Sound cryptic?

Consider a scenario where a site uses white text over a dark image.

Where the internet connection is fast the text may load concurrently with, or just before, the image. No problems here.

But if the connection happens to slow down temporarily or even sometimes on first load of a site in a browser with a clean cache and/or where one’s PC is also busy with some background process/es, it can appear as if  the header and navigation loads before the text and image, leaving a mostly blank screen.

That said, the text may, in fact have loaded but in the absence of an image the white text is invisible on a white background. So what one may think is FOIT, may in fact have been white text on a white background.

The solution is to use a solid color overlay that will allow text to show while waiting for the image to load. The image may load after milliseconds but it’s still preferable to an almost blank screen. The other option is to change the text color.

Why Poor Hosting, Bad Theme Choice And a Poorly Optimized Site Can Wreak Havoc With Font Loading.

For starters, the more HTTP requests to external sites needed to render your page/s, the slower your site will load. To exacerbate this, scripts and CSS are render blocking so poor optimization coupled with a slow server and a bloated theme could prove disastrous to user experience.

Additionally, being called by CSS, Google fonts are no exception to the render blocking conundrum.

Render blocking occurs when the parsing of HTML needed to render the page is paused (blocked) temporarily until all scripts and CSS complete their processes.

Besides a number of granular optimizations, the most important factors affecting page speed (in this order) are:

• Hosting
• Theme Choice
• Caching

Hosting

A fast site is crucial for optimal font loading and this starts with hosting.

No amount of optimizing can compensate for a lack of speed.

And because the whole objective of hosting Google fonts locally is to improve user experience, it would be counterproductive to consider unless you can outperform font delivery provided by Google’s cloud servers and CDN.

A shared server is highly unlikely to outperform Google’s servers.

I used to host with Siteground but because I wasn’t seeing the type of speed I wanted, I switched to Cloudways. This site is served from a Digital Ocean server in New York and it’s blazing fast.

On top of that, Siteground’s renewal fees are crazy.

With Cloudways you can get a hosting plan for as little as $10 per month which will allow at least as many site visits as Siteground’s best shared hosting plan at $35 per month.

And that gives you fully dedicated resources and the benefit of Pay-As-You-Go pricing, i.e. No Contracts.

TRY CLOUDWAYS FREE FOR 3 DAYS

Sign Up with PROMO CODE: WPMM25OFF for 25% OFF your first 2 months if you host with Cloudways.

• A Dead Honest Cloudways Review And Setup Guide.
• Cloudways vs. Siteground.

Theme Choice

A lightweight, well coded and optimized theme with a good caching plugin like WP Rocket is the next most important speed factor.

I don’t venture past anything but a StudioPress theme (Genesis Framework) because there’s just nothing that comes close in terms of optimization, i.e. clean coding, zero bloat plus the ability to create any type of site. And while you may expect a theme of such caliber to be pricey, they’re actually cheaper.

The licence provides you with unlimited everything. So for a once off cost you get:

• Lifetime updates
• Lifetime support and …
• You can use the theme on as many sites as you like.

Caching

Caching is absolutely crucial when it comes to font loading. While there’s certainly no shortage of caching plugins, there are only two contenders in my view:

• WP Rocket.
• Swift Performance Pro.

WP Rocket is rock solid and has been around for way longer than Swift Performance Pro.

As a result, they’ve long since ironed out all the small bugs and it’s also really simple to setup and works out of the box.

• WP Rocket Review And Setup Guide.

Swift Performance Pro offers more granular control. However, it’s better suited to those who have a bit of knowledge and experience when it comes to caching.

If you really want to harness it’s full features you’ll need to know what you’re doing and be prepared to experiment until you find the settings that give you the best results.

My Site Is Twice As Fast Since I Self Host Google Fonts

My speed tests reveal that my site loads twice as fast as it did when Google was serving my fonts.

Your results may differ due a number of factors including server location, user location, speed testing server location, whether you use a CDN and where the edge servers are located, server speed, internet connection etc.

Testing Environment

• Hosting Provider: Siteground.
• Server Location: Chicago
• GTMetrix Test Location: Dallas USA.
• CDN: Cloudflare.
• Caching: Swift Performance Pro
• Server Side Caching: None
• All tests were performed at the same time of day.
• 4 speed tests were performed for each option namely:
  • hosting Google fonts locally
  • serving fonts from Google’s servers using an enque function in my functions.php file (part of theme’s coding).
• The average of each data set has been used to determine the end result.
• Other than the published tests, I performed multiple tests (including from GTMetrix’s London location), all of which revealed similar results. I am certain therefore certain that the published results are indicative of everyday browsing.

Test Results

Served By	First Byte	Content Paint	Dom Int	Total Time
Google	384ms	850ms	1025ms	1750ms
Self Hosted	307ms	448ms	496ms	850ms

The most important metrics are:

• Contentful Paint Time – the time it takes for any content to be shown. It is most representative of actual perceived load time in that  it indicates when users receive consumable information such as text or images. My tests reveal that local hosting is almost twice as fast (448ms vs. 850ms).
• DOM Interactive – indicates when the browser has parsed the HTML so that it can structure and render the page. My tests reveal that locally hosting fonts is over twice as fast as serving them from Google (496ms vs. 1025ms).
• Total Load Time – the time it takes for the page to fully load after all background processes are complete. Again, locally hosting fonts is over twice as fast as Google’s servers (850ms vs. 1750ms).

Added Benefits Of Hosting Google (or any other) Fonts Locally

Personally I don’t chase after scores. However, some aspects of improving scores or grades will also improve speed.

One such aspect is expires headers.

You can’t add expires headers to external resources so this error will always pop up in GTMetrix or Pingdom tests if you serve fonts from Google’s servers. You can, however, add expires headers to fonts if you host them locally.

The advantage of this is that the user’s browser will be instructed to cache those fonts for however long you specify in the headers (in your .htaccess file).

And because the fonts will then be stored in the browser cache, repeat visits to your site will be faster.

Furthermore, while your caching software can minify and concatenate CSS for installed plugins, it can’t do so for external resources, Google Fonts included.

The ability to minify and concatenate CSS files makes a substantial difference to load times.

While locally hosting fonts will also fix your GTMetrix error, the most important thing is the speed boost that comes from these optimizations. This is made possible because the CSS lives in a local stylesheet on your own server.

A cache validator included in WP Rocket ensures that browsers take full advantage of all of the benefits of caching. To this end, allowing a cache validator to be specified means that the browser can perform a check to determine whether the font to be displayed already lives in its cache. If so, it will be served from there accordingly. This speeds up loading time and can only be achieved if the font is served from your local server.

The Easiest Way To Setup Local Hosting – Comprehensive Setup Guide.

If you follow the process I’m going to show you, it shouldn’t take much longer than 5 minutes to get your fonts hosted locally. This process automatically converts the fonts into the formats that you choose and produces the correct CSS, making it a breeze to add to your stylesheet.

These are the steps we’re going to follow:

1. Go to Google webfonts helper website.
2. Select font and font styles.
3. Download and unzip font file.
4. Upload fonts to your own server.
5. Add CSS to stylesheet.
6. Specify default fonts.
7. Disable external calls to Google fonts server.

Head on over to Google Webfonts helper.

In the top left corner either enter the font name or select one from the list.

Select the font styles and weights you want to use on your site. Only choose the styles and weights you will use. Unused fonts add unnecessary bloat.

Download the zip file to a new directory that you create (e.g. Fonts) on your PC.

Now unzip the font file to the same destination.

I use Filezilla to FTP files to my site. You can use any ftp software you wish to achieve the same.

You can also file manager in cPanel to achieve this.

I like to upload to a “fonts” folder that lives directly under the public_html directory. This way the folder will never be overwritten with any theme or plugin updates.

Back on the Google webfonts helper site, click in the grey block to highlight all the CSS that was generated. Copy it to your clipboard and paste it into your desired stylesheet. (You could also enqueue them from functions.php).

I paste directly into my theme’s style.css file (default Genesis stylesheet).

Now specify your default fonts and fallbacks to be used for body text, headings, links etc.

Make sure to disable any calls to the Google fonts server.

Depending on how the call is made for Google fonts in your environment, you may need to remove this from your html pages (possibly via header.php or theme settings) ….

…. or this from your stylesheet.

You may need to contact your theme vendor if you don’t know where to access either of the above calls to Google fonts.

That’s all there is to hosting Google fonts locally, but there are still a couple of optimizations you may wish to make.

Preloading For Added Speed

Instead of waiting until the CSS has been parsed and the CSS Object Model has been built, you can preload your fonts for some additional time saving. The CSSOM is similar to the DOM (document object model) but applies to CSS instead of HTML. Preloading forces the browser to fetch the font/s immediately.

Bear in mind that:

• The preload resource hint is not available in every browser. I suggest you select woff2 font files for this purpose because all browsers that support woff2 also support preload.
• If you add the resource hint to the head of all HTML pages, the resource will be preloaded whether needed or not. If the browser already has the font in it’s cache, the preload is wasted. You must decide whether the benefit outweighs the risk.

Personally, I use preload. That being said, I only preload my main font style (in my case bold text) required to render the most important text for users. This not only moves the font load up the waterfall but also has a very positive effect on my contentful paint time. However, each additional preload comes at a cost to initial render. It’s a fine balance.

Add the relevant code to the <head> of your document. You must do this separately for each font style you wish to preload and make sure the naming of the font is exactly the same as it appears in the public_html/fonts folder.

<link rel="preload" as="font" type="font/woff2" href="www.yourdomain.com/fonts/cormorant-garamond-v7-latin-700.woff2" crossorigin>

Inline CSS / Critical CSS To Prevent Render Blocking

CSS is a render blocking resource. This means that the parsing of HTML (and the loading of the page) is blocked / delayed until the CSS is parsed first.

Because your locally hosted Google fonts are called using the CSS @font-face declaration, your fonts are also render blocking.

WP Rocket offers the ability to generate critical CSS for rendering of the above the fold content which enhances perceived load time and hence user experience.

With WP Rocket, when enabling CSS Optimization the critical CSS will be generated behind the scenes and added to next page load. Thereafter, this CSS will be loaded asynchronously.

Swift Performance adds a toggle to enable the critical CSS to be inlined within the <head> of the document.

If you don’t use a caching plugin that generates critical CSS, simply add the CSS for your fonts into the <head> section of your document, between <style></style> tags.

Limit Characters To Reduce Size And Boost Page Loading Speed

Each web font comprises a collection of glyphs which may include Latin, Greek and Cyrillic characters.

Vast support is great but you don’t want it to become an impediment to performance.

According to Ilya Grigorik, Google’s Noto font aims to support the entire world’s languages but the download size of the font exceeds 1.1Gb.

Unicode subsetting allows us to limit the characters to only those required to  render the page thereby reducing download size while becoming more performant. This is achieved by splitting a large unicode font into smaller subsets (e.g. Latin) and downloading only the glyphs needed to render a page.

The use of Unicode range subsets and separate files for each stylistic variant of the font allows you to define a composite font family that is both faster and more efficient to download. Visitors only download the variants and subsets they need, and they aren’t forced to download subsets that they may never see or use on the page.

Ilya Grigorik – Google Developers

Personally, I don’t use any further subsetting. If you specify your subsets before downloading your fonts using the Google webfonts helper there’s no need for any further manipulation. The file sizes are already tiny.

I mentioned subsetting for those who wish to download additional subsets and then filter out what isn’t needed.

NOTE: I tried to subset further using Glyphhanger but found that some of the characters were synthesized and looked out of place. If you limit your subset before downloading then I don’t believe there’s any need to play around any further.

If you happen to download your font/s from Google, you can limit subsets before downloading.

How To Speed Up Font Loading If You Serve Them From Google Servers

When serving fonts from Google’s servers, you lose whatever limited control over FOIT and FOUT you may have when you host them locally leaving you in the hands of the default browser behavior and Google’s default swap behavior.

The only speed optimization you can effect is to preconnect to Google’s servers, allowing the browser to perform the DNS lookup, TCP handshake and TLS negotiation as soon as it finds the script in the <head> section of the HTML as opposed to waiting for the normal call during the parsing process. This may only shave off some milliseconds but it’s still better than nothing.

To preconnect, add the following to the head of your HTML pages. If you use a Genesis theme, add the script via theme settings. Otherwise you may need to add it to your child theme’s header.php file.

You can group fonts using preconnect.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700|Raleway:700" rel="stylesheet">

Conclusion

I hope I’ve impressed upon you the importance of using the font-display descriptor as a means of avoiding FOIT and enhancing user experience, especially for those on slower connections.

It’s such a big deal that Google’s own Pagespeed Insights / Lighthouse will ding you for not using it.

CSS Tricks

While Google now include the font-display: swap; descriptor as a default (since May 2019) when serving fonts from their servers, the best way to retain maximum control while taking full advantage of speed and caching benefits is to host Google fonts locally.

So what do you think? Leave me a comment.

The fastest loading, top ranking sites on the internet have some of the worst Google PageSpeed scores I’ve ever seen.

If that’s not testimony to the fact that Google PageSpeed, YSlow and other scores are meaningless, then nothing is.

Knowing how to use these tools properly can really be of benefit in optimizing your site for users as long as you never fall into the trap of optimizing for score.

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.

W3C (paint timing spec)

The most critical (and the first) speed test you should ever perform is to inspect, with your own eyes, how your site loads for humans.

Thereafter, you can use website speed test tools to tweak things that optimize the user perception to the max.

While a first paint may introduce some formatting and colors, users aren’t interested in looking at your site’s header and an otherwise blank screen. They want content. And they want it fast. The best way to meet that criteria is to stop chasing scores and concentrate on the things that make a real difference to the way that users perceive the loading experience.

There are many factors to consider, the most important of which are to ensure that your hosting is tip top, that you’re using a properly coded and optimized theme (I can’t stress the importance of this enough) that loads resources in the correct order so as to eliminate FOIT and FOUT while providing a smooth and seamless user experience.

If you feel the urge to perform speed tests (using Google PageSpeed Insights, GTMetrix or Pingdom), which I’ll concede is very tempting if not impossible to resist, I’ll show you exactly what to concentrate on in order to best optimize your WordPress site for speed. It’s definitely not scores!

Heck, here’s how the Google developers site performs in their own testing tool for mobile devices …

and for desktop devices.

Need I say more?

Knowing How To Read And Interpret Google PageSpeed Insights vs Pingdom vs GTMetrix Tests?

It doesn’t take a rocket scientist to realize that Google PageSpeed Insights is, for the main part, score driven. While the tool does make some meaningful recommendations for optimizing load times, some of them are just way too generic (and incorrect) to apply while others are insufficiently described and/or impossible to control.

A test like this can seem intimidating but on closer inspection it’s apparent that some of the recommendations are incorrect and not applicable. Much depends on the site’s configuration and what’s really necessary to load it properly. Clearly Google PageSpeed Insights can’t determine these smaller intricacies.

Some of the problems with this test are the inability to read the .htaccess file (my .htaccess file does contain expires headers) and the recommendation to add an expires header to Google’s own analytics script. It’s not possible to add expires headers to external resources.

Lastly, you never want fallback text to render for an icon font because you never know what may be rendered. There is no fallback text for icon fonts.

Pingdom provides an actual speed result, a waterfall and some written suggestions, some of which are also hopelessly incorrect.

The tool is fickle in that it is able to read an .htaccess file in about 50% of tests. For the remaining 50%, it provides incorrect suggestions. Moreover, a previous test reflected incorrect load order of resources in the waterfall.

It’s worth noting the way that Pingdom determines load time. Knowing that my contentful paint times in GTMetrix range from 200ms to 500ms, I have every reason to believe that Pingdom’s load time indicates the contentful paint time- certainly not fully loaded time.

GTMetrix is probably a better tool to judge the outcome of many different metrics but also not without its faults. It’s fraught with inconsistency leaving users wanting to pull their hair out in desperation, not knowing which test results to rely on and which not!

I’ll talk about metrics in greater detail shortly, save to say that a GTMetrix test provides, among other things, a detailed waterfall together with scores/ grades extracted from Google’s PageSpeed Insights and Yahoo’s YSlow.

What’s nice here is that the tool provides a fully loaded time while the waterfall is useful enough to determine the load order of HTTP requests being made, what they are and the time it takes to load the resources.

The timings tab shows various timings which I’ll discuss in detail shortly, the most important of which are time to first byte and contentful paint time which is indicative of perceived load time.

Reducing HTTP Requests – A Misnomer

In their endeavor to prove their efficiency and usefulness, website speed test tools will invariably tell you to reduce the number of HTTP requests as is evidenced in recommendations such as combining scripts and CSS files.

But reducing requests doesn’t necessarily affect perceived speed. That depends on the order in which the resources are loaded.

Take Forbes for example, a site that not only dominates Google SERP but is also one of the largest on the internet.

The number of requests certainly affects the fully loaded time but as you’ll discover shortly, that is irrelevant because users don’t require all resources to load immediately as long as they have enough to interact with the site when it starts loading.

Of importance is that the contentful paint time remains super fast at 469ms and if you judge the site based purely on loading it in your browser you’ll have to admit that the perceived load time is ultra fast.

Website Speed Test Tools Don’t Account For Modern Web Technologies And Score Based Optimizations Are Therefore Flawed

By their very nature, website speed test tools must be generic. Considering the millions of sites that reside on the internet, each built using different themes and configurations and hosted on many vastly different platforms, it’s just not feasible to build an individualized testing tool.

It’s understandable, therefore, that Google PageSpeed score may be incorrectly determined due to factors that don’t apply to your particular website, additionally flagging incorrect suggestions. Sad but true!

Take for example a situation where score is reduced due to uncombined HTTP requests (e.g. JavaScripts and CSS files) when in fact the server technology is based on the HTTP/2 protocol which allows for multiplexing and parallel file downloading which negates the need for concatenation.

Similarly, incorrect flagging by Google PageSpeed Insights, GTMetrix and Pingdom occurs when suggesting the removal of resources from the render blocking path when, in fact, the HTTP/2 protocol again allows for multiplexing and parallel downloading of such files. (This is exactly why WP Rocket specifically advises against concatenating resources on HTTP/2 enabled servers).

Optimizations based on reducing the number of HTTP requests bears little relevance where HTTP/2 is at work. With HTTP/2, servers are able to push resources to your browser without the need for individual requests, improving speed in the process.

But conversely, a caveat that must be considered carefully is browsers that don’t support HTTP/2. Such browsers fall back to the HTTP/1 protocol and if you have users that have not yet caught up with modern browsers, you best not neglect the old style optimizations.

I would suggest you determine carefully where your users are coming from and what technology they are using. You can see this in Google analytics but caniuse.com has the ability to evaluate your analytics in order to check what kind of technology your users are browsing with.

Yet another ridiculous suggestion is the addition of expires headers to external resources (such as externally called fonts and Google Analytics script) over which you have no control.

Taking things further, scoring based on image compression in respect of images that have already been optimized to their maximum is just ludicrous. Any further compression would be akin to a person of 20/20 vision being prescribed spectacles of -2 diopter.

And to kill user experience altogether, the mere thought of lazy loading images is laughable.

Then there’s also the score based suggestion based on the leveraging of browser caching. I mention this with a caveat because this is actually a very useful optimization for repeat visitors (discussed further on), however it doesn’t affect visits to a site for the first time, with the main problem lying in the fact that, firstly this is not always clarified properly and secondly penalizing score based on short expires headers for assets that must always remain updated, is absurd!

So attempting to improve score based on such flawed assumptions will likely prove a complete waste of time and effort, with some of the suggestions possibly improving fully loaded time (which is unnecessary) but will never improve what matters most for users – perceived performance.

Understanding The Important Metrics And How To Apply Optimizations That Make A Real Difference To Speed

Contrary to what many believe, the fully loaded time of a site is relatively unimportant – within reason.

The WP Engine site is a classic example.

Being in the hosting business, this site is highly optimized. But to the uninformed it may look like a poor performer.

I mean 24.6 seconds is a long time to wait for a site to load and I think I’d be quite safe in assuming that any user who had to wait that long for content would have long since moved onto the next site.

The reality, however, is that the site becomes usable in 1.3 seconds.

To clarify, content becomes visible in above the fold content in 1.3 seconds as can be seen from the contentful paint time. In the background, however, there are a number of processes that continue to run but are not immediately required for visitors to start interacting with the site. This is a classic illustration of perceived load time in action.

So let’s understand how all of this actually works.

Time To First Byte (TTFB)

TTFB is the time it takes for the browser to receive the first byte of information after a request for a website is made and is often referred to as server response time.

Because content cannot be rendered without the necessary data, TTFB is a key performance indicator.

Now there are some optimizations we can make to improve TTFB:

• Hosting that provides great web server technology – The WordPress speed optimization guide concurs that hosting is the #1 factor that affects speed. And TTFB is directly dependent on great hosting. Sure, caching and some other optimizations may help a little, but getting to the root cause of slow server response requires that you address your hosting. Type 2 diabetics take all sorts of oral and intravenous medications that generate huge profits, literally keeping big pharma companies in clover! In the majority of cases though, these meds are just a band aid. They give people a reason to continue eating badly (which fuels profits even further) when, in fact, addressing what goes down the gullet can literally “cure” the condition. The same goes for WordPress speed optimization. If you want to fix website speed, you must address the root cause. The Cloudways stack is one of the best around. It combines the stability of Apache in the front with the Speed of NGINX at the back and sandwiches Varnish cache in between to create ultra fast hosting with the benefit of dedicated resources.
• Using the most recent PHP version – PHP 7.x is considerably faster than it predecessor. Again, your hosting provider needs to support this.
• Caching – After hosting, caching static content will considerably improve TTFB. I also recommend server side caching such as Varnish and Redis. As mentioned already, Varnish is built into the Cloudways stack (and can be disabled if need be). Redis caches database queries in memory thereby speeding up database calls. It works in a similar manner to memcached. Redis is a free addon offered by Cloudways.
• Offload assets to a CDN – If you decide to use a CDN, I would suggest Stackpath (ex Max CDN). If you host with Cloudways, their free Breeze cache plugin integrates seemlessly with their own CDN (which is actually Stackpath). Just to clarify something important – Cloudflare (not Cloudways) is not a true CDN. While they do distribute content to multiple edge servers in their network, your entire domain is cached as opposed to individual assets being offloaded to a CDN server. Personally, I was able (in the past) to reduce TTFB with the use of a Cloudflare “cache all” rule (because it caches dynamic content) but it’s not something I’d suggest. Presently I only use Cloudflare for their DNS hosting.
• Don’t concatenate CSS files – Something else I’ve found (that may or may not apply to your setup) is that concatenating CSS files increases TTFB times. While it may reduce requests, I’ve found that it comes at the expense of TTFB and contentful paint time. Bear in mind that I use a Genesis theme which can’t be beaten in terms of lightweight coding and quality and Cloudways is also HTTP/2 enabled. The only way to tell whether concatenation works for you is to test, test, test.
• Remove or dequeue unnecessary CSS – I have found that TTFB can be reduced considerably by loading only the CSS that is essential for your site. Take this site for example. I use Beaver Builder because Gutenberg doesn’t allow me to create certain formatting that I like. But WordPress now includes the Gutenberg editor in its core code and all the hooked Gutenberg CSS was, by default, being loaded on every page of my site. Removing this added weight improved TTFB and contentful paint time. If you don’t use Gutenberg, add this code to the end of your functions.php file to dequeue it.

//Remove Gutenberg hooked css
add_action( 'wp_enqueue_scripts', function() {
wp_dequeue_style( 'wp-block-library' );
} );

So, does TTFB make a difference to load time? And SEO?

You bet!

As mentioned already, the sooner that data can be transferred between server and browser, the faster the rendering will be.

Furthermore, Google only looks at TTFB in it’s ranking algorithm so if you want to ensure you aren’t “marked down” in SERP, aim for TTFB under 200ms.

TTFB on this site is a cool 121ms, tested from Dallas USA.

The best way to optimize TTFB is to ensure that your server is fast.

Unfortunately, you have no control over server speed if you host on a shared server.

The best way to ensure highest server speed is to host in the cloud.

I switched from Siteground to Cloudways not only because of speed but also because Siteground’s renewal fees are just obscene for shared hosting.

Cloudways gives you dedicated resources and a choice of over 60 data centers (depending on which cloud infrastructure you use) for a fraction of the cost!

Review Signal collect regular conversations on Twitter and turn them into meaning reviews. Their cloud hosting review places Cloudways in second spot.

I trust Review Signal above all other reviews because their data comes from totally unbiased and benign conversations on Twitter where users are not trying to sell anything.

TRY CLOUDWAYS FREE FOR 3 DAYS

Sign Up with PROMO CODE: WPMM25OFF for 25% off your first 2 months hosting fees if you decide to host with Cloudways.

First Paint Time

First paint time is the time it takes for the browser to paint the first pixel and render anything on the page.

Because each site is different, it is impossible to determine exactly what is represented with the first paint. It could be a background color, including plain white, a header or even text.

Due to this, a speedy first paint time is not indicative of a quick loading page.

Contentful Paint Time | First Meaningful Paint

This indicates when users receive any form of interactive content from the DOM. It could be text or media, as opposed to a state change (background color or styling).

Contentful paint time or first contentful paint (FCP) is indicative of perceived load time (perceived performance) – the point at which users believe the site has fully loaded.

On well optimized sites it can be common for contentful paint time and first paint time to coincide.

Optimize the following to improve first contentful paint:

• Caching – cache static HTML pages to improve speed for first time visits and leverage HTTP caching (browser caching) to vastly improve speed for repeat visits.
• Optimize the render blocking pathway as much as possible – this doesn’t mean that you have to eliminate all resources from the pathway because some render blocking resources may be necessary for smooth and effective page loading!
• Minify HTML, CSS and JS where possible.
• Minimize payloads and remove unnecessary JS and CSS calls – I mentioned unnecessary CSS removal further up. The same applies to JavaScript. If you have calls to unused scripts, comment them out or dequeue them depending on your theme setup. Developers can consider code splitting and/or tree shaking opportunities. Code splitting involves breaking up JS into bite-sized chunks and delivering only the script needed at the time it’s required. Concatenating small JS files can be effective in optimizing the render pathway but for large files, you’ll need to test to determine efficacy. That being said, WP Rocket provides an ideal solution whereby JS can be concatenated (even large files such as JQuery) and then deferred. Tree shaking involves the removal of parts of the script that may no longer be used. You need to know a fair amount about coding in order to use this technique. Compression is pretty much superfluous when it comes to resource processing. While file size is smaller in respect of file transfers, once decompressed the parser still has to process the full uncompressed code.

Dom Interactive Time

The Document Object Model (DOM) is how the browser structures the page’s HTML internally so that it can perform the rendering process.

It is at this point that the HTML has been fully loaded and processed (parsed) and indicates the time immediately preceding when the user agent sets the document readiness to interactive. (Thanks to Patrick Sexton – Varvy for the great description).

Although the HTML has been parsed, other resources such as JS and CSS haven’t been dealt with yet. That occurs in the next step.

Dom Content Loaded Time

At this stage, DOM interactive has been achieved and there is no CSS blocking the execution of scripts.

Developers often use this as a starting point to execute JavaScript. It stands to reason, therefore, that a delay in DOM loaded time can delay rendering and it is for this reason that the parsing of JavaScript should either be deferred or loaded asynchronously.

A good caching plugin will be able to defer script at your request.

Onload Time

Don’t mistake this for fully loaded time.

Onload occurs when all resources for the page have been fully downloaded.

It can happen though, that a certain script initiates a call for additional resources.

This is why there’s a difference between Onload time and Fully Loaded time.

Why You Should Concentrate On Optimizing Above The Fold Content

The term “above the fold” (ATF) is derived from newspaper headlines and content that remain visible when the paper is folded for public display on news stands.

The same concept applies to websites except that the term refers to the content that is displayed on a device without having to scroll.

It’s the content that’s designed to hook or engage your user, making it the most important piece of content on your page.

So it makes sense to ensure that this primary real estate loads quickly and efficiently.

But what exactly are the most crucial aspects to consider when optimizing for above the fold content (critical rendering path)?

1. Eliminate or optimize render blocking resources.
2. Eliminate Advertising.
3. Optimize or eliminate images.
4. Eliminate FOIT and FOUC while ensuring visibility of text during loading.

Eliminate Or Optimize Render Blocking Resources

• CSS – There’s no disputing that render blocking CSS slows down your site. To alleviate this you can minify CSS files which removes all white space and unnecessary comments thereby reducing file size. This can be followed up with combining separate CSS files into a single file (merging or concatenating). This will reduce the number of HTTP requests and round trips required to render the page and should theoretically improve loading times. However, this also depends on your individual setup. Combining large CSS files could have the opposite effect so it’s imperative to test what works effectively. Lastly, printing the critical CSS (needed to render above the fold content) into the head of your HTML document makes it available during the parsing process without the need for a separate request, thereby clearing the render blocking pathway and theoretically speeding up load times. Again, test this strategy on your own setup.
  • Google Fonts – Being called by CSS, Google fonts are typically render blocking. To exacerbate matters further, calling the external CSS file using the @import method (which is normally found right at the beginning of the HTML document) causes the browser to make a round trip in order to look for and fetch the file thereby delaying rendering. It’s better to use the standard method to call Google fonts using <link href="https://fonts.googleapis.com/css?family=yourfont&display=swap" rel="stylesheet"> in the head of the HTML document. When grabbing the link from Google fonts, you’ll notice that &display=swap is added by default to the string, emphasizing Google’s position regarding the importance of a proper font loading strategy to augment above the fold optimization. You may want to consider hosting your Google fonts locally but doing so requires fast and reliable hosting. Please don’t attempt to host fonts on a shared hosting platform.
• JavaScript – The reason JS is render blocking is because most sites call external JS files from the <head> of the HTML document. And in most instances, these JS files are not required to load the above the fold content. JQuery is a particularly large file and is oftentimes responsible for blocking the critical render path due to it being prematurely called. This is not the only culprit, though. Google recommends two very effective ways to handle the calling of JS without blocking the parsing of HTML.
  • Using the async attribute on external scripts. Async causes the script to be loaded in parallel with the parsing of HTML and it therefore doesn’t block rendering. 
  • Defer the loading of external JS files (that are not required to render above the fold content) to the end of the HTML document (just before the </body> tag). Defer causes the script to be executed after the page has finished parsing.

Sound complicated?

It is! But there’s a simple way to achieve all of this without you having to do any heavy lifting yourself.

Eliminate Advertising

Personally I’d never monetize my site with ads. I find they interfere with user experience and are highly distracting for users at the best of times.

If you must have ads on your site, don’t include them in the above the fold area. Ads are slow to load at the best of times and including them above the fold will have a negative impact on contentful paint times and more importantly, user experience.

Optimize Or Eliminate Images

Pixel based graphics are problematic in that the larger the image, the more pixels they use, giving rise to increased file size.

The larger the file size the slower images will load leading to increased paint times and poor user experience. So it stands to reason that the use of images above the fold comes at the expense of speed and user experience.

I’m not saying don’t use them at all, just that they ought to be very well optimized.

But what if I told you that there is, however, an image format that is not resolution dependent and will load faster than standard raster graphics such as jpg and png?

Well there is. And this may be a great alternative if you absolutely must include images above the fold.

Scalable Vector Graphics (SVG) defines graphics in XML format and are recommended by W3C since 2001 and have many advantages over other common image formats such as jpg and png.

SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable
SVG graphics do NOT lose any quality if they are zoomed or resized
SVG is an open standard
SVG files are pure XML

w3schools.com

Here’s an example of an SVG graphic …

And here’s how it was inserted into the page.

<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
</body>
</html>

Eliminate FOIT

When it comes to loading webfonts, neither FOIT nor FOUT / FOUC are desirable. And which one of these evils is the lesser, is (personally) subjective.

Without intervention, popular browsers allow 3 seconds for webfonts to load before reverting to nominated fallbacks or system fonts, meaning that users on a slow connection may ultimately be subject to both. Eek!

Since May 2019, Google have been including the &display=swap property in their <link href …> URL.

This means that font display during loading will default to fallback / system fonts until such time that the preferred font has been downloaded and is ready for use, where after it will replace system fonts (FOUT).

I would be inclined to assume, therefore, that Google’s preference for FOUT as a means to keeping text visible during loading clearly confirms their preferred position. To support this, font visibility during loading is flagged and reflects in Google PageSpeed score when performing an Insights test.

I’m also of the opinion that non compliant sites will fall out of favor in Google SERP (if not immediately then ultimately).

For those who host fonts locally, the font-display property (with various preferred values) is also available for use with the @font-face descriptor when calling fonts from a local stylesheet.

Yes, the use of font-display: swap may translate to users (depending on certain factors) seeing fallback / system fonts until preferred fonts become usable during the loading process, but I would have to concede that this is probably better than forcing FOIT upon them.

There may be those who will try to dissuade you from keeping text visible during loading and motivate this on the assumption that fonts should be render blocking in order to avoid FOUC. But in my opinion that comes at the HUGE expense of your users’ perception as those on sub-optimal connections are forced to wait on a blank screen (FOIT) until the parsing of CSS makes way for the HTML render.

Yikes! What a terrible compromise.

Provide Instant Loading For Repeat Visitors.

Ever notice how a previously visited site loads almost instantaneously?

Browser caching ensures that specific resources (e.g. fonts, images, scripts) are stored on the user’s machine for a time specified in the expires headers. These expires headers live in your site’s .htaccess file and instruct browsers to retain certain assets for a specified time, after which they expire.

This means that a browser making repeat requests for a site doesn’t have to wait for those assets to be downloaded repeatedly from the server allowing them to be loaded from the browser’s cache / store / memory.

Browser caching provides the fastest possible load times for users as the site loads mainly from their local machine.

[As an aside, browser caching translates to reduced server requests, lower resource (and bandwidth) usage and reduced hosting costs for those on cloud or similar hosting plans].

You can add expires to your .htaccess file manually or even better with a good caching plugin.

Use the following code to add expires headers manually to .htaccess. The expire times will be suitable for most sites but you can alter these according to your own preference.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"

# CSS
ExpiresByType text/css "access plus 1 year"

# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"

# Favicon (cannot be renamed!)
ExpiresByType image/x-icon "access plus 1 week"

# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"

# HTML
ExpiresByType text/html "access plus 0 seconds"

# JavaScript
ExpiresByType application/javascript "access plus 1 year"

# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"

# Media
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"

# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"

# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

</IfModule>

That’s All Folks …

Well, that all I have for now. I hope you’ve learned something from this post.

If you know of something that I’ve left out in error, hit me up in the comments.

Do you think I’ve given you enough to realize that you should only optimize for users and never for Google PageSpeed score, YSlow score or any other score based optimizations?

Thinking of switching to a system font stack? Wise choice!

Speed tests revealed that hosting Google fonts locally was faster than calling them from Google’s server.

But speed tests aren’t everything. To the human eye, there was no perceivable difference.

In the same way that sleight of hand deceives the eye, even a 500ms difference in font loading speed is imperceptible to you and I.

But switching to a system font stack is the single biggest factor responsible for my site now loading almost instantly!

System fonts require no download time by the browser.

Why Do Google Fonts Slow Down Websites?

It doesn’t matter whether Google web fonts are called from your own server or Google’s, each font face has a different load time.

Key CDN did an interesting case study to establish which are the fastest loading Google fonts.

Additionally, each font style being called adds to the page load time. Google’s servers are erratic and I’ve seen load time fluctuations from 120ms to 642ms per font style, within the space of a minute.

I was using 2 font families on this site. A serif font (regular, italic and bold) for content and a sans-serif font for navigation, buttons and pagination.

GTMetrix tests reflected acceptable contentful paint times of anywhere between 400ms to 600ms. Yet to my eye, the site wasn’t performing. And it wasn’t a browser issue.

I was overwrought seeing some sites loading really fast while mine felt like it was lagging.

Being the tenacious person that I am, I wouldn’t succumb to a slow WordPress site.

I’d previously tested my site out with the Georgia font and its use had made a very noticeable difference to loading speed. It works on Windows and MacOS but not Unix+X. That being the case I reverted to my Google webfonts.

With persistence, I discovered how to properly use a system font stack. This allows one to specify the most apt system fonts for each operating system. Knowing that the site would look good across the board, I switched to system fonts.

We’ll get to how to do this shortly.

In the meantime, let’s look at why Google fonts are slow to load?

Besides the number of fonts and styles playing a role, let’s look at some other factors giving rise to weak performance.

1. Server Speed.
2. Google fonts are render blocking.
3. The SSL handshake.

Server Speed

As you probably already know, web hosting is the #1 factor affecting site speed.

Google fonts are compressed and their servers (plus CDN) are highly optimized for speed.

Irrespective, considering the number of requests from the millions of sites using their fonts, it’s inevitable that the servers come under pressure. As mentioned already, I had fluctuations of up to 642ms per font style and that just destroys perceived load time.

I did find that hosting Google fonts on my own server had a very positive impact on speed. But then I host this site on a Linode server with Cloudways so it’s incredibly fast.

Cloudways offers the best value for money cloud (VPS) hosting in the marketplace.

Plans start at $10 per month and work on a Pay As You Go pricing model. There are NO CONTRACTS!

I switched from Siteground because they’re too expensive and I had some real bad experiences with them.

Compared with Siteground’s cloud hosting at $80 per month, the same resources (bandwidth RAM and web space) with Cloudways cost $42 per month!

TRY CLOUDWAYS FREE FOR 3 DAYS

Use PROMO CODE: WPMM25OFF to get 25% off your first two months if you decide to host with Cloudways.

Even if you switch to system fonts, I’d recommend you give Cloudways strong consideration.

Google Fonts Are Render Blocking

Before a web page can be painted by the browser, the page’s HTML must be completely parsed.

But stylesheets block the HTML parser until they themselves have been parsed. This happens because the CSS is required by the browser in order to format the page and display fonts.

Because Google fonts are called from CSS, their downloading delays paint times (rendering).

By comparison, system fonts (hopefully called from an appropriate system font stack) require no download time by the browser because they’re built into the user’s operating system.

The SSL Handshake Affects Speed

When fetching a site over a secure connection (HTTPS), an additional layer of encryption is added to the HTTP protocol.

The handshaking process over HTTPS requires and additional 2 round trips for the connection to be established when compared with HTTP.

Fonts called from Google servers are made over HTTPS. Moreover, with Google giving preference to SSL sites in SERP and considering that over 84% of pages viewed in Chrome are over HTTPS, chances are high that your font loading speed is being affected by SSL handshaking.

System Fonts Eliminate FOIT And FOUT (FOUC)

Slow loading fonts and/or a slow internet connection can both give rise to FOIT and FOUT.

I’ve already written about FOIT and FOUT in the following two posts:

• Why Google Pagespeed Score Doesn’t Matter.
• Self Hosting Google Fonts.

While it’s debatable which is the lesser of the two evils, it’s better to eliminate both. Neither are good for user experience.

The font-display: auto | block | swap | fallback | optional property was recently devised as a mechanism to override default browser behavior in order to keep text visible during page loading, thereby eliminating FOIT. It’s successfully achieved, however, this at the expense of FOUC.

Reverting to system fonts using a befitting system font stack is the only surefire way to eliminate both evils while improving page load times in the process.

For a site like this one, where content takes precedence over design, this has proven to be an ideal solution.

What Is A Font Stack?

A font stack is a collection of fonts specified in a site’s stylesheet, in preferential order, for use on an “if not this, then that” basis.

It is deployed as a means to display, either temporarily or permanently, one or more fallback (system) fonts in the event that a webfont is unable to be presented due to lengthy download time.

This is what my font stack looked like before switching to a system font stack:

font-family: 'Cormorant Garamond', serif;

As simple as it is, it’s effective. It allows the user agent to select a serif fallback based on available system fonts for the operating system in use.

However, it doesn’t address the possibility of a user having installed another font on the system. In such a case, the fallback font displayed may not be a default system font and the site may be rendered as intended. [NOTE: I have purposely elaborated on this so as to give you a broader background understanding into the workings of a system font stack].

Nevertheless, I’ve seen more elaborate fonts stacks, for example:

font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;

If Roboto cannot be displayed the browser will fall back to Helvetica and if that cannot be displayed it falls back to Arial and eventually to the closest sans-serif font that can be displayed.

A system font stack works in a similar way but but is more complex in that fonts are specified in a particular order so as to correctly display the most apt system fonts for each operating system.

How To Implement A System Font Stack

If you switch to system fonts please make certain to disable all calls for Google or other web fonts.

How you do this will depend on your theme and the way that web fonts are called. For example, you may need to remove @import from a stylesheet, a script from your HTML document or dequeue a style.

For me it was as simple as commenting out this line in the functions.php file.

But then that’s the beauty of a StudioPress theme running on the Genesis framework.

For testing purposes only, I applied the following font stack to each and every element in my stylesheets:

font-family: 'Arial', 'Helvetica', sans-serif;

I suppose you could call this a system font stack, just that it’s not a very good one. It’s more of a way to specify websafe fonts with fallbacks.

A true system font stack is more comprehensive in the way it caters for different operating systems and user agents (browsers).

Font	Device And OS Targeted
-apple-system (San Francisco in Safari; Helvetica Neue and Lucida Grande on older versions)	iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont (San Francisco)	macOS Chrome
Segoe UI	Windows (Vista onwards)
Roboto	Android, Chrome OS
Oxygen / Oxygen-Sans	KDE
Fira Sans	Firefox OS
Droid Sans	Android pre-Ice Cream Sandwich
Ubuntu	Ubuntu
Cantarell	GNOME
Helvetica Neue	macOS versions
Arial	All
sans-serif	All

It’s important to construct the order of the system font stack in such a way as to ensure that the first font will actually be the user’s system font.

If the order is incorrect, a cached (or other installed) font may be displayed instead.

I’ll illustrate by way of an example pertaining to a Windows based system:

Segoe UI is a Windows specific font. If Roboto were to be specified before Segoe UI in the font stack and assuming it were cached in the user’s browser or installed on the system, it would be [incorrectly] displayed, thereby negating the intended use of a system font stack.

[NOTE: Android developers on Windows with Roboto installed: List Segoe UI before Roboto in order to use it instead of Roboto].

Here are some well known sites that use system fonts together with the exact system font stack used.

Zeit.co
-apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;

Booking.com
BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

Unsplash.com
-apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;

Bootstrap.com
-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;

JSfiddle.net
-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

Github
Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

WordPress.org dashboard
-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;

Wpmediamastery.com (This site)
-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;

The font stack is applied to the font-family declaration.

Go through your stylesheets and replace all elements containing webfonts with your system font stack as seen above, e.g. headings, tables, navigation etc.

This is where well coded themes are desirable, such as StudioPress which runs on the Genesis Framework. They’re lightweight, optimally coded, blazing fast and SEO optimized.

With StudioPress (Genesis) themes, there are 2 stylesheets that you need to concentrate on when applying a system font stack.

1. style.css – the main stylesheet that contains all of the typographical elements where you’ll need to add the system font stack.
2. style-front.css – applies to the widgetized home page (not applicable to a static front page) where you’ll also find font-family declarations.

Why not grab yourself a super hot deal on a StudioPress theme. With a single lifetime theme you get . . .

• UNLIMITED use on unlimited domains.
• Lifetime support.
• Lifetime Updates.
• No annual recurring fees.

The Proof

Seriously, the best way to test the difference in speed is to judge the way your site loads before and after using system fonts.

For me, switching to system fonts made a marked difference to the speed of my site.

Always remember that speed tests are not always the best judge. A busy speed test server can easily provide skewed results.

Nevertheless, I ran a GTMetrix test because it’s the only way to illustrate the speed of my site.

And then a Pingdom test.

The site loads so fast that Pingdom can’t even capture a screenshot!

Conclusion

The most time consuming thing for me was doing the research and finding out how to use a system font stack to properly display system fonts on all operating systems.

And if I say so myself, I think my site looks pretty darn good.

Switching from web fonts to system fonts shouldn’t take much longer that 10 minutes but you’ll be richly rewarded.

Just copy my system font stack above and replace the relevant elements in your stylesheet/s.

Now that I’ve made it easy for you, are you going to give it a try?

Let me know in the comments.

If you want to learn how to make money blogging you’re going to need a lot more more than a blog niche, some related content and an ability to write.

I’ll show you not only how to make money blogging but more importantly, how to beat your competition out and drive the “lions share” of organic traffic to YOUR site.

It doesn’t matter whether you’re starting from scratch, if you can follow a simple guide, you’re good to go.

Let’s not waste any time.

Develop A Strong Will To Succeed

We all have dreams.

But many of us underestimate their power to bring about the manifestations that we want and we sometimes neglect to embrace them quite as much as we possibly should.

Now I’m not talking about the fairies and goblins that you’re conjuring up here. I’m referring to conscious visualizations.

Consider this example. For centuries, nobody believed it was physically possible to run a 4 minute mile until, in 1954, Roger Bannister did it.

According to Tony Robbins, not only did Roger train physically, he also made a mental shift.

He visualized, over and over in his mind, breaking that 4-minute barrier, knowing that all the physical training in the world would be meaningless without making an adjustment to his belief system.

He conditioned himself to become so certain that he was capable of achieving this feat, that he believed, without a shadow of a doubt, that he would do it. And he did.

Now I can teach you how to make money blogging but the determination to succeed has to come from you.

Blogging to make money is not a sprint but a marathon that will take mental stamina and if you want to make it out there you’ll need to . . .

Draw Up A Sound Business Plan

I always used to shy away from the thought of a business plan so if your heart’s just sunk, I understand.

I’m not suggesting you spend weeks drafting the most formal business plan. Your success depends more on the type of planning you do, not how much planning you do.

Research conducted by Tim Berry concludes that those who finished their business plan were about twice as likely to achieve business growth while also being able to secure investment or get a loan than those who didn’t.

When it comes to how to make money blogging, it’s more about setting out on your journey with a destination and a roadmap than a complex business plan.

Consider the example of NASA sending a rocket into space. They know their starting point (A) as well as their destination (B). Their aim is to get from point A to point B in the quickest possible time.

In theory, you may envisage a straight line from A to B. But in practice, it doesn’t work that way. Both earth and the destination are in constant orbit, in much the same way that a business is in a constant state of flux.

Now I want to ask you a question. Do you have any idea what percentage of the time such a rocket is actually “on course”?

It’s around 3%. Which means that for 97% of the time, the rocket is constantly re-aligning and re-adjusting to bring itself back on course.

And that’s pretty much why you need a business plan. It’s not an exercise you undertake at the start of your journey and then forget about. It’s a reference point that you should constantly refer to, to ensure that you are still “on course”.

The best place to start is to get hold of some sample business plans that will help you to draft your own.

A good business plan will help you to formalize and . . .

Use Your Unique Value Proposition To Your Advantage

Your unique value proposition is nothing more than that which sets you apart from the rest.

It lies at the heart of why your readers should make use of you and not your competitors.

Convertkit lets you know that their email software will not only allow you to connect with your audience but you’ll be able to do so while you go about doing nothing more than the work you love. Makes it sound so effortless!

Knowing your value proposition or unique selling point will make it easier to market your business and …

Drive Traffic To Your Site

In order to make money blogging, you have to sell something.

And if you want to sell something, you need people to sell to. In other words you need blog traffic.

But traffic doesn’t just magically land on your site from out of the blue. You have to entice users onto your site.

Now web traffic can either be paid or organic.

The advantage of paying for traffic is that it can be generated immediately. If you have the budget for it, that’s great. Google and Facebook will love you.

But seeing that you’re reading and learning about how to make money blogging, I’m pretty sure you don’t  want to pay for traffic. So I’m going to concentrate on free or organic traffic.

Unfortunately, this is going to eliminate Facebook (and other social networks) because their algorithms restrict your free promotional posts to about 5% of your followers unless, of course, you pay for advertising.

Source: Statista.

So that leaves us with SEO which is clearly the most worthwhile strategy but it’s a long term strategy and one that I encourage you to concentrate on heavily.

It starts with adopting proper on-page SEO strategies, complimented with a number of off-page promotional strategies, the most noteworthy being link building. Google won’t suddenly start sending you streams of free traffic until you’ve built up some site authority. Outreach and guest posting are the only “proactive” methods I’d suggest for link building.

But a prerequisite for quality backlinks is . . .

Epic, Long-Form Content

Have you ever searched the internet for ideas to write about? Something to get past the writer’s block that we all face from time to time?

What were you looking for? Information? A solution?

Whatever it was, you were looking for something that YOU wanted to read about. Right?

You see, there are two types of topics you can write about on your blog.

1. The things you want to write about.
2. The things that others want to read about.

While content lies at the heart of every blog, writing about topics that your audience isn’t interested in reading isn’t going to help you any.

What’s important is to understand the problems that your users are facing and to craft your content around solving those problems.

If you can’t help your audience to solve their problems, they’ll simply find someone who can.

This requires a strong . . .

Focus On Your Blog Niche

Simply put, your blog niche is the area in which you specialize and what you “talk” about.

If you blog about food it’s pointless writing posts about fashion. Users who land on your blog for an Italian meatball recipe aren’t going to be interested in reading about the latest Guess handbags. They’re going to be interested in a side dish that goes with meatballs or a recipe for tomorrow night’s dinner.

Whatever niche you decide to focus on, it should be one that’s in demand. Better still, a growing niche with an audience that’s ready and capable of spending money on the products and services you offer, would be first prize.

Google Trends is a great way to see if your intended niche is in demand and to ascertain its interest over time. You can make comparisons and check your niche against specific countries and over predetermined time periods.

The next step is to …

Monetize Your Content

The internet is rife with monetization ideas.

Unfortunately, most of them either don’t work or are not worth the effort to pursue them.

For instance, the time and effort spent in writing content to promote a $130 headphone on Amazon for a commission of $7.80 isn’t going to produce any meaningful income unless you’re able to sell large volumes. And listing products on your site without much content isn’t going to generate traffic from Google.

So in order to best show you how to make money blogging, I’ll be sticking only to the monetization methods that really work.

Monetization Methods That Work

Affiliate Marketing

Properly done, affiliate marketing is a really effective way to generate passive income on autopilot.

So that when you wake up in the morning you find some decent money in your account.

The primary prerequisite for success in this vertical lies in the creation of high quality content that adequately addresses solutions to your users’ problems. In other words, your content must be extremely helpful and to this end you will have to concentrate heavily on user experience.

The secondary requirement is to ensure that you spend your time wisely by prioritizing your efforts to highest and best use.

This monetization method remains one of the most solid ways to create passive income streams and can be achieved through:

• Content creation.
• Email marketing.
• Social media marketing.

The initial effort to become successful at affiliate marketing is substantial because:

• It takes times to produce quality content.
• A fair amount of content is required to keep users interested in your blog.
• Substantial effort and time is needed to promote your content, build your domain authority, drive traffic to your site and get your posts to rank in Google search results pages (SERP).

But once you get past this you will have laid the foundations to monetize your content year after year, on autopilot.

That’s where the dream of making money while you sleep comes from!

If this monetization method appeals to you, you’ll want to learn exactly how to make money from affiliate marketing.

And once you’ve done that, you’ll want to read about the highest paying affiliate programs so that you can start making some real moolah!

Online Courses

This is probably the most effective way to make money blogging but you must make sure that your course/s are going to attract sufficient demand.

I would suggest you stick to 3 easy ways to gauge demand:

1. Are other successful bloggers  making money with similar courses?
2. Are you making money from affiliate marketing in the vertical? This is a great way to test the waters.
3. Does Google Trends show demand?

Online courses can literally make you thousands of dollars in a short space of time.

But you need a base to be able to market to.

If you’re lucky enough to have a pre-existing audience that you’ve created through social media or your circle of influence, this is something you can start making money from immediately.

In truth, most people need to build an audience in order to benefit from selling online courses.

But again, once you get past that, this is a brilliant way to rake in the dough.

If you look at some of the most successful operators in this vertical, such as Pat Flynn, you’ll quickly learn that an email list is a great way to market online courses.

But it’s not the only way.

If you have some financial resources, you can run some paid promotions such as:

• Google PPC advertising.
• Facebook advertising.
• Promoting a Facebook post.
• Offering a free webinar as a hook for your online course.

Setting up an online course with Teachable is effortless. You can either work with your own site or you can get a dedicated, “out of the box”, professional website (minimal configuration required) specifically for your courses.

All plans include unlimited videos, unlimited courses, unlimited hosting, payment processing, student management, lecture comments, quizzes, no fees on free courses.

Another great portal for online courses and/or membership sites (under your own brand), allowing for an an unlimited amount of students and no transaction fees is Thinkific.

eCommerce (Dropshipping)

Because the supplier ships direct to your customer, dropshipping allows you to create an ecommerce store without the need for carrying costly inventory / stock.

This not only reduces your capital outlay but also reduces risk considerably. If a product doesn’t sell, you can simply swap it out for something else.

This is an extremely lucrative form of monetization as long as:

• You can find niche products that will appeal to a segment of the market that is financially able to spend.
• You can make sufficient profit.
• You have honest and reliable suppliers that carry genuine products. I can’t stress this enough.

Ali Dropship (the dropshipping arm of Ali Express) is a huge marketplace for dropshipping products and I don’t know of many people who haven’t heard of Ali Express. There are more than enough vendors on the platform, however, the products are all Chinese and quality can be problematic.

There’s no problem using your own website together with the Ali Dropship Plugin which enables one to import products into your online store or alternatively, you can purchase a bespoke store / website which I would personally recommend.

It’s your future business we’re talking about here and a pre-built, bespoke solution is worth every cent.

Spocket is another dropship supplier that focuses exclusively on original products from the USA and EU only. The quality is far higher but range is limited.

You could also look at Selz.

Membership Sites

A membership site is normally one that charges either a fixed upfront fee or a recurring monthly payment in return for access to something exclusive.

These kinds of sites may grant access to restricted content, online courses, information, a community, products, services, help etc.

Like I said above, Thinkific is a great platform for this.

My Recommended Strategy

1. Start with Affiliate Marketing. It’s the best foundation for making sure that your further monetization methods will fly. It will also provide you with an automated way to generate passive income while affording you a solid financial backstop together with the freedom to do the things you want, when you want.
2. Progress to online courses. This can also be fully automated and while it can be much more lucrative than affiliate marketing, you must first learn the ropes of online marketing.
3. ECommerce often follows from an affiliate marketing website but requires a more active role in your business.

Armed with everything I’ve given you about how to make money blogging, you should now be ready to …

Start Your Blog

All the theory in the world will get you nowhere unless you take positive action.

Probably the biggest fear most people have when it comes to starting a blog is the lack of technical know how.

Well I can assure you that you don’t need any!

If you follow my step by step tutorial, I’ll have you up and running within half an hour maximum.

Then concentrate on …

Growing Your EMail List

Like I already mentioned, your content is your key to traffic.

Now it’s pointless getting all this traffic to your blog unless you’re going to do something with it.

And I’m not referring to selling something which is, of course, the ultimate objective. What I’m referring to here is developing another avenue to enhance your online sales.

Consider this example.

You decided to monetize your blog through affiliate marketing and you obviously dropped some affiliate links into your posts.

From the traffic you had on your site over the last month, you managed to sell 6 hosting plans. That generated the tidy sum of say $360. But you neglected to get those users to subscribe to your email list.

A month down the line, 4 of those six people are ready to find an email service provider so that they can set up their on-boarding automation and email sequences.

At the time they first found your website, they happened to be in the right place at the right time so they purchased hosting through your links.

But during the month they subscribed to a free webinar on list building with someone else. And because this blogger had been sending them keep in touch emails on a daily basis, that’s where they purchased their email software.

They’d long forgotten about you. They probably didn’t even remember which website they visited when they followed your link to buy their hosting plans.

And this happened because you failed to maximize your traffic exhaustively.

This is a huge mistake that even some of the most well known bloggers have made.

The hosting sales you made were all once off sales.

Let me tell you something.

Your email list – or rather your subscribers (audience) are your most valuable asset.

It’ has proven to be far more effective at getting sales than any other marketing channel.

Why?

Because it’s a whole lot easier to sell to a warm lead than it is to to sell to a cold one.

The people on your list are already primed. You’ve built relationships with them because you’ve kept in touch regularly. And because of those relationships, they trust you. So buying from you is a no-brainer, isn’t it?

And what’s more there’ll be countless opportunities to cross-sell, up-sell and even down-sell those same people.

Once those people are subscribed to your list, you can segment the list so that the content you write in your “keep in touch” emails is relevant to people at different stages of their journey.

It doesn’t make any sense to send out an email promoting web hosting to people who already have live blogs, does it?

Convertkit makes it all so easy. It allows me to segment and automate my sequences with just a couple of clicks, saving me a huge amount of manual work.

There’s absolutely no way you can do things manually once you have more than a few people on your list. It’s also the easiest product to use and support is always available if you need it.

No excuse for neglecting to build an email list and grow your audience. Then all that’s left to do is to …

Set Up a Sales Funnel

If you’ve ever been to an auction you’ll know that there are usually plenty of attendees.

A good auctioneer will go out of his way to ensure that the auction room is full.

Why does he do this?

Quite simply to create competition.

He under quotes the price of the item being sold thereby leading people to believe that the item will sell for a bargain price. And because of that, the auction attracts plenty of people.

But how many people actually land up bidding?

Very few.

Well it’s the same with a marketing funnel or sales funnel.

As you can see the sales funnel begins with creating awareness. This is where you cast your net far and wide in order to draw in as many potential buyers for your products or services as possible.

Not everybody will be interested and you will notice that the number of people who show interest in purchasing is less than the original “catch”.

After evaluation of the product, service or idea, the number of actual prospects reduces even further and what comes out of the bottom of the funnel are your purchasers.

Now your sales funnel is what generates your income.

It’s the end result of your marketing campaign that leads to sales.

Your sales funnel could be a free webinar that you put together with the objective of convincing people how much your product is actually needed by them – how much pain it will save them and how much success it will bring.

And the stimulus for getting people to attend the webinar comes from recognizing their problems and marketing a solution that will remedy them.

Going back to the diagram above, the awareness part at the top of the funnel relates to the traffic that you get to visit your site. The interest part of the funnel relates to the need that you create through solutions – conversions. And the evaluation and purchase parts relates to sales.

Traffic + Conversions = SALES.

And that, my dear friend, is how to make money blogging.

FAQ

How much traffic do I need when considering how to make money blogging?

The amount of traffic you’ll need is going to be relative to how much money you need and how you’ll monetize and promote your site.

Ads could generate about $800 per month from 100,000 monthly visitors while a course could generate that from 1 or 2 sales. Personally, I’d rather aim to have quality, targeted traffic  rather than any traffic.

How much content do I need to make money with my blog?

Have you ever seen any of these types of posts floating around the internet?

How I Grew My Email List When I had Only 5 Blog Posts
How I Made $2000 Blogging In My First Month
How I got 50,000 Page Views In My Second Month Of Blogging
Do you believe any of them?

You can’t grow an email list off 5 posts. You can’t even get 5 visitors to your site off 5 posts!

You need plenty of exceptional quality posts to start making money online and to keep the momentum going.

You should start seeing some traffic once you’ve got about 20 to 25 posts under the belt. But that’s not where you should aim to stop. The ball should start rolling [slowly] from there.

In my view, the more content you have, the better your blog will perform. The only caveat is that all your content must be of the highest quality.

How much knowledge and experience do I need before I can make money blogging?

This is something that all new bloggers go through. But where does it start and stop? How much experience do you really need to be an authority on a subject. A year? Two? What’s the number?

Surprisingly, not much.

I learned this from an affiliate manager for a product I promote. At the time I wasn’t using their product but I really wanted to. So I wrote to her explaining how I was battling to get traffic to my blog and that my income was under pressure as a result. I elaborated by telling her how I wanted to learn enough about their product to put a review together that I believed would help boost my web traffic.

Well I got a really nice reply explaining that I should go ahead and buy the product for my own use.

She went on to tell me that I didn’t need to be an expert on the subject and that all I really needed to promote the product effectively was to be a few steps ahead of my audience.

I learned something really valuable that day and now I’m passing it on to you.

Is it true that the only people making any money are those that teach others “how to make money blogging”?

I don’t know where this comes from but some people believe that the only people who make money from blogging are the ones who teach others how to make money blogging. That’s just absurd.

Take a look at the Pinch of Yum Blog. This is a food blog that’s coining it in a very competitive niche.

Look at Dr. Mercola. He’s made millions from the sale of natural supplements. And what about Engadget?

People are making money from their blogs in all kinds of niches where there’s a reasonable demand and where there are users who are searching for solutions. In fact, some of the really small niches are ideal for selling high ticket items like courses.

There’s always been good money to be made in smaller niches simply because they’re very specialized and people will pay top dollar for the right advice.

Will I be able to make any money in a competitive niche?

Want to know why a competitive niche is a surefire way to make money?

Because there’s a ton of demand!

According to Netcraft’s October 2018 survey there were over 1.67 billion websites on the world wide web so I honestly don’t think there’s a niche left that has little to no competition?

Instead of thinking about competition in a negative way, why not start thinking about building relationships with other bloggers in your niche. This will help you because you can find ways to get in front of their audiences.

All it takes is a mention in a social media post. It doesn’t matter whether it’s Facebook, Twitter, Instagram or Linkedin. One mention could drive a bunch of traffic to your website and that may be all you need to breathe some life into your business.

If you keep looking over your shoulder, you’re never going to move forward!

How long will it take me to start making money with my blog?

With due respect to the honest operators out there (and most are), you need to be very mindful that the internet is plagued with dodgy, self proclaimed gurus who hold themselves out to be expert marketers.

These are a bunch of fast talkers who suck you into a world of make believe, getting you hooked on their product launches until they bleed you dry of every cent you have.

Don’t believe what they tell you.

If you want to make money blogging, be prepared to invest time. Lots of it. There’s no such thing as “make money blogging online fast”, unless you’re into those $50 surveys. But that’s not blogging for money.

All I can tell you is that it takes time to start making money.

It’ll take at least upwards of a number of months to a year depending on how quickly you can build an authoritative site.

Stop worrying about how long it’s going to take to make money. The best things in life don’t always come quickly.

Rather concern yourself with building great content and monetizing your site effectively.

When the bucks eventually start rolling in you’ll be able fire your boss and start living your life the way you want to.

What are the best ways to make passive income from my blog?

Passive income is a form of recurring income that you earn on a regular basis without requiring you to be physically present in your business.

To generate passive income streams through a blog requires a substantial amount of initial work (and sometimes money) but the eventual income streams pay huge dividends.

Passive income streams can be achieved through any, or a combination of, the following methods:

Affiliate marketing – a referral fee or commission for referring people to a product or service. Your fee is earned on the purchase of a product.
Advertising – External advertisers place ads on your site and you get paid based on the amount of traffic that your website attracts. Most people incorporate an advertising network onto the website, e.g. Google Ads or Mediavine as opposed to selling web space privately.
Membership website – You get paid by members who get access to premium content, courses, resources etc. that are not available to the general public. The monthly fees generate a passive income stream.
E-Books – Multiple sales generates income on a regular basis.
Online Courses – multiple sales to new users generates a really nice flow of passive income. The upfront work is substantial but the sale of a single course may generate the same income that is required from 10 affiliate sales.

Personally, I believe it’s best to diversify your income sources. Don’t put all your eggs in one basket.

How much money can I expect to make when considering how to make money blogging?

It’s not often I answer a question with a question. But how much money would you like to make?

You can make as much or as little as you like. Your earnings are dependent only on yourself.

There are bloggers who are making upwards of 7 digit incomes annually and others who are making enough to cover living expenses.

If your intention is to blog part time to make extra money, then extra money is what you’ll make.

If you intend to make a business out of your blog, then you can earn very well.
Some bloggers set up multiple blogs in different niches using different monetization methods while others stick to a single blog.

In his book, “The Science Of Getting Rich”, Wallace D. Wattles explains, “…but when two men in the same business are in the same neighborhood, and one gets rich while the other fails, it indicates that getting rich is the result of doing things in a Certain Way.”

How much money you make depends purely on you and your outlook when it comes to generating wealth.

Final Thoughts

The two most frequently asked questions I get are:

1. Can I start a blog for free?
2. Is is really possible to make money blogging?

I spent over 20 minutes thinking about how to answer these questions for you, so let’s get straight to it.

You can certainly create a free blog on either wordpress.com or Wix. But you don’t get the benefit of using your own domain name which is pretty much counter intuitive because you can’t start building a brand that way.

That’s one of the reasons why wordpress.org is the most widely used platforms on the internet, powering over 35% of all websites on the internet including those without a content management system.

However, web hosting isn’t free.

That said, if you’re just starting out, you can get brilliant hosting for $10 per month, no contracts just simple pay-as-you-go pricing.

So for under twelve bucks you can start a blog on the world’s most trusted platform, WordPress.

Remember that blogging is a business the same as a physical one.

So you’ll need to be prepared to invest in certain tools in order to give yourself the best shot at making it successful.

There are no other barriers to entry but like any business, it’s hard work. Nevertheless, the rewards are phenomenal.

I spent over 29 years in businesses I wasn’t passionate about. Yes I made money, but at the expense of lifestyle.

Now I get to live my life exactly the way I want to while I help others to achieve the same.

I don’t believe you’d be reading a post about how to make money blogging if you thought any differently.

Or would you?

I’ve always believed in working smart, not hard. It makes no sense to promote a product that pays $7 when the same effort could generate a whopping $1400.

If you want to earn money on autopilot and enjoy a life of geographical freedom, you’ll need to concentrate your efforts on the highest paying affiliate programs – the 20% that will generate you 80% of your income.

Let’s get started!

What Are Affiliate Programs?

Affiliate programs are online marketing schemes that allow you to promote other people’s products or services to your clients in exchange for a referral fee.

How Do Affiliate Programs Work?

Product providers or merchants compensate affiliate marketers for sales made by their users who are referred through unique affiliate links or banners placed within their web content, email marketing or social media posts.

What Is A 2-Tier Affiliate Program?

A 2-tier affiliate program provides affiliate marketers with an opportunity to earn an override commission on all sales generated by sub-affiliates introduced by them to the affiliate program.

Are Affiliate Programs Profitable?

The short answer is yes, provided that you’re marketing high paying affiliate programs.

Let me explain.

Gross profit is a measure of gross earnings less expenses. One such expense could be the cost of a premium plugin that you may need to purchase in order to write tutorials and take explanatory screenshots.

This could be a once-off cost or it may recur yearly. So you’ll need to make a certain number of affiliate sales in order to cover your costs before making any profit.

For example, the initial cost of the WP Rocket caching plugin is $49 and affiliate commission is paid at a rate of 20%.

If I spend a week writing a tutorial with the objective of marketing this product for a referral fee of $10 per sale, I would need to make a good number of sales to cover the cost of the plugin. And after deducting my operating costs such as my time and broadband connection, my net profit is eroded substantially.

But if you sell the plugin as an up-sell, together with a hosting plan that’ll pay you $85, you’re good to go.

If you want to make money as an affiliate marketer you must concentrate the bulk of your efforts on selling highly paid affiliate programs.

Then yes, affiliate marketing programs can be very lucrative and profitable.

How Do I Join Affiliate Programs?

In most cases, joining an affiliate program is as simple as applying.

If you don’t know whether a product or service provider offers an affiliate program, there are 2 quick ways to find out.

i. Look in the site’s footer.

ii. Do a Google search using “name + affiliate program”.

There are 2 schools of thought as to when one should apply to an affiliate program.

Some say it’s better to create content and get traffic to your site before monetizing.

That’s well and good but then you have to go back at a later stage and add affiliate links to your posts.

Creating content first helps in that certain merchants may require that your content is a good match for their product. Without content you may strike difficulties joining some programs.

Content creation is most certainly beneficial for SEO. Furthermore, Google favors regular post updates and I’ve seen rankings soar because of this. Having said this, minor updates are irrelevant. Google wants to see substantial content updates so don’t think that by simply adding affiliate links that you will enhance your SEO.

Do I Need A Website For Affiliate Marketing?

It’s not imperative. But it’s highly advisable!

If you have a sizable email list and/or social media following, you could get away without a website.

But a website bestows on you an element of trust that’s really crucial to the success of an affiliate marketer. It shows that you’re serious about your business.

I mean, how many businesses do you know of that don’t have a website?

An affiliate marketing business is no different!

One of the easiest and best platforms to set up a website is WordPress.org. The website itself is free but you’ll have to pay to host it.

I started off on shared hosting with Siteground. Their first year fees are attractive but their renewal fees are horrendous.

I migrated to Cloudways because they’re not only substantially cheaper ($10 per month vs. $35 per month) but you also get fully dedicated resources on a cloud server which makes the hosting insanely fast.

Having hosted sites with over 7 different hosting companies I can safely say that they offer the best value out there.

Some of the standout features include:

• Pay-as-you-go pricing model.
• No contracts.
• Choice of 5 cloud infrastructures.
• Over 60 data centers

And together with the regular conversations on Twitter that are collected by Review Signal and turned into meaningful reviews, what more proof do you need?

TRY CLOUDWAYS FREE FOR 3 DAYS

Sign up with CLOUDWAYS PROMO CODE: WPMM25OFF for 25% off your first two month’s fees if you host with Cloudways.

Are There Any Legal Requirements To Join An Affiliate Program?

This varies from merchant to merchant.

In order to make commission payments, some merchants in the USA require certain Department Of Treasury (IRS) forms to be completed and signed. They relate to taxation and tax identification of different entities, both local and foreign.

Nothing to be worried about. It’s standard stuff.

It’s also an FTC (Federal Trade Commission) requirement to properly disclose your relationship when receiving a commission, flat fee, free products or a discount in respect of a product endorsement, whether in a post or other form of media.

This is designed to protect consumers from deceptive marketing.

The FTC actually wants a disclosure to be made that’s very close to each affiliate link and should require no scrolling.

I seldom see this. Can you just image a post with disclosures accompanying every single affiliate link? What about user experience?

Certain merchants are quite sticky with this requirement and can refuse to pay you if you don’t comply. One such merchant is Bluehost – that I don’t generally promote because I believe you can do far better. [This is an affiliate link. If you make a purchase through this link, I may earn a small referral fee for my efforts, at no additional cost to you].

I have a one line disclosure at the top of each and every blog post with a link to my site disclaimer.

The main thing is not to deceive anyone, such as sending users to a free trial that actually costs $1.70.

The other thing that almost all merchants disallow is bidding on keywords that form part of their intellectual property. This will most certainly get you banned from the affiliate program.

*Please read each merchant’s terms and conditions carefully.

What Commission Structures Are Available?

Commissions vary between merchants but generally fall into one of these categories:

• Once off commission – for single non renewable products.
• Upfront + recurring commission – for products that renew annually.

You may come across some variations of these. Let’s look at some examples.

Thrive Themes sell products that can be purchased once-off OR by way of a membership. A 35% commission is paid on a single purchase. A membership (which gives access to all products but is paid every month until cancelled) attracts a 35% initial commission plus a 25% annual recurring commission.

Beaver Builder pay the same percentage both upfront and annually.

Cloudways offers a choice of either a flat commission rate that increases with the number of sales per month (from $50 to $125) ….

…. or a hybrid commission that pays a reduced upfront commission plus lifetime annual renewals ($30 + 7% Lifetime Commission).

What Are Affiliate Networks?

An affiliate network is a structure that facilitates transactions between:

1. Merchants and
2. Affiliate marketers (publishers).

What Are The Benefits Of Affiliate Networks?

FOR MERCHANTS

1. Exposes their affiliate programs to a wider audience of affiliate marketers that they may not have reached using their own resources.
2. It relieves them of the duty of administering the tracking and paying of affiliates.
3. Greater brand awareness.

FOR AFFILIATES

1. Exposes them to affiliate marketing programs that they may not have been aware existed.
2. Eliminates shady merchants.
3. Greater degree of trust in respect of commission payments is this is performed by the network operator.
4. Aggregation of commission payments.
5. Enables comparison of meaningful statistics such as user cancellation rates and commission rates.

FOR THE AFFILIATE NETWORK

1. Provides a meaningful income in return for their administrative services.
2. Creation of additional sources of income through:
   • Advertising on their website.
   • Creation of their own affiliate program.

FOR THE COMMUNITY

1. Creation of employment opportunities.

How Do I Find High Commission Affiliate Programs Within An Affiliate Network? 

Earnings per click or EPC gives you a quick way to find high pay affiliate programs. The higher the EPC the better.

As an affiliate marketer, your personal EPC is calculated by dividing your total earnings over a specified period by the total number of clicks over the same period. This gives you an idea of the average earnings you can expect per click.

Here’s an example calculated over a 3 month period:

$8400 (total earnings) / 250 (total clicks) = $33.60 (per click)

In an affiliate network, the network operator calculates the EPC per 100 clicks across all affiliates in a particular affiliate program.

The EPC for all affiliates who partake in the Weebly affiliate program is $60.85 per click. Weebly is therefore a high commission affiliate program.

What Is Cookie Duration And Click Attribution?

As soon as an affiliate marketer’s user clicks on an affiliate link and is redirected to the merchant site, a tracking cookie is stored on their device for a set period of time. This is known as cookie duration.

A user may not necessarily make a purchase immediately. However, should the user return to the vendor’s website and make a product purchase at any time during the set cookie duration, the commission will still be paid to the affiliate.

But what happens in the case of a user who has clicked multiple affiliate links leading to the same merchant site?

The affiliate program will specify whether it pays on first click attribution or last click attribution.

When last click attribution applies, the most recent cookie will overwrite a previously stored one. I’m not entirely sure how first click attribution handles cookies but I suspect that a second cookie won’t be stored on the user’s computer.

If the user has cleared cookies from the browser cache, nobody gets paid!

What To Look For In Top Paying Affiliate Programs?

When assessing top paying affiliate programs, there are a few things you want to look out for.

1. Commission Amount in $$

Some affiliates say that they don’t consider worthwhile, any affiliate programs that pay less than 30%. That’s just crazy!

I mean 30% of a $9 sale is $2.70 while 10% of $1000 sale is $100.

If an affiliate program quotes a percentage commission, always translate it into dollar terms to judge if it’s a high paying affiliate program.

For example, Hostinger offers web hosting for as little as $0.99 per month. They pay 60% of whatever is brought in.

60% sounds great but 60 cents can hardly be considered a high paying affiliate program!

Nothing whatsoever wrong with Hostinger. They just don’t don’t belong in a list of the highest paying affiliate programs!

2. Earnings Per Click (EPC)

Use earnings per click as an initial guide but don’t take it as conclusive evidence of a high paying affiliate program. You still need to factor in other variables, e.g. your target market. We’ll get to this shortly.

Remember that affiliate networks provide a rolling average over a certain number of days and they calculate EPC per 100 clicks.

This is why it can be confusing when looking at the EPC of an affiliate program.

Considering that the most expensive product on the merchant site is $350, an EPC of $372 seems very high. Commissions are 10% to 15% of sale price.

Remember – the EPC must be divided by 100 to ascertain the earnings per single click.

$3.72 makes more sense!

3. Your Target Market

Lastly, the profile of your average user is important when determining if an affiliate program may be high paying for your individual business.

How much is the average user likely to spend and what reimbursement is being offered by the merchant?

A high average spend will make a low commission percentage irrelevant.

For example, 15% of a $1000 sale equates to a formidable $150 commission. But if you average user is only likely to spend $100, then this may not be the highest paying affiliate program.

Do The Highest Paying Affiliate Programs Fall Into Specific Categories?

In general, high commission affiliate programs can be found mostly anywhere.

Nevertheless, there are a couple of specific categories that include many of the highest paying affiliate programs across the internet.

You are highly likely to find that the best high paying affiliate programs fall into the e-commerce, personal finance and web hosting categories.

The reason for this is because;

• Web hosting is absolutely essential for any website.
• An e-commerce site is essential for business operators within that niche.
• Stock, forex, cryptocurrency, loans and other forms of investment and trading require a fair investment by users making them very specialized products.

Users buy into these two categories for the long term and because promotion of these require specialized knowledge, merchants reward affiliates commensurately.

Highest Paying Affiliate Programs List

Below is a list of the highest paying affiliate programs.

Please remember that there are literally hundreds and thousands of affiliate programs on offer across the internet.

It is not possible to provide an exhaustive list of high paying affiliate programs as many may exist in categories and sub-categories that I may not be aware of.

This is a list of the best high paying affiliate programs that are popular and well known across a broad spectrum of internet users.

Web Hosting Affiliate Programs

Web hosting is what I call recession proof. Any business requiring an online presence must avail itself of web hosting. The same applies to personal blogs. Naturally this makes web hosting fiercely competitive.

Contrary to belief, selling web hosting isn’t like plucking cherries off a tree. It requires not only a substantial time investment, specialized product knowledge and sales skills but also a knack for knowing how to build relationships and deal with people. This is why hosting companies go out of their way to remunerate affiliates for their efforts in referring customers.

Siteground

Well known for their shared hosting and innovative solutions.

Explosive growth over the years makes Siteground a good option for affiliate marketers because it sort of sells itself.

The Siteground affiliate program offers a tiered commission structure.

The same commissions apply irrespective of plan choice. This means you can sell cheap hosting and still earn well, making the Siteground affiliate program a good choice when marketing to beginners.

Affiliate Commissions:
Below figures are per month:
1 to 5 sales – $50 per sale.
6 to 10 sales – $75 per sale.
11 to 20 sales – $100 per sale.
21+ sales – Custom.

Cookie Duration: 60 days (last click attribution).

Other Features:
Attractive promotional material.
Customize links.
Deep linking.

Get Started With Siteground

A2 Hosting

Because of their attractive pricing, very reasonable renewal rates, high quality, lightning fast hosting, coupled with a 99.9% uptime commitment, A2 Hosting is the perfect platform for beginners and seasoned bloggers with more advanced hosting requirements alike.

This makes A2 hosting a very viable proposition for users across the board and because their hosting is easy to sell, it makes for a very attractive affiliate program.

Affiliate Commissions:
1-10 sales: $85/sale
11-20 sales: $100/sale
21-30 sales: $120/sale
31+ sales: $140/sale

2nd Tier Commissions:
$5 per sub affiliate sale. (Sub affiliates are registered when anyone signs up for the affiliate program after clicking your link).

Cookie Duration: 90 days.

Other Features:
Deep linking (choose your own landing pages).
High conversion rates.
High retention rates.
Custom landing pages for top affiliates.
Real time affiliate stats.

Get Started With A2 Hosting

Cloudways

In terms of value for money hosting, there isn’t another cloud hosting platform that can come close to Cloudways. Hosting plans start at $10 per month.

All resources are dedicated and website owners have a choice of 5 cloud platforms on which to setup servers and host their sites, viz. Google Cloud Platform, Amazon Web Services (AWS), Linode, Vultr and Digital Ocean.

There are no contracts and the pricing model is based on a Pay As You Go basis.

This makes the Cloudways affiliate program a brilliant choice to promote to users who want the best value for money, managed cloud hosting in the marketplace.

Affiliate Commissions.
1-5 sales: $50/sale
6-20 sales: $75/sale
21-45 sales: $100/sale
46-80 sales: $125/sale
80+ sales: Custom

OR

$30 per sale + lifetime commissions of 7%. See above: Estimated first year commission for 1 customer per month = $480.

Cookie Duration: 90 days.

Cloudways may offer some affiliates a promo code that is quite attractive for users. I have a promo code that offers 20% off the first 2 months. If you’re interested in hosting, use promo code: WPMM2X20 during the signup process to get the discount.

Get Started With Cloudways

WP Engine

Having grown up with WordPress, WP Engine offer fully managed WordPress hosting. They take care of caching and optimizations from their end as well as server management, built in CDN, redundancy – the works.

Their platform is powered by Google Cloud so their hosting is lightning fast making their affiliate program ideal for affiliate marketers wanting to provide their users with the best outcomes insofar as hosting is concerned. It’s also one of the highest paying affiliate programs.

Affiliate commissions:
The higher of 100% of the first month’s payment or $200.
Earn up to $7500.
2nd Tier Commission: $50 flat rate.

Cookie Duration: 180 days.

Other Features:
Co-branded landing pages.
Attractive Banners.
Affiliate links are cross linked to any StudioPress (Genesis Framework) sales.

Get Started With WP Engine

Liquid Web

Liquid Web is a fully managed web hosting platform offering solutions in every aspect of hosting imaginable.

This makes their affiliate program exceptionally attractive and it’s also one of the highest paying affiliate programs around!

Affiliate Commissions:
150% of the first month’s contribution with a minimum of $150.
Potential to earn up to $7949 (Private Cloud hosting).

Cookie Duration: 90 days.

Other Features:
Dedicated affiliate account managers.
Choice of 2 top affiliate networks (Impact Radius and CJ Affiliate).
Attractive banners.
Deep linking.

Get Started With Liquidweb

Kinsta

Kinsta is yet another fully managed WordPress hosting provider.

Not only does Kinsta hosting run on the Google Cloud Platform, they’re also recommended by them.

They employ Google Cloud’s premium tier global network plus next generation infrastructure to ensure that all websites are lightning fast.

Their unique architecture plus choice of 20 data centers makes their offering very attractive to users and their affiliate program is therefore well worth exploring.

Affiliate Commissions:
Starter Plan: $50 +10% lifetime monthly recurring commissions.
Pro Plan: $100 +10% lifetime monthly recurring commissions.
Business Plan: $150 +10% lifetime monthly recurring commissions.
Enterprise Plan: $500 +10% lifetime monthly recurring commissions.

Cookie Duration: 60 days.

Other Features:
Beautiful banners.
Affiliate academy.
Deep linking.
<5% churn rate.

Get Started With Kinsta

Bluehost

In terms of numbers, Bluehost is one of the most recommended hosting companies around.

It’s comes as no surprise because they’re first on the list of officially recommended hosting providers by WordPress themselves.

Together with Bluehost’s ultra cheap pricing, this makes Bluehost easy to sell.

Affiliate Commissions:
$65 per sale.

Cookie Duration: 30 days.

Other Features:
Promotional resources.
Reliable tracking.
Customized campaigns.
Low cost – great for beginners.

Get Started With Bluehost

InMotion Hosting

InMotion has been around for many years and is well respected in the hosting space.

They offer a range of plans starting at $6.99 per month.

Their commitment to service excellence and going the extra mile is a draw card for users, making the hosting platform a viable option for affiliate marketers.

Affiliate Commissions:
Below figures are per month:
1 to 10 sales – $50 per sale.
11 to 20 sales – $80 per sale.
21 to 30 sales – $120 per sale.
31+ sales – Custom.

Cookie Duration: 90 days (last click attribution).

Other Features:
Attractive promotional material.
Custom landing pages.
Deep linking.
Dedicated affiliate contact.
High converting products.

Get Started With InMotion

Greengeeks Hosting

Greengeeks sell themselves on being environmentally conscious.

Naturally, this will attract a certain kind of user and the company offers an attractive high paying affiliate program, especially for low volume affiliate marketers.

Affiliate Commissions:
Below figures are per month:
1 sales – $50 per sale.
2 sales – $60 per sale.
3 sales – $70 per sale.
4 sales – $80 per sale.
5 sales – $90 per sale.
6+ sales – $100 per sale.

Cookie Duration: Not published.

Other Features:
Wide selection of creatives.
Targeted landing pages.
Dedicated affiliate team.
High converting products.

Get Started With Greengeeks

WPX Hosting

The commission structure offered by the WPX affiliate program is different to any other hosting affiliate program.

They don’t operate a commission scale based on monthly sales but rather on the overall business brought to WPX Hosting.

Once you’ve referred over 100 sales, you will earn the maximum commission amount of $100 per sale.

Affiliate Commissions:
1 to 25 sales – $70 per sale.
26 to 100 sales – $85 per sale.
101+ sales – $100 per sale.

Cookie Duration: 60 Days (As per affiliate manager – not published).

Other Features:
Creatives include logos, banners and videos.
Direct Skype access to affiliate manager.

Get Started With WPX Hosting

E-Commerce Affiliate Programs

BigCommerce

BigCommerce allows entrepreneurs to build, operate and scale e-commerce websites using pre-designed templates, proven sales tools and other powerful inbuilt features.

Affiliate Commissions:
$60 to $500 for Essential Plans (200% of the first month’s payment) or $1500 for an Enterprise Plan.

Cookie Duration: 90 days.

Get Started With BigCommerce

3dCart

A full e-commerce solution offering website builder, shopping cart, SEO and more.

Users can build any kind of shop imaginable and they have over 200 payment providers in over a dozen countries.

They offer easy eCommerce sales tax setup and the best order management and product management software.

Affiliate Commissions:
$57 to $687 (300%).  .

Cookie Duration: 45 days.

Other Features:
Superb marketing content.
Selling and support handled by 3dCart.
Above average conversion rates.

Get Started With 3dCart

SamCart

SamCart is a subscription and payment plan check out platform featuring templates that are designed to maximize conversion and profits.

They pay substantial recurring commissions on every sale.

Affiliate Commissions:
$40 to $80 PER MONTH (40%). ($480 – $960 annually).

Cookie Duration: 30 days.

Other Features:
Dedicated affiliate manager.
Monthly promotional content.

Get Started With SamCart

Spocket

Spocket is a dropshipping app and supplier of original products from the USA and EU, allowing online dropshipping retailers to link and import goods directly to their online platforms such as Shopify and WooCommerce

Earn attractive commissions from their affiliate program simply by referring customers.

Affiliate Commissions:
Bronze tier – Up to $297 per subscriber.
Silver tier – Up to $371 per subscriber.
Gold tier – Up to 445 per subscriber.

Cookie Duration: 90 days.

Get Started With Spocket

AliDropship

Ali Express dropshipping is another huge marketplace for drop shipping based businesses. The product range is more extensive than Spocket because they don’t limit themselves purely to USA and EU suppliers but also those based in Asia. AliDropship sources products that are suitable for all types of entrepreneurs.

Users can test products on demo sites before committing and can also get a bespoke store built by AliDropship to their own requirements or purchase the AliDropship plugin and build their own site.

Earn up to $284 per sale through the affiliate program

Earnings are based on qualifying services purchased.

Affiliate Commissions:
Up to $284 per sale.

Cookie Duration: 30 days.

Get Started With AliDropship

Volusion

Over 180,000 people trust Volusion with their online stores.

They have 11 free themes and 34 premium themes to choose from.

Inspire your users and earn top affiliate commissions.

Affiliate Commissions:
$58 to $598 on standard plans.
$1000 on prime plans.

Cookie Duration: 45 days.

Get Started With Volusion

Shopify

This is probably the most well know eCommerce platform of all.

It allows you to sell through a website, personally via point of sale and Social channels.

What’s great is that it integrates with the Spocket App so products from Spocket can be automatically uploaded to your Shopify site.

Shopify may not be the highest paying affiliate program in the eCommerce space but it most certainly is a top paying affiliate program.

Affiliate Commissions:
$58 to $598 on standard plans.
$2000 for each plus referral.

Cookie Duration: 30 days.

Get Started With shopify

Selz

Yet another eCommerce platform allowing you to start an online business.

To join the affiliate program you have to sign up for Selz.

You don’t have to complete a store but you have to accept the affiliate terms by clicking on your profile (top right  of website) and selecting “Affiliates”. Thereafter your referral link will be provided.

Affiliate Commissions:
$52 to $358 (plan dependent at 200% of first month’s payment). or 25% of the annual payment (if paid annually).

Cookie Duration: 90 days.

Get Started With Selz

Website Builders Affiliate Programs

Wix

Wix is a cloud-based website builder that makes it easy to set up a personalized website, be it an online shop, a local business or a blog.

It doesn’t matter whether it’s your first website or you’re a seasoned professional, you can make a website just the way you want to.

You can start with a really cool template and make your own customizations or you can get a personalized website made just for you.

This isn’t just a drag and drop website builder, over 150 million people worldwide benefit from the entire package including hosting.

Because the product is so easy to sell  it makes their affiliate program a win for any marketer in almost any niche.

Earn $100+ for every premium conversion.

Affiliate Commissions:
$100+ for every premium conversion.

Cookie Duration: 30 days.

Get Started With Wix

Trading Affiliate Programs

There a ton of affiliate programs in this niche. Some good, some not so good. I’ve found many that encourage signups but there’s no transparency regarding affiliate commissions. Because this post focuses on the highest paying affiliate programs, I cannot list those that provide “pie in the sky” payouts.

For example, some programs offer a percentage of the profits that the broker makes for all traders collectively. Others offer the same but for individual traders. In other words, the losses of one trader aren’t combined with the profits of others.

The problem with listing these affiliate programs here is that the profits made will determine if they are high paying affiliate programs or not. For the purposes of this post, I will stick to those that don’t involve guesswork.

Plus500

Plus500 involves CFD contract for difference) trading on Equities (shares), Forex (currencies), Indices and Cryptocurrency.

In short, it’s derivative trading which can be used to make huge profits (and losses) but may more often be used for hedging.

Affiliate Commissions:
$200 to $800 per trader (irrespective of trading amount invested).
10% on all 2nd-Tier referral commissions.

Cookie Duration: Lifetime.

Get Started With Plus500

Markets.com

Markets.com offers a full range of trading products, enabling you to promote the best converting eFinance brands around the world.

Commissions vary according to country of referral and a different commission structures are offered.

Affiliate Commissions:
$150 to $900.
$50 2nd-Tier commission.

FTD = first time deposit. So the commissions payable vary according to haw many FTD’s (referrals) you make.

Cookie Duration: Unknown.

Get Started With Markets Affiliates

Marketing Affiliate Programs

HubSpot

Through client relationship management, sales, marketing and customer service, HubSpot transforms the way businesses attract, engage, nurture and delight their clients.

The affiliate program provides an opportunity to earn up to $1000 for each product sold.

Affiliate commissions:
Starter / Basic plan: $250.
Professional / CMS plan: $500.
Enterprise plan: $1,000.

Cookie Duration: 90 days.

Other Features:
Large creatives inventory.
15,000+ pieces of marketing content.
1:1 Relationship with affiliate team.

Get Started With HubSpot

Right Message

Right Message claim to be gurus on how to build and sell an audience by personalizing your optins and CTA’s (calls to action) thereby making them relevant to the users on your site.

The optin tools work on any site and integrate seamlessly with all the major email marketing databases.

The affiliate program pays recurring commissions based on number of monthly unique visitors.

Affiliate commissions:
Min: Up to 2000 visitors per month: $70 to $310 per year.
Max: Up to 1,000,000 per month: $1605 to $1845 per year.

Cookie Duration: 60 days.

Get Started With Right Message

Shareasale

Shareasale is an affiliate network that spans many verticals.

Once you join the Shareasale affiliate network you will have access to all of the registered merchants, including Shareasale.

Commissions are attractive.

Affiliate commissions:
$150 for each merchant that joins Shareasale.
$30 for each affiliate that signs up through your links.

Cookie Duration: 60 days.

Get Started With Shareasale

Wealthy Affiliate

Wealthy Affiliate is platform that provides resources and opportunities to affiliate marketers.

In fact, they’re much more than that. They’re a one stop shop for affiliate marketers, supplying extensive training ad research tools.

Within the platform, you can search for affiliate programs, store your links and get notifications.

Earn well over $100 per premium signup.

Affiliate commissions:
Monthly plans: $23.50 recurring monthly (premium member commission).
Annual plans: $175 recurring annually (premium member commission).

Cookie Duration: Lifetime.

Get Started With Wealthy Affiliate

Six Figure Mentors

Six Figure Mentors provide access to over 6500 e-Learning courses in Business, Marketing, Creative and Technology.

Their objective is to help people succeed in their online businesses without having to develop their own products.

You can earn up to $1000 for your efforts in referring people to the various membership options of the program.

Affiliate commissions:
SFM Application: $20.
Business system upgrade: $200.
Memberships: $20 recurring monthly.
Elite membership: $1000.
DEA: $125 to $2000.

Cookie Duration: Unknown.

Get Started With Six Figure Mentors

Thinkific

Thinkific is a portal that empowers you to create online courses and membership sites, under your own brand.

Unlimited students and no transaction fees.

This puts Thinkific ahead of their competition, making this high paying affiliate program a great addition to your business.

Affiliate commissions:
Basic plan: $94 per year recurring.
Pro plan: $190 per year recurring.
Premier plan: $958 per year recurring.

Cookie Duration: 90 days.

Get Started With Thinkific

Teachable

Teachable is another great online course creator site.

Setup is effortless. You can work with your own website or get a professional out-of-the-box site with minimal configuration needed.

All plans include unlimited videos, unlimited courses, unlimited hosting, payment processing, student management, lecture comments, quizzes, no fees on free courses.

You can even run your own affiliate program and have affiliates promote your courses too.

With features like this, the affiliate program has to be equally as appealing.

Affiliate commissions:
Basic plan: $104 per year recurring.
Professional plan: $284 per year recurring.
Premier plan: $1436 per year recurring.

Cookie Duration: 90 days.

Get Started With Teachable

Webinarjam

Widely used, Webinarjam is an all in one solution for those who wish to use webinars to run training courses with the objective of getting signups.

A ton of features on offer PLUS the ability to stream to YouTube Live or WebinarJam Live.

They offer one of the highest paying affiliate programs to follow suit.

And because the Webinarjam affiliate program is part of Kartra, you’ll not only earn commissions on Webinarjam and Everwebinar, but also on every sale sold through Kartra (if you subscribe further to the Kartra program giving you access to many other products).

Affiliate commissions:
WebinarJam: $119 to $192 recurring (products dependent).
Bundled Webinarjam/Everwebinar membership: $200 flat rate.
Kartra (JV Broker) signup (2nd tier commissions): 10% of every sale (multiple products available on the Kartra platform).

Cookie Duration: 30 days (first click attribution).

Get Started With Webinarjam

Demio

Another great way to hold personal conversations at scale.

The affiliate program allows you to earn lifetime recurring commissions

Affiliate commissions:
Starter plan: $176 per year recurring (based on monthly paid plan).
Growth plan: $356 per year recurring (based on monthly paid plan).
Business plan: $842 per year recurring (based on monthly paid plan).

Cookie Duration: 30 days.

Get Started With Demio

Leadpages

From high converting websites, landing pages, sales pages and popups, Leadpages helps businesses to grow their email lists and connect with their audience.

Drive qualified leads to your landing pages with their integrated Facebook Ads Builder.

And with a FREE 14 day trial, there’s nothing to lose.

Their attractive 30% recurring commission structure makes this a viable high pay affiliate program.

Affiliate commissions:
Standard plan: $133 per year recurring.
Pro plan: $284 per year recurring.
Advanced plan: $1155 per year recurring.

Cookie Duration: 30 days (last click attribution).

Get Started With Leadpages

SEMrush

SEMrush is a comprehensive, all in one, marketing toolkit for bloggers, webmasters and website owners, providing a number of different analytics reports including organic research (find competitor keywords), keyword research, backlinks, traffic analytics (analyze competitor traffic) and much more.

BeRush is the SEMrush affiliate program.

IT’S one of the best affiliate programs for bloggers because this is an essential tool for any website wishing to rank in Google SERP.

You can earn high recurring commissions of 40% on the sale of Pro, Guru and Business plans.

And with a 10 cookie life and first click attribution, you can’t get any better.

Affiliate commissions:
Pro plan: $480 per year recurring.
Guru plan: $960 per year recurring.
Business plan: $1920 per year recurring.

Cookie Duration: 10 Years (first click attribution).

Get Started With SEMrush

Blogger Affiliate Programs

Sucuri

Sucuri is a security suite comprising tools designed to protect and clean infected websites.

Commissions are based on plan choice and level.

Affiliate commissions:
Full platform: $50 to $125.
Firewall only: $30 to $210.
Agency referral: $100.

Cookie Duration: 30 days.

Get Started With Sucuri

StudioPress Themes

Built on the Genesis Framework, StudioPress have built a solid reputation for being the #1 theme choice of bloggers.

And since becoming part of the WP Engine group, things just got more interesting.

If you want to make money as an affiliate marketer, don’t overlook the StudioPress affiliate program. Together with the WP Engine affiliate program, it’s one of the most extensive around, offering opportunities to make anywhere between $35 and $7500.

Affiliate commissions:
Standalone themes: $35 to $45.
Pro Plus All Theme Package: $175.
35 Free themes with WP Engine hosting : $200.

Cookie Duration: 60 days.

Other Features:
High EPC (earnings per click).
Low reversal rates.

Get Started With StudioPress

Elegant Themes

Elegant themes are well known for their flagship theme DIVI. This is a theme plus page builder in one.

The affiliate program provides for recurring commissions on the yearly access option and a once off payment on the lifetime plan.

Affiliate commissions:
Yearly access: $45 recurring annually.
Lifetime access: $125 once off.

Cookie Duration: 180 days.

Get Started With Elegant Themes

Beaver Builder

Beaver builder is both a page builder and/or a theme.

The affiliate program is really attractive when selling both the page builder and framework theme.

Affiliate commissions:
Standard plan: $25 recurring annually*.
Pro plan: $75 recurring annually*.
Agency plan: $100 recurring annually*.

*Plans are renewed annually with a discount of 40%. Commission reduces accordingly.

Cookie Duration: 60 days.

Get Started With Beaver Builder

Health And Medical Affiliate Programs

Level Sleep

Affiliate commissions:
$100 per sale.

Cookie Duration: 180 days.

Other Features:
EPC (30 days): $344.
In top 5 on Shareasale network.

Find Level Sleep On Shareasale

Medical Guardian

Affiliate commissions:
$70 per sale.

Cookie Duration: 180 days.

Other Features:
EPC (30 days): $815.
On Shareasale network.

Find Medical Guardian On Shareasale

Puffy Mattress

Affiliate commissions:
$300 per sale.

Cookie Duration: 180 days.

Other Features:
EPC (30 days): $457.
On Shareasale network.

Find Puffy Mattress On Shareasale

Medical Alert

Affiliate commissions:
$150 per sale.

Cookie Duration: 30 days.

Other Features:
EPC (30 days): $283.

Find Medical Alert On Shareasale

Dermaset Skincare

Affiliate commissions:
$55 per sale.

Cookie Duration: 60 days.

Other Features:
EPC (30 days): $203.
On Shareasale network.

Find Dermaset On Shareasale

Awara Mattress

Affiliate commissions:
$150 per sale.

Cookie Duration: 90 days.

Other Features:
EPC (30 days): $245.
On Shareasale network.

Find Awara Mattress On Shareasale

Business Affiliate Programs

Hello Sells

A 24/7 lead response solution.

Affiliate commissions:
$100 per sale.

Cookie Duration: 90 days.

Other Features:
EPC (30 days): $180.
On Shareasale network.

Find Hello Sells On Shareasale

Northwest Registered Agent

Registrations, incorporations etc.

Affiliate commissions:
$60 per sale.

Cookie Duration: 30 days.

Other Features:
EPC (30 days): $835.
On Shareasale network.

Find Northwest On Shareasale

Entertainment Affiliate Programs

Super Chexx

Affiliate commissions:
$75 per sale.

Cookie Duration: 15 days.

Other Features:
EPC (30 days): $308.

Find Super Chexx On Shareasale

Tips For Affiliate Marketing

Be Mobile Savvy

Ensure that your website is either mobile responsive or that you have a separate site specifically for mobile devices. According to Statista, 51.6% of internet traffic globally (August 2019) comes from mobile devices.

At the same time, search query volume from 2014 to 2019 by device clearly shows that US searches on mobile devices far exceeds desktops.

While free traffic going to a mobile responsive site is the same as that going to a desktop site, your affiliate marketing techniques and strategies will remain largely unchanged. The major difference lies in paid traffic.

I’m not going to go into broad detail here because this could easily be the subject of another post, but basically what I’m talking about here is in-app exposure, in-app ads and app install ads. While these don’t involve the marketing of affiliate programs, products and services per se, it is important to remember that in-app marketing can be used to great effect to increase brand awareness as well as driving large amounts of targeted traffic to your affiliate site and/or posts.

Market to a subscriber base / email list

This is one of the best ways to achieve great conversion rates when marketing affiliate products and services to users.

You’ll need to choose a top email marketing provider that allows the use of affiliate links in email content. Certain providers such as Mailchimp disallow this.

Having tried a few, I settled with Convertkit because the product stands head and shoulders above others in terms of ease of use.

You can put email broadcasts together and send to segmented lists with no more than 2 to 3 mouse clicks while automations are created graphically making them easy to put together within minutes. Sequences are just as easily completed, the hardest part being the content creation.

An added feature is the built in form builder which allows you to create content upgrades and subscribe forms in a jiffy!

Here’s an example from one of my small personal finance sites.

Another thing, please make sure that you don’t breach the terms of any of your affiliate programs. For example, Amazon Associates may not promote affiliate links in emails.

Maintain Transparency

Transparency is key to building trusting relationships with your audience. Besides being an FTC requirement, it’s always best practice to disclose your affiliate relationships to users. Not only will they appreciate this but it gives your audience a way to “pay it forward” for your hard work without feeling like they’re just taking from you.

Stay Relevant

Relevance of the product or service to your audience is probably the most crucial factor when choosing an affiliate program.

Heck, there’s no point in trying to sell ice to an Eskimo. But promote thermal clothing and you’ve got a business.

Furthermore, while you want to be promoting high ticket affiliate programs, it’s also crucial for the program to be of high value and help to users.

Know Your Audience

Learn about your audience early on. If you make the effort to know who your audience is and what makes them tick, half the job is already done. How do you learn this? Google Analytics. It’s the best way to establish your audience demographics. I use it to determine geographic location, age, gender, interests, device type, device screen size, language, times of day when users are most active. The list goes on. Knowing your audience helps you to understand exactly what content you should be sending them. And because your users’ needs are always changing, Right Message is another excellent tool that asks your users questions – on autopilot – thereby helping you to segment your users so that you can always send them relevant content. See the affiliate program for Right Message above.

Don’t Offer Choices

Whatever product, service or affiliate program you’re promoting, make sure you’re only promoting one. The surest way to create doubt in someone’s mind is to offer an alternative. It causes prospective purchasers to start doing further research and once they leave your site you can kiss them goodbye.

Avoid Excessive Affiliate Links

Whether it be website content, email content or social media posts, too many links to the same product looks “salesy” and desperate. One or two discreet links in pertinent places is far more effective.

Add Affiliate Links To Images

Adding affiliate links to images is a great way to boost CTR. The Thirsty Affiliates link management and cloaking plugin makes it real easy to do this. Simply select the image in your editor, then click on the Thirsty Affiliates “TA” button to add the link.

If you don’t see the TA button on your editor, you may need to enable it in the Settings screens.

Pre-Sell

Hard sell doesn’t work in affiliate marketing. A passive, pre-selling, approach adopted within high quality, evergreen, educational and informative content that illustrates to users how a product has been of benefit to you personally, is the secret to getting users to convert.

Make Your Life Easier With The Right Tools Of The Trade

Link Cloaker / Link Manager

I highly recommend cloaking your affiliate links. There’s nothing surreptitious about this. It’s just best practice to avoid commission theft. Disclosed links can be used together with malware injected into browsers that contain link hijacking scripts that swap your affiliate links for someone else’s with the objective of diverting commissions to another person. Link cloaking help to circumvent this.

A good link management plugin will not only cloak your links but will also manage your links from a central hub. Because a cloaked link uses your own domain, the only thing that need be done if an affiliate link changes for any reason, is to alter it in the plugin. It takes less than a minute to do and avoids you having to manually change links in all your posts. The cloaked link remains unchanged. The plugin simply diverts users to the correct vendor site using the updated link. One simple change applies to all posts. Image having to manually alter links on a large website with over 100 posts!

I use Thirsty Affiliates to take care of all of this and the beauty of it is that I can also set global options allowing affiliate links to open in new tabs as well as choosing the type of redirect needed (301, 302, 307). The premium version also searches existing posts for keyword and automatically adds affiliate links thereby enhancing your monetization efforts.

Link Tracking

Tracking affiliate links is crucial to an affiliate marketer’s success. Track your links to ascertain where traffic is coming from and what is working best for conversions. Spotting trends early allows for proper planning using concrete data and not wild guessing. Affluent allows me to track commissions, sales and clicks from all of my affiliate programs in one central dashboard.

Join The Top Affiliate Networks

According to 99firms.com these are the best affiliate networks by market share:

• Sharesale dominates market share with over 55.7%.
• Rakuten Linkshare: 40.64%.
• Avangate: 31.08%.
• EBay Network: 30.32%.

Each niche is different so don’t feel limited by those I’ve mentioned above.

For example, I belong to certain affiliate programs that are managed by Impact Radius.

The main thing is that an affiliate network affords a good deal of protection to affiliates. Not all vendors are honest. I know of vendors that remove tracking links from URL’s thereby avoiding commission payments to affiliate marketers. It’s just another form of commission theft that is easily avoided by being a member of a reputable affiliate network.

If you find an affiliate program that you want to join and it falls outside of a network, that’s fine. Just make sure you’re forming a relationship with a reputable vendor. Remember, if you go to bed with dogs, you wake up with fleas!

Summing Up …

Not only have I given you a list of the highest paying affiliate programs, I’ve also given you a good deal of information surrounding the use and implementation of the best affiliate programs to monetize your blog.

Your hosting (and site speed) now makes a marked difference to your SERP position. Cloudways offers the best all round value for money.

Have I left out any high paying affiliate programs that you’d like me to include in this post? Tell me in the comments.

Lastly, always remember that the highest paying affiliate programs may not always be the best affiliate programs for your audience.

Always do what’s best for your users. The rest will take care of itself.

Cheers for now.

Adam

It’s hard enough for a beginner to wade through the sheer mountain of information that’s out there on the internet and separate the wood from the trees, let alone start a WordPress blog.

That’s why I recommend Bluehost if you’re just starting out. They just make everything so easy. And if you access Bluehost through my link you’ll get a free domain name of your choosing and within minutes you’ll have a blog up and running with WordPress already installed.

Over the years I’ve only had good experience with Bluehost who are known for their exceptional customer service and uptime of over 99%. I image that’s why they’re recommended by WordPress.

The first part of this tutorial will guide you through the process to start a WordPress blog. It will only take you a few minutes. The second part deals with getting around the WordPress Dashboard and other things that will make your life real easy.

OK, let’s jump right in.

Set Up Your Blog

Head on over to the Bluehost website. [Yes this is an affiliate link but there’s no additional cost to you and you’ll also get a free domain name. I share absolutely everything I know with awesome people like you and the small referral fee that I make helps me to keep delivering the same high quality advice that you’ll always get from me].

Click on the Get Started button.

1. Select a plan. The $3.95 plan is perfect for a single website. You can always upgrade later on if you want to add another site to the same account.

2. Search for a suitable domain name.

3. Add your account information and complete payment.

4. You’ll get a success message.

5. Although you can’t see it, WordPress is already installed together with a free SSL certificate, meaning that your blog will be on the https:// protocol.

6. Click the button on that screen to proceed. Then enter your new password details and click Create Account.

7. Your account is now ready. Click the Go To Login button.

8. Login to your account.

9. Although the next few screens are optional, it will make your life eaier to complete them.

10. Enter the details on the site type screen and Continue.

11. Select Blog and About Me options.

12. Now add a name (Site Title) to your site. As an example to help you here, my site title is WPMediaMastery. Add a tagline – this is like a slogan. Continue To Theme Selection.

13. Pick a theme that appeals to you. Make certain to Activate it.

14. Then from the Bluehost panel, Login to the WordPress Dashboard.

15. In future, access WordPress direct from your browser as follows:

domainname.com/wp-admin

This takes you to the official WordPress login screen. Enter your signup email address and your password.

16. You will now arrive on the WordPress dashboard.

17. That’s all there is to start a WordPress blog. Congratulations!

Now let’s get our hands dirty.

Essential WordPress Settings

Hover over Settings and select Permalinks.

1. Choose the Post Name option.

2. This option shows the domain name followed by the post URL. It prevents meaningless URLs such as domainname.com/?p=2486etc.

3. Go to Discussion Settings.

4. Copy the image and make sure to disable pingbacks and trackbacks. I suggest comments should be manually approved and disable comment author to have previously approved comment.

Remove Unwanted Plugins

Personally I keep plugins to a minimum unless they’re absolutely essential.

Each plugin injects additional code into your site. Most of them include their code on every page of your site which is often unnecessary. The extra JavaScript and CSS gets in the way of the loading of posts and pages, negatively affecting speed. Furthermore, the more plugins that are installed, the greater the chance of conflicts.

So let’s get rid of some plugins that are automatically added with the installation.

Click Plugins.

Deactivate all plugins with the exception of WordPress Importer and WP Forms Lite. Then delete them. You can always reinstall a plugin later on.

The WP Importer plugin will allow you to import posts into your site. This is especially handy if you save your posts in a file and want to import them back into your site.

WP forms will be used to create a contact page.

How To Install Plugins

Hover over Plugins, then select Add New.

1. On the right hand side of the plugins respository, search for a plugin. When you find it click Install, thereafter click Activate.

Essential Plugins That You Must Install

Plugins should be kept to a minimum in order to maximize speed and reduce conflicts.

I prefer to use code snippets where I can and subject to availability on the internet. I’m not a coder myself.

The following plugins are, however, essential.

Rank Math SEO

Optimizing your site for SEO is an ongoing process that should become second nature and borne in mind with everything you do on your site.

Writing a post and then going back afterwards to get your SEO right is not only going to waste a lot of valuable time but you’ll also find that it adversely affects the flow of your writing.

The SEO process should start well before you even put pen to paper, so to speak.

A good SEO plugin is imperative, especially for beginners. It will help to point out where you are falling short in your optimization efforts with a view to correcting as much as you possibly can.

In short, it will help you to perfect your on-page SEO.

Yoast is also a really good SEO plugin but I switched to Rank Math SEO because it’s bloat free and includes structured data (snippets) functionality absolutely free.

I wrote a setup guide that will not only help you to get the plugin installed and configured with the optimal settings but also covers how to perform keyword research which is an essential part of on-page SEO.

According to the developer, this post is the most comprehensive tutorial on the internet with a link to the post being published on the developer’s WordPress plugin page.

WP Rocket

With website speed being an increasingly important Google ranking factor, a good caching plugin is imperative on shared hosting plans.

WP Rocket is constantly rated the best caching plugin in Facebook polls and it’s also the easiest to setup for beginners. It works out of the box and extra configurations involve a few toggle switches.

You mustn’t do without this one.

This guide will walk you through the optimal WP Rocket settings and configuration.

Antispam Bee

The native WordPress comments form is very susceptible to bot spam.

And so are most contact forms.

I’ve done a lot of testing and I can vouch that Akismet is really good. Unfortunately it’s not free for commercial use. This includes any website that is monetized in any way whatsoever.

Other than Akismet, I have found Antispam Bee to be the best of the free ones.

Force Secure Protocol (SSL) On All Site Pages

It’s best practice to to ensure that users are redirected to a secure version of your site, irrespective of whether they use a www or non www URL to access it.

At this time, your site can be accessed through 4 different URL’s:

• https://www.yourdomain.com
• https://yourdomain.com
• http://www.yourdomain.com
• http://yourdomain.com

Bluehost formats your URL without the www subdomain. In other words: domain.com.

If a user types in www before the domain, they will reach an insecure version of the site, maybe even get an insecure warning message.

Likewise if a users enters http://domain.com, the same thing occurs.

Google won’t like that. So let’s fix it.

1. Go to bluehost.com. On the top right of the screen, click Login and use your login details to access the Bluehost portal.

2. Click Advanced from the menu on the left side of the page.

3. In the file manager, right at the top on the far right side of the screen, click Settings.

4. Enable Show Hidden Files and Save.

5. Now click on the public_html folder in the left pane so that you see its contents on the right hand side.

6. Click ONCE on the .htaccess file to enable it. Then click Edit.

CAUTION: Do not make any other changes to this file or you risk being locked out of your site.

7. On the edit screen you will need to add a rewrite script to the top of the file. DO NOT add the script after the hashed out text as it will be removed. Make sure to add it right at the top of the file as shown.

8. You can copy the code from the black code box below this illustration.

RewriteEngine On 
RewriteCond %{HTTPS} off 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Changing Themes

If you skipped past the theme selection when you installed, you can follow this procedure to activate a theme.

1. From the dashboard, select Appearance > Themes. This takes you to the themes repository. Click Add New and find a theme that you feel happy with.

2. Click Install.

3. Click Activate.

4. From the dashboard select Appearance > Customize. Start customizing.

Premium Themes

The two major considerations for anyone wanting to start a WordPress blog are, in order of importance:

1. Hosting provider.
2. Theme choice.

Your theme will have a huge impact on the performance of your site. A fast, lightweight theme will perform much more efficiently than a heavy graphic-laden inefficient one.

WordPress Speed Optimization.

Here are some popular – not necessarily recommended – places where you can find premium themes.

Envato Market – Themeforest

I’d stay away if I were you!

I’ve had some terrible experiences here. Many of the themes are put together by developers who slap themes together on a part time basis to make extra cash.

Personally I find the marketing a little deceptive.

This is where problems arise. Themeforest have no qualms about mentioning future updates but what they don’t tell you is that you have to pay a yearly subscription in order to get them.

The problem is that if you neglect to update your theme and it becomes incompatible with a future version of WordPress (which updates regularly), you’re going to land up with problems.

Another issue that could crop up is the response time for support.

I’ve had instances where I practically had to beg for support and in one case I had to wait for over a month for the developer to fix an [apparently] major bug in the theme which required no more than fixing the syntax in a single line of code that couldn’t have taken longer than 20 seconds to sort out.

I added Envato Market to this list as a gentle warning.

StudioPress (Genesis Framework)

Powered by the Genesis Framework, StudioPress themes are the ultimate choice for serious bloggers. I should know because I use StudioPress themes exclusively..

Since the WordPress Gutenberg editor came on the scene, they’ve progressed from being highly developer orientated to being themes that beginners can use with absolute ease.

As a matter of fact, they’re much easier to start off with compared to the free themes in the WordPress repository because the themes come with demo content so you’ll have a fully functional theme and all you have to do is replace content and images. The free WordPress themes require customizing from the ground up. That will save you a fortune of time and effort and it just make these themes worth every cent.

StudioPress themes come highly recommended by Yoast, they’re endorsed by Matt Mullenweg – the founder of WordPress and they’re used by the likes of Google’s ex spam expert.

Do yourself a favor and take a look at the blogger testimonials in my StudioPress review or even better on the StudioPress website. They’ll give you an idea of the respect they command from the blogging community.

You’d be doing yourself a huge favor if you start a WordPress blog with a StudioPress theme.

You’ll get a lifetime everything deal which is super sweet considering that you’re investing in the best theme money can buy.

Your first theme purchase includes the Genesis Framework. You’ll never have to buy it again because it can be used with as many domains as you like, as can each theme. Future theme purchases are then substantially discounted.

Your purchase includes lifetime support and framework updates. No yearly subscriptions. No further costs!

They’re super lightweight and therefore blazing fast.

Mythemeshop

The guys who make these themes are the same developers who developed the Rank Math SEO plugin.

As a matter of fact, theme building is their core business.

As you can see, the pricing is very fair and completely transparent but they do charge an annual subscription. If you love one of their themes, you may be happy to overlook that.

Add A Logo To The Site Header

1. To add your own logo go to the dashboard go to Appearance > Customize.

2. Now click on Site Identity. NOTE: The logo option may also be found under a Header menu item depending on your theme selection.

3. Add your logo and a site icon. Site icons appear in browser tabs and as bookmarks e.g. on Googles search page.

4. NOTE: Make certain to click Publish when you’re done.

Add Menu Items to Navigation

1. From the dashboard go to Appearance > Menus

2. Select the menu that you’re going to edit and from the left sidebar, select the pages or posts that you want to add to the menu. Click Add to Menu.

3. You can also create custom links as well as create menu items based on categories.

4. The items you choose will be added to the right hand side. Simply drag the relevant menu item to the desired location.

5. You can create a sub menu that will drop down from a parent item by dragging and moving a menu item so that it is indented beneath a parent item, as follows.

6. You can edit the menu label of the menu item by clicking the down arrow and editing.

Add A Contact Form

I recommend that all websites include the following:

• About Page – This shows Google that there is a real person behind the website and helps to create trust.
• Contact Form – Shows Google that the business is contactable.

A contact form can be added using:

• Form Builder.
• Page Builder.

WP Forms is pre-installed and is the about the easiest way to make a contact us page.

1. Select All Forms from the WPForms menu at the dashboard.

2. On the WPForms interface click on the Add New button.

3. Then select Simple Contact Form. It’s pre-built so you can make a contact us page in a blink of an eyelid!

4. Edit the form by hovering over any field.

5. Click the Embed button on the interface. Then click Create New Page.

6. In the next screen, give the page a name, e.g. Contact.

7. The form will appear inside of a new page. Click Publish and confirm that you wish to publish. Done!

Writing Your First Post

Now that you’re all set up with a hosting account and a theme, it’s time to write your first post.

1. From the dashboard, hover over Posts and select Add New.

2. Add a title and paragraph as shown in the image below.

3. Click the + button.

4. Add an image, heading or whatever your heart desires.

5. On the right of the browser window you will see all sorts of options.

6. That should be enough to get you going. The rest is up to you.

Next Steps

Now that you’ve created a blog, I want to show you:

• How to setup Cloudflare.
• How to track metrics with Google Analytics.
• How to promote your blog posts on full autopilot.
• How to make money with your blog.

Let’s jump right in.

Set Up Cloudflare

I highly recommend using Cloudflare for the following reasons:

• Cloudflare is a CDN so your content will be cached and then distributed across multiple edge servers around the world and served from a location closest to your user. This makes a marked difference to site speed.
• Your site will be proxied through Cloudflare. This effectively hides your IP address and enhances security (eliminates DDoS attacks).
• It’s FREE.

1. Login at the Bluehost Website.

2. Enter the following address into your browser: https://my.bluehost.com/cgi/cloudflare

3. Your email address will appear on the next screen. Accect the terms and click next.

4. Click Activate.

5. When the grey box shows on the screen, click enable for every option.

6. Now go to the Cloudflare website and sign up using the same email address.

Tracking Your Metrics With Google Analytics

You don’t have to add Google Analytics to your site right away but I’d recommend that you do so at least before you make your site live.

That way you can monitor your site’s progress from the get go.

The easiest way to set up Google Analytics is install the Monster Insights plugin which displays your analytics within the WordPress dashboard – no need to leave your site.

Promoting Your Blog Posts On Autopilot

Promoting your blog posts on Social media is a great way to increase traffic to your site.

But it time consuming and tiresome.

There are a number of plugins that can help you to automate the process but each one comes with its own limitations.

In days gone by I used Jetpack to do this but it absolutely destroyed my website speed because it’s so resource intensive.

Now the great thing with the method I’m going to show you is that it doesn’t involve using a plugin. It’s all done with an online tool.

I’ll show you exactly how to publish your posts to Twitter (automatically), the moment you publish them in WordPress.

But remember, you’re not limited to Twitter. You can do the same with Facebook, Pinterest and the like. The procedure is roughly the same.

Once I show you how to use the tool, you’ll want to kick yourself that you didn’t know about it before.

This post shows you exactly how to set it up.

How To Make Money With Your Blog

Unless you’re doing this for enjoyment or a charitable cause, which is great, I’m assuming that you decided to start a WordPress blog to make money.

Well I’ll tell you this much. In the same way as there are many ways to skin a cat, so too are there a number of ways to make money blogging.

The problem is that most of the monetization methods you read about don’t work.

Heck, nobody wants to spend a good deal of their time doing something in exchange for a few measly cents, right?

Well that’s where Pareto’s 80/20 principle comes in.

It’s worked for me in all of my businesses: 80% of your income will be generated from 20% of your sales.

If you want to maximize your productivity and make some real money, I suggest you concentrate on the 20% of the income generating activities that will produce the bulk of your income!

Make sense?

Read about these monetization methods that really work.

Final Thoughts

Many posts have been written about how to start a WordPress blog.

But this is more than that. I wrote this guide with the clear intention of helping you to get to a point where you feel confident about making your own customizations and getting around the WordPress dashboard.

Naturally, there are going to be things that you come across along your journey that you haven’t seen before.

Trust me, I come across things that surprise me on a daily basis. I can’t believe how little I actually know!

In order to leave you with a more rounded feel for blogging, I have also touched on aspects of metrics tracking, promotion and making money through blogging.

After all, that’s probably why you decided to start a WordPress blog.

Or is it?

Let me know in the comments.

Genesis custom sidebars makes it easy to display different content on your posts and pages. And not surprisingly, the first thing that springs to mind is a plugin …

Well there is indeed a plugin made specifically for the Genesis framework but for speed purposes I prefer to keep plugins to a minimum.

Furthermore, plugins can be a double edged sword.

Whilst they’re quick and easy to install and use, they can be fraught with downsides.

Many great plugins have come and gone because developers have failed to keep them updated with the most recent versions of WordPress.

Additionally, plugins add some overhead to your website. And remember, one of the biggest advantages of the Genesis framework is that the developers specifically aim to avoid unnecessary bloat.

In order to avoid these pitfalls, it’s sometimes better to add functionality to your website by hard coding it.

Luckily, when it comes to the Genesis framework, there are a fortune of resources on the internet, supplied by both StudioPress and independent bloggers. Most times you will be able find code snippets to help you achieve the functionality you need.

If you’re not comfortable adding code to your functions.php file, by all means go ahead and use a plugin.

Genesis Simple Sidebars is a dedicated plugin that will help you display Genesis custom sidebars on different posts and pages.

Why Use Genesis Custom Sidebars?

As with most WordPress themes, the Genesis framework always includes a primary sidebar. (By the way, StudioPress do market a ‘No Sidebar” theme but then you wouldn’t be reading this).

Unless you add another sidebar, this single sidebar is displayed on all of your posts and pages – template dependent of course.

But what if you wanted to display different sidebar content on individual posts?

And what if you wanted different sidebar content on pages than what you show on posts?

In order to make your content the most meaningful for your audience, you’re going to want to change up your sidebar content from time to time.

You do this with Genesis custom sidebars.

Sidebar Options

While some bloggers prefer to remove and then replace the sidebar with their custom one, others may choose to compliment the primary sidebar with an additional one.

You may want to replace sidebars on pages, for instance and add to the existing one on posts – up to you what you want to do.

I’ll show how to do both and step through the code to give you a deeper understanding as to how this works within the Genesis framework.

Add To or Replace The Primary Sidebar

The first thing we’re going to do is to create or register a new sidebar (widget area).

The name field denotes the name that will appear in the widgets area of your dashboard.

In this example the name for the posts sidebar will be Blog Post Sidebar and for the pages sidebar, Static Page Sidebar.

We use the id fields to reference these further down in the code.

We do this for both Posts and Pages in order to create two separate sidebars.

/* Dynamic sidebar -- add or replace for single posts and pages -- */
// Register New Blog Post Sidebar

genesis_register_widget_area( array
( 'id' => 'blog-post-sidebar', 'name' => __( 'Blog Post Sidebar', 'my-theme-text-domain' ),
'description' => __( 'Primary sidebar for blog pages', 'my-theme-text-domain' ), ) );

// Register New Static Page Sidebar

genesis_register_widget_area( array
( 'id' => 'static-page-sidebar', 'name' => __( 'Static Page Sidebar', 'my-theme-text-domain' ),
'description' => __( 'Primary sidebar for static pages', 'my-theme-text-domain' ), ) );

Next we create an action to either add or replace the primary sidebar with our custom sidebar.

add_action( 'genesis_after_header', 'wmm_add_or_replace_genesis_theme_sidebar' );
/**
* Show custom sidebars in Primary Sidebar location for blog pages and static Pages
*/
function wmm_add_or_replace_genesis_theme_sidebar() {

if ( ! is_singular() || is_single() ) { // for archives and single post pages
/* // remove Primary Sidebar 
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); */

// show Blog Sidebar 
add_action( 'genesis_sidebar', function() {
dynamic_sidebar( 'blog-post-sidebar' );
} );
}

if ( is_page() ) { // for static Pages
/* // remove Primary Sidebar from the Primary Sidebar area
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); */

// show Page Sidebar in Primary Sidebar area
add_action( 'genesis_sidebar', function() {
dynamic_sidebar( 'static-page-sidebar' );
} );
}

}

NOTE: The above code below adds the “Blog Post Sidebar” and “Static Page Sidebar”.

If you prefer to remove the Primary Sidebar, you must un-comment the following lines from the full code below by removing /* and */:

/* // remove Primary Sidebar
remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ ); */

AND

/* // remove Primary Sidebar from the Primary Sidebar area
remove_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ ); */

HERE IS THE FULL CODE:

/* Dynamic sidebar -- add or replace for single posts and pages -- */
// Register New Blog Post Sidebar
genesis_register_widget_area(
array(
'id' => 'blog-post-sidebar',
'name' => __( 'Blog Post Sidebar', 'my-theme-text-domain' ),
'description' => __( 'Primary sidebar for blog pages', 'my-theme-text-domain' ),
)
);

// Register New Static Page Sidebar
genesis_register_widget_area(
array(
'id' => 'static-page-sidebar',
'name' => __( 'Static Page Sidebar', 'my-theme-text-domain' ),
'description' => __( 'Primary sidebar for static pages', 'my-theme-text-domain' ),
)
);

add_action( 'genesis_after_header', 'wmm_add_or_replace_genesis_theme_sidebar' );
/**
* Show custom sidebars in Primary Sidebar location for blog pages and static Pages
*/
function wmm_add_or_replace_genesis_theme_sidebar() {

if ( ! is_singular() || is_single() ) { // for archives and single post pages
/* // remove Primary Sidebar 
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); */

// show Blog Sidebar 
add_action( 'genesis_sidebar', function() {
dynamic_sidebar( 'blog-post-sidebar' );
} );
}

if ( is_page() ) { // for static Pages
/* // remove Primary Sidebar from the Primary Sidebar area
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); */

// show Page Sidebar in Primary Sidebar area
add_action( 'genesis_sidebar', function() {
dynamic_sidebar( 'static-page-sidebar' );
} );
}

}

• Speed up your site with system fonts
• How to self host Google Fonts

That’s all there is to creating and using Genesis custom sidebars.

Hope you found this post useful.

Let me know in the comments section.