selecting and deploying automated optimization solutions

33
Automated Frontend Optimization Patrick Meenan [email protected] @patmeenan

Upload: patrick-meenan

Post on 27-Jan-2015

116 views

Category:

Technology


3 download

DESCRIPTION

Presentation from Selecting and deploying automated optimization solutions talk at Velocity 2012

TRANSCRIPT

Page 1: Selecting and deploying automated optimization solutions

Automated Frontend Optimization

Patrick [email protected]

@patmeenan

Page 2: Selecting and deploying automated optimization solutions

Front-End Optimization Automation

Page 3: Selecting and deploying automated optimization solutions

HTML Rewriting

Users

Web Server

Slow, Generic HTML

Optimized HTML

http://www.flickr.com/photos/damongman/5336979798/

Pixie Dust

Page 4: Selecting and deploying automated optimization solutions

HTML Rewriting Solution Providers

Page 5: Selecting and deploying automated optimization solutions

Provider Proxies (HTML Rewriting)

Users

Rewriting Proxy

Web Server

All Web Traffic Web ServerWeb Server

Amazon SilkAOL ClientOpera Mini

Mobile CarriersSatellite ISP’s

Page 6: Selecting and deploying automated optimization solutions

In-App Acceleration

Users

Web Server

Optimized HTML

Application Logic

Acceleration Plugin

Page 7: Selecting and deploying automated optimization solutions

Others Javascript Tag Management

Javascript Libraries/Loaders

Page 8: Selecting and deploying automated optimization solutions

When to Automate

Page 9: Selecting and deploying automated optimization solutions

Less Like

http://www.flickr.com/photos/finklez/5561579060/

Page 10: Selecting and deploying automated optimization solutions

More Like

http://www.flickr.com/photos/finklez/5561579060/

Page 11: Selecting and deploying automated optimization solutions

Best for Machines Browser-specific optimizations

- Image Inlining (Data URI’s)

- Image Transcoding (WebP)

- Responsive Images

Process Automation

- Image resizing

- Cache Extension

Preventing human error

- Minimum compression levels for images

Algorithmic Optimizations

- Path prediction (resource preloading)

- Predictive Page Delivery http://www.flickr.com/photos/31112252@N00/5331463993/

Page 12: Selecting and deploying automated optimization solutions

Humans rule! Evaluating content

- Removing content

- Prioritizing content

- Re-architecting pages

- Design

Code/Application Logic

- Refactoring code

- Javascript Dependencies

Image Optimization

- Selecting appropriate image format

- Maximizing image compression

http://www.flickr.com/photos/philhawksworth/4031165773/

Page 13: Selecting and deploying automated optimization solutions

Automation Architectures

Page 14: Selecting and deploying automated optimization solutions

Cloud Solutions

Users

AccelerationProvider

DNS

Origin

Page 15: Selecting and deploying automated optimization solutions

Cloud Solution Providers Akamai (Blaze.io)

Cloudflare

Google (Page Speed Service)

Limelight (Acceloweb)

Level 3 (Strangeloop)

Strangeloop

Torbit

Yottaa

Page 16: Selecting and deploying automated optimization solutions

Data Center

On-Premises Solutions

Users

Web ServerFEO

Web ServerFEOAppliance

Page 17: Selecting and deploying automated optimization solutions

On-Premises Solution Providers F5

Google (mod_pagespeed)

Riverbed (Aptimize)

Strangeloop

Page 18: Selecting and deploying automated optimization solutions

Architecture Fit

http://www.flickr.com/photos/epublicist/3546059144/

Page 19: Selecting and deploying automated optimization solutions

Site 2

Users

Site 1

DNS

Load Balancers App Servers

Load Balancers App Servers

Cloud Solution

FEO

Page 20: Selecting and deploying automated optimization solutions

Users

Site 1

DNS

Load Balancers App Servers

Site 2

Load Balancers App Servers

On-Premises

FEO

FEO

FEO

FEO

Page 21: Selecting and deploying automated optimization solutions

Users

Site 1

DNS

Load Balancers App Servers

Site 2

Load Balancers App Servers

On-Premises

FEO

FEO

FEO

FEO

Page 22: Selecting and deploying automated optimization solutions

Users

Site 1

DNS

Load Balancers App Servers

Site 2

Load Balancers App Servers

On-Premises

FEO

FEO

FEO

FEO

Page 23: Selecting and deploying automated optimization solutions

Users

Site 1

DNS

Load Balancers App Servers

Site 2

Load Balancers App Servers

On-Premises

FEO

FEO

FEO

FEO

Page 24: Selecting and deploying automated optimization solutions

With Great Power…yeah

http://www.flickr.com/photos/75001512@N00/5791894429/

Page 25: Selecting and deploying automated optimization solutions

Code Deployments

Page 26: Selecting and deploying automated optimization solutions

When something goes wrong

Page 27: Selecting and deploying automated optimization solutions

Data Security

http://www.flickr.com/photos/75001512@N00/5791894429/

Page 28: Selecting and deploying automated optimization solutions

Measure First

http://www.flickr.com/photos/endlisnis/174511509/

Page 29: Selecting and deploying automated optimization solutions

Synthetic Testing

BackboneTesting

ActualUsers

Page 30: Selecting and deploying automated optimization solutions

Real User Measurement

Google Analytics

New Relic

TorbitCompuware (dynaTrace)

Compuware (Gomez)

LogNormal

Web Tuna

Page 31: Selecting and deploying automated optimization solutions

Google Booth - TalksTuesday, June 26 - Morning Break

10:15 – 10:30 : Site Speed Reports in Google Analytics: Measuring your website’s performance

Afternoon Break

3:10 – 3:25 : Measuring user perceived latency with Google Analytics Site Speed reports: hands-on demo and insights

3:30 – 3:45 : Async Scripts and why you care, particularly for third-party content

Wednesday, June 27th - Morning Break

10:00 – 10:15 : PageSpeed Automatic Optimizations

10:15 – 10:30 : PageSpeed Insights for Chrome with mobile support – Demo

Afternoon Break

3:10 – 3:25 : Measuring Web Performance

3:30 – 3:45 : HTTP Streaming – discuss the true latency bottleneck with bi-directional HTTP streaming and “full-duplex HTTP”

Page 32: Selecting and deploying automated optimization solutions

Google Booth - Office Hours

Tuesday, June 26 - Afternoon Break

3:10 – 3:50 : Q&A: Your Chrome Wishlist, Suggestions and Questions

Wednesday, June 27 - Morning Break

10:00 – 10:30 : Q&A: Performance monitoring with Google Analytics

Page 33: Selecting and deploying automated optimization solutions

Thank You!

[email protected]

@PatMeenan