Page Performance Best Practices

Everyone wants their digital workplace to be, not only beautiful, but fast. Slow pages make for a frustrating experience and make people unlikely to return, resulting in poor adoption and little ROI.

Your time—and your team's time—is money, and following these performance best practices with LiveTiles can save you both.

Visual Content Limitations

LiveTiles Design does not have a specific restriction on number of tiles on a page. The page does not automatically slow down with each new tile on it.

The best accounting of design elements that affect perceived page performance, is actually the number of images—especially large images—and the number of dynamic tiles.

Images will cause a second flash after the render, as they are requested and potentially leave your background with just a color, rather than your big beautiful background image.

Dynamic tiles are tiles that load external data sources (Documents, RSS Feed, and Cloud Documents tiles). These tiles load their content asynchronously and independently. They will sit with a spinner on them until the data returns, and choosing to use them imposes a second wait period. In general, you should use the minimal number of dynamic tiles and images, ideally providing other useful visual content on the page aside from the dynamic tiles.

 

Load Time

In order to understand the performance considerations of the page in-depth, it's important to understand the life-cycle of the page:

Response 

The time it takes the server to return the first information for a page and replace the default browser page with the first fragments of HTML given by the server. This has nothing to do with your page and is entirely determined by your web server (e.g., Office 365 hosted servers or your on-prem server) and the related infrastructure.

Page Load

At the end of the initial load time, the page will show a spinner in the center of the page, indicating LiveTiles is initializing the page. At this time, license checks and other background operations to prep the page are taking place asynchronously. Aside from loading custom JavaScript files, there is no end-user way to modify how long this takes to load.

LiveTiles Load

After background operations complete, the tiles will render themselves to the screen for the first time. At this time, images for the page background and certain tiles (e.g. Rectangle tiles, etc.) will start to load in the browser. Dynamic tiles will render with their background color and a spinner.

Data Load

After receiving their respective data, which can return in any order and with varying wait times, dynamic tiles will refresh their content to reflect the retrieved data. After this happens, the page is fully loaded in its final state. 

 

Minimize Page Size

Minimizing the total size of the page makes for a faster initial load and better browsing experience. 

Use the smallest image size possible

If you have an image on a tile in the "Fixed Width" canvas, use an image that is exactly the size of that tile.

Background images or images on tiles using the "Fill" setting in LiveTiles should use an image with a resolution reflecting its largest target screen size.

Limit Background Image Sizes

When designing a page, in Fixed Width or Responsive, you need to determine a target screen size (e.g. 1920 x1080, 1600 x1200). This should be decided by your organization's devices—don't forget to consider mobile devices as well. Use a background image of that target size and no larger.

Compress Your Images

Image files can be optimized for good visual fidelity with least data using a tool on your computer (Photoshop, Paint.Net, etc.) or online tools (e.g.https://tinypng.com/).

Compress and Minify Your CSS and JavaScript

Smaller files load faster.

Put JavaScript in the Bottom of the Body

Custom JavaScript should always be added using the Code Snippet tile or in the "Custom Code at End of Document Body" area on the "Custom Code" of "Page Settings"; otherwise, the browser will block rendering while loading content in the head of the document.

Other Considerations to Minimize Page Load Times Include: 

Making sure images used for backgrounds, image tiles, and News tiles are appropriately sized in resolution for their purpose (i.e. you don't need a 4MB background image). If performance is of paramount importance, avoid images unless absolutely necessary.

If you need to use a lot of images, icons, etc., consider using a Content Delivery Network for your assets. The same applies if you use the Code Snippet Tile (or use code inline so it is cached with the page).

Avoid managing and accessing the files in a SharePoint library. Given that embedded content is outside the control of our page code, use features like the slide out panel or modals to avoid loading embedded content on the main page.

For Office 365, the proximity of your tenant so the user can have a dramatic effect on page load.

For responsive pages, if you end up hiding half the content on a page you should consider whether building a second page with a targeted experience is actually a better option.

Most importantly, test repeatedly until you achieve your desired outcome.