'

15 Ways to Speed Up Your Site

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

@portentint


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

Ratings Scale difficul‫:﬚‬ impact: @portentint


Слайд 8

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


Слайд 9

WHY? @portentint


Слайд 10

HERE’S THE THING FASTER IS BETTER @portentint


Слайд 11

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


Слайд 12

must… deliver… @portentint


Слайд 13

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


Слайд 14

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


Слайд 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


Слайд 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


Слайд 17

THREE BOTTLENECKS @portentint


Слайд 18

SERVING @portentint


Слайд 19

TRANSMISSION @portentint


Слайд 20

RENDERING @portentint


Слайд 21

DIAGNOSTIC TOOLS @portentint


Слайд 22

GOOGLE PAGE SPEED INSIGHTS BASIC ANALYSIS @portentint


Слайд 23

Mostly transmission diagnostics @portentint


Слайд 24

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


Слайд 25

YSLOW READ YOUR WEB SITE’S MIND @portentint


Слайд 26

Powerful @portentint


Слайд 27

Less intuitive @portentint


Слайд 28

yslow.org @portentint


Слайд 29

WEBPAGETEST.ORG A HAPPY MEDIUM @portentint


Слайд 30

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


Слайд 31

HAR SITE SPEED SUPERPOWERS @portentint


Слайд 32

@portentint


Слайд 33

@portentint


Слайд 34

A FEW OTHERS pingdom gtmetrix @portentint


Слайд 35

DIAGNOSING BOTTLENECKS & SPEEDING UP YOUR SITE @portentint


Слайд 36

TRANSMISSION @portentint


Слайд 37

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


Слайд 38

It’s about bandwidth Blue = Download time @portentint


Слайд 39

Image Compression difficul‫:﬚‬ impact: @portentint


Слайд 40

Google PageSpeed @portentint


Слайд 41

HAR @portentint


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

Page Speed Insights… @portentint


Слайд 47

…But it only does png @portentint


Слайд 48

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


Слайд 49

USE WHEN Always @portentint


Слайд 50

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


Слайд 51

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


Слайд 52

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


Слайд 53

PNG format, 32m color: 13kb @portentint


Слайд 54

PNG format, 256k color: 8kb @portentint


Слайд 55

USE WHEN Always @portentint


Слайд 56

Minification difficul‫:﬚‬ impact: @portentint


Слайд 57

Not minified: 260kb @portentint


Слайд 58

Minified: 32kb @portentint


Слайд 59

Google PageSpeed @portentint


Слайд 60

Use .MIN.JS version of javascript libraries @portentint


Слайд 61

jscompress.com @portentint


Слайд 62

cssminifier.com @portentint


Слайд 63

HTML, too @portentint


Слайд 64

USE WHEN Always @portentint


Слайд 65

HTTP compression difficul‫:﬚‬ impact: @portentint


Слайд 66

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


Слайд 67

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


Слайд 68

CHECKGZIPCOMPRESSION.COM @portentint


Слайд 69

Google PageSpeed @portentint


Слайд 70

Apache mod_deflate @portentint


Слайд 71

nginx ngx_h‫﬙‬p_gzip_module @portentint


Слайд 72

IIS Click the checkbox @portentint


Слайд 73

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


Слайд 74

USE WHEN Always @portentint


Слайд 75

Expires Headers difficul‫:﬚‬ impact: @portentint


Слайд 76

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


Слайд 77

Google PageSpeed @portentint


Слайд 78

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


Слайд 79

Apache mod_expires @portentint


Слайд 80

nginx ngx_h‫﬙‬p_headers_module @portentint


Слайд 81

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


Слайд 82

USE WHEN Site uses many static files @portentint


Слайд 83

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


Слайд 84

RENDERING @portentint


Слайд 85

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


Слайд 86

Webpagetest.org @portentint


Слайд 87

HAR view This line This number @portentint


Слайд 88

Load order difficul‫:﬚‬ impact: @portentint


Слайд 89

CSS first. Javascript last. @portentint


Слайд 90

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


Слайд 91

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


Слайд 92

Google PageSpeed @portentint


Слайд 93

HAR @portentint


Слайд 94

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


Слайд 95

USE WHEN You can @portentint


Слайд 96

Parallel downloads difficul‫:﬚‬ impact: @portentint


Слайд 97

3 different subdomains @portentint


Слайд 98

Parallel load @portentint


Слайд 99

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


Слайд 100

Optimizing HTML difficul‫:﬚‬ impact: @portentint


Слайд 101

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


Слайд 102

why? @portentint


Слайд 103

Put in .css instead @portentint


Слайд 104

Much be‫﬙‬er @portentint


Слайд 105

Minified html @portentint


Слайд 106

DOM elements (yslow) @portentint


Слайд 107

USE WHEN Always @portentint


Слайд 108

Lazy loading difficul‫:﬚‬ impact: @portentint


Слайд 109

Image loads when I scroll to here @portentint


Слайд 110

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


Слайд 111

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


Слайд 112

DNS prefetch difficul‫:﬚‬ impact: @portentint


Слайд 113

HAR @portentint


Слайд 114

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


Слайд 115

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


Слайд 116

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


Слайд 117

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


Слайд 118

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


Слайд 119

Most popular page prerendered @portentint


Слайд 120

@portentint


Слайд 121

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


Слайд 122

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


Слайд 123

USE WHEN You know certain pages dominate @portentint


Слайд 124

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


Слайд 125

SERVING @portentint


Слайд 126

Nerds required yeah baby @portentint


Слайд 127

TTFB: Time To First Byte @portentint


Слайд 128

Google PageSpeed @portentint


Слайд 129

HAR @portentint


Слайд 130

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


Слайд 131

But 250ms is be‫﬙‬er @portentint


Слайд 132

CDN difficul‫:﬚‬ impact: @portentint


Слайд 133

No CDN hellloooooo @portentint


Слайд 134

CDN @portentint


Слайд 135

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


Слайд 136

USE WHEN You can @portentint


Слайд 137

disk caching difficul‫:﬚‬ impact: @portentint


Слайд 138

STORED ON DISK @portentint


Слайд 139

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


Слайд 140

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


Слайд 141

USE WHEN Database-driven pages Dynamically generated content @portentint


Слайд 142

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


Слайд 143

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


Слайд 144

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


Слайд 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


Слайд 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


Слайд 147

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


Слайд 148

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


Слайд 149

USE WHEN Always @portentint


Слайд 150

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


Слайд 151

Xcache APC @portentint


Слайд 152

USE WHEN Site uses a programming language @portentint


Слайд 153

TOOLS FOR SPEEDING UP @portentint


Слайд 154

WordPress: W3 Total Cache @portentint


Слайд 155

PageSpeed modules @portentint


Слайд 156

but… @portentint


Слайд 157

mwaahahaha hahahahah @portentint


Слайд 158

Sometimes, Google turns things off/ends support @portentint


Слайд 159

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


Слайд 160

WHY DO I GET DIFFERENT NUMBERS? @portentint


Слайд 161

Webpagetest.org: > 8 seconds @portentint


Слайд 162

HAR: < 3 seconds @portentint


Слайд 163

Pingdom: 1.67 seconds @portentint


Слайд 164

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


Слайд 165

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


Слайд 166

@portentint


Слайд 167

MORE TO DO @portentint


Слайд 168

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


Слайд 169

PERSUADING YOUR BOSS @portentint


Слайд 170

HAVE A RACE: WEBPAGETEST.ORG @portentint


Слайд 171

HAVE A RACE: Frames in Chrome @portentint


Слайд 172

HAVE A RACE: Frames in Chrome @portentint


Слайд 173

HAVE A RACE: Frames in Chrome @portentint


Слайд 174

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


Слайд 175

REMEMBER THE BOTTLENECKS @portentint


Слайд 176

SERVING @portentint


Слайд 177

TRANSMISSION @portentint


Слайд 178

RENDERING @portentint


Слайд 179

HERE’S THE THING TEST!!! @portentint


Слайд 180

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


Слайд 181


×

HTML:





Ссылка: