advertisement

Frontend Performance: Beginner to Expert to Crazy Person

100 %
0 %
advertisement
Information about Frontend Performance: Beginner to Expert to Crazy Person
Technology

Published on February 27, 2014

Author: bluesmoon

Source: slideshare.net

Description

The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave.

In this talk we'll start with the basics and get progressively insane. We'll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you.
advertisement

• Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 1

FE Performance: Beginner to Expert to Crazy Person Philip Tellis / ptellis@soasta.com Confoo 2014 / 2014-02-27 Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 2

Get the most benefit with the least effort Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 3

0 Beginning Web Performance Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 4

Start with a really slow site Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 5

0.1 Start Measuring Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 6

Or use RUM for real user data (boomerang/mPulse) Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 7

0.2 enable gzip http://slideshare.net/billwscott/improving-netflix-performance-experience Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 8

You can pre-gzip gzip_static in nginx Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 9

0.3 ImageOptim Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 10

0.4 Cache Cache-control: public, max-age=31415926 http://www.mnot.net/cache_docs/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 11

Yes, that was 10 million pies Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 12

0 Congratulations You’ve just been promoted Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 13

1 What the Experts Do Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 14

1.1 CDN Serve your root domain through a CDN Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 15

1.1 CDN And make sure your CSS is on the same domain http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 16

1.2 Split JavaScript "critical": in the HEAD, "enhancements": loaded async Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 17

1.3 Audit your CSS Chrome WebDev tools Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 18

1.4 Parallelise downloads You can have higher bandwidth, you cannot have lower latency. Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 19

1.5 Flush Early and Often Get bytes to the client ASAP to avoid TCP Slow Start, and speed up CSS Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 20

1.6 Increase initcwnd Initial Congestion Window: Number of packets to send before waiting for an ACK http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimumperformance/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 21

1.6 Increase initcwnd Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 22

1.6b Also... net.ipv4.tcp_slow_start_after_idle=0 http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 23

1.7 PageSpeed mod_pagespeed and ngx_pagespeed Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 24

Relax Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 25

2 You’ve reached crazyland Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 26

Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 27

Study real user data Look for potential places to parallelise, predict or cache Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 28

2.1 Pre-load Pre-fetch assets required for the next page in a process flow Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 29

2.1b pre-render <link rel="prerender" href="url"> https://developers.google.com/chrome/whitepapers/prerender Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 30

2.2 Post-load Fetch optional assets after onload Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 31

2.3 Detect broken accept-encoding Many Windows anti-viruses and firewalls disable gzip by munging the Accept-Encoding header http://www.lognormal.com/blog/2012/08/17/accept-encoding-stats/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 32

2.4 Prepare for HTTP/2.0 Multiple assets on the same connection and TLS by default. Breaks many of our rules. Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 33

2.5 Understand 3PoFs Use blackhole.webpagetest.org http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 34

2.6 Understand the IFrame Loader Technique Take required but non-critical assets out of the critical path http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 35

Can you predict round-trip-time? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 36

Can you predict round-trip-time? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 37

References • • • • • • • • • • • • WebPageTest – http://webpagetest.org Boomerang – http://lognormal.github.io/boomerang/doc/ SOASTA mPulse – http://www.soasta.com/free Netflix gzip study – http://www.slideshare.net/billwscott/improving-netflix-performance-experience Nginx gzip_static – http://wiki.nginx.org/HttpGzipStaticModule ImageOptim – http://imageoptim.com/ Caching – http://www.mnot.net/cache_docs/ Same domain CSS – http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html initcwnd – http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/ Linux TCP Tuning – http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ Prerender – https://developers.google.com/chrome/whitepapers/prerender FE SPoF – http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 38

Thank You! Questions? Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 39

• Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 40

Image Credits • Apple Pie http://www.flickr.com/photos/24609729@N00/3353226142/ • Kittens in a PC http://www.flickr.com/photos/43525343@N08/6417971383/ Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 41

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Philip Tellis: Frontend Performance Beginner to Expert to ...

by Philip Tellis, Chief Architect at ... Frontend Performance Beginner to Expert to Crazy Person ... Author of "Crazy For God" ...
Read more

Frontend Performance: Beginner to Expert to Crazy Person ...

Boston Web Performance Meetup, April 22, 2014 The very first requirement of a great user experience is actually getting the bytes of that experience to the ...
Read more

Midwest.io 2014 - Frontend Performance: Beginner to Expert ...

This talk was given at Midwest.io 2014. ... Frontend Performance: Beginner to Expert to Crazy Person ... Front end performance on Rails ...
Read more

Frontend Performance: Beginner to Expert to Crazy Person ...

Frontend Performance: Beginner to Expert to Crazy Person ... Analyzing performance data with Julia and D3. ... Frontend Performance: Beginner to Expert to ...
Read more

Paris Web - Frontend Performance Beginner to Expert to ...

Frontend Performance Beginner to Expert to Crazy Person. The very first requirement of a great user experience is actually getting the bytes of that ...
Read more

Frontend Performance Beginner to Expert to Crazy Person ...

The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave.
Read more

Lambda Expressions in C# From Beginner To Expert - Jaliya ...

Share Lambda Expressions in C# From Beginner To Expert ... Frontend Performance: Beginner to Expert to Crazy Person ... groovy DSLs from beginner to expert.
Read more

TRAK Kayaks Performance Folding Kayak - Amazon.com

... TRAK Kayaks Performance Folding Kayak ... (beginner to expert). ... Comment One person found this helpful.
Read more