15 Ways To A Blistering-Fast Web Site
•
4 likes•31,047 views
There's also a lot more to page load speed optimization than image compression. Learn the little rendering, server tuning, and compression best practices that can make your site so fast people won't have time to blink.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to 15 Ways To A Blistering-Fast Web Site
Similar to 15 Ways To A Blistering-Fast Web Site (20)
More from Ian Lurie
More from Ian Lurie (20)
Recently uploaded
Recently uploaded (20)
15 Ways To A Blistering-Fast Web Site
- 1. @portentint TO A BLISTERING FAST SITE 15 AYW S
- 2. @portentint Ian Lurie CEO & Founder, Portent, Inc. @portentint i am a liar
- 3. 15 > 10 There’s just so much
- 4. IT’S LOTS OF LITTLE THINGS
- 5. @portentint I am chill… I am chill…
- 6. @portentint
- 7. @portentint
- 8. @portentint
- 9. @portentint
- 10. @portentint
- 11. @portentint
- 12. @portentint
- 13. @portentint i am not chill omg why is this so hard all the brainpower of every dev team and you still can’t compress your images or use disk caching or compress viewstate wtf is going on?!!!!
- 17. @portentint NO POLITICS TODAY I PROMISE
- 18. @portentint BUT NET NEUTRALITY CHANGES MAY MAKE BANDWIDTH PRECIOUS
- 19. @portentint WHY? $- $10.00 $20.00 $30.00 1 2 3 4 5 6 7 8 9 Load time (seconds) Page Value vs. Load Time
- 22. @portentint Every tool interprets results & has bias
- 26. @portentint Pagespeed Insights favors transmission and rendering
- 27. @portentint Pagespeed Insights but great for fast analysis and help and excellent rendering tips
- 28. @portentint Webpagetest.org: > 8 seconds Webpagetest.org: B+
- 30. Webpagetest.org may cause insanity ignores lazy loading shows TTFB film strip view, shows times
- 33. @portentintPingdom.com: A- Breakdown by type/domain etc
- 35. Portent.com load Good wifi No cache 2.5s load .7s DOM
- 36. Portent.com load 4G No cache 4s load 1.25s DOM
- 38. @portentint check out these guns, baby learn actual vs. perceived load time.
- 39. Learn to read the HTTP Archive (HAR)
- 42. @portentint HTML parsed (no CSS, js, etc.)
- 46. @portentint View >> Developer >> Developer Tools >> Network
- 47. @portentint Time to get to work
- 49. @portentint Use the right image format 1
- 50. @portentint PNG format, 800 x 540: 1,000kb
- 51. @portentint PNG format, 800 x 540: 1,000kb
- 52. @portentint PNG format, 800 x 540: 1,000kb
- 53. @portentint JPG: 30kb PNG: 13kb why won’t anyone do this?!!!
- 54. @portentint 700kb png 64kb jpg
- 55. @portentint JPG = Photos PNG = Fewer colors
- 59. @portentint Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop
- 63. @portentint .4kb
- 64. @portentint JPGs: Start with 60% PNGs: Start with 256 color
- 66. @portentint
- 67. @portentint
- 71. @portentint No text, no logos in jpgs!!!
- 72. @portentint Layering instead: 150kb, sharper image
- 77. @portentint Use .MIN.JS version of javascript libraries
- 81. @portentint Hey, thanks! I’ll extract it here. I’m going to compress these files for you so they arrive more quickly.
- 83. @portentint
- 84. Use with extreme caution over SSL
- 85. @portentint <ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* … mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule> Apache
- 86. @portentint gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x- javascript text/xml application/xml application/xml+rss text/javascript; nginx
- 89. @portentint Original home page: 4.1mb New home page: 1.75mb
- 90. @portentint Original home page: 3.7mb New home page: 1.5mb
- 92. @portentint this file doesn’t change that often. ok, i’ll save it to my hard drive.
- 93. @portentint Apache: mod_expires nginx: ngx_http_headers_module IIS: clientCache, httpExpires, ???
- 94. What about parallel downloads? Sprites? HTTP2 will make requests cheaper You be the judge
- 95. @portentint Use a CDN (not a bandwidth thing) 6
- 97. @portentint CDN
- 98. @portentint Use CDN javascript libraries https://developers.google.com/speed/libraries/
- 102. @portentint meh
- 103. 100 files * 550b 55kb Again. And again. And again.
- 104. Also Packet = max 1500 bytes 500 byte cookie + 1.5kb image = 2kb Increases round trips
- 105. @portentint SERVING a bit to the left, please…
- 106. @portentint Time to First Byte Time between request and delivery of first data
- 107. @portentint This is too long
- 110. @portentint one sec…
- 112. @portentint zzzzz
- 117. @portentint Sure! may i have index.html? No keep-alive
- 118. @portentint Sure! may i have index.html? ok! can I have styles.css? uh, ok No keep-alive
- 119. @portentint No keep-alive Sure! may i have index.html? ok! can I have styles.css? uh, okthanks! can i have jquery.js?
- 120. @portentint No keep-alive Sure! may i have index.html? ok! can I have styles.css? uh, okthanks! can i have jquery.js? can i have image.gif? No keep-alive
- 121. @portentint Sure! can i have index.html, image.gif, jquery.js and styles.css please? Keep-alive maintains connections for fewer handshakes
- 126. @portentint i’m back you missed me, admit it
- 128. @portentint Use the right database for the job 11
- 129. @portentint NOSQL use NOSQL and you’ll be happy and attractive.
- 130. @portentint SQL
- 131. @portentint Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? NOSQL
- 133. @portentint Putting a database on a web server is like…
- 135. Perceived vs. Actual Load Time
- 136. @portentint 6.19s
- 137. @portentint 6.34s
- 138. @portentint 6.78s
- 139. @portentint Oy.
- 141. @portentint Clean it or defer it
- 142. @portentint 35,000 lines of code Render time: 1.5s html: 900kb
- 143. @portentint why?
- 144. @portentint At least get rid of the white space Your browser has to load and parse it
- 145. @portentint Defer drop-down generation using javascript
- 147. Minify!!!
- 149. @portentint <link rel="dns-prefetch" href="//domainname.com" /> <link rel=“dns-prefetch” href=“https://api.twitter.com” /> Make the DNS connection in advance
- 150. @portentint <link rel="prerender" href=”images/kittens.jpg"> Load file in advance
- 151. @portentint <link rel=”prefetch" href="http://my-site.com/bar.html"> Load & render page in advance
- 154. @portentint <script src=”foo.js" async></script> Execute asynchronously
- 155. @portentint <script src=”foo.js" defer></script> Execute after page is parsed
- 156. Inline Critical CSS
- 157. @portentint Inline this Browser can do basic rendering without another request
- 158. @portentint Use this
- 159. @portentint Use this
- 160. Try Lazy Loading
- 161. @portentint Image loads when I scroll to here
- 165. Have Video Alternative Content
- 166. @portentint Static image when I arrive
- 167. Then Defer Video Load
- 168. @portentint Prioritize video as relevant
- 169. Progressive Video
- 170. @portentint 10s video 20s video Full-length video
- 171. Responsive Video
- 173. @portentint AMP
- 174. @portentint HTTP/2
- 175. @portentint HTTP/2 reverses many best practices because HTTP calls are cheaper.
- 176. @portentint No need for sprites, code concatenation.
- 178. @portentint No need for sharding
- 179. @portentint 10% adoption so far
- 180. @portentint
- 184. Be ready to explain actual vs. perceived load time
- 185. @portentint WHY? $- $10.00 $20.00 $30.00 1 2 3 4 5 6 7 8 9 Load time (seconds) Page Value vs. Load Time Prove value
- 187. IT’S LOTS OF LITTLE THINGS