Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Lots of Little Things: Site Speed, 2017

6 112 vues

Publié le

A faster site means higher rankings, more conversions and a happier audience. Here are the little things that add up.

Publié dans : Marketing
  • Soyez le premier à commenter

Lots of Little Things: Site Speed, 2017

  1. LOTS OF LITTLE THINGSMAKING A SITE FAST EVERYWHERE
  2. Ian Lurie CEO & Founder, Portent, Inc. @portentint
  3. I’M NOT A LAS VEGAS GUY
  4. @portentint 7 second load time
  5. 9 second load time
  6. So what?
  7. HERE’S THE THING
  8. WHY? $- $10.00 $20.00 $30.00 1 2 3 4 5 6 7 8 9 Load time (seconds) Page Value vs. Load Time
  9. TOOLS
  10. Every tool interprets results & has bias
  11. Pagespeed Insights: B
  12. @portentint Webpagetest.org: > 8 seconds Webpagetest.org: B+
  13. @portentintPingdom.com: B+
  14. Learn to read the HTTP Archive (HAR) A+++++++
  15. Resource-by-resource view
  16. Separates DOM content load from
  17. Full load
  18. @portentint View >> Developer >> Developer Tools >> Network
  19. check out these guns, baby
  20. Time to get to work
  21. TRANSMISSION more compression next time…
  22. Use the right image format 1
  23. PNG format, 800 x 540: 1,000kb
  24. PNG format, 800 x 540: 1,000kb
  25. @portentint JPG: 30kb PNG: 13kb why won’t anyone do this?!!!
  26. @portentint 700kb png 64kb jpg
  27. JPG = Photos PNG = Fewer colors, like logos
  28. Compress images 2
  29. @portentint HAR
  30. Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop
  31. @portentint 272kb jpg
  32. @portentint 139kb jpg
  33. @portentint 1.2kb
  34. @portentint .4kb
  35. JPGs: Start with 60% PNGs: Start with 256 color
  36. @portentint Combining techniques
  37. @portentint
  38. 350kb
  39. 150kb
  40. No text, no logos in jpgs!!!
  41. Layering instead: 150kb, sharper image
  42. Minify 3
  43. Not minified: 260kb
  44. Minified: 84kb
  45. Use .MIN.JS version of javascript libraries
  46. Google javascript libraries https://developers.google.com/speed/libraries/
  47. Use GZIP Compression 4
  48. @portentint
  49. Hey, thanks! I’ll extract it here. I’m going to compress these files for you so they arrive more quickly.
  50. @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
  51. @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
  52. @portentint IIS ☑︎
  53. @portentint CHECKGZIPCOMPRESSION.COM
  54. @portentint The Result
  55. Original home page: 4.1mb New home page: 1.75mb
  56. Original home page: 3.7mb New home page: 1.5mb
  57. Use a CDN (not a bandwidth thing) 5
  58. @portentint hellloooooo No CDN
  59. @portentint CDN
  60. Use CDN javascript libraries https://developers.google.com/speed/libraries/
  61. SERVING a bit to the left, please… I better get a tip for this
  62. @portentint Time to First Byte Time between request and delivery of first data
  63. @portentint what the hell?!!!!
  64. Use Caching 6
  65. @portentint Sure! may i have index.html? No Caching
  66. Request Starts Queries database Generates page Response
  67. @portentint i’m thinking… any time now… No Caching
  68. @portentint STORED ON DISK
  69. @portentint STORED IN MEMORY
  70. Bypasses this
  71. @portentint Apache: Memcached IIS: Check a box nginx: Memcached
  72. RENDERING well, $#&!
  73. The Critical Rendering Path
  74. Hi There!!! Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. yep. here’s the first bit… can i get thispage.html? 0s 2s
  75. Hi There!!! Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. can i get thispage.html? and the text... and what you need to make it look good 0s 2s
  76. Hi There!!! Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. can i get thispage.html? and the first image… and what you need to make it look good 0s 2s
  77. Hi There!!! Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. can i get thispage.html? and the other stuff and what you need to make it look good 0s 2s
  78. can i get thispage.html? Hi There!!! 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 sunt in culpa qui officia deserunt mollit anim id est laborum. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Hi There!!! 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. 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 ctat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. here’s the images the text the scripts and everything else good luck 0s 2s
  79. Oy.
  80. Optimize HTML 7
  81. @portentint 35,000 lines of code Render time: 1.5s html: 900kb
  82. why?
  83. At least get rid of the white space Your browser has to load and parse it
  84. Prioritize content 8
  85. Only load javascript you need, when you need it
  86. @portentint <script src=”foo.js" async></script> Execute asynchronously
  87. @portentint <script src=”foo.js" defer></script> Execute after page is parsed
  88. @portentint Or just put it at the bottom of the page!!!
  89. @portentint Javascript after CSS, always
  90. Inline Critical CSS
  91. Inline this Browser can do basic rendering without another request
  92. GETTING BUY IN
  93. The Drag Race
  94. Be ready to explain actual vs. perceived load time
  95. 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
  96. Incremental improvement Caching servers Defer via javascript Progressive video load Code acceleration CSS optimization Javascript optimization Server-side/db optimization
  97. IT’S LOTS OF LITTLE THINGS
  98. Ian Lurie @portentint www.portent.com http://portent.co/speedy-sites http://portent.co/page-speed-guide Donations Accepted (small bills only)

×