@byrichardpowell
byrichardpowell.co.uk
Front-End Performance
Thursday, 8 August 13
“80-90% of the end-user
response time is spent on the
frontend. Start there”
Steve Souders,
Head Performance Engineer at G...
Backend Frontend
Thursday, 8 August 13
Load Time
Thursday, 8 August 13
Optimise, Minifimise,
Obsfucate, GZip
Loadtime: Filesize
Thursday, 8 August 13
Loadtime: Filesize
Be Defensive
Thursday, 8 August 13
CSS Sprites, Icon Fonts,
Base64 Encoding images
Loadtime: Requests
Thursday, 8 August 13
Loadtime: Requests
Concatenate
Thursday, 8 August 13
Load Scripts Last
and
Only Load when needed
Loadtime: Order
Thursday, 8 August 13
Loadtime: Order
http://bit.ly/12NkgEi
Thursday, 8 August 13
Run Time
Thursday, 8 August 13
Reduce DOM Interaction
Runtime: DOM Interaction
Thursday, 8 August 13
Runtime: DOM Interaction
http://jsbin.com/ohumon/1/edit
Thursday, 8 August 13
Runtime: DOM Interaction
http://jsbin.com/omeyac/2/edit
Thursday, 8 August 13
Runtime: DOM Interaction
http://jsbin.com/acetul/1/edit
Thursday, 8 August 13
CSS can be expensive
Or it can be an optimisation
Runtime: DOM Interaction
Thursday, 8 August 13
Design API’s Carefully
Runtime: Single Page Application
Thursday, 8 August 13
Perception
Thursday, 8 August 13
Perception
http://bit.ly/1bxLxDI
Thursday, 8 August 13
Perception
http://bit.ly/1bxLxDI
Thursday, 8 August 13
Don’t block the UI
Perception
Thursday, 8 August 13
Load Time
PerceptionRun Time
Thursday, 8 August 13
Load Time PerceptionRun Time
Thursday, 8 August 13
Thursday, 8 August 13
Thanks
Thursday, 8 August 13
Upcoming SlideShare
Loading in …5
×

Front end-performance

573 views
505 views

Published on

A Quick overview of the key performance concerns for front-end developers

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
573
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Front end-performance

  1. 1. @byrichardpowell byrichardpowell.co.uk Front-End Performance Thursday, 8 August 13
  2. 2. “80-90% of the end-user response time is spent on the frontend. Start there” Steve Souders, Head Performance Engineer at Google Thursday, 8 August 13
  3. 3. Backend Frontend Thursday, 8 August 13
  4. 4. Load Time Thursday, 8 August 13
  5. 5. Optimise, Minifimise, Obsfucate, GZip Loadtime: Filesize Thursday, 8 August 13
  6. 6. Loadtime: Filesize Be Defensive Thursday, 8 August 13
  7. 7. CSS Sprites, Icon Fonts, Base64 Encoding images Loadtime: Requests Thursday, 8 August 13
  8. 8. Loadtime: Requests Concatenate Thursday, 8 August 13
  9. 9. Load Scripts Last and Only Load when needed Loadtime: Order Thursday, 8 August 13
  10. 10. Loadtime: Order http://bit.ly/12NkgEi Thursday, 8 August 13
  11. 11. Run Time Thursday, 8 August 13
  12. 12. Reduce DOM Interaction Runtime: DOM Interaction Thursday, 8 August 13
  13. 13. Runtime: DOM Interaction http://jsbin.com/ohumon/1/edit Thursday, 8 August 13
  14. 14. Runtime: DOM Interaction http://jsbin.com/omeyac/2/edit Thursday, 8 August 13
  15. 15. Runtime: DOM Interaction http://jsbin.com/acetul/1/edit Thursday, 8 August 13
  16. 16. CSS can be expensive Or it can be an optimisation Runtime: DOM Interaction Thursday, 8 August 13
  17. 17. Design API’s Carefully Runtime: Single Page Application Thursday, 8 August 13
  18. 18. Perception Thursday, 8 August 13
  19. 19. Perception http://bit.ly/1bxLxDI Thursday, 8 August 13
  20. 20. Perception http://bit.ly/1bxLxDI Thursday, 8 August 13
  21. 21. Don’t block the UI Perception Thursday, 8 August 13
  22. 22. Load Time PerceptionRun Time Thursday, 8 August 13
  23. 23. Load Time PerceptionRun Time Thursday, 8 August 13
  24. 24. Thursday, 8 August 13
  25. 25. Thanks Thursday, 8 August 13

×