UPDATE: I left Headless React, here’s why.
If you have been with Dog Byte Marketing for some time, then you’ll remember the old pink design I did a couple years ago. It was on WordPress and it was not the fastest.
If you recall the article Does Page Speed Affect SEO you’ll recall Dog Byte Marketing scoring a 58. Not horrible, but it took a ton of research, experimenting, and time to get the score up. Even after all of the work, DBM still felt slow. So I set out yet again on a journey to become the fastest, and after discussing with friends, and hearing about React, I set out to learn it. It took 2 months of my free time to build DBM from the ground up in React, but with the help of friends and useful frameworks such as Gatsby and GraphQL it got easier. Dog Byte Marketing now scores a 95 via Lighthouse.
What is Gatsby?
Gatsby is a Static Site Generator. If you have ever built Android applications, you’ll know that you have to compile your apps into an APK. Gatsby is essentially the same thing. It queries the WordPress API through GraphQL and compiles every page, post, ect into static files. This means that you query the database one time during compilation and after the site is generated only static files are served, which means there is no load on the server. In fact, I chose to use Netlify to host my static site, so my server isn’t even being used, except for building the application. My WordPress instance isn’t even stored on the same server.
What is Netlify?
Netlify is essentially a cloud host. It’s widely used for React applications and it’s one of the easiest hosting platforms I’ve ever worked with… plus it’s FREE? Yea! You get up to 300 deployments per month. I’m not sure of any bandwidth limitations yet, but if it arises I’ll be sure to update the article. Another cool thing is that once the code is built to handle WordPress I can simply use the same WordPress post creator and when I save, it will trigger a rebuild on the Netlify server to pull in the new data. While it is a bit slower since it will redeploy from the repository and doesn’t have smart deploy like Gatsby Cloud, it is still highly convenient.
What is a repository?
A repository holds your codebase. There are repos such as GitHub and Bitbucket, which link to Netlify, so when you push your code from SourceTree or Git, it sends it up the cloud to the repo and then Netlify handles building your code and pushing it live. Having a repo is convenient, because if you break anything you can simply revert the repo and it daisy chains to live. I use to use repo’s before React, but with it being used in server application it could potentially break your application if you reverted, because WordPress for example has plugin updates, some of which make changes to the database, if you revert them, it can cause your application to break, leading to more debug time.
What is smart deploy
I plan on trying it, but I have not yet dug into Gatsby Cloud. Essentially Gatsby Cloud is similar to Netlify, but with one major feature, smart deployments. Instead of taking minutes to compile your static site, Gatsby Cloud scans for changes and only compiles what has changed. This can take minutes down to seconds.
How much faster is it?
In testing I was seeing 99, but it’s now sitting around 95 after deploying live. This can and is most likely due to added third party applications, such as Commento, as third party scripts do have weight to them, which you have to take into account. There are things you can do such as deferring them, but Google appears to still count it against you, so something along the lines of loading the script after scroll may make more sense, considering comments aren’t needing to load right at the beginning of the post.
Why did you use Commento?
Honestly? It was simpler to integrate, is open source, free, and easy to style. While I could use WordPress I would be querying my database and putting unnecessary stress on my server, which I use for other applications. Either way I would be pulling in data which would require additional resources, so I decided to use the free route, which is working fine.
Why switch to Gatsby if PageSpeed Insights didn’t get much higher?
While I did manage to get an 89 on WordPress without going Headless, I can understand your concerns on why you should upgrade to only gain 10 points. I’d like to mention something I haven’t brought up and that is Gatsby has a built in PWA (Progressive Web App) integration, which I feel doesn’t do the numbers justice.
What does a PWA do for Gatsby?
While 10 points doesn’t seem like much of a difference, you would be right. Some of my pages have scored lower than the old non headless Dog Byte Marketing site, there’s something behind the scenes that I feel Google doesn’t take into account, and that’s the PWA. The PWA is a Service Worker, funnily enough created by Google. What it does is create a worker that runs in the background of the browser. This can be used to send push notifications or install the website to your homescreen. (similar to an app.)
But even if you don’t install it, it still runs in the background to store a cached version of the site via LocalStorage. When Google runs PageSpeed insights, the crawler doesn’t have these capabilities to run the Service Workers. Meaning it can’t take advantage of the performance benefits of it. You probably noticed DBM is fast, but if you notice, navigating to a different page such as our services page… it’s instant. This is the power of the PWA, something that is very difficult to do without going headless.
Have questions? Feel free to drop a comment or contact me directly.
Leave a Reply