While waiting for a page to load, users want to know that they're making visual progress toward their goal. As a result it's important to display meaningful content first. Load priority should be given so that content deemed important - e.g. search box, hero carousel, top news story, etc is displayed first. Typically the most important info is arranged at the top of the page where it is visible above the fold, since users scroll from top to bottom and less important elements are placed below the fold.
Displaying content with less importance first may increase the appearance of wait time - that is the user may be less engaged with such content. Additionally it may cause user confusion as to whether content has actually been loaded. For example, a site which simultaneously loads the top nav and footer while displaying a blank content area may give the user the impression of either an error state or blank page.
Examples that follow this pattern:
https://www.webpagetest.org/video/compare.php?tests=180108_3S_6201114a64064cbb67b6f33dc76d8ae2-r:1-c:0
Examples that do not follow this pattern:
https://www.webpagetest.org/video/compare.php?tests=180108_0B_078fc75b794a01ad161442e646412de7-r:1-c:0
To correct this, UX and developers should collaborate on identifying the important content elements. Documentation such as Progressive Storyboards https://calendar.perfplanet.com/2016/progressive-storyboards/ or Priority Wireframes (http://speedyux.com/blog/web-perf-wireframes-120316.html) will help to better communicate content priority order and load sequence.
While waiting for a page to load, users want to know that they're making visual progress toward their goal. As a result it's important to display meaningful content first. Load priority should be given so that content deemed important - e.g. search box, hero carousel, top news story, etc is displayed first. Typically the most important info is arranged at the top of the page where it is visible above the fold, since users scroll from top to bottom and less important elements are placed below the fold.
Displaying content with less importance first may increase the appearance of wait time - that is the user may be less engaged with such content. Additionally it may cause user confusion as to whether content has actually been loaded. For example, a site which simultaneously loads the top nav and footer while displaying a blank content area may give the user the impression of either an error state or blank page.
Examples that follow this pattern:
https://www.webpagetest.org/video/compare.php?tests=180108_3S_6201114a64064cbb67b6f33dc76d8ae2-r:1-c:0
Examples that do not follow this pattern:
https://www.webpagetest.org/video/compare.php?tests=180108_0B_078fc75b794a01ad161442e646412de7-r:1-c:0
To correct this, UX and developers should collaborate on identifying the important content elements. Documentation such as Progressive Storyboards https://calendar.perfplanet.com/2016/progressive-storyboards/ or Priority Wireframes (http://speedyux.com/blog/web-perf-wireframes-120316.html) will help to better communicate content priority order and load sequence.