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.

Cache is keeping you from reaching the full potential as a developer (word camp nordic 2019)

128 views

Published on

by @thoaud from WordCamp Nordic 2019.

Introduction to The Performance First Workflow in WordPress.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cache is keeping you from reaching the full potential as a developer (word camp nordic 2019)

  1. 1. Performance first Cache is keeping you from reaching your full potential as a developer
  2. 2. 👏
  3. 3. We need more women in computing again!
  4. 4. Thomas Audunhus Twitter @thoaud Head of WordPress & WooCommerce Servebolt.com
  5. 5. Your website. Much faster.
  6. 6. Context Cache = Full Page Cache, HTML Cache, Varnish, 
 W3 Total Cache, WP Rocket, WP Fastest Cache, WP Super Cache, NGINX Cache … This talk is not about CPU cache, OPcache, caching of static resources (css, js etc), object cache etc.
  7. 7. Cache is keeping you from reaching your full potential as a developer (or page builder)
  8. 8. – Some WordPress developer “It’s slow now, but I haven’t enabled cache yet”
  9. 9. What’s the main reason you use cache? 0 13 25 38 50 Speed Decrease server load Scaling Source: Poll posted in the Facebook group Advanced WordPress in February 2019
  10. 10. The cache dependant developer workflow Make something See it’s not performing Enable cache Deploy - Install a plugin - Make some code - Install a new theme “Fixing the performance issue”
  11. 11. Cache Cache Cache Cache Optimization Cache Optimization Optimization The journey of 😖 frustration
  12. 12. The cache dependant developer workflow Make something See it’s not performing Enable cache Deploy - Install a plugin - Make some code - Install a new theme “Fixing the performance issue” another
  13. 13. Caching 101
  14. 14. Server Webserver Cache Browseryourdomain.com/page-1
  15. 15. Server Webserver Cache Visitor 1 Visitor 2 Visitor 3 Visitor 4 yourdomain.com/page-1 yourdomain.com/page-1 yourdomain.com/page-2 yourdomain.com/page-2?gclid=239sfkj84S
  16. 16. What happens when you enable cache • The pages in the cache can be delivered faster • The server spends less time, and less resources, delivering a page Result is a faster, and more scalable site
  17. 17. Cached
  18. 18. Caching does not make your site fast for everyone, always. Regular cache hit rates is between 10 and 50%
  19. 19. Ei saa peittää 
 Må ikke tildekkes Do not cover 
 Får ej övertäckas Slow code –
  20. 20. The cache dependant developer workflow Make something See it’s not performing Enable cache Deploy - Install a plugin - Make some code - Install a new theme “Fixing the performance issue”
  21. 21. What if a website could be fast, without cache?
  22. 22. Start making sites Performance First A non-cache dependant site is guaranteed to be fast for everyone
  23. 23. Oh no. Another … first thing. Design Mobile first Accessibility first Content first Frontend code Mobile first Accessibility first Backend code Shortcuts first, because 
 of project deadlines
  24. 24. Performance First is a workflow
  25. 25. Step 1 – Make a performance budget 1. How many seconds do you have to spend? 2. What’s the maximum amount of data (kb) you can transfer during that time?
  26. 26. Step 1 – Make a performance budget 1. Download of HTML (first request) Time 2. Page size Kb 3. DOM content loaded Time 4. Fully loaded Time
  27. 27. < 600 ms is OK < 200 ms is good! < 1 second is good< 1 MB is good
  28. 28. Step 1.1 – Make a benchmark If Performance First is used on a existing project
  29. 29. Step 2 – Do your code/change
  30. 30. Do a performance test Step 3
  31. 31. How to do a good, yet easy, performance test
  32. 32. Function/fraction In your CI process Full site Sitebulb SEO Frog Single page Pingdom webpagetest.org GTMetrics Chrome dev tools The scope of your test
  33. 33. 1. Full download of HTML (first request) Time 2. Page size Kb 3. DOM content loaded Time 4. Fully loaded Time
  34. 34. Did your work affect performance? Step 4 KPIs 1. Full download of HTML (first request) 2. DOM content loaded 3. Fully loaded
  35. 35. Yes No Is it worth it? Rework
 Move back to step 2 No Are you above the overall budget? Yes Yes Did it increase the page size? Deploy Yes NoNo THE DANCE 🕺
  36. 36. Deploy Enable cache
  37. 37. Results of doing Performance First • You will find problems in your code, and ways to fix it • The more sites you make with Performance First, the more you learn about performance • You will, with time, be more effective and make fewer mistakes • Happier visitors • Faster backend
  38. 38. Adapt Performance First and adjust to your needs
  39. 39. Thank you! @thoaud

×