Lazy Loading

Q4FW Release: 2.3.2

Our goal of lazy loading index pages is to reduce clicks (remove pagination), improve the UX, and defer loading images until they enter the viewport.

While this improves the user experience, this will not likely improve page speed (scores) since we’re now loading all data (All posts vs only 9 posts) on one page.

Lazy Load is not Infinite Scroll

Lazy loading refers to deferring loading of some content until it becomes necessary. For example, images which are not currently visible only load when the user scrolls them into view.

Infinite scrolling refers to loading new content (whole content blocks) when the end of the page is reached, so the effect of an infinitely long page is created.

That said, we are combining the methodologies:

  • defer loading images to load the page quickly
  • load all posts on one page to avoid pagination
  • but load all post data (img tags/text) up-front* to retain SEO benefits (crawlers get to see everything)

*Text is cheap, ~1000 post titles & links to their articles might only weigh <100kb. We can revisit Infinite Scroll if we start to include excerpts or more than 1000 blog links on an index page.

 

Lazy Loading All Posts On A Blog Index

 

  1. Dashboard > Updates
  2. Update the theme to version 2.3.2 or later
  3. Settings > Reading > Blog pages show at most: XXXX posts – set to 5000 or a high number
  4. Clear caching plugin cache if enabled
  5. Visit .com/blog — Force Refresh your browser if you’ve visited that page before.

Leave a Reply