Pressable’s fast and secure platform is perfect for those looking to create Decoupled, often called Headless, WordPress sites.
This guide delves into key strategies and best practices to maximize the performance and reliability of Headless WordPress Sites hosted on Pressable, emphasizing endpoint usage, rate limiting considerations, build optimization, and caching.
While other methods are available, this guide currently only covers Headless WordPress implementations that use WPGraphQL paired with Next.js or Nuxt.
WPGraphQL
WPGraphQL is a powerful and flexible tool for building Headless CMS sites powered by WordPress. As a free, open-source WordPress plugin, WPGraphQL provides an efficient and structured way to interact with your WordPress site’s data using GraphQL, a modern query language. It enables developers to fetch the exact data they need through a single API endpoint.
Frontend Applications
WPGraphQL can be leveraged by applications, such as those built with Next.js or Nuxt, to create decoupled frontends.
Examples & Guides
Note that the following linked resources are external guides written by third parties. Pressable cannot provide support related to setting up these implementations and we do not provide guarantees related to the content and results.
- Using Headless WordPress with Next.js and Vercel
- How To Create A Headless WordPress Site On The JAMstack
Required GraphQL Endpoint
For optimal performance, Pressable requires the use of the standard /graphql endpoint created by WPGraphQL. This is crucial for the seamless functioning of your Headless WordPress site. Using alternative endpoints may result in rate limiting.
Rate Limits
WPGraphQL rate limiting may be indicated by 429 HTTP errors. If you encounter this error during builds, please ensure you’re leveraging the /graphql endpoint. If you are using NextJS, then we also recommend leveraging Incremental Static Regeneration (ISR) with the nodeByUri query.
GraphQL Endpoint
Pressable requires the use of the standard /graphql endpoint created by WPGraphQL. It’s crucial that this is used, as using any alternative endpoints may result in rate limiting.
Custom User-Agent
You may also need to set up a custom UserAgent for your requests rather than using the default. For example, a UserAgent string with the following format: name-of-your-app/1.0
If any problem still persists with rate-limiting, contact Pressable’s support team for assistance.
Build Optimizations and Caching
Optimizing your build process and implementing effective caching strategies can significantly enhance your site’s performance and optimize your site’s resource utilization.
We highly recommend reviewing WPGraphQL’s caching resources, even if you do not plan to implement WPGraphQL Smart Cache.
Build Process Guidelines
Fetching
Headless WordPress sites should aim to keep fetching to a minimum. To do this, we recommend leveraging Incremental Static Regeneration (ISR) with the nodeByUri query.
Throttling Builds
For build processes, especially on platforms like Netlify, we recommend throttling your build concurrency when possible.
For example, the following is advisable for Netlify users.
- Build Concurrency: Keep it below 1000.
- Build Interval: Maintain an interval of 100.
WPGraphQL Smart Cache
The WPGraphQL Smart Cache extension offers an efficient caching mechanism.
The project’s recommendations can help reduce build times and resource utilization. Please review the following external resources thoroughly.
To fully leverage WPGraphQL Smart Cache’s benefits, follow these steps
- Adjust HTTP Methods: Change your client to use GET instead of POST. This is a key requirement for utilizing WPGraphQL’s Smart Cache.
- Configure Cache Settings:
- Navigate to
GraphQL → Settings → Cachein your WordPress dashboard. - Set Cache-Control max-age to your preferred duration (minimum recommendation: 1800 seconds).
- Enable Use Object Cache.
- Set Object Cache Expiration (recommended: at least 1800 seconds).
- Navigate to
Additional Caching Recommendations
To further enhance your site’s performance, consider the following.
- Extend Batcache: Customize and extend Batcache for your site. Learn more in Modifying Cache Times in Batcache.
- Enable Edge Cache: Utilize Pressable’s Edge Cache for improved site performance. Detailed information can be found in the Edge Cache guide.
- Cache Invalidation Tools: To efficiently manage cache invalidation, leverage one or more of the following:
- Pressable API for managing sites in bulk.
- SSH & WP-CLI for advanced site management.
- Pressable Cache Management Plugin for easy cache control.
Scope of Support
Pressable’s support team is unable to provide extensive support for the setup and creation of headless frontends. If you encounter issues with installing related WordPress plugins, adding content to your WordPress site, or 429 HTTP errors, please reach out and we’ll be happy to review things with you.
For issues with accessing, building, and troubleshooting your front-end applications, please consult with the third-party provider hosting your application and related framework documentation.
More on our support scope can be found in the What Pressable Can Do and How We Can Help support article.