How can we help you today?

Detecting Large Images on the Page

One 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:


vertical ellipsis


Step 2. Check the Network tab


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


Network tab

Then, activate the record icon and the Disable cache option:


record icon


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:


reload or refresh


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:


Developer tools


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):

Size column


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.


largest image size


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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 6 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more