Try ShortPoint nowOne of the main reasons your page is rendering slowly is the size of the images you are using. It is good practice to keep your image file size below 70 kb to maximize the performance of your SharePoint page.
In this article, we will show you how to investigate and determine if your page contains any assets that are too big and may slow down page performance.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
Follow the steps below to learn how to detect large images on your SharePoint page:
Step 1: Open Developer Tools
Go to the SharePoint page you want to investigate and click [1] the vertical ellipsis icon > [2] More Tools > [3] Developer Tools:
Step 2. Check the Network tab
Once the Developer tools are opened, navigate to the Network tab:
Then, activate the record icon and the Disable cache option:
NOTE: By default, the record icin should already be active. If the color of the icon is red, it is already activated.
Then, go back to your SharePoint page, right-click, and select refresh / reload:
Once the page is done loading, the Network tab in Chrome Developer tools will show every asset loaded into the page, with some insights including 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 to get the items sorted by size (maximum size at the top, minimum size at the bottom):
In the example, you can see that the largest image on our page is 3.1 MB, which is too much for a website image. The ideal file size for website images is below 70 KB. You need to optimize/resize your large images and re-upload them to your page to improve your page performance.
TIP: You can use image editing softwares like Photoshop to optimize the images you have on your page. You can also go to https://www.shopify.com/tools/image-resizer for a simple way to resize your image.
That’s it! You now know how to detect large images on your page. Make sure to follow the steps above to check the performance of the images you have on your SharePoint pages.
If you are using a classic page, you can proceed to Step 4: Remove Hidden WebParts from the page. Otherwise, you can proceed to Step 5: Further Tips to Improve SharePoint Page Performance
Related articles:
