Before we begin:

  • The following article demonstrates the solution that is applicable for classic SharePoint sites only. Please note that modern SharePoint sites do not have an option to add a preloader.
  • Supported platforms: Office 365 (SharePoint Online), SharePoint 2019, SharePoint 2016, SharePoint 2013.

Issue


You followed the steps of How to Show only the Logo Image (or a Custom Spinner) in the ShortPoint Preloader solution to set the custom preloader, and now it appears that the preloader slows down loading the page.


Reason


The preloader itself does not affect the page performance and cannot influence the page loading time. 


The issue here might be with the user experience, when using custom images or GIFs. 

The browser is reading the code, and loads the standard preloader first (a standard circle spinner, that is hidden now as was advised in the article - step 3), and then reads the information from the link to the custom preloader. It takes some time, and it looks like the page became slower, but it is only the loading time of the preloader, not the page performance.


Solution


To improve the user experience with loading the custom preloader, you may use Base64 images. It will encode your GIF or image to the Theme Builder, that will save time for browser to read the information about the preloader.


Here is how it will look like:



Please, see the steps below.


Step 1: Convert your preloader image to Base64 image type


Go to Base64 Image Encoder website. You may use any other reliable websites, that encodes images to Base64.

Upload your image or GIF custom spinner file:



Click </> show code button in the Encoding section:



Copy the image code from For use in <img> elements section:


Step 2: Update the Logo URL in the Theme Builder


Open Theme Builder.

Navigate to Utilities > Preloader.


Paste the copied image code to the Logo URL field in the Theme Builder:




Step 3: Add the updated preloader to your site


Now you need to update your master page with the improved preloader.

Repeat the steps of How to Show only the Logo Image (or a Custom Spinner) in the ShortPoint Preloader solution starting from the step 2.

Result


Here is how the updated preloader looks now:


Related articles: