Frontend Perfomace pt1

Lee Blazek

Today!

Before time to first paint

• • What is it?
  • Network speed to users device in context
  • user contexts
  • Net work requests from browser
  • solutions

First Meaningful Paint is the time when page's primary content appeared on the screen. This is going to be our primary metric for user-perceived loading experience

- somebody at google

Time to first paint/

DOMContentloaded

https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint

https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#top_of_page

Single Page apps are just static assets until the are executed in a browser(runtime)

HTML, CSS, JS, fonts, images, etc (NOT scss, ts, jade, tbdl)

Network speed to users device in context

1. Internet speed to building
   1. Fiber optic?
   2. Satellite?
   3. Phone network? 3g? 5g?
2. Cable/wifi?
3. Wifi router  max speed?
4. How connections can wifi router handle? How many devices?
5. Devices antenna strength
6. Distance from wifi router
7. Electromagnetic interference
8. Processor on device

In other words we have no control over the users router, distance from router, or device type. Even if they have fiber optic internet to building, the above can still drop or disable performance. So we need to make as fast as possible other wise it may not be able to load.

As in less than 2 seconds(or better in office)

Plus check in real life context

User Contexts

1. “A” fiber optic to building, enterprise network and wifi in building. No Electrical interference (Down Town Denver offices). High speed reliability in context
2. “B”  any situation with user device over wifi with interference (clinic with medical machines) and varying distance of device
3. “C” satellite to building, device strait to phone network, speeds less than 25 Mbps. Large distance of users device over wifi, interference
   1. Highly variable, unpredictable and low max internet speeds

Network Request from browers and limits

The JS language is async, but http requests from browsers have limits

1. Net work requests from browser
   1. Quantity
   2. Size
   3. Type

Connection Types

Solutions

1. Overall make app load time less than 2 seconds with in Denver Office towers
2. Test in all contexts
3. Use static file servers(s3 or alternates)
4. use http2 or 3
5. Use CDN's
6. Reduce network requests
7. Enable gzip on servers
8. domain sharding
9. Lazy load modules on user nav(we already have this)
10. Optimize login redirects, rejects, etc with script tag in header
11. just write less code hence less to ship to browser

Solutions

• Css/js resource preloading  https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
• Caching more
• Use http 2 or 3(http2 +quic)
• Make web app ready
• Write more streamlined, html, css, js to ship less in the first place see below

After page load

• HTML
• CSS
• Plain JS
• Angular(or react, vue, aurelia)

Lee Blazek

• www.berzek.io
• info@berzerk.io
• linkedin: www.linkedin.com/in/leeblazek
• https://www.linkedin.com/company/berzerk-io/
• https://github.com/berzerk-interactive