What to do if some elements are not loaded on the page
  • 14 Feb 2024
  • 2 Minutes to read
  • Contributors
  • Dark
    Light
  • PDF

What to do if some elements are not loaded on the page

  • Dark
    Light
  • PDF

Article Summary

What element is not loaded on the cached page? 

Images are not loaded 

In the Advanced Settings menu under "Image Loading" enable the option. The setting might take up to an hour to take effect.
If the setting has been enabled for at least an hour try to recache manually one of the pages where the images were missing and check if the setting fixed it. 

By default this option is disabled because pictures aren't interpreted by bots, they use meta tags and the alt text of the images to index them.
So rendering the images would just waste rendering time in such cases.
However, in some cases, other parts of the page are only loaded if the picture is also loaded.

Elements from the bottom of the page are missing. 

This issue might be because your page is lazy loading, meaning that only the section of the page currently in the screen will be loaded.
To solve this issue you will need to increase the height of the viewports.

Under the Advanced Settings menu find the "Rendering Devices" section and select one of the resolutions that contain "Lazy Loaded" in their name.
If that is done scroll down on the page and save the change, the setting will take effect in an hour.
To test if this solved the issue, you will need to recache one of the pages where you had this issue. 

Other element(s) missing

This might be because Prerender reached the rendering timeout threshold set up on your account.
For example, if you see a loading gif on the cached page might be an obvious giveaway if this is the issue.
You can also check the CDN Analytics menu or the Render History menu for the URL to see if the rendering time is highlighted in red. 




To resolve this issue you can increase the aforementioned timeout threshold or you can let the Prerender service know exactly when your page finished loading.

You can increase the timeout threshold from the Advanced Settings menu under "Rendering Timeout".
Just make sure to scroll down to the bottom of the page to save the setting. 


You can let the Prerender service know when the page is fully loaded by adding this snippet: <script> window.prerenderReady = false; </script> into your page's head section and then change the window.prerenderReady flag to true when the page is loaded. We suggest changing the variable's value to true using a condition/logic that is tied to an event that only happens if the page is fully loaded, for example, an API call. 

Once you have completed this step, recache one of the pages to see if the issue has been resolved.

Related articles: 

- Empty or partially rendered pages

- General tips and best practices



Was this article helpful?