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. Your time—and your team's time—is money, and following these performance best practices with LiveTiles can save you both.
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—such as the 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.
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
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
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/).
Other Considerations to Minimize Page Load Times Include:
The Cost of Slow Pages
It's a problem with a lot of industry research behind it (see infographic below) and is considered often in consumer-facing web apps, but often falls to the wayside when considering how to build intranets and other internal tools for a company.