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.

How do you speed up your (Wordpress) website?

103 views

Published on

How do you speed up your (Wordpress) website?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How do you speed up your (Wordpress) website?

  1. 1. How do you speed up your website?
  2. 2. To answer the question… Not with Red Bull, I guarantee you
  3. 3. Mounssif Oudriss Back-end developer SPIDER @ ARANERE
  4. 4. SPEED MATTERS
  5. 5. A delay in page speed as little as one second will lead to: • 7% fewer conversions • 11% fewer pageviews • 16% decrease in customer satisfaction With a two second delay at checkout, shopping cart abandonment will increase by 87%. When your website takes three seconds or longer to load, you will lose 40% of your visitors. SPEED MATTERS 0 0,005 0,01 0,015 0,02 0,025 0,03 0,035 0,04 0,045 Session Average Page Load Time in Seconds 0-1 1-2 2-3 3-4 4-5 5-10 10-20 20-30 30-40 40-50 0,006 0,004 0,010,011 0,015 0,019 0,023 0,032 0,038 0 Conversion Rate by Page Load Time
  6. 6. Know how speed works SPEED MATTERS 1. Verzoek naar de server 2. Server verwerking 3. Reactie naar de client
  7. 7. How far do you want to go, and is it necessary? SPEED MATTERS
  8. 8. BACKEND TIPS
  9. 9. BACKEND TIPS 0 100 200 300 400 500 requests per second PHP 5.6 HHVM 3.7 PHP 7 204197 96 0 100 200 300 400 500 requests per second PHP 5.6 HHVM 3.7 PHP 7 374361 191 Wordpress 3.6 Wordpress 4.1 1. Keep your Wordpress up to date
  10. 10. BACKEND TIPS 1. Keep your Wordpress up to date 2. Keep your server software up to date 0 50 100 150 200 requests per second PHP 5.6 PHP 7.0 PHP 7.1 PHP 7.2 HHVM 148150 139138 50 Wordpress 4.9.4
  11. 11. BACKEND TIPS 1. Keep your Wordpress up to date 2. Keep your server software up to date 3. Optimise database • Use indexes • Keep it lean and clean.
  12. 12. BACK-END TIPS 0 100 200 300 400 Transactions Per Second HHVM 3.10.1 RA HHVM 3.10.1 PHP 7.0 PHP 7.0 no opcache 90 295 322 356 Wordpress 4.4 1. Keep your Wordpress up to date 2. Keep your server software up to date 3. Optimise database • Use indexes • Use the right tool: nosql vs. relational database? 4. OPCache
  13. 13. BACKEND TIPS 1. Keep your Wordpress up to date 2. Keep your server software up to date 3. Optimise database • Use indexes • Use the right tool: nosql vs. relational database? 4. Opcode caching 5. Server-side caching dmv Redis / Memcached / ... 0 90 180 270 360 450 Geen caching W3TC WP Super CacheQuick Cache 41,952,6 27,9 426 Wait (ms)
  14. 14. FRONTEND TIPS
  15. 15. FRONTEND TIPS 1. Optimise static assets (plugin?) • Minify CSS/JS
  16. 16. FRONTEND TIPS 1. Optimise static assets (plugin?) • Minify CSS/JS • Combine CSS/JS + Images (sprites) 1. Parallel requests in browser 2. Cacheability of assets in the browser
  17. 17. FRONTEND TIPS 1. Optimise static assets (plugin?) • Minify CSS/JS • Combine CSS/JS + Images (sprites) 1. Parallel requests in browser 2. Cacheability of assets in the browser • Async loading everything under the fold
  18. 18. FRONTEND TIPS 1. Optimise static assets (plugin?) • Mimify CSS/JS • Combine CSS/JS + Images (sprites) 1. Parallel requests in browser 2. Cacheability of assets in the browser • Async loading everything under the fold 2. Distribute static assets on a CDN • Private CDN for own assets • Public CDN for shared assets (jquery, …)
  19. 19. FRONTEND TIPS 1. Optimise static assets (plugin?) • Mimify CSS/JS • Combine CSS/JS + Images (sprites) 1. Parallel requests in browser 2. Cacheability of assets in the browser • Async loading everything under the fold 2. Distribute static assets on a CDN • Private CDN for own assets • Public CDN for shared assets (jquery, …) 3. Browser caching (plugin?) • Enable gzip compression in the response headers • Cache-control headers • …
  20. 20. BEST PRACTICES
  21. 21. BEST PRACTICES 1. Use lazy-loading for bigger pages 2. Wordpress specifics: • Optimise WordPress media • Resize images • Compress images
  22. 22. BEST PRACTICES 1. Use lazy-loading for bigger pages 2. Wordpress specifics: • Optimise WordPress media • Resize images • Compress images • Optimise your theme • Avoid inline CSS/JS • Reduce the amount of HTTP requests • Optimize your PHP code
  23. 23. BEST PRACTICES
  24. 24. BEST PRACTICES 1. Use lazy-loading for bigger pages 2. Wordpress specifics: • Optimise WordPress media • Resize images • Compress images • Merge images (sprites) • Optimise your theme • Avoid inline CSS/JS • Reduce the amount of HTTP requests • Optimize you PHP code • Keep it lean and clean • Delete unused plugins & themes • Remove unused media • Clean up your database • Disable pingbacks & trackbacks • Limit comments per page • Reduce post revisions
  25. 25. GO NUTS
  26. 26. GO NUTS 1. Use ESI / SSI
  27. 27. GO NUTS 1. Use ESI / SSI 2. Use a reverse proxy (varnish) for “dynamic” content
  28. 28. Conclusion Klaar voor de hands on? Een Red Bull helpt misschien toch ;DDD How far do you want to go? What do you want to achieve? What’s the budget? Is speed the most important factor? Is the soup is worth the cabbage? Vragen?
  29. 29. GO FOR IT!
  30. 30. w w w . a r a n e r e . b e

×