O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

870 visualizações

Publicada em

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

Publicada em: Tecnologia

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

×