One of the main reasons your page is rendering slowly is the size of the images you are using with ShortPoint design elements.

In this article, we will show you how to investigate and determine if your page contain any asset that has supersize. Let's start!

Solution

Step 1. Open Developer tools

Open your slow loading page on Google Chrome.

Open the Developer tools (Chrome Menu > More tools > Developer tools):

Step 2. Check the Network tab

Once the Developer tools are opened, navigate to the Network tab, and make sure to:

1. Activate the record red circle on the left (usually, it should be active by default: if its red, then it's already active).
2. Activate the Disable cache option.
3. Refresh the page (Ctrl+R on Windows / CMD+R on Mac), and wait until the page loads everything.

Once the page is done loading, the Network tab in Chrome Developer tools will show you every asset that has been loaded into the page, with some insights like the size of each item, and how long it took to get loaded.

Step 3. Check the size of the images

Click the Size column in the Network tab to get the items sorted by size descending (maximum size at the top, minimum size at the bottom):

In the example above, you can see that the largest image in terms of size in our page has a size of 4.6 MB, which is too much for a website image.

When using the image as a background of some section, in a Slideshows element, ideally it should not be more than few hundreds of kilobytes. 

If the images are used in Images list, they should not exceed 50 KB.

If you found any images on your page that has large size, you need to optimize it, and upload it back to your site to get a better page loading time.

Other performance improvements:

• Step 1: Enable Lazy Render / Lazy Loading options on ShortPoint Elements
• Step 2: Enable Caching on Connected ShortPoint elements
• Step 4: Remove Hidden WebParts from the page
• Step 5: Further Tips to Improve SharePoint Page Performance
• Back to Main ShortPoint Performance Improvement article