Getting "up to speed" with CloudFlare

In this talk, I review the use of CloudFlare for improving website performance with CloudFlare. I dig deep into how the domain name system works, how to use CloudFlare as a DNS proxy for your websites, and how to maximize the performance of your website.

Transcript

1. @VicDrover watchful.net Getting “up to speed” with Cloudflare
2. @VicDrover watchful.net Disclosures Financial No financial relationship with CloudFlare other than being a user and customer (no affiliate account, no commissions, no salary, etc..).
3. @VicDrover watchful.net @VicDrover watchful.net Who am I?
4. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
5. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
6. @VicDrover watchful.net What is DNS?
7. @VicDrover watchful.net Tracing network hops $ traceroute joomla.org 1 192.168.21.1 << my local IP 2 162-224-156-019.inf.spectrum.com 3 lag-63.mnflwicz02h.netops.charter.com 4 lag-67.gnfdwibb01r.netops.charter.com 5 lag-16.chcgildt87w-bcr00.netops.charter.com 6 lag-301.pr2.chi10.netops.charter.com 7 0.ae4.pr1.dca10.tbone.rr.com 8 172.67.74.86 << joomla.org web server
8. @VicDrover watchful.net Hypertext Transfer Protocol (HTTP) https://joomla.org 172.67.74.86 HTML linked to joomla.org
9. @VicDrover watchful.net Domain Name Servers Domain name servers are the backbone of the internet. Domain >> IP Address
10. @VicDrover watchful.net Name Servers Registrar / DNS Server IP Address of server
11. @VicDrover watchful.net Proxy Servers
12. @VicDrover watchful.net Why use a backup DNS?
13. @VicDrover watchful.net “Backup DNS” Registrar / DNS Server IP Address of server Registrar / DNS Server CloudFlare IP Address of server
14. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
15. @VicDrover watchful.net Making Cloudflare your DNS proxy
16. @VicDrover watchful.net Making Cloudflare your DNS proxy
17. @VicDrover watchful.net Making Cloudflare your DNS proxy
18. @VicDrover watchful.net Making Cloudflare your DNS proxy
19. @VicDrover watchful.net Making Cloudflare your DNS proxy
20. @VicDrover watchful.net DNS propagation is sloooooowwww…
21. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
22. @VicDrover watchful.net Basic CloudFlare advantages • Separation of ownership & administration • Separation of registrar & DNS • Near-instant propagation of DNS changes
23. @VicDrover watchful.net The Cloudflare Network
24. @VicDrover watchful.net Email Optimization : mail-tester.com
25. @VicDrover watchful.net Email Optimization : mail-tester.com
26. @VicDrover watchful.net Editing DNS Zone File : Cloudflare
27. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
28. @VicDrover watchful.net Performance - Easy Wins • Minification • Compression • Content Delivery Networks • Asynchronous JavaScript Loading
29. @VicDrover watchful.net Minifying CSS Normal Minified
30. @VicDrover watchful.net Minification settings Cloudflare > Speed > Optimization
31. @VicDrover watchful.net Compression - GZIP in Joomla
32. @VicDrover watchful.net Compression - Brotli Cloudflare > Speed > Optimization
33. @VicDrover watchful.net Compression - Brotli vs. GZIP Checking the top 1000 URLs on the internet, Brotli performance is: • 14% smaller than gzip for JavaScript • 21% smaller than gzip for HTML • 17% smaller than gzip for CSS https://blog.bitsrc.io/gzip-to-brotli-better-frontend-load-performance-b2b4d8dbf60f
34. @VicDrover watchful.net What is a CDN?
35. @VicDrover watchful.net No config CDN
36. @VicDrover watchful.net Javascript delays `1st contentful paint`
37. @VicDrover watchful.net Rocket Loader defers Javascript
38. @VicDrover watchful.net Enabling Rocket Loader Cloudflare > Speed > Optimization
39. @VicDrover watchful.net Easy wins Replaced the following for free: • Server-side ◦ Minification ◦ Compression ◦ Asynchronous JS loading • External ◦ Content Delivery Network
40. @VicDrover watchful.net
41. @VicDrover watchful.net Outline 1. What is a DNS Proxy 2. Why use a DNS Proxy 3. How to make Cloudflare your DNS Proxy 4. Basic Cloudflare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness
42. @VicDrover watchful.net The new hotness • Zaraz - 3rd party scripts • Early Hints - asset preloading
43. @VicDrover watchful.net 3rd Party Scripts
44. @VicDrover watchful.net 3rd party scripts hurt performance • Typically not cached • Doesn’t use CDN ◦ Longest possible transit times • Requires multiple, external requests ◦ i.e. dependencies
45. @VicDrover watchful.net Zaraz - 3rd party scripts on the edge
46. @VicDrover watchful.net Zaraz workflow 1. Create a trigger a. i.e. pageload 2. Link trigger to script(s) a. i.e. Google Analytics
47. @VicDrover watchful.net Create Zaraz Trigger Zaraz > Triggers > Create
48. @VicDrover watchful.net Create Zaraz Trigger Zaraz > Triggers > Create • Trigger Name • Match rule • Variable name: {{ system.page.url.hostname }} • Match Operation: Starts With • Match String: https://yourdomain.com
49. @VicDrover watchful.net Zaraz workflow 1. Create a trigger a. i.e. pageload b. I.e. domain name match 2. Link trigger to script(s) a. i.e. Google Analytics
50. @VicDrover watchful.net Load custom HTML on trigger Zaraz > Tools > Add new tool > Custom HTML
51. @VicDrover watchful.net Load custom HTML on trigger Zaraz > Tools > Custom HTML > Create Action
52. @VicDrover watchful.net Add blocking triggers
53. @VicDrover watchful.net Early hints
54. @VicDrover watchful.net Early hints - Asset Loading Registrar / DNS Server IP Address of server
55. @VicDrover watchful.net Early hints - Asset Loading IP Address of server Decide what assets are required Send status code 200 Begin asset delivery
56. @VicDrover watchful.net Early hints - Asset Loading IP Address of server Decide what assets are required Send status code 200 Begin asset delivery
57. @VicDrover watchful.net Early hints - Asset Loading IP Address of server “Server Think Time” Send status code 200 Begin asset delivery
58. @VicDrover watchful.net Early hints - Asset Loading IP Address of server Server Think Time Send status code 200 Complete asset delivery Send status code 103 Preload likely assets
59. @VicDrover watchful.net Early hints = Status 103 https://httpwg.org/specs/rfc8297.html
60. @VicDrover watchful.net Enabling early hints Cloudflare > Speed > Optimization
61. @VicDrover watchful.net Strategies for improving performance Free Cloudflare tools • Minification • Brotli Compression • CDN • Asynchronous JS Loading • Scripts on the edge (Zaraz) • Asset preloading (early hints)
62. @VicDrover watchful.net Performance gains - Watchful
63. @VicDrover watchful.net Performance gains - NRD
64. @VicDrover watchful.net Bonus — Security Free Cloudflare tools • Scrapeshield (2012) • Universal SSL (2014) • Unmetered DDoS mitigation (2017) • Bot Fight Mode (2019) • WAF for all (2022) • Reputation-based Threat Protection (2022)
65. @VicDrover watchful.net Contact: hello@watchful.net