Automating Optimization

Size: px

Start display at page:

Download "Automating Optimization"

Betty Ryan
6 years ago
Views:

1 Automating Optimization with PageSpeed Jeff Kaufman

2 web server plugin

3 apache

4 apache nginx

5 apache nginx iis

6 apache nginx iis apache traffic server

7 apache nginx iis apache traffic server open lite speed

8 optimize on the fly

9 request comes in

10 optimize in background

11 first response unoptimized

12 later responses optimized

13 what optimizations?

14 <script src=main.js>

15 <script src=main.js> $ JS=main.js $ curl -s -D- -o/dev/null \ example.com/$js \ grep Cache-Control

16 <script src=main.js> $ JS=main.js $ curl -s -D- -o/dev/null \ example.com/$js \ grep Cache-Control Cache-Control: max-age=300

17 cache-control: tradeoff

18 balance speed and freshness

19 short: update content faster

20 short: update content faster long: fast loads with few round trips

21 we can do better: longcaching

22 very long cache lifetimes

23 very long cache lifetimes change url when content changes

24 annoying to do manually

25 <script src=main.js.pagespeed.jm.928nzvwy1t.js>

26 <script src=main.js.pagespeed.jm.928nzvwy1t.js>

27 <script src=main.js.pagespeed.jm.928nzvwy1t.js> $ JS=main.js.pagespeed.jm.928nzVwy1T.js $ curl -s -D- -o/dev/null \ example.com/$js \ grep Cache-Control

28 <script src=main.js.pagespeed.jm.928nzvwy1t.js> $ JS=main.js.pagespeed.jm.928nzVwy1T.js $ curl -s -D- -o/dev/null \ example.com/$js \ grep Cache-Control Cache-Control: max-age=

29 content changes, hash changes

30 $ echo "// " >> /var/www/main.js

31 $ echo "// " >> /var/www/main.js <script src=main.js.pagespeed.jm.928nzvwy1t.js>

32 hash didn't change?

33 $ echo "// " >> /var/www/main.js <script src=main.js.pagespeed.jm.928nzvwy1t.js> <script src=main.js.pagespeed.jm.928nzvwy1t.js>

34 we added a comment

35 pagespeed strips comments

36 $ echo "alert('hello');" >> /var/www/main.js

37 $ echo "alert('hello');" >> /var/www/main.js <script src=main.js.pagespeed.jm.dkajaavxah.js>

38 $ echo "alert('hello');" >> /var/www/main.js <script src=main.js.pagespeed.jm.dkajaavxah.js> <script src=main.js.pagespeed.jm.928nzvwy1t.js>

39 $ echo "alert('hello');" >> /var/www/main.js <script src=main.js.pagespeed.jm.dkajaavxah.js> <script src=main.js.pagespeed.jm.928nzvwy1t.js>

40 what else is automatic?

41 as much as possible

42 combine css

43 <link rel=stylesheet href=styles/blue> <link rel=stylesheet href=styles/big> <link rel=stylesheet href=styles/bold>

47 <link rel=stylesheet href=styles/blue> <link rel=stylesheet href=styles/big> <link rel=stylesheet href=styles/bold>

48 <link rel=stylesheet href=styles/blue> <link rel=stylesheet href=styles/big> <link rel=stylesheet href=styles/bold> <link rel=stylesheet href="styles/blue+big+bold.pagespeed.cc.xo4he3_gyf.css">

49 combine js

50 <script src=scripts/main.js> <script src=scripts/lightbox>

51 <script src=scripts/main.js> <script src=scripts/lightbox> <script src="main.js+lightbox.pagespeed.jc.zyiuaxfs8i.js"> </script> <script> eval(mod_pagespeed_9li9rj222v); eval(mod_pagespeed_ax3xzpxvpu); </script>

52 minify css

53 #iddy, #anotherid { /* This comment will be stripped.*/ border: solid 1px #cccccc; padding: 1.2em; float: left; color:windowtext; }

54 #iddy, #anotherid { /* This comment will be stripped.*/ border: solid 1px #cccccc; padding: 1.2em; float: left; color:windowtext; } #iddy,#anotherid{border:sol id 1px#ccc;padding:1.2em;fl oat:left;color:windowtext}

55 and js

56 function foo (bar, baz) { // This comment will be removed var state = 0; document.write("internal " + state); state = 1; }

57 function foo (bar, baz) { // This comment will be removed var state = 0; document.write("internal " + state); state = 1; } function foo(bar,baz){var st ate=0;document.write("intern al"+state);state=1}

58 inline css, js, images

59 <link rel=stylesheet src=main.css> <script src=main.js></script> <img src=spacer.gif>

60 <link rel=stylesheet src=main.css> <script src=main.js></script> <img src=spacer.gif> <style>.red{background-color:red}</style> <script>var a=7;a+=1;</style> <img src="data:image/gif;bas e64,r0lgodlhaqabaiaaaauebaaa ACwAAAAAAQABAAACAkQBADs=">

61 optimize images

62 lots to fix

63 resizing images in html

64 <img width=265 height=173 src=large.jpg>

65 <img width=265 height=173 src=large.jpg> $ identify <(curl -s

66 <img width=265 height=173 src=large.jpg> $ identify <(curl -s x

67 <img width=265 height=173 src=large.jpg> $ identify <(curl -s x x173 vs 2645x1734

68 <img width=265 height=173 src=large.jpg> $ identify <(curl -s x x173 vs 2645x1734 -> 100x too big

69 <img width=265 height=173 src=large.jpg> $ identify <(curl -s x x173 vs 2645x1734 -> 100x too big <img width=265 height=173 src="265x173xlarge.jpg.pagespeed.ic.lxxahtowrv.jpg">

70 images minimally compressed

71 <img src=large.jpg>

72 <img src=large.jpg> $ curl example.com/large.jpg wc -c

73 <img src=large.jpg> $ curl example.com/large.jpg wc -c <img src=xlarge.jpg.pagespeed.ic.0pc4jubmfp.jpg>

74 <img src=large.jpg> $ curl example.com/large.jpg wc -c <img src=xlarge.jpg.pagespeed.ic.0pc4jubmfp.jpg> $ curl example.com/xlarge.jpg.pagespeed wc -c

75 <img src=large.jpg> $ curl example.com/large.jpg wc -c <img src=xlarge.jpg.pagespeed.ic.0pc4jubmfp.jpg> $ curl example.com/xlarge.jpg.pagespeed wc -c % smaller

76 photographs as png

77 <img src=photo.png>

78 <img src=photo.png> $ curl example.com/photo.png wc -c

79 <img src=photo.png> $ curl example.com/photo.png wc -c

80 <img src=photo.png> $ curl example.com/photo.png wc -c <img src=xphoto.png.pagespeed.ic.8zf7dpi_ib.jpg>

81 <img src=photo.png> $ curl example.com/photo.png wc -c <img src=xphoto.png.pagespeed.ic.8zf7dpi_ib.jpg> $ curl example.com/xphoto.png.pagepseed wc -c

82 <img src=photo.png> $ curl example.com/photo.png wc -c <img src=xphoto.png.pagespeed.ic.8zf7dpi_ib.jpg> $ curl example.com/xphoto.png.pagepseed wc -c

83 <img src=photo.png> $ curl example.com/photo.png wc -c <img src=xphoto.png.pagespeed.ic.8zf7dpi_ib.jpg> $ curl example.com/xphoto.png.pagepseed wc -c x smaller

84 convert to webp

85 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg>

86 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c

87 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c

88 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c <img src=xcat.jpg.pagespeed.ic.2phlvlpriq.webp>

89 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c <img src=xcat.jpg.pagespeed.ic.2phlvlpriq.webp> $ curl example.com/.webp wc -c

90 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c <img src=xcat.jpg.pagespeed.ic.2phlvlpriq.webp> $ curl example.com/.webp wc -c

91 <img src=xcat.jpg.pagespeed.ic.si2h8edteu.jpg> $ curl example.com/.jpg wc -c <img src=xcat.jpg.pagespeed.ic.2phlvlpriq.webp> $ curl example.com/.webp wc -c % smaller

92 so far: fully automatic optimizations

93 extend cache

94 extend cache combine css, js

95 extend cache combine css, js minify css, js

96 extend cache combine css, js minify css, js inline css, js, images

97 extend cache combine css, js minify css, js inline css, js, images optimize images

98 extend cache combine css, js minify css, js inline css, js, images optimize images + many smaller fixes

99 install module: receive optimizations

100 what if you want more?

101 defer render blocking js

102 defer render blocking js prioritize critical css

103 defer render blocking js prioritize critical css lazy-load images

104 defer render blocking js prioritize critical css lazy-load images sprite images

105 defer render blocking js prioritize critical css lazy-load images sprite images experiments

106 but first: tuning

107 check messages

108

109 pagespeed MessageBufferSize ;

110

111 ?PageSpeedFilters=+debug

112

113 basics done, add more speed

114 defer javascript

115 ?PageSpeedFilters=+defer_javascript

116 js blocks rendering

117 defer progressive enhancement js

118 <script src=jquery.js></script>

119 <script src=jquery.js></script> <script src=autocomplete.js></script>

120 <script src=jquery.js></script> <script src=autocomplete.js></script> lots of visually important page content

121 <script src=jquery.js></script> <script src=autocomplete.js></script> lots of visually important page content <script type="text/psajs" orig_index="0" src=jquery.js></script>

122 <script src=jquery.js></script> <script src=autocomplete.js></script> lots of visually important page content <script type="text/psajs" orig_index="0" src=jquery.js></script> <script type="text/psajs" orig_index="1" src=autocomplete.js></script>

123 <script src=jquery.js></script> <script src=autocomplete.js></script> lots of visually important page content <script type="text/psajs" orig_index="0" src=jquery.js></script> <script type="text/psajs" orig_index="1" src=autocomplete.js></script> lots of visually important page content

124 <script src=jquery.js></script> <script src=autocomplete.js></script> lots of visually important page content <script type="text/psajs" orig_index="0" src=jquery.js></script> <script type="text/psajs" orig_index="1" src=autocomplete.js></script> lots of visually important page content <script src="js_defer.js"></script>

125 don't defer rendering js

126 check page for js breakage

127 EnableFilters defer_javascript

128 prioritize critical css

129 ?Pa...Filters=+prioritize_critical_css

130 remove redundant css

131 inline page-specific css

132 <link rel=stylesheet site.css>

133 <link rel=stylesheet site.css> site.css:

134 <link rel=stylesheet site.css> site.css:.header { }

135 <link rel=stylesheet site.css> site.css:.header { }.content { }

136 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { }

137 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }

138 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }.sidebar { }

139 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }.sidebar { }.contact { }

140 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }.sidebar { }.contact { }.menu { }

141 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }.sidebar { }.contact { }.menu { } #passwdform { }

142 <link rel=stylesheet site.css> site.css:.header { }.content { }.footer { } #buybutton { }.sidebar { }.contact { }.menu { } #passwdform { }

143 <style>.header { }.content { }.footer { }.menu { } </style>

144 what css is what?

145 js beaconing

146 EnableFilters prioritize_critical_css

147 lazyload images

148 ?PageSpeedFilters=+lazyload_images

149 keep above-the-fold images

150 don't load later images

151 don't load later images (until onload or scroll)

152 what's above the fold?

153 more js beaconing

154 <img src=a.jpg>

155 <img src=a.jpg> lots of page content

156 <img src=a.jpg> lots of page content <img src=b.jpg>

157 <img src=a.jpg> lots of page content <img src=b.jpg> <img src=a.jpg

158 <img src=a.jpg> lots of page content <img src=b.jpg> <img src=a.jpg pagespeed_url_hash=" "

159 <img src=a.jpg> lots of page content <img src=b.jpg> <img src=a.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);">

160 <img src=a.jpg> lots of page content <img src=b.jpg> <img src=a.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> lots of page content

161 <img src=a.jpg> lots of page content <img src=b.jpg> <img src=a.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> lots of page content <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"

162 <img src=b.jpg> <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);">

163 <img src=b.jpg> <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> <img pagespeed_lazy_src=b.jpg

164 <img src=b.jpg> <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> <img pagespeed_lazy_src=b.jpg pagespeed_url_hash=" "

165 <img src=b.jpg> <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> <img pagespeed_lazy_src=b.jpg pagespeed_url_hash=" " src="/pagespeed_static/1.jibnmqyl6s.gif"

166 <img src=b.jpg> <img src=b.jpg pagespeed_url_hash=" " onload="pagespeed.criticalimages. checkimageforcriticality(this);"> <img pagespeed_lazy_src=b.jpg pagespeed_url_hash=" " src="/pagespeed_static/1.jibnmqyl6s.gif" onload="pagespeed.lazyloadimages. loadifvisibleandmaybebeacon(this);">

167 EnableFilters lazyload_images

168 sprite images

169 ?PageSpeedFilters=+sprite_images

170 not (entirely) automatic

171 does the annoying part

172 gif and png only (no jpeg)

173 gif and png only (no jpeg) css backgrounds only (no <img>)

174 gif and png only (no jpeg) css backgrounds only (no <img>) explicit width and height in css

175

176 <a href=left><img src=left.png></a> <a href=right><img src=right.png></a>

177 <a href=left></a> <a href=right></a>

178 <a href=left id=left></a> <a href=right id=right></a>

179 <a href=left id=left></a> <a href=right id=right></a> <style> a { display: inline-block } </style>

180 <a href=left id=left></a> <a href=right id=right></a> <style> a { display: inline-block } #left { background:url('left.png') } #right { background:url('right.png') } </style>

181 <a href=left id=left></a> <a href=right id=right></a> <style> a { display: inline-block } #left { width: 100px; height: 100px; background:url('left.png') } #right { width: 100px; height: 100px; background:url('right.png') } </style>

182 #left #right background:url('left.png') background:url('right.png')

183 #left #right background:url('left.png') background:url('right.png') #right background:url(right.png+left.png.pagespeed.is.7r-_zh- t.png); #left background:url(right.png+left.png.pagespeed.is.7r-_zh- t.png);

184 #left #right background:url('left.png') background:url('right.png') #right background:url(right.png+left.png.pagespeed.is.7r-_zh- t.png); background-position:0px 0px; #left background:url(right.png+left.png.pagespeed.is.7r-_zh- t.png); background-position:0px -100px;

185 EnableFilters sprite_images

186 experiments

187 does prioritizing critical css help?

188 what should my inlining threshold be?

189 do lower quality images lower conversions?

190 RunExperiment on

191 RunExperiment on AnalyticsID UA-XXXXXXX-Y

192 RunExperiment on AnalyticsID UA-XXXXXXX-Y ExperimentSpec "id=1;percent=50;default"

193 RunExperiment on AnalyticsID UA-XXXXXXX-Y ExperimentSpec "id=1;percent=50;default" ExperimentSpec "id=2;percent=50;default;

194 RunExperiment on AnalyticsID UA-XXXXXXX-Y ExperimentSpec "id=1;percent=50;default" ExperimentSpec "id=2;percent=50;default; enabled=prioritize_critical_css"

195 Set-Cookie: PageSpeedExperiment=1

196 Set-Cookie: PageSpeedExperiment=1 [page with default optimizations]

197 Set-Cookie: PageSpeedExperiment=1 [page with default optimizations] _gaq.push(['_setcustomvar', 1, 'ExperimentState', 'Experiment: 1']);

198 Set-Cookie: PageSpeedExperiment=1 [page with default optimizations] _gaq.push(['_setcustomvar', 1, 'ExperimentState', 'Experiment: 1']); Set-Cookie: PageSpeedExperiment=2

199 Set-Cookie: PageSpeedExperiment=1 [page with default optimizations] _gaq.push(['_setcustomvar', 1, 'ExperimentState', 'Experiment: 1']); Set-Cookie: PageSpeedExperiment=2 [page with prioritize_critical_css added]

200 Set-Cookie: PageSpeedExperiment=1 [page with default optimizations] _gaq.push(['_setcustomvar', 1, 'ExperimentState', 'Experiment: 1']); Set-Cookie: PageSpeedExperiment=2 [page with prioritize_critical_css added] _gaq.push(['_setcustomvar', 1, 'ExperimentState', 'Experiment: 2']);

201 compare anything GA measures

202 compare anything GA measures page load time

203 compare anything GA measures page load time bounce rate

204 compare anything GA measures page load time bounce rate conversions

205 find what's best for your site

206 summary

207 automatic baseline optimizations

208 automatic baseline optimizations powerful configurable tool

209 Resources developers.google.com/speed/pagespeed/module

210 Resources developers.google.com/speed/pagespeed/module

211 Resources developers.google.com/speed/pagespeed/module

212 questions?

Executive Summary. Performance Report for: The web should be fast. Top 1 Priority Issues. How does this affect me?

Executive Summary. Performance Report for: The web should be fast. Top 1 Priority Issues. How does this affect me? The web should be fast. Executive Summary Performance Report for: http://instantwebapp.co.uk/8/ Report generated: Test Server Region: Using: Fri, May 19, 2017, 4:01 AM -0700 Vancouver, Canada Firefox (Desktop)