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.

Image performance talk by Grant Kemp ( @ukdatageek) for London Web Meetup

876 views

Published on

Presentation on using RESS and Image Performance to speed up websites and increase conversion. Delivered to London Web Meetup on 22 Jan 2015.

Published in: Technology
  • Login to see the comments

Image performance talk by Grant Kemp ( @ukdatageek) for London Web Meetup

  1. 1. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I M A G I N AT I O N TA K I N G I M A G E P E R F O R M A N C E TO A N E W L E V E L I H AV E A D D E D S O M E A N N O TAT I O N S M A R K E D I N Y E L L O W A F T E R T H E P R E S E N TAT I O N T O H E L P T H O S E W H O C O U L D N ’ T AT T E N D . P L E A S E G E T I N T O U C H V I A C O N N E C T E D W I N D O W. C O M I F Y O U H AV E Q U E S T I O N S , A N D I F I H AV E T I M E , I W I L L D O M Y B E S T T O R E S P O N D . TA L K P R E S E N T E D F O R L O N D O N W E B M E E T U P G R O U P 
 2 2 J A N 2 0 1 6 B Y G R A N T K E M P
  2. 2. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk G R A N T K E M P @ U K A N D R O I D
  3. 3. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk W H E R E I W O R K
  4. 4. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I M A G E S A R E N ’ T A P R O B L E M ? ? A R E T H E Y ?
  5. 5. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk £264,770I N E X T R A R E V E N U E F O R S I T E S B Y F I X I N G I M A G E S
  6. 6. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk W H AT W E ’ L L C O V E R • What is performance? • The Image Problem • Strategies to fix the problem • Some of the tools out there • Some results from fixing it
  7. 7. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk
  8. 8. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk W E T H I N K A B O U T C A R S
  9. 9. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk “ T H E E X E C U T I O N O R A C C O M P L I S H M E N T O F W O R K , A C T S , F E AT S , E T C . ”
  10. 10. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk H I G H P E R F O R M A N C E ?
  11. 11. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk R E V O L U T I O N T H E R E H A S B E E N A C O V E R T
  12. 12. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk L E T ’ S G O B A C K T O 2 0 1 0 …
  13. 13. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F R O M I N T E R N E T A R C H I V E S TAT S
  14. 14. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk 2 0 1 5 …
  15. 15. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F R O M I N T E R N E T A R C H I V E S TAT S
  16. 16. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk
  17. 17. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk P R O B L E M 1 : I M A G E S A R E G E T T I N G L A R G E R L A R G E S T L C D S C R E E N I N W O R L D I N T I M E S S Q U A R E ( G O O G L E )
  18. 18. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I M A G E S A C T I VAT E A N D S E L L
  19. 19. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I T B U I L D S B R A N D W I T H V I S I T O R S F R O M M I S S G U I D E D . C O M
  20. 20. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I M A G E S M A K E P E O P L E B U Y
  21. 21. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk P R O B L E M 2 : C R E AT I N G I M A G E S I S C O M P L I C AT E D A N D E X P E N S I V E
  22. 22. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk P R O B L E M 3 : S O M A N Y D E V I C E S
  23. 23. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk W E S T I L L N E E D T O G I V E A C O N S I S T E N T LY G O O D E X P E R I E N C E
  24. 24. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S TA R T W I T H T H E D ATA I S T H E R E A N I M A G E P R O B L E M ? I A M A N A N A LY T I C S G E E K - S O I A LWAY S S TA RT W I T H L O O K I N G F O R D ATA .
  25. 25. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk PA G E T I M I N G S R E P O R T D I S R E G A R D T O P B I T J U S T L O O K H E R E . R E D M E A N S S L O W E R , G R E E N M E A N S FA S T E R
  26. 26. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk G O O G L E PA G E S P E E D I N G A C L I C K T H E PA G E S P E E D L I N K T O G O S T R A I G H T T O T H E PA G E S P E E D R E P O RT T H I S R E P O RT S H O W S T H E PA G E S P E E D F O R Y O U R M O S T P O P U L A R PA G E S . I T S T H E B E S T R E P O RT I N G O O G L E A N A LY T I C S
  27. 27. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk E X A M P L E G O O G L E PA G E S P E E D R E P O R T G O O G L E PA G E S P E E D T O O L ( J U S T G O O G L E I T - I T S A M A Z I N G A N D V E RY U S E F U L . ( A N D F R E E ) )
  28. 28. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S P E C I F I C R E C O M M E N D AT I O N S G O O G L E PA G E S P E E D R E P O RT - D E TA I L F E E D B A C K W H I C H I S A U T O M AT I C A L LY G E N E R AT E D
  29. 29. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S T R AT E G I E S T O I M P R O V E I M A G E P E R F O R M A N C E T H E I M A G E P E R F O R M A N C E P L AY B O O K
  30. 30. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S O L U T I O N 1 : O N E I M A G E S O U R C E F O R A L L D E V I C E S A N D O P T I M I S E A U T O M AT I C A L LY
  31. 31. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S O L U T I O N 2 : U S E O N E W O R K F L O W F O R I M A G E S
  32. 32. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S O L U T I O N 3 : U S E T H E R I G H T I M A G E J P G , P N G A N D G I F A R E N O T T H E O N LY O P T I O N S
  33. 33. “Give the best image to the Customer as fast as possible…. automatically”
  34. 34. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S O L U T I O N 3 B : U S E T H E R I G H T S I Z E I M A G E T H I S I M A G E I S R E S I Z E D B Y T H E B R O W S E R . I T S A C T U A L LY L A R G E R T H A N A F U L L H D T V S C R E E N
  35. 35. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk L O T S O F O V E R S I Z E D I M A G E S A D D U P T O S L O W A N D H E AV Y PA G E S ! T H I S I S T H E A C T U A L S I Z E S H O W N B Y B R O W S E R . N AT U R A L I S T H E A C T U A L S I Z E O F T H E I M A G E .
  36. 36. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk L E T ’ S F I X I M A G E P E R F O R M A N C E H O W D O W E I M P L E M E NT T H E P L A Y S ?
  37. 37. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk R E S P O N S I V E I S N O T R E S P O N S I V E E N O U G H Study: https://timkadlec.com/2013/06/why-we-need- responsive-images/ AT 3 6 0 P X W I D E , T H E S E 4 0 2 S I T E S C O M B I N E T O S E R V E 1 7 1 . 6 2 M B O F U N N E C E S S A RY W E I G H T T O T H E I R V I S I T O R S . T H AT ’ S A W H O P P I N G 7 2 . 2 % O F I M A G E W E I G H T T H AT C O U L D B E D I T C H E D B Y U S I N G A R E S P O N S I V E I M A G E T E C H N I Q U E .
  38. 38. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk R E S P O N S I V E I S N O T R E S P O N S I V E E N O U G H RESS Responsive Encompassing Server Side.
  39. 39. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk B U I L D Y O U R O W N S O L U T I O N • Open Source Tools to create your perfect image setup • ImageMagick • GraphicsMagick
  40. 40. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk N E W G E N E R AT I O N O F I M A G E P R O C E S S I N G P L AT F O R M S + L O A D S M O R E W I L L H AV E C O M E O U T B Y T H E E N D O F T H I S O F T H I S S P E E C H S O M E O F T H E T O O L S I H AV E U S E D B E F O R E
  41. 41. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk O N E I M A G E S O U R C E F O R A L L D E V I C E S , M A K E I T T H E R I G H T F O R M AT A N D S I Z E A S W E L L . V I D E O A B O V E L I N K : H T T P S : / / W W W. Y O U T U B E . C O M / WAT C H ? V = P 4 F H R U T T C G Y C L O U D I N A RY D E M O V I D E O S H O W I N G H O W T O M A N I P U L AT E I M A G E S B Y J U S T C H A N G I N G T H E U R L . M O S T O F T H E P L AT F O R M S U S E A S I M I L A R M E T H O D T O I N T E R FA C E W I T H S Y S T E M S
  42. 42. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S TA N D A R D I S E D W O R K F L O W U S I N G A P I S / C D N S A U T O M AT I C A L LY
  43. 43. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S A N D B O X D E M O B U T WA I T. . T H E R E ’ S M O R E I M G I X H AV E A N I C E S A N D B O X F E AT U R E T O L E A R N W H AT P O S S I B I L I T I E S T H E R E A R E
  44. 44. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk D E M O O P T I M I S AT I O N O F A S I T E W E D I D A L I V E D E M O W H E R E W E R E S I Z E D H A R V E Y N I C H O L S I M A G E S H O W N O N S L I D E 3 4 F R O M 3 3 3 K B D O W N T O 3 3 K B I N L E S S T H A N A M I N U T E
  45. 45. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk W H AT I S T H E P R I Z E ? W H A T ’ S H A P P E N ’ S W H E N YO U W I N ?
  46. 46. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk I M A G E D R O P 387.6 KB PNG Look out for the drop in image sizes.. Its amazing 3.53 KB Optimized
  47. 47. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk R E S U LT S A F T E R I M P R O V I N G B Y 0 . 5 S
  48. 48. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk L I N K T O A RT I C L E : H T T P : / / B I T. LY / 1 RY F M N Y
  49. 49. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk M Y T E S T S W E M A D E M A G E N T O D E FA U LT VA N I L L A I N S TA N C E O N AW S G O F R O M 1 . 7 1 S U N O P T I M I S E D T O 1 . 0 1 S J U S T B Y O P T I M I S I N G I M A G E S
  50. 50. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F R O M 1 . 7 1 S I N A W S T O …
  51. 51. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F R O M C O M PA N I E S W H O H AV E U S E D I M A G E P R O C E S S I N G S O FA R • Home Page 30% increase in Speed • Category pages - 70% decrease in page load times from 7.5s to 3s • and more…
  52. 52. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk B L U S H H AV E B E E N U S I N G I M A G E O P T I M I S AT I O N F O R Y E A R S A N D H AV E B U I LT T H E I R S I T E E X P E R I E N C E A R O U N D H I G H Q U A L I T Y M E D I A . L O O K AT T H E L I V E S I T E !
  53. 53. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk
  54. 54. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk
  55. 55. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk S O W H Y I S N ’ T E V E RY O N E D O I N G I T ? • In most cases websites aren’t benchmarking performance. • websites also aren’t tracking things like conversion rate per devices • Customers only track sales which aren’t consistent. • Telling them they are leaving money on the table is tough- as its not easy to quantify. • If they improve performance its not always clear what you will get. • You often need to try it and using the tools I showed you - its really easy to try.
  56. 56. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk T H E F U T U R E R E V O L U T I O N S TA R T S H E R E I TA L K E D A B O U T S O M E O F T H E I N N O VAT I O N S T H AT W E A R E D O I N G T O TA K E I M A G E O P T I M I S AT I O N T O T H E N E X T L E V E L
  57. 57. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F O C U S O N E X P E R I E N C E T H A N K S F O R R E A D I N G
  58. 58. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk A N Y Q U E S T I O N S Grant Kemp www.connectedwindow.com @UKAndroid
  59. 59. @UKAndroidGrant Kemp LondonWeb: Image Performance Talk F R E E B I E S Being a data geek - I Iike to track reaction. Cloudinary offering special education plan for London Web Peeps: cloudinary.com/londonweb • ImgIx: Free Credit: email them with londonweb akamai/ Scene7 : didn’t return my emails and probably thought I was a bit looney for asking for a deal for London web members

×