Optimizing Prismic API Usage: Why It Might Be Higher Than Expected

Prismic Administrative Support FAQs
, ,
1

Large projects naturally generate more API hits and consume more CDN bandwidth. However, some projects may be consuming more than necessary due to specific implementation details. Here are some potential causes to investigate if your project is experiencing unusually high API consumption or bandwidth usage.

Check out our FAQ explaining these limits.

1. API Hits Are Too High

This occurs when the number of Content API queries required to build a page is higher than it should be. Below are common issues that can contribute to this:

  • Client-Side Rendering:

    • Client-side requests trigger every time a user visits a page, meaning each visit can result in multiple API requests.
    • Avoid client-side requests when possible. Instead, use server-side requests to enable caching across users. Prefer Static Site Generation (SSG), which will significantly reduce API requests since they only happen at build time.

  • Deeply Nested Content Modelling:

    • Pages rely on many nested content pieces, requiring multiple API requests to load fully.
    • To resolve this:
      • Use slices to consolidate content into fewer API requests (ideally one per page).
      • Consider using the GraphQuery REST API to fetch nested content in a single request.
      • If your navigation is deeply nested, check how Prismic's navigation was built in their own guide: prismic.io navigation guide.

  • Single Document Querying:

    • Whenever possible, query multiple documents at once (you can fetch up to 100 documents using the pageSize option).
    • Use GraphQuery or fetchLinks to retrieve deeply nested content in a single request. These tools allow you to fetch up to two levels of nested content in one query.

2. CDN Bandwidth Is Too High

This generally results from serving large, unoptimized assets. Consider the following recommendations:

  • Optimize Assets:

    • Avoid serving large videos directly from Prismic's Media Library. Instead, use a dedicated video hosting provider.
    • Ensure you're using the default Imgix optimizations for images (auto=compress,format) to reduce file size and improve load times.

  • Optimize Images:

    • Use Prismic’s image components specific to your framework (e.g., PrismicNextImage for Next.js, prismic-image for Nuxt).
    • If you’re using another framework, make sure to serve smaller images for smaller screens. Prismic offers responsive image views that can automatically generate different image sizes: Managing Images.

  • Bandwidth Induced by Content API:

    • If you only need specific fields from a document, use GraphQuery to perform selective fetching. This will reduce both bandwidth usage and query times.

By optimizing your content fetching strategies and ensuring efficient media delivery, you can significantly reduce API hits and bandwidth consumption, ensuring a more efficient and cost-effective Prismic setup.