Ensuring Uncached Pages Load Fast
Before a page can be cached, it must first be rendered as a response from the server-side rendering server. With that in mind, we want to ensure that rendering of responses is as fast as possible. This is important for both users’ experience and for SEO. While users may abandon a site that’s slow to load, Googlebot has an upper bound on how long it will wait for the first byte when crawling. If your rendering of the page exceeds that limit, Googlebot won’t crawl your page! To avoid this, we need to keep the response time under three seconds, and ideally much quicker.
Your PWA’s rendering speed correlates directly to the amount of time it takes to fulfill these requests. Consider the following techniques to improve response times:
- Test and monitor your API response time
- Check that your Mobify target is as close to your API datacenter as possible
- Use cache control response headers on your API responses, where possible
- Reduce the size of your state management system’s data in the response from the Express app, which will decrease the size of your initial HTML, making it quicker to load
In many cases, there are two main culprits that slow your PWA’s uncached rendering time: network requests to get data for the page on the server-side, and the speed of parsing.
When building your page on the server-side, strive to have the Express app make as few external requests as possible, and avoid making requests in serial. Ideally, all data for a page should come from only one external request, or two requests made in parallel. Making more than a few external requests, or making the requests in serial will drastically reduce performance. In addition to external network requests, a significant contribution toward initial load speed is the time it takes for requests to get from the Express app to the backend server, and for the responses to be returned.
For builds using a scraping connector, the speed of parsing can also have a significant impact on rendering time.
In general, strive to do the least amount of work necessary to render the page. Wherever possible, avoid long-running computations or multiple React rendering passes, which will slow down server-side rendering.