Skip to content

Latest commit

 

History

History
55 lines (35 loc) · 2.47 KB

week-3.md

File metadata and controls

55 lines (35 loc) · 2.47 KB

Exercises Week 3

Minor Web Development - Progressive Web apps

Intention

This week we optimize the critical rendering app of the WAFS application.

Method

16 hours have been scheduled to work independently on this week's assignments this week. Try to plan your work wisely! In the meantime, progress is monitored in standup meetings and classroom meetings. At the end of the week you will be tested on theoretical knowledge and on the understanding of the code that you write according to the assignments.

Exercises

  1. Optimize the performance (Critical Rendering Path) of your application
  2. Install your app on an online web server

Exercise 1: Optimize the performance (Critical Rendering Path) of your application

Optimize 2 or more of these performance components:

  • Perceived load speed:
    how quickly a page can load and render all of its visual elements to the screen.
  • Load responsiveness:
    how quickly a page can load and execute any required JavaScript code in order for components to respond quickly to user interaction
  • Runtime responsiveness:
    after page load, how quickly can the page respond to user interaction.
  • Visual stability:
    do elements on the page shift in ways that users don't expect and potentially interfere with their interactions?
  • Smoothness:
    do transitions and animations render at a consistent frame rate and flow fluidly from one state to the next?

(Based on: https://web.dev/user-centric-performance-metrics/)

Explain in the README.md why you thought it was important to choose these performance optimizations, and your learnings.

For good measure; throttle your connection in the Network Tab (DevTools) to very slow. Because your web app is probably very small at this moment, you will not see very much happening otherwise.

Resources

  1. Why performance matters
  2. User centric performance metrics
  3. The low hanging fruit of web performance
  4. WebPageTest
  5. Lighthouse

Exercise 2: Install your app on an online web server

Install your app on an online web server making it possible to view your wep app online!

Resources

Digital Ocean
Heroku