15 Ways to Speed Up Your Site


The Presentation inside:

Slide 0

THE SITE SPEED DOWNLOAD 15 WAYS TO MAKE YOUR SITE FASTER @portentint


Slide 1

@portentint


Slide 2

h‫﬙‬p:/ /portent.co/speedy-sites @portentint


Slide 3

BERLIN = AMAZING h‫﬙‬p:/ /portent.co/speedy-sites @portentint


Slide 4

SITE SPEED IS A LITTLE SCARY WHAT THE HELL IS TTFB?!!! @portentint


Slide 5

WE’LL WALK THROUGH IT well, that’s a relief @portentint


Slide 6

I’ll explain relative difficul‫ ,﬚‬impact & when to use each technique @portentint


Slide 7

Ratings Scale difficul‫:﬚‬ impact: @portentint


Slide 8

These are just the techniques I’ve found to be the biggest wins @portentint


Slide 9

WHY? @portentint


Slide 10

HERE’S THE THING FASTER IS BETTER @portentint


Slide 11

HERE’S THE THING heh. Oops. MOSTLY. @portentint


Slide 12

must… deliver… @portentint


Slide 13

Weak THING HERE’S THE correlation to rankings. @portentint


Slide 14

Strong correlation to leads/revenue. HERE’S THE THING @portentint


Slide 15

Page Value vs. Load Time $30.00 WHY? $20.00 $10.00 $1 2 3 4 5 6 Load time (seconds) 7 8 9 @portentint


Slide 16

Page Value vs. Load Time $30.00 WHY? WHY NOT?!!!! $20.00 $10.00 $1 2 3 4 5 6 Load time (seconds) 7 8 9 @portentint


Slide 17

THREE BOTTLENECKS @portentint


Slide 18

SERVING @portentint


Slide 19

TRANSMISSION @portentint


Slide 20

RENDERING @portentint


Slide 21

DIAGNOSTIC TOOLS @portentint


Slide 22

GOOGLE PAGE SPEED INSIGHTS BASIC ANALYSIS @portentint


Slide 23

Mostly transmission diagnostics @portentint


Slide 24

developers.google.com/speed/pagespeed/insights/ @portentint


Slide 25

YSLOW READ YOUR WEB SITE’S MIND @portentint


Slide 26

Powerful @portentint


Slide 27

Less intuitive @portentint


Slide 28

yslow.org @portentint


Slide 29

WEBPAGETEST.ORG A HAPPY MEDIUM @portentint


Slide 30

Captures many important stats Hard-to-read HAR @portentint


Slide 31

HAR SITE SPEED SUPERPOWERS @portentint


Slide 32

@portentint


Slide 33

@portentint


Slide 34

A FEW OTHERS pingdom gtmetrix @portentint


Slide 35

DIAGNOSING BOTTLENECKS & SPEEDING UP YOUR SITE @portentint


Slide 36

TRANSMISSION @portentint


Slide 37

WHY START WITH TRANSMISSION? IT’S GOT THE EASIEST WINS @portentint


Slide 38

It’s about bandwidth Blue = Download time @portentint


Slide 39

Image Compression difficul‫:﬚‬ impact: @portentint


Slide 40

Google PageSpeed @portentint


Slide 41

HAR @portentint


Slide 42

JPG format, 100% quali‫ 008 ,﬚‬x 540: 400kb @portentint


Slide 43

JPG format, 90% quali‫ 008 ,﬚‬x 540: 217kb @portentint


Slide 44

JPG format, 80% quali‫ 008 ,﬚‬x 540: 100kb @portentint


Slide 45

JPG format, 60% quali‫ 008 ,﬚‬x 540: 67kb @portentint


Slide 46

Page Speed Insights… @portentint


Slide 47

…But it only does png @portentint


Slide 48

Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop @portentint


Slide 49

USE WHEN Always @portentint


Slide 50

Use the right image format difficul‫:﬚‬ impact: @portentint


Slide 51

PNG format, 800 x 540: 1,000kb @portentint


Slide 52

JPG format, 100% quali‫06 :﬚‬kb @portentint


Slide 53

PNG format, 32m color: 13kb @portentint


Slide 54

PNG format, 256k color: 8kb @portentint


Slide 55

USE WHEN Always @portentint


Slide 56

Minification difficul‫:﬚‬ impact: @portentint


Slide 57

Not minified: 260kb @portentint


Slide 58

Minified: 32kb @portentint


Slide 59

Google PageSpeed @portentint


Slide 60

Use .MIN.JS version of javascript libraries @portentint


Slide 61

jscompress.com @portentint


Slide 62

cssminifier.com @portentint


Slide 63

HTML, too @portentint


Slide 64

USE WHEN Always @portentint


Slide 65

HTTP compression difficul‫:﬚‬ impact: @portentint


Slide 66

Lossless compression of HTML, javascript, css, other files @portentint


Slide 67

I’m going to compress these files for you so they arrive more quickly. Hey, thanks! I’ll extract it here. @portentint


Slide 68

CHECKGZIPCOMPRESSION.COM @portentint


Slide 69

Google PageSpeed @portentint


Slide 70

Apache mod_deflate @portentint


Slide 71

nginx ngx_h‫﬙‬p_gzip_module @portentint


Slide 72

IIS Click the checkbox @portentint


Slide 73

Not always possible with 3rd-par‫ ﬚‬scripts @portentint


Slide 74

USE WHEN Always @portentint


Slide 75

Expires Headers difficul‫:﬚‬ impact: @portentint


Slide 76

this file doesn’t change that often. ok, i’ll save it to my hard drive. @portentint


Slide 77

Google PageSpeed @portentint


Slide 78

Not possible w/ 3rd-par‫ ﬚‬scripts @portentint


Slide 79

Apache mod_expires @portentint


Slide 80

nginx ngx_h‫﬙‬p_headers_module @portentint


Slide 81

IIS clientCache or h‫﬙‬pExpires or …? @portentint


Slide 82

USE WHEN Site uses many static files @portentint


Slide 83

my bad. HERE’S THE THING TEST. @portentint


Slide 84

RENDERING @portentint


Slide 85

It’s about browser performance How quickly can a browser ‘draw’ this page? @portentint


Slide 86

Webpagetest.org @portentint


Slide 87

HAR view This line This number @portentint


Slide 88

Load order difficul‫:﬚‬ impact: @portentint


Slide 89

CSS first. Javascript last. @portentint


Slide 90

Load in parallel, don’t block <script src=“script.js” defer> @portentint


Slide 91

Load in parallel, execute as soon as possible <script src=“script.js” async> @portentint


Slide 92

Google PageSpeed @portentint


Slide 93

HAR @portentint


Slide 94

May break 3rd-par‫ ﬚‬javascript @portentint


Slide 95

USE WHEN You can @portentint


Slide 96

Parallel downloads difficul‫:﬚‬ impact: @portentint


Slide 97

3 different subdomains @portentint


Slide 98

Parallel load @portentint


Slide 99

USE WHEN You can use multiple subdomains You use a CDN @portentint


Slide 100

Optimizing HTML difficul‫:﬚‬ impact: @portentint


Slide 101

35,000 lines of code Render time: 1.5s html: 900kb @portentint


Slide 102

why? @portentint


Slide 103

Put in .css instead @portentint


Slide 104

Much be‫﬙‬er @portentint


Slide 105

Minified html @portentint


Slide 106

DOM elements (yslow) @portentint


Slide 107

USE WHEN Always @portentint


Slide 108

Lazy loading difficul‫:﬚‬ impact: @portentint


Slide 109

Image loads when I scroll to here @portentint


Slide 110

h‫﬙‬p:/ /portent.co/load-lazy @portentint


Slide 111

USE WHEN You have below-the-fold images You have a gallery @portentint


Slide 112

DNS prefetch difficul‫:﬚‬ impact: @portentint


Slide 113

HAR @portentint


Slide 114

<link rel="dns-prefetch" href="//domainname.com" />
 <link rel=“dns-prefetch” href=“https://api.twitter.com” /> @portentint


Slide 115

DNS prefetch reduces DNS calls by browser. But it uses up server resources and may pose a (small) securi‫ ﬚‬risk. Use sparingly. @portentint


Slide 116

USE WHEN You use certain subdomains a lot You really, really understand it @portentint


Slide 117

Prefetch/Prerender difficul‫:﬚‬ impact: @portentint


Slide 118

You go to this page a lot. I’m going to get it ready ahead of time. @portentint


Slide 119

Most popular page prerendered @portentint


Slide 120

@portentint


Slide 121

Load file in advance <link rel="prerender" href=”images/kittens.jpg"> @portentint


Slide 122

Load & render page in advance <link rel=”prefetch" href="http://my-site.com/bar.html"> @portentint


Slide 123

USE WHEN You know certain pages dominate @portentint


Slide 124

d’oh HERE’S THE THING TEST!!! @portentint


Slide 125

SERVING @portentint


Slide 126

Nerds required yeah baby @portentint


Slide 127

TTFB: Time To First Byte @portentint


Slide 128

Google PageSpeed @portentint


Slide 129

HAR @portentint


Slide 130

Time to First Byte (TTFB) should not > 500ms @portentint


Slide 131

But 250ms is be‫﬙‬er @portentint


Slide 132

CDN difficul‫:﬚‬ impact: @portentint


Slide 133

No CDN hellloooooo @portentint


Slide 134

CDN @portentint


Slide 135

A lot of work, but also helps with h‫﬙‬p compression, parallel loading, cookieless delivery, expires headers @portentint


Slide 136

USE WHEN You can @portentint


Slide 137

disk caching difficul‫:﬚‬ impact: @portentint


Slide 138

STORED ON DISK @portentint


Slide 139

That’s a long time. Are you using disk caching? @portentint


Slide 140

Stalled may indicate a page generation bo‫﬙‬leneck. Use disk caching. @portentint


Slide 141

USE WHEN Database-driven pages Dynamically generated content @portentint


Slide 142

keep-alive difficul‫:﬚‬ impact: @portentint


Slide 143

No keep-alive may i have index.html? Sure! @portentint


Slide 144

No keep-alive may i have index.html? ok! can I have styles.css? Sure! uh, ok @portentint


Slide 145

No keep-alive may i have index.html? ok! can I have styles.css? Sure! thanks! can i have jquery.js? uh, ok @portentint


Slide 146

No keep-alive may i have index.html? ok! can I have styles.css? can i have image.gif? thanks! can i have jquery.js? Sure! uh, ok @portentint


Slide 147

Keep-alive Maintains connection, so fewer ‘handshakes’ @portentint


Slide 148

Keep-alive can i have index.html, image.gif, jquery.js and styles.css please? Sure! @portentint


Slide 149

USE WHEN Always @portentint


Slide 150

php/code acceleration difficul‫:﬚‬ impact: @portentint


Slide 151

Xcache APC @portentint


Slide 152

USE WHEN Site uses a programming language @portentint


Slide 153

TOOLS FOR SPEEDING UP @portentint


Slide 154

WordPress: W3 Total Cache @portentint


Slide 155

PageSpeed modules @portentint


Slide 156

but… @portentint


Slide 157

mwaahahaha hahahahah @portentint


Slide 158

Sometimes, Google turns things off/ends support @portentint


Slide 159

whoopsie HERE’S THE THING TEST!!! @portentint


Slide 160

WHY DO I GET DIFFERENT NUMBERS? @portentint


Slide 161

Webpagetest.org: > 8 seconds @portentint


Slide 162

HAR: < 3 seconds @portentint


Slide 163

Pingdom: 1.67 seconds @portentint


Slide 164

Different locations, rules, browser ‫﬚‬pes, evaluation technology @portentint


Slide 165

A li‫﬙‬le more control with HAR + Proxy  @portentint


Slide 166

@portentint


Slide 167

MORE TO DO @portentint


Slide 168

Sprites/Reduce HTTP calls Responsive image scaling CSS optimization Javascript optimization Cookieless delivery Varnish/caching @portentint


Slide 169

PERSUADING YOUR BOSS @portentint


Slide 170

HAVE A RACE: WEBPAGETEST.ORG @portentint


Slide 171

HAVE A RACE: Frames in Chrome @portentint


Slide 172

HAVE A RACE: Frames in Chrome @portentint


Slide 173

HAVE A RACE: Frames in Chrome @portentint


Slide 174

HAVE A RACE: Frames in Chrome i’m speedier sniff @portentint


Slide 175

REMEMBER THE BOTTLENECKS @portentint


Slide 176

SERVING @portentint


Slide 177

TRANSMISSION @portentint


Slide 178

RENDERING @portentint


Slide 179

HERE’S THE THING TEST!!! @portentint


Slide 180

Danke sehr Ian Lurie @portentint www.portent.com h‫﬙‬p:/ /portent.co/speedy-sites @portentint


Slide 181


×

HTML:





Ссылка: