Your site makes requests to the server for various operations like fetching data, submitting forms, and processing user actions. Too many server requests can slow down your site's performance and affect the user experience. By implementing the right optimization techniques, you can reduce unnecessary server requests and make your site more efficient.
Below are several approaches to optimize your server requests:
When the data that's displayed changes based on visitor interaction, you should consider storing downloaded data. Download all the data you'll eventually need and store it for later instead of downloading it incrementally as it's needed. Since you've downloaded all the data upfront, when you need to change the data that's displayed, the page transitions smoothly. If you downloaded new data every time a visitor interacts with the page, the page would react slowly and you might end up downloading the same data several times.
For example, suppose you have an index page that displays a large number of items, but it's filterable, so they're not all shown at once. When a site visitor chooses a filter from a dropdown, the subset of items that you display changes.
Download all the items when the page loads and store them in a variable. By default queries return up to 50 items, but you can increase the limit up to 1000.
Note: Larger limits increase initial load times, but you can optimize this by downloading only the fields you need and using delayed loading techniques to load visible items first.
Then, every time you need to get a new subset of the data, filter out the data you don't need. Filter the data once when the page loads and then every time the value in the dropdown element changes. When the filter changes, you don't have to download any new data. Instead, you just pull the relevant items from the data you already downloaded.
Often you use the same data on more than 1 page of your site. Instead of retrieving the data on each page when you need it, you can retrieve it just once the first time you need it. Then, you can store the data to use on other pages.
For example, this code retrieves data that may be used on multiple pages. You can place it on each page where the data is needed, or in the site code if you want it available on every page. When the page loads, first check local storage to see if the data already exists. If it does, the stored string is parsed as a JSON object and saved in the data variable for use on the page. If the data isn't present in local storage, the code queries the collection, stores the resulting items in the data variable, and also saves the data in local storage so it can be accessed on other pages without querying the collection again.
Note: Depending on your site's specific needs, you may want to use another type of storage. To do so, you simply substitute the type you want to use in the import statement. To learn more about the types of storage, see the storage API.
Use bulk operations to perform actions on data in larger groups instead of repeatedly calling single-item functions. Bulk operations reduce the number of server requests, count as a single operation for data quotas, and improve overall performance.
For example, instead of inserting items one by one, use bulk insert to reduce server requests:
Batch multiple backend requests into 1. Make sure not to batch time-consuming requests together as there's also a time limit for backend requests.
Instead of calling a series of backend methods from your frontend code, like this:
You can batch the requests together in the backend and make 1 call to the batch method from the frontend, like this:
Frontend code
Backend code
Avoid repeating large database requests or complex calculations. When possible, cache the result.