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.
@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 ...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
G R A N T K E M P
@ U K A N D R O I D
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
W H E R E I W O R K
@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 ?
@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...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
W H AT W E ’ L L
C O V E R
• What is performance?
• The Image Probl...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
W E T H I N K A B O U T C A R S
@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...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
H I G H P E R F O R M A N C E ?
@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
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
L E T ’ S G O B A C K
T O 2 0 1 0 …
@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
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
2 0 1 5 …
@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
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
@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...
@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
@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...
@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
@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...
@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
@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 ...
@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 ...
@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 ...
@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...
@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 ...
@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...
@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 ...
@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...
@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
@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...
“Give the best image to the Customer as fast as
possible…. automatically”
@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...
@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...
@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...
@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...
@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
...
@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 crea...
@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...
@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...
@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 ...
@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...
@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 ...
@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...
@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...
@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
@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
@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 ...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
F R O M 1 . 7 1 S I N A W S T O …
@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...
@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...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
@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 ...
@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...
@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
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
A N Y Q U E S T I O N S
Grant Kemp
www.connectedwindow.com
@UKAndro...
@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
F R E E B I E S
Being a data geek - I Iike to track reaction.
Cloud...
Prochain SlideShare
Chargement dans…5
×

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

876 vues

Publié le

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

Publié dans : Technologie
  • 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

×