When:
to
Room:
Room 6 (122-123)
Tags:
drupal & open source 101, development & coding, modern javascript
Track:
SVG
makers & builders

Lazy loading content for better performance, UX and SEO

Lazy loading content for better performance, UX and SEO

Ignacio Díaz-Roncero Fraile (Idiaz.roncero)

Improve your application look & feel and performance using Drupal's build-in capabilities.

Prerequisite
Medium to advanced knowledge of Drupal front-end development.

Outline
One of Drupal's best kept secrets is when and how content gets rendered using placeholdering techniques that increase performance by lazy loading highly dynamic content.

This prevents excessive cache invalidation and usually happens under the hood, but you can benefit from it too! We will learn about lazy builders, BigPipe, auto placeholdering, and placeholder previews.

Through a real example, we will output highly dynamic content that doesn't invalidate our site cache and provides a nice UX without the dreaded flashes, page jumps and repaints that can trigger CLS (Cumulative Layout Shifts) and affect our performance and SEO.

Learning Objectives
Lazy load dynamic parts of your page.
Understand how lazy builders and BigPipe work
Understand how Drupal caches highly dynamic content and how to modify it.
Provide placeholders for better UX, SEO and perceived performance.

Experience level
Advanced