Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

15 Ways To A Blistering-Fast Web Site


Published on

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.

Published in: Marketing
  • if you will see total page size of any page you will find that image consists of more than 80% of total KB. the best way to speed up loading time is by compressing the images which can save 70-80% of size and make web pages load fast. i use this compression tool as it allows 50 images in one shot without any restrictions.
    Are you sure you want to  Yes  No
    Your message goes here

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
  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?!!!!
  14. @portentint So what?
  15. @portentint HERE’S THE THING
  16. @portentint HERE’S THE THING
  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
  20. @portentint SITE SPEED FACTORS
  21. @portentint TOOLS
  22. @portentint Every tool interprets results & has bias
  23. @portentintPagespeed Insights: B
  24. @portentintPagespeed Insights: B-
  25. @portentintPagespeed Insights: B-
  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 > 8 seconds B+
  29. B+
  30. may cause insanity ignores lazy loading shows TTFB film strip view, shows times
  31. A-
  32. A- More accurate
  33. A- Breakdown by type/domain etc
  34. still abstraction purely transmission-focused
  35. load Good wifi No cache 2.5s load .7s DOM
  36. load 4G No cache 4s load 1.25s DOM
  37. @portentint check out these guns, baby
  38. @portentint check out these guns, baby learn actual vs. perceived load time.
  39. Learn to read the HTTP Archive (HAR)
  40. @portentint Resource-by-resource view
  41. @portentint Full transfer details
  42. @portentint HTML parsed (no CSS, js, etc.)
  43. @portentint Fully loaded
  44. @portentint Filmstrip thingy
  45. @portentint For the nerds Audit
  46. @portentint View >> Developer >> Developer Tools >> Network
  47. @portentint Time to get to work
  48. @portentint TRANSMISSION more compression next time…
  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
  56. @portentint Compress images 2
  57. @portentint@portentint
  58. @portentint@portentint HAR
  59. @portentint Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop
  60. @portentint@portentint 272kb jpg
  61. @portentint@portentint 139kb jpg
  62. @portentint 1.2kb
  63. @portentint .4kb
  64. @portentint JPGs: Start with 60% PNGs: Start with 256 color
  65. @portentint Combining techniques
  66. @portentint
  67. @portentint
  68. @portentint 350kb
  69. @portentint 200kb
  70. @portentint 150kb
  71. @portentint No text, no logos in jpgs!!!
  72. @portentint Layering instead: 150kb, sharper image
  73. @portentint Minify 3
  74. @portentint Not minified: 260kb
  75. @portentint Minified: 84kb
  76. @portentint PageSpeed
  77. @portentint Use .MIN.JS version of javascript libraries
  78. @portentint
  79. @portentint
  80. @portentint GZIP Compression 4
  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
  87. @portentint IIS ☑︎
  88. @portentint The Result
  89. @portentint Original home page: 4.1mb New home page: 1.75mb
  90. @portentint Original home page: 3.7mb New home page: 1.5mb
  91. @portentint Far-future Expires Headers 5
  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
  96. @portentint hellloooooo No CDN
  97. @portentint CDN
  98. @portentint Use CDN javascript libraries
  99. @portentint Use Cookieless Domains 7
  100. @portentint Cookieless domains
  101. @portentint 1.7kb Remove cookie: 1.2kb (compress: .3kb)
  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
  108. @portentint what the hell?!!!!
  109. @portentint can i get index.html, please?
  110. @portentint one sec…
  111. @portentint Request Code Database Code Response
  112. @portentint zzzzz
  113. @portentint Remove Redirect Chains 8
  114. @portentint
  115. @portentint
  116. @portentint Use Keep-Alive 9
  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
  122. @portentint Use Caching 10
  123. @portentint STORED ON DISK
  124. @portentint STORED IN MEMORY
  125. @portentint Bypasses this
  126. @portentint i’m back you missed me, admit it
  127. @portentint nginx Varnish Apache MySQL builds pages stores pages serves pages
  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
  132. @portentint Practice Good Mechanics 12
  133. @portentint Putting a database on a web server is like…
  134. @portentint RENDERING well, $#&!
  135. Perceived vs. Actual Load Time
  136. @portentint 6.19s
  137. @portentint 6.34s
  138. @portentint 6.78s
  139. @portentint Oy.
  140. @portentint Optimize HTML 13
  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
  146. @portentint Remove/compress Viewstate
  147. Minify!!!
  148. @portentint Prefetch and Prerender 14
  149. @portentint <link rel="dns-prefetch" href="//" /> <link rel=“dns-prefetch” href=“” /> 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=""> Load & render page in advance
  152. @portentint Prioritize content 15
  153. @portentint Load Javascript Later
  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
  162. @portentint
  163. Progressive Animation
  164. @portentint 4.57s load an image first!!!
  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
  172. @portentint 3G/small 4G/bigger Tablet/wifi Desktop/direct
  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.
  177. @portentint SSL 100% required
  178. @portentint No need for sharding
  179. @portentint 10% adoption so far
  180. @portentint
  181. @portentint GETTING BUY IN
  182. @portentint The Drag Race
  183. @portentint Learn the HAR
  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
  186. @portentint Incremental improvement
  188. @portentint Ian Lurie @portentint Donations Accepted (small bills only)