FE411
Web Performance
Faculty
Eirikur Nilsson
Developer of Interactive Web Experiences at Aranja
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
One of the major factors of user experience is performance. Every second that users spend waiting dramatically increases user frustration and the likelihood of them giving up and switching to another product or service. Performance is an even more important topic now that most users browse the web on mobile devices and web development revolves more and more around running JavaScript in the browser.
This course will give you knowledge how browsers work and the different things that can affect performance. It will guide you through the tools and techniques you can use to research and fix performance issues in real-world projects. The goal of this course is to equip you with the knowledge required to create fast and smooth web experiences.
Learning highlights
- Get deep knowledge of the steps a browser takes to load a website.
- Learn about performance metrics and how they are used to measure page load performance.
- Understand network requests can be optimised to speed up initial page load.
- Learn about how to optimise JavaScript bundles with code splitting and tree shaking.
- Learn O notation basics in regards to JavaScript performance and memory use.
- Discover ways to improve animations and perceived performance.
Course outline
15 classes
Introduction to web performance
- How browsers work
- Critical rendering path
- Chrome Developer Tools
- Performance metrics and goals
Network minification
- Making fewer HTTP requests
- Minify JS and CSS
- Gzip and Brotli
- Minify images and other assets
- Responsive assets
Network caching
- Caching headers
- ETag and Last modified
- Preloading
- Caching API requests
- Service worker
Faster loading
- Load things in the right order
- Use a Content Delivery Network
- DNS lookups and redirects
- Load resources in parallel
Practice session
Improve page load performance of an example website.
Smaller JavaScript bundles
- Bundle analyzer
- Tree shaking
- Code splitting
- Lazy loading
JavaScript performance
- Big O Notation
- Performance gotchas
- Profiling JavaScript
- Run code on a background thread
Render performance
- Layout, paint and composite
- Minimise reflows
Performant animations
- Smooth animations and scrolling
- Perceived performance
Practice session
Improve JavaScript performance of an example website
Server performance
- Application performance monitoring
- Pagination and filtering
- Server side caching
- Scaling in the cloud
Memory performance
- Profiling memory usage
- Garbage collection
- Memory leaks
Advanced front-end performance
- WebGL
- Web Assembly
Advanced network performance
- GraphQL
- HTTP/2 and HTTP/3
Final exam
Methodology
Lectures and demonstration format. Group debates where we will discuss problem-solving techniques. Slack channel to ask questions to the teacher. Homework will be given at least two days a week, and it will be reviewed first thing next class. Project presentation and feedback upon completion of the two Friday assignments.
Grading
Eiríkur is a co-founder and CTO at Aranja, a digital agency that specialises in front-end development for websites and apps. He has worked on projects for Google, Facebook, Pinterest, Blue Lagoon and many innovative startups.
Recently, Eirikur has overseen development for scooter sharing service Hopp which was founded by Aranja. He is also the lead architect at Digital Iceland, a public-private partnership developing high-quality digital government services.
See full profileApply for this course
Web Performance
by Eirikur Nilsson
Total hours
45 Hours
Dates
May 23 - Jun 10, 2022
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.