Performance matters. If you are familiar with , 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. JAMstack 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 , then perform Lighthouse tests on the two versions to determine if there are any significant performance gains. (Hint: there are 😁) Netlify TL;DR 1. Install , a ready-made JAMstack website powered by Gatsby and the .2. Import existing WordPress posts into Cosmic JS using the .3. Deploy the Cosmic-powered website to . the Gatsby Blog Cosmic JS Headless CMS WordPress Importer Netlify Getting Started First we’ll need to install the . Gatsby Blog available in the Cosmic JS Apps Marketplace After we install the app to a new Bucket, we’ll need to install the . This can be found by navigating to . WordPress Importer Extension 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 🚀 There are a few options to deploying our website located in . We’ll go ahead and deploy to since they’ve perfected the art of JAMstack hosting, plus . Bucket > Settings > Deployment Netlify they invented the JAMstack term to help us wrap our heads around the concept After we add our to Netlify, we’ll need to set up our environment variables in Netlify to connect to Cosmic JS prior to deployment. Go to to add the environment variable with the value set to your Bucket slug. If you set a read key in your Bucket settings, add that here also as . Gatsby Blog GitHub repo Sites Settings > Build and Deploy COSMIC_BUCKET 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 tests on each website. Check out the results below (though the design is different, the post count on the page is roughly the same). Lighthouse 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 , it’s 🔥 the JAMstack version Conclusion I hope you enjoyed this tutorial on how we can build a dramatically faster web experience by moving from WordPress to a Cosmic JS-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 and . on Slack reach out to Cosmic JS on Twitter

Google

Slack

Techcrunch

Twitter

How to Build an E-commerce Website with Nuxt and Cosmic JS

Integrating API-first optimized video using a Headless CMS

cosmic js

Read My Stories

Too Long; Didn't Read

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps