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.
In order to understand the performance considerations of the page in-depth, it's important to understand the life-cycle of the page:
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.
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.
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/).
Smaller files load faster.
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.