When complicated user experience component has multiple controls and elements of data that take time to load, extract the basic element that can act as a placeholder until full component loads and convert it to full version once all code and data reach the browser.
Most common example is a carousel component that can be approximated by displaying just a first slide of the carousel until scrolling code and the rest of the slides are done downloading. Loading one slide is much faster and can be well optimized (in case of plain image carousel, just one image), while providing significant portion of end-user experience that progressively enhances once everything loads.
WebPageTest report for pages following and not following the pattern:
Existing blog posts, articles, videos
Links to successful implementations
When complicated user experience component has multiple controls and elements of data that take time to load, extract the basic element that can act as a placeholder until full component loads and convert it to full version once all code and data reach the browser.
Most common example is a carousel component that can be approximated by displaying just a first slide of the carousel until scrolling code and the rest of the slides are done downloading. Loading one slide is much faster and can be well optimized (in case of plain image carousel, just one image), while providing significant portion of end-user experience that progressively enhances once everything loads.
WebPageTest report for pages following and not following the pattern:
Existing blog posts, articles, videos
Links to successful implementations