Some simple tips for front-end performance in WordPress

392 views

Published on

For WordPress Sheffield: http://wpsheffield.com/

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

  • Be the first to like this

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

No notes for slide

Some simple tips for front-end performance in WordPress

  1. 1. * (and to be completely honest... in anything) Some simple tips for front-end performance in WordPress* Wednesday, 11 September 13
  2. 2. welcome. my name is: Ian Parr on Twitter: @devolute web: devolute.net i am a: • Front-end web developer • UX preacher • Person Wednesday, 11 September 13
  3. 3. Lets talk about being a ‘Front-end developer’ Wednesday, 11 September 13
  4. 4. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x Wednesday, 11 September 13
  5. 5. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. Wednesday, 11 September 13
  6. 6. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. Wednesday, 11 September 13
  7. 7. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. • Accessibility. Wednesday, 11 September 13
  8. 8. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. • Accessibility. • SEO issues. Wednesday, 11 September 13
  9. 9. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. • Accessibility. • SEO issues. • Maintenance and 'updatability'. Wednesday, 11 September 13
  10. 10. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. • Accessibility. • SEO issues. • Maintenance and 'updatability'. • Often do end-to-end work (Cheers WordPress!) Wednesday, 11 September 13
  11. 11. Lets talk about being a ‘Front-end developer’ • 43% developer, 39% design, 47% i dunno lol x • Making things pretty. • UX. • Accessibility. • SEO issues. • Maintenance and 'updatability'. • Often do end-to-end work (Cheers WordPress!) • Performance and speed. Wednesday, 11 September 13
  12. 12. Why is speed so important? • Mobile is a big deal™ • We can't guarantee the quality of their connection. • We have no idea where they’re coming from. Wednesday, 11 September 13
  13. 13. • Your customers might viewing your website on public transport. • Even connections in the middle of a city can be awful. • Low performance = battery strain. Wednesday, 11 September 13
  14. 14. • Your customers might viewing your website on public transport. • Even connections in the middle of a city can be awful. • Low performance = battery strain. Wednesday, 11 September 13
  15. 15. Lets make things faster {demo!} Wednesday, 11 September 13
  16. 16. I think we know who’s responsible • It’s all in the front-end! • If it was a back-end problem then: Wednesday, 11 September 13
  17. 17. I think we know who’s responsible 1. I can't help you! • It’s all in the front-end! • If it was a back-end problem then: Wednesday, 11 September 13
  18. 18. I think we know who’s responsible 1. I can't help you! 2. Install a caching plug-in * • It’s all in the front-end! • If it was a back-end problem then: Wednesday, 11 September 13
  19. 19. I think we know who’s responsible 1. I can't help you! 2. Install a caching plug-in * 3. Talk to Tim about back-end performance in WordPress • It’s all in the front-end! • If it was a back-end problem then: Wednesday, 11 September 13
  20. 20. I think we know who’s responsible 1. I can't help you! 2. Install a caching plug-in * 3. Talk to Tim about back-end performance in WordPress * He'll probably tell you not to install a caching plug-in. • It’s all in the front-end! • If it was a back-end problem then: Wednesday, 11 September 13
  21. 21. As a Front-end developer the buck stops here • Most performance problems are in the front-end. • How do we judge success? • We need some numbers to help us along: • Google Insights Pagespeed • Webpagetest.org Wednesday, 11 September 13
  22. 22. Wednesday, 11 September 13
  23. 23. Wednesday, 11 September 13
  24. 24. How do improve performance in WordPress? Wednesday, 11 September 13
  25. 25. How do improve performance in WordPress? We want to: Wednesday, 11 September 13
  26. 26. How do improve performance in WordPress? We want to: • Limit the number of requests. Wednesday, 11 September 13
  27. 27. How do improve performance in WordPress? We want to: • Limit the number of requests. • DNS requests are ‘expensive’ in performance terms. Wednesday, 11 September 13
  28. 28. How do improve performance in WordPress? We want to: • Limit the number of requests. • DNS requests are ‘expensive’ in performance terms. • Reduce the size of those requests. Wednesday, 11 September 13
  29. 29. Kill plug-ins • They bring in so much of their own CSS and JS separately. • This often means more requests, even if you’re not using them. • I have a rant about plug-ins. • We don’t have time for it. Wednesday, 11 September 13
  30. 30. G-Zip • Files compressed, so less data sent. • Can be achieved by .htaccess tricks • Take care. It’s easy to kill everyone with .htaccess. <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/ html text/plain text/xml text/css application/x-javascript application/ javascript image/svg+xml </ifmodule> • What difference does this make? Wednesday, 11 September 13
  31. 31. 42.1kb - 9.3kb = 200 Megabytes* Wednesday, 11 September 13
  32. 32. 42.1kb - 9.3kb = 200 Megabytes* * after 6380 visitors Wednesday, 11 September 13
  33. 33. Minify • Minifying makes CSS/JS smaller by removing whitespace. • Smaller file = quicker download. • I used 'Smaller' on the Mac for CSS/JS. • There exist a load of different tools and workflows to do this via CLI. Wednesday, 11 September 13
  34. 34. Lower number of requests by grouping CSS/JS files • In my opinion WordPress makes life harder than other CMS's. • This is one of the reasons I hate WordPress. Wednesday, 11 September 13
  35. 35. Wednesday, 11 September 13
  36. 36. How do we combine CSS/JS files? Wednesday, 11 September 13
  37. 37. How do we combine CSS/JS files? • Write CSS properly. Wednesday, 11 September 13
  38. 38. How do we combine CSS/JS files? • Write CSS properly. • i.e. not spread out all over the place in a big mess (more on this later). Wednesday, 11 September 13
  39. 39. How do we combine CSS/JS files? • Write CSS properly. • i.e. not spread out all over the place in a big mess (more on this later). • Pre-processors can help Wednesday, 11 September 13
  40. 40. How do we combine CSS/JS files? • Write CSS properly. • i.e. not spread out all over the place in a big mess (more on this later). • Pre-processors can help • I don't have time for this here! Wednesday, 11 September 13
  41. 41. How do we combine CSS/JS files? • Write CSS properly. • i.e. not spread out all over the place in a big mess (more on this later). • Pre-processors can help • I don't have time for this here! • Also... Wednesday, 11 September 13
  42. 42. We can use a plug-in Wednesday, 11 September 13
  43. 43. Wednesday, 11 September 13
  44. 44. My workshop • Performance • RWD process • Lots of other stuff • £30 off! - code: MrParr30 http://makedo.in/practical-frontend-development/ Wednesday, 11 September 13

×