Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
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 JS Headless CMS.2. Import existing WordPress posts into Cosmic JS 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 JS 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 š
There are a few options to deploying our website located in Bucket > Settings > Deployment. 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.
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 JS 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 TechCrunchhttps://techcrunch.com
Gatsby, Cosmic, JAMstack TechCrunchhttps://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 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 on Slack and reach out to Cosmic JS onĀ Twitter.
From WordPress to JAMstack: How to make your website 10x faster was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.