Browsers 101

What's a browser?

  • Rendering engine
  • JavaScript engine
  • Graphics layer
  • Networking layer
  • Image, video & audio decoders

Which ones?

  • Chrome & Opera(Blink)
  • Firefox (Gecko)
  • IE
  • Safari (WebKit)

HTTP vs. HTTPS

What's a Web page?

HTML + subresources

Resource types

  • CSS
  • JS
  • Images
  • Fonts

Images?

Web page loading

TCP connections

Latency killed performance

What did we do?

Sharding has its costs

How a resource is downloaded?

HTML parsing

Web page rendering

Resource loading

Preloader

Rendering critical path

Example

Loading critical path

Render blocking resources

Resource loading priority

Loading events

Non-blocking script loading

Responsive Web Design

Fluid Grids

Media Queries

Flexible images

Responsive images

Client hints

Resource hints

Questions?