Static assets run the show. Your page feels fast or slow because of images, fonts, and bundles. If you are shipping on a budget, Amazon CloudFront gives you global speed without fancy contracts or a huge bill.
What goes behind CloudFront?
Start with the easy wins. Put your images, CSS, JS, and web fonts behind a distribution with an S3 origin. That trims latency for repeat visits and first paint. If your site is a single page app, you can include HTML too, but keep a plan for cache rules.
Why not just S3 direct?
S3 is great as a durable origin. CloudFront is built to be the edge cache in front of it. You pay cents per gig for transfer, often less than S3 egress, with shorter round trips and fewer hits to your bucket. Fewer origin calls also means fewer 500s during traffic spikes.
How do you set it up fast?
Create an S3 bucket for assets. Turn on Origin Access Identity so the bucket is private and only CloudFront can read it. Add a default behavior that blocks all methods except GET and HEAD. Point a Route 53 alias like cdn.yourdomain to the distribution. Ship.
What cache rules keep you safe?
Set long Cache-Control on versioned files like app.9c8b.css and logo.22a1.png. Give HTML short TTLs or no cache if your pages change a lot. Forward no cookies and only needed query strings. Every extra header you forward can explode your cache key.
Do you need SSL without breaking the bank?
Yes. Chrome is nudging everyone to HTTPS and phones are everywhere on flaky networks. CloudFront supports SNI custom SSL for free with modern browsers. Old IE on XP will not like SNI, but most of the web moved on. If you are stuck with XP users, keep a plain subdomain just for them.
What about compression and file types?
Turn on gzip at the distribution and make sure S3 serves the right Content-Type. Text files shrink a lot. Fonts need CORS headers or they fail across domains. Add Access Control Allow Origin with your site or star if that fits your risk profile.
How do you push changes without a painful purge?
Version everything. File names with a build hash mean you almost never call an invalidation. Keep index.html short lived so your shell updates quickly. When you must invalidate, target paths instead of nuking the whole distribution.
Static website endpoint or the regular S3 endpoint?
If you need clean 404 pages or default index documents at the edge, use the static website endpoint as the origin. If you want to keep the bucket private with OAI, use the REST endpoint. Many teams serve HTML from their app and only place assets on CloudFront, which keeps it simple.
Any gotchas that bite teams this week?
Large images are the usual suspect. Resize on upload and store multiple sizes. Set a sane default TTL so you do not cache mistakes for days. Do not forward cookies unless you truly need them. And remember that each behavior adds complexity, so keep paths tidy like /static and /fonts.
How do you keep costs under control?
Ship fewer bytes. Compress text. Use modern image formats when they make sense. Serve from the regions where you have users, and let CloudFront do the heavy lifting. Watch reports in the console to spot misses and chatty query strings that split your cache.
When should you skip CloudFront?
If your app serves a tiny audience in one city, a CDN will not change much. If your assets are already behind another CDN from your host, you might be fine. But for most public sites that rely on speed and SEO, a simple CloudFront layer pays for itself fast.
So what do you ship today?
Move assets to S3, front them with CloudFront, enable gzip, lock cache rules, and use SNI for HTTPS. Keep your file names versioned and your HTML short lived. You get global reach, faster first paint on phones, and a bill that stays friendly. Speed on a budget, with tools you already have in AWS.