Front End Web Optimization Workflow Course (How To)

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

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