From WordPress to JAMstack: How to make your website 10x faster

Community Articles
Community Articles From WordPress to JAMstack: How to make your website 10x faster

Performance matters. If you are familiar with JAMstack, the movement encourages avoiding server-side rendering completely in favor of pre-build, purely static HTML pages. By serving only JavaScript, APIs, and Markdown (JAM) over a CDN, a website's performance is dramatically increased, making for a much better user experience.

If you have an existing WordPress website, you may be familiar with slow page load. This can be due to server-side processes that occur prior to even getting to the HTML. If you are looking to make the switch to a better experience for your users, it might be time to switch to a JAMstack website. And making the switch may be easier than you think.

In this tutorial we're going to import existing WordPress content into a JAMstack website, deploy to Netlify, then perform Lighthouse tests on the two versions to determine if there are any significant performance gains. (Hint: there are 😁)


TL;DR

1. Install the Gatsby Blog, a ready-made JAMstack website powered by Gatsby and the Cosmic Headless CMS.
2. Import existing WordPress posts into Cosmic using the WordPress Importer.
3. Deploy the Cosmic-powered website to Netlify.


Getting Started

First we'll need to install the Gatsby Blog available in the Cosmic Apps Marketplace.


After we install the app to a new Bucket, we'll need to install the WordPress Importer Extension. This can be found by navigating to Your Bucket > Settings > WordPress Importer.


Follow the directions in the Extension to import your WordPress posts.

After importing your posts, you'll see that our Posts Object Type now includes the imported WordPress posts, that was easy! Now let's deploy this sucker.


Deploy πŸš€

1. Install the Deploy to Web Extension.
2. We'll go ahead and deploy to Netlify since they've perfected the art of JAMstack hosting, plus they invented the JAMstack term to help us wrap our heads around the concept.

3. Add the Cosmic Gatsby Blog GitHub repo URL to the input and click the Deploy to Netlify button:

https://github.com/cosmicjs/gatsby-blog-cosmicjs

After we add our Gatsby Blog GitHub repo to Netlify, we'll need to set up our environment variables in Netlify to connect to Cosmic prior to deployment. Go to Sites Settings > Build and Deploy to add the environment variable COSMIC_BUCKET with the value set to your Bucket slug. If you set a read key in your Bucket settings, add that here also as COSMIC_READ_KEY.



Now go to the Deploys tab and Trigger deploy πŸš€πŸš€πŸš€


Compare 🧐

Now that our new JAMstack website is deployed, let's compare performance between the old WordPress website and our new Cosmic-powered JAMstack site. Open the Chrome console and run the Lighthouse tests on each website. Check out the results below (though the design is different, the post count on the page is roughly the same).


WordPress TechCrunch
https://techcrunch.com



Gatsby, Cosmic, JAMstack TechCrunch
https://wordpress-to-cosmic.netlify.com


As you can see after running the Lighthouse tests our Cosmic-powered Gatsby JAMstack website blows the WordPress site away with a massive performance increase. And check out the transitions between pages on the JAMstack version, it's πŸ”₯


Conclusion

I hope you enjoyed this tutorial on how we can build a dramatically faster web experience by moving from WordPress to a Cosmic-powered JAMstack website. Try it out for yourself and you may be surprised how easy it is to make the switch. Your users will thank you.

Join the conversation around API-driven content management, JAMstack and new web tech on Slack and reach out to Cosmic on Twitter.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


This is a JAMstack app with the power of Cosmic. In JAmstack, Vue.js is used as Javascript part, Cosmic as API and Nuxt.js as Markup.
In this tutorial I'm going to demonstrate how to build a photography portfolio website using React, Styled-Components and Cosmic. Let's get started.
In this walkthrough, I'm going to show you how I build a blog application in Go Lang. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku.
Metadata is extremely important for SEO as it speaks to search engines directly from each page crawled, to communicate important information or request a specific action from the search engine. Cosmic provides an easy modal to manage media metadata.
With revision history, you no longer have to worry about editing mistakes. You now have the power to go back in time and revert to to prior versions.
One of the largest problems I’ve faced while working on projects is having to deal with integrating content and events into third-party services.It’s time consuming, and as the demands in the application in question grows, so does the mental strain in having to keep up to pace with all the changes

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales