Want to watch the recordings of this workshop? Donate 25 USD or more — all proceeds from this workshop will be donated to humanitarian aid in Ukraine — and get unlimited access to the video. Thank you! 💙💛

Donate and Watch the Recording

What’s the workshop about?

We’ll explore a resilient, actionable strategy for building fast, scalable experiences. We’ll look into accessibility, text compression, image optimization, web font delivery, critical CSS, JavaScript delivery, and improving Core Web Vitals along with performance bottlenecks. We will also explore tooling, how to make sense of DevTools network waterfalls and performance flame charts, WebPageTest, and a few little utilities along the way.

You’ll learn practical techniques and strategies to optimize your website or web applications, and things to consider when building them. Bring a bit of pragmatism with you — the techniques you are going to see might cause a lot of nightmares and sleepless nights! ‍

In this workshop, we’ll explore:

• How to optimize for Core Web Vitals, with general strategies to improve LCP, FID and CLS, measure and monitor them,
• Component-based workflow and tooling, with helpful tools and resources to boost dev environment,
• Deep dive into DevTools, making sense of performance flame charts, networking panel and WebPagetest waterfalls to identify performance bottlenecks,
• Text compression with Brotli, localization/i18n techniques and practical tips,
• Image and video optimization (AVIF, AV1, formats, delivery techniques and tooling),
• Web Font Loading strategies and recipes,
• Organizing CSS and Critical CSS to optimize delivery and minimize reflows,
• JavaScript architecture, and how to make sense of SSR, CSR, JAMStack, rehydration strategies, prerendering and caching — for React, Vue or any other framework,
• Deferring and lazy-loading JavaScript to make best use of browser’s rendering routine,
• Cache-Control, CORS and eTags, with a few gotchas, pain points and misconceptions,
• Predictive prefetching of data and JavaScript chunks to improve perceived performance,
• 3rd-party scripts, how to deal with them using IntersectionObserver,
• Performance optimization strategy (best practices + HTTP/2 + HTTP/3),
• Legacy browsers, the maintenance issues and dealing with it,
• Common front-end challenges and solutions and important new challenges and opportunities to keep in mind.

Who is this workshop for?

This workshop is intended for professional front-end designers, developers and everybody else who is dealing with CSS and/or JavaScript regularly.

You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or mobile app.

About Vitaly Friedman

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems.

Schedule

8:45 AM ET
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

You can always re-watch the session at a more convenient time and follow the webinar at your own pace.

What hardware/software do you need?

To view the webinars, please install the Zoom client for Meetings, which is available for all the main OSs. It may take a little time to download and install, so please grab it ahead of time if you can.