Stunning, Performant Images and Videos with TwicPics

Description

Learn how to image & video optimization can impact your UX, SEO and Core Web Vitals metrics. Participants will learn to implement image best practices. This topic should be particularly relevant to developers working in agencies, as well as e-commerce or media industries.

The workshop will have attendees go through the following topics:

• How image & video optimization impacts UX and SEO
• Why TwicPics simplifies the organization media workflow
• How to implement image optimization best practices using TwicPics and Nuxt.js

Agenda

Introduction — 20 minutes (4:00-4:20)

• Introduction to workshop agenda
• Theory & business impact of optimizing images

🧑‍💻 Avoiding Cumulative Layout Shifts — 20 minutes (4:20-4:40)

• 5m presentation
• 15m coding session

🧑‍💻 Optimizing image file sizes — 20 minutes (4:40-5:00)

• 5m presentation
• 10m coding session
• 5m debrief

🧑‍💻 Adding Low Quality Image Placeholders — 30 minute (5:00-5:30)

• 10m presentation and live-coding
• 20m coding session

🍫 Break — 10 minutes (5:30-5:45)

🧑‍💻 Optimizing Largest Contentful Paint — 40 minutes (5:45-6:25)

• 10m presentation
• 30m coding session

🧑‍💻 Using TwicPics components for Nuxt.js — 20 minute (6:25-6:45)

• 10m presentation
• 10m coding

Outro — 10m (6:45-6:55)

Questions & Answers — 20m (6:55-7:15)

Depending on the dynamic with the audience, I might do ~5m Q&A after the practice sections (marked 🧑‍💻)

This Q&A time might be shorter as a result. The general workshop duration will be roughly the same.

Who is the event for

• Developers that want to learn more about UX, SEO, and performance and Core Web Vitals
• Developers that want to learn about image & video optimization best-practices
• Developers working in ecommerce or media
• Developers working in agencies
• Beginner friendly (technically speaking), as long as comfortable with Vue.js in the first place

What will the attendees learn?

• How to optimize image on demand with TwicPics
• How to perform image transformations with TwicPics
• How image & video optimization impact a website UX and SEO
• How to implement image best-practices regarding Cumulative Layout Shift (Core Web Vitals metric)
• How to implement image best-practices regarding Largest Contentful Paint (Core Web Vitals metric)
• How to do all of this using Nuxt 3, in a way that can be applied to Nuxt 2 or vanilla Vue