This document provides tips for speeding up websites by optimizing performance on the front-end and back-end. It recommends keeping Wordpress and server software updated, optimizing databases, enabling opcode caching, leveraging CDNs and browser caching. Specific tips include minifying assets, lazy loading content, image optimization, reducing requests and optimizing code. More advanced techniques involve reverse proxies and edge servers. The key is determining how far to take optimizations based on goals and budgets.

1. How do you speed up your website?

2. To answer the question…
Not with Red Bull, I guarantee you

3. Mounssif Oudriss
Back-end developer
SPIDER @ ARANERE

4. SPEED MATTERS

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. Know how speed works
SPEED MATTERS
1. Verzoek naar de server
2. Server verwerking
3. Reactie naar de client

7. How far do you want to go, and is it necessary?
SPEED MATTERS

8. BACKEND TIPS

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. 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. 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. 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. 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. FRONTEND TIPS

15. FRONTEND TIPS
1. Optimise static assets (plugin?)
• Minify CSS/JS

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. 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. 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. 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. BEST PRACTICES

21. BEST PRACTICES
1. Use lazy-loading for bigger pages
2. Wordpress specifics:
• Optimise WordPress media
• Resize images
• Compress images

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. BEST PRACTICES

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. GO NUTS

26. GO NUTS
1. Use ESI / SSI

27. GO NUTS
1. Use ESI / SSI
2. Use a reverse proxy (varnish) for “dynamic” content

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. GO FOR IT!

30. w w w . a r a n e r e . b e