Getting "up to speed" with CloudFlare

@VicDrover watchful.net Getting “up to speed” with Cloudﬂare

@VicDrover watchful.net Disclosures Financial No ﬁnancial relationship with CloudFlare other
than being a user and customer (no aﬃliate account, no commissions, no salary, etc..).

@VicDrover watchful.net @VicDrover watchful.net Who am I?

@VicDrover watchful.net Outline 1. What is a DNS Proxy 2.
Why use a DNS Proxy 3. How to make Cloudﬂare your DNS Proxy 4. Basic Cloudﬂare advantages 5. Performance Improvements a. Easy Wins b. The New Hotness

@VicDrover watchful.net What is DNS?

@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

@VicDrover watchful.net Hypertext Transfer Protocol (HTTP) https://joomla.org 172.67.74.86 HTML linked
to joomla.org

@VicDrover watchful.net Domain Name Servers Domain name servers are the
backbone of the internet. Domain >> IP Address

@VicDrover watchful.net Name Servers Registrar / DNS Server IP Address
of server

@VicDrover watchful.net Proxy Servers

@VicDrover watchful.net Why use a backup DNS?

@VicDrover watchful.net “Backup DNS” Registrar / DNS Server IP Address
of server Registrar / DNS Server CloudFlare IP Address of server

@VicDrover watchful.net Making Cloudﬂare your DNS proxy

@VicDrover watchful.net DNS propagation is sloooooowwww…

@VicDrover watchful.net Basic CloudFlare advantages • Separation of ownership &
administration • Separation of registrar & DNS • Near-instant propagation of DNS changes

@VicDrover watchful.net The Cloudﬂare Network

@VicDrover watchful.net Email Optimization : mail-tester.com

@VicDrover watchful.net Editing DNS Zone File : Cloudﬂare

@VicDrover watchful.net Performance - Easy Wins • Miniﬁcation • Compression
• Content Delivery Networks • Asynchronous JavaScript Loading

@VicDrover watchful.net Minifying CSS Normal Miniﬁed

@VicDrover watchful.net Miniﬁcation settings Cloudﬂare > Speed > Optimization

@VicDrover watchful.net Compression - GZIP in Joomla

@VicDrover watchful.net Compression - Brotli Cloudﬂare > Speed > Optimization

@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

@VicDrover watchful.net What is a CDN?

@VicDrover watchful.net No conﬁg CDN

@VicDrover watchful.net Javascript delays `1st contentful paint`

@VicDrover watchful.net Rocket Loader defers Javascript

@VicDrover watchful.net Enabling Rocket Loader Cloudﬂare > Speed > Optimization

@VicDrover watchful.net Easy wins Replaced the following for free: •
Server-side ◦ Miniﬁcation ◦ Compression ◦ Asynchronous JS loading • External ◦ Content Delivery Network

@VicDrover watchful.net

@VicDrover watchful.net The new hotness • Zaraz - 3rd party
scripts • Early Hints - asset preloading

@VicDrover watchful.net 3rd Party Scripts

@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

@VicDrover watchful.net Zaraz - 3rd party scripts on the edge

@VicDrover watchful.net Zaraz workﬂow 1. Create a trigger a. i.e.
pageload 2. Link trigger to script(s) a. i.e. Google Analytics

@VicDrover watchful.net Create Zaraz Trigger Zaraz > Triggers > Create

@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

@VicDrover watchful.net Zaraz workﬂow 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

@VicDrover watchful.net Load custom HTML on trigger Zaraz > Tools
> Add new tool > Custom HTML

@VicDrover watchful.net Load custom HTML on trigger Zaraz > Tools
> Custom HTML > Create Action

@VicDrover watchful.net Add blocking triggers

@VicDrover watchful.net Early hints

@VicDrover watchful.net Early hints - Asset Loading Registrar / DNS
Server IP Address of server

@VicDrover watchful.net Early hints - Asset Loading IP Address of
server Decide what assets are required Send status code 200 Begin asset delivery

server “Server Think Time” Send status code 200 Begin asset delivery

server Server Think Time Send status code 200 Complete asset delivery Send status code 103 Preload likely assets

@VicDrover watchful.net Early hints = Status 103 https://httpwg.org/specs/rfc8297.html

@VicDrover watchful.net Enabling early hints Cloudﬂare > Speed > Optimization

@VicDrover watchful.net Strategies for improving performance Free Cloudﬂare tools •
Miniﬁcation • Brotli Compression • CDN • Asynchronous JS Loading • Scripts on the edge (Zaraz) • Asset preloading (early hints)

@VicDrover watchful.net Performance gains - Watchful

@VicDrover watchful.net Performance gains - NRD

@VicDrover watchful.net Bonus — Security Free Cloudﬂare tools • Scrapeshield
(2012) • Universal SSL (2014) • Unmetered DDoS mitigation (2017) • Bot Fight Mode (2019) • WAF for all (2022) • Reputation-based Threat Protection (2022)

@VicDrover watchful.net Contact: [email protected]

Getting "up to speed" with CloudFlare

Getting "up to speed" with CloudFlare

More Decks by Vic

Other Decks in Technology

Featured

Transcript