Front-end Performance Master Class

door De Voorhoede

Evenementdetails

Deel dit evenement

Datum en tijd

vr 20 oktober 2017

09:00 – 17:00 CEST

Aan agenda toevoegen

Locatie

Rijnsburgstraat 9

9 Rijnsburgstraat

1059 AT Amsterdam

Netherlands

Kaart bekijken Kaart bekijken

Beleid voor refunds

Geen refunds

Beschrijving van het evenement

Beschrijving

Performance matters. Research shows performance has a huge impact on conversion and user retention. You as a front-end developer can make a big difference!

In this masterclass you will learn how to build blazingly fast websites. Step-by-step we will boost front-end performance of a real world example site. We will start with basic optimisations, learn how to automate them and work towards more advanced performance engineering. Along the way you will learn all about how browsers render web pages.

At the end of the day you will leave with a lot of knowledge, slides and hands-on experience, which will empower you in your daily work.

We know a lot about performance. We gave this class several times before. At our clients we try to help them boost performance. For our own website we wrote a blog post about the pursuit of mastering performance and we regularly speak about performance at meetups.

Note: we will focus on server-side rendered websites. But you can also apply most optimisations to client-side web apps.

Audience

(Front-end) web developers.

Prerequisites

An understanding of HTML, CSS and Javascript.

Duration

1 day course.

What will you learn

How business is impacted by performance
How to sell performance to non techies

Understand browser rendering and networking
Analyse front-end web performance
Understand, design and build for perceived performance

Control how the browser downloads assets
Tame browsers by loading assets the way you want

Quick win performance optimisations
Advanced performance optimisations

How HTTP/2 will affect performance

Roughly 50% will be theory and 50% hands-on assignments.

Outline

Introduction: performance matters, perceived performance
Critical rendering path
Measuring performance: with Pagespeed Insights, WebPagetest, LIghthouse and Chrome dev tools
Basic performance optimisations: caching, gzipping, minification
Image delivery: WebP, , [srcset], data URI’s
Web fonts: font subsetting, FOIT vs FOUT, async font loading
Lazy load JS: [async], [defer], loadJS
Lazy load CSS: with critical CSS
Resource hints
HTTP/2

Instructors

Declan Rek - Declan is De Voorhoede’s very own web performance specialist. He guided companies like eBay and Funda on ensuring they’re faster than their competition. Declan occasionally gives talks on performance and wrote a long article on how to boost performance on CSS Tricks.

Jasper Moelker - Jasper is a front-end architect and partner at De Voorhoede. Great user experiences for everyone are his drive to try new techniques and tools everyday to get the best (perceived) performance. He regularly presents at meetups and the occasional conference. Find him on Twitter and Github.