Work dot Com

How I Made A WordPress Site with a 100 Score on Google Pagespeed Insights

While saving over $100 / month on Wordpress hosting. (Oh, and this isn't an ad, even though it sounds like one.)

How I Made A WordPress Site with a 100 Score on Google Pagespeed Insights

I’m really thrilled about this. As a poor person who creates tons of websites that have a ton of traffic but are totally free and make negative dollars, I feel like I’ve found the Holy Grail. But before I get into the details, two quick things:

One, none of the following links are affiliates/sponsored (I don’t abide that sort of thing here).

Two, this path isn’t for everyone, but I’m going to lay it out for those of you who want to walk it.

Just wanted to get that out of the way, because I know that the excitement that’s bubbling out of me might be misread as a sales pitch or proselytizing. It’s not.

We good? Good. Omg. Can I tell you how excited I am?!

The Backstory

I’ve overhauled the code/design of this blog about seven times now. And I’ve changed hosting providers three times. This is the first time I’ve made a change that I would describe as fundamental.

This site has always been powered by WordPress. It still is. And the changes have all been roughly the same, up until now: improve the codebase, and pay more for hosting because I’m exceeding my usage.

Most recently, I was hosting this blog with WP Engine. Their “Growth” plan weighs in at $115/month, and while they definitely provide quality (both in the speed of their servers and their customer service), that’s a lot of money to be paying monthly for a personal blog. 

But I had exhausted all of my other options. The shared server hosting plans I was on before (e.g., Bluehost) generally say there is no usage limit in their marketing materials, but as soon as your usage starts to crash all the sites on the shared server, they change their tune.

The problem is that WordPress is incredibly resource-intensive to host.

Every time someone visits a WordPress-powered site, the server gets hit with a bunch of database requests, and every plugin, bell, and whistle you add, increase the load. And if your WordPress theme is poorly coded, that adds even more strain.

So it’s expensive to scale.

If you have fewer than 10K visitors a month, and you’re not using a lot of database-intensive plugins, you’ll probably be fine on a shared hosting plan. But beyond that your hosting bill starts to increase commensurate with your traffic. 

That WP Engine plan I mentioned above? It’s only good for up to 100K visits a month. After that, you need to more than double your bill, $290 / month, which will cover you until 400K.

Now, I mentioned above, that this change I made is fundamental. But I also said I’m still using WordPress. So what gives?

Enter JAMstack (Get Ready for Jargon Overload)

I’m about to get into some technical web trendy type stuff, but for the non-technical readers I’ll define everything you need to make sense of what will follow below.

(For my technical readers, you can kindly skip this section, because it’s not for you; or, even better, read it and lemme know if I messed something up.)

Okay, so, what are we jamming where? Answer: The stack. Everywhere it fits.

To quote the gospel, JAMstack is a:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

That’s the JAM (JavaScript, APIs, and Markup) part.

For those unfamiliar, “stack” refers to the different layers of software that combine to form a website or application.

A “full stack” means all the code that runs the server, database, and programming language (e.g., Apache, MySQL, PHP), plus the stuff that shows it to you (e.g., the HTML, CSS, and JS).

It’s all the magic that happens behind the scenes every time you click a link or type in a URL.

JAMstack, also called “static” or “serverless” sites, is a methodology that is quickly becoming the trend. And for good reason: static sites are fast, secure, and they scale effortlessly (and inexpensively).

Now that the vocab lesson is over, as soon as I started hearing about JAMstack I’ve been looking for ways to apply it to my projects.

A few months ago, as an experiment, I overhauled my professional homepage and online curriculum vitae, samuelKillermann.com to create my first JAMstack site.

That site was formerly a WordPress site that kept getting really close to exceeding its usage on a shared hosting plan, which would have required me shelling out more ducats.

But converting it to a JAMstack site has resulted in (so far) a 100% free hosting bill on Netlify. That’s not a lot of ducats, which is great, because that’s the exact amount I have.

(I built my CV site with Hugo for static site generation, and wrote all the overhaul there, if you’re curious, and you can view my source code on GitHub

As an experiment, it was a complete success.

For the past few months, it’s had more traffic than usual, experienced no outages or brown outs, and is super-duper fast. It’s also nigh unhackable (not a challenge!).

I’ve loved running that site, but I can’t leave WordPress for all of my projects, for more reasons than are worth getting into here. But here’s a good enough reason: most of my collaborators aren’t up for learning the command line or git, which is how I update that site now.

So most of my sites are, and will have to continue to be, WordPress. 

A New Challenger Approaches: WordPress, JAMstacked

I started looking into migrating my WordPress sites from WordPress to a static site generator (e.g., Hugo supports WordPress migration), but I kept butting up against the need to keep using WordPress, not just keep my content from WordPress.

For a few of my projects, this would work, so I started the laborious process of migration. But for a lot of my work, I was faced with either (A) I JAMstack my sites, or (B) I continue collaborating with non-technical people.

And with that ultimatum, I gave up hope, and consigned myself to that 2019 with a five figure website hosting bill B lyfe.

But then! A twist!

I was listening to a really nerdy, not sure I’m comfortable admitting it podcast, and heard about Shifter, which is a static site (JAMstack) generator + hosting service for WordPress, not for migrating from Wordpress.

In case you don’t get how big of a deal this is, let me repeat it a different way: Shifter takes all the good stuff that I didn’t think I could possibly have with Wordpress (affordable scalability, speed, security), and let’s me keep having WordPress (easy CMS, non-technical collaborator friendly).

</mnightshyamalan>

The way Shifter works, basically, is:

  1. You create a WordPress site the same way you usually would (create/install a theme, add your plugins, add posts and pages and media); 
  2. Then, whenever you’re ready to publish an update (e.g., a new blog post or page) you hit a “generate” button;
  3. A bunch of magic happens. I assume elves are involved. 
  4. A new static version of your site (with all of your posts, pages, taxonomies, menus, updates — all of it) replaces the old one, and your new thing is there for your reader’s pleasure.

Now, this Fairy Tale is not without a set of heroic compromises.

What Words Shifter Can’t Press

Did I just have a stroke? Nope! I just tried a joke that clearly doesn’t work in text, and stuck with it cuz I am a maverick.

Fear of Missing Out?

Join the mailing list, get posts in your inbox, or subscribe in other ways to get the latest & greatest.

Show me options.

Taking a short break from doting on Shifter, here are a few things that — because of the nature of static site generation — Shifter-powered WordPress sites cannot do (that a traditional server-powered WordPress site could).

1. No plugins that work by allowing a website visitor to interact with your site’s database.

For example, I recently built out online courses on The Safe Zone Project, and the way those work is user’s enroll in a course (which creates them as a user in a database table), then are able to access its lessons, and chart their progress (which uses another database table) — all powered by WordPress.

That’s not going to work with Shifter. 

Luckily, there’s a ton of third-party services that interact well with WordPress, but handle all the interactions on their own servers, so this isn’t a huge dealbreaker.

For example, instead of using LearnDash (how I built the SZP site), I could have used something like Podia.

2. No native WordPress search.

I always incorporate WordPress’s native search in my sites, and none of the third-party offerings (e.g., Google, or Algolia) seem like they’re better enough to justify all the extra work and code.

However, in the grand balance, this is an acorn of complaint against an acorn squash of bountiful static WordPress glory.

3. No query strings in the URL for sorting or categories or what-have-you.

I’m sure that 99.9% of people running WordPress sites won’t notice this, and couldn’t care less, but I love building sites that use publicly query-able variables.

For example, on this here very site, the /all page used to be sortable by category and date, all using URL variables.

There are workarounds, I know. But the simplicity and elegance of having one page for the user that could do all that magic — and not having to rely on a jQuery library or other trickery — is something I’ll miss.

4. No WordPress Popular Posts Plugins (or similar)

I’ve always had WPP installed on this site (and most of my sites), because I like to be able to dynamically serve up popular content to viewers. It’s fun seeing the ranks ebb and flow, and knowing that if someone comes back tomorrow the list is likely to be different.

But, again, this definitely isn’t a dealbreaker. The way I’m replacing it (short-term solution until I think of something more hands off), is simple: writing the list myself.

K. Back to the Doting: Why I’m a Shifter Super-fan, One Week In

Let me count the ways: 

  1. I’m paying $20 for hosting.
  2. They’re a new service, so there isn’t a ton of documentation, but their customer service has been outstanding so far.
  3. This site, a non-brutalist WORDPRESS SITE, is getting a Google PageSpeed score of 💯(where before, I was in the high 80s, with $115 hosting)
  4. I’m paying $20 for hosting.

We’ll see how this goes. I’ll update this post, or link to a sequel, if I have anything different to say. In the meantime, if you’re reading this, the site isn’t down (yay!) and it’s fair to presume I’m still grinning ear-to-ear about this migration.