Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

Front End Web Optimization Workflow Course (How To)

via Treehouse

Overview

As more people are getting on the web every day, there is a desire for those web sites and apps to load quickly. Most users have become accustomed to better and better performance from their home computers and with more apps moving to the web, that desire for performance is still there. The fact is that slow load times cause user frustration and you lose users and possibly money.

In these lessons we're going to exercise some common real-world examples of how you can make a slow web app perform better using common techniques for front-end optimization. By the end, you will have a better understanding about how web apps work, what causes performance issues and how to best address them.

What you'll learn

  • Asset Optimization
  • Service Workers
  • CDNs

Syllabus

Why Performance Matters

What is web performance anyway? Why does it matter? How are web apps delivered to my device and how does that delivery, and my device, impact the perception of performance? How does performance impact the user experience of my web app?

So many questions play into the concept of performance and while this seems daunting at first, there are simply strategies that we can use to increase performance and have happier users.

Chevron 6 steps
  • How the Web Works

    7:02

  • Review: How the Web Works

    5 questions

  • Building Mobile First

    6:53

  • Building Mobile First

    4 questions

  • Measuring Performance with Assessment Tools

    11:39

  • Review: Measuring Performance

    6 questions

Asset Optimization

The fastest websites are ones that have no requested code. While this is typically not reasonable or achievable, there are techniques that will reduce latency, increase perceived performance and give our apps better load time.

In these lessons we will explore proven practices for reducing the amount of data we need to send as well as tips and techniques for loading essential data first increasing our user's perceived performance experience.

Chevron 7 steps
  • Optimizing Critical CSS

    10:49

  • Optimizing CSS Review

    4 questions

  • Loading Critical CSS

    4:11

  • Loading CSS Review

    3 questions

  • Optimizing Images

    11:14

  • Responsive and Lazy Loading Images

    6:19

  • Responsive Images Review

    7 questions

Optimization Best Practices

As our web apps get larger and increase in complexity developers need more advanced tolling and practices in order to achieve the results our users demand.

These lessons take deeper dives into more complex solutions regarding performance. We will discuss the techniques pros use to make JavaScript even faster; advanced concepts in caching; the benefits of a CDN; and what the future holds for HTTP/2.

Chevron 8 steps
  • Keeping JavaScript Fast

    4:32

  • Keeping JavaScript Fast Review

    4 questions

  • Making JavaScript Faster

    5:43

  • Review: Making JavaScript Faster

    5 questions

  • Performance Boosts with Service Workers

    8:14

  • Service Workers Review

    8 questions

  • Optimize Performance with Asset Delivery

    4:45

  • Performance Optimization Review

    6 questions

Taught by

Dale Sande

Reviews

Start your review of Front End Web Optimization Workflow Course (How To)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.