8 things we check before launching any website (one took Lighthouse from 32 to 88)

The most expensive lesson we've learned building immersive websites: they can look completely finished and still be nowhere near ready to launch.

The design can be approved, the animations can feel perfect, and so on, but once it gets posted on Instagram, the hero breaks inside the in-app browser. Then, a week after launch, half the important pages still aren't indexed.

So every website we ship goes through the same eight checks before it goes live, and some of them are not about how it looks. Most of them take less time than fixing the consequences later:

1. Structure headings logically and use semantic HTML.
2. Write useful alt text for every meaningful image.
3. Verify the site in Search Console and request indexing for key pages.
4. Give every page a unique, clickable title.
5. Add an llms.txt file for AI tools.
6. Move heavy assets to Cloudflare before traffic arrives.
7. Test the site inside Instagram, X and Telegram browsers.
8. Run Lighthouse, keep blur to a minimum.

Here's how we do each one.

1. Check heading structure and use semantic HTML

Before launch, we check that the headings describe the content and follow a logical hierarchy: a main h1, h2s for sections, and h3s for subsections. This makes the page easier to navigate and understand. Google specifically recommends putting important words in prominent locations such as the title and main heading, and using semantic HTML where possible.

2. Write useful alt texts for every image

First of all, it's an accessibility requirement, but apart from that, it helps SEO too. It does not mean describing every decorative gradient, icon and background shape on the site. The question we use is: “If this image disappeared, what information would the user lose?” Good alt text improves accessibility and also gives Google more context about the image. Google explicitly uses alt text alongside page content and image understanding systems to determine what an image is about. The bad version is "dashboard image", but the useful one is closer to "Analytics dashboard showing monthly revenue growth from January to June".

3. Verify the website in Google Search Console and request indexing for key pages manually

For a small website, that means inspecting the core URLs directly. For a larger site, it also means submitting and checking the sitemap.

Search Console’s URL Inspection tool lets you see what Google knows about a URL, test the live page and request indexing. For many URLs, Google recommends using a sitemap rather than manually submitting everything one by one. Important note: requesting indexing does not guarantee that Google will index the page immediately, but it’s much better than discovering two weeks later that Google couldn’t properly crawl an important page.

4. Check every page title manually

Duplicate titles across pages are one of the most common mistakes we see, and they cost rankings. Google recommends giving every page a descriptive <title> and avoiding repeated or boilerplate titles across a site. Each important URL should answer three questions immediately: What is this page about? Why is it different from the other pages? Would I click this title if I saw it in Google? If the answer to any of those is unclear, rewrite it.

5. Add llms.txt

AI agents read a page differently than search crawlers do, and llms.txt tells them what the page actually is. This way, AI systems get a cleaner, machine-readable map of the most useful content on the site instead of expecting an agent to reconstruct everything. Remember, this is just an additional machine-readable layer. Your actual website still needs clean HTML, useful page copy, logical URLs and accessible content.

6. Move heavy assets to Cloudflare before launch

High-end websites become heavy very quickly: video loops, large PNGs, renders, background images, galleries, and so on. All of them look great until thousands of people start requesting them from different parts of the world. We use Cloudflare R2 + Cloudflare Images + Cloudflare CDN for fast image delivery worldwide on asset-heavy projects. We learned this once through a bandwidth bill we would rather not pay twice,

read this article for more.

7. Test the website inside Instagram, X, and other in-app browsers before anyone else does

This is one of the easiest checks to skip because everything already looks perfect in Safari and Chrome, and then, the marketing starts.

The founder posts the website on Instagram and X, the Telegram community opens it from a pinned post, but users are not visiting your website through normal Chrome, the website opens through built-in browsers controlled by those apps. In our experience, they can be unreliable. Those in-app browsers render pages differently from standalone web browsers, especially anything using view_height can break without warning, and nobody catches it until a client sends the link to their whole audience. Do it like this: create a real post or burner profile → add the link → open it from another account → only then navigate the website like a normal user. The Framer preview or resizing desktop Chrome won’t help, do only via the actual apps. We test Instagram, X and Telegram at minimum when they matter to the client’s acquisition channels, because websites should work where your traffic comes from.

8. Run the website through Google Lighthouse and investigate loading performance

We use Lighthouse as a diagnostic tool to see if something is blocking the initial render, whether fonts are delaying text, animations doing too much work, and so on. One thing we watch particularly closely on design-heavy sites is blur. If you’re using it, keep CSS blur effects to a minimum: it costs more to render than most people think. We use .png and .webp even when the file looks bigger, because it's just easier on the visitor's device to render. Too much CSS and too many renders is what slows a site down too. That leads to a slightly counterintuitive lesson: the smallest asset is not always the fastest solution. On one project, that process took the Lighthouse performance score from 32 to 88 (a 2.75x improvement), and visually, almost nothing changed:

8. Run the website through Google Lighthouse and investigate loading performance

We use Lighthouse as a diagnostic tool to see if something is blocking the initial render, whether fonts are delaying text, animations doing too much work, and so on.

One thing we watch particularly closely on design-heavy sites is blur. If you’re using it, keep CSS blur effects to a minimum: it costs more to render than most people think.

We use .png and .webp even when the file looks bigger, because it's just easier on the visitor's device to render. Too much CSS and too many renders is what slows a site down too.

That leads to a slightly counterintuitive lesson: the smallest asset is not always the fastest solution.

On one project, that process took the Lighthouse performance score from 32 to 88 (a 2.75x improvement), and visually, almost nothing changed:

A website is not finished when the design is finished. It’s finished when people can find it, machines can understand it, browsers can render it, devices can run it, and real users can open it from the places where they actually discover it.

These checks are what stop the beautiful part from breaking. Save this list: someone is skipping one of these this week.

Follow us on 𝕏 for more checklists like this one. If you want your next launch handled end-to-end, start a project with us.

Q&A

What should you check before launching a Framer website?

Check heading structure, image alt text, page titles, Google Search Console setup, asset delivery, mobile layouts and loading performance. Test the published website in the in-app browsers your audience uses, too.

How do you submit a Framer website to Google?

Verify your domain in Google Search Console, submit your sitemap and use the URL Inspection tool to check important pages and request indexing. A request does not guarantee that Google will index a page or how quickly it will happen.

How can you improve a Framer website’s performance?

Use Lighthouse to identify bottlenecks, then optimize heavy images and videos, reduce expensive visual effects and limit unnecessary rendering work. Test the results on mobile devices as well as desktop.

Does a website need llms.txt?

Yes, it’s a proposed format that gives supporting AI tools an overview of your website and links to useful content. However, it does not replace standard SEO work or guarantee visibility in AI answers.

It started with a paywall. Our new website needed a specific look for its graphics, the kind of effect some tools sell as a plugin or a subscription-based service. We looked at the price, then asked the question everyone asks: “Can we just build this ourselves?”

So we built a fully working brand generator: an image or video goes in, and the final look comes out.

This is the actual output. It took us just one day from idea to a working tool, and now it's a part of our pipeline.

Instead of processing this live on every page load, we built a tool that draws a web of tracked connection points over any video input and bakes the result into a lightweight file a Framer component can just play.

A gradient of dots handles the transition after video blocks, generated on the fly by a component with a long list of tunable settings underneath it.

One that didn't make the final site, but is worth showing anyway: a pattern generator that takes a character set, checks which glyphs' edges are actually compatible with each other, and fills the next cell with a random character that fits. It's live, so you can play with it.

The tool tracks points across the footage, draws connections between them, and exports the finished animation as a lightweight file for the website.

Why this made sense to build instead of buy

1. The look is already trending. Bitmap, dithered, grid-of-dots imagery is everywhere right now. AI-native brands reach for it because it reads as more human than a glossy render.
2. It's a good metaphor for AI itself. An image built from a swarm of discrete points mirrors what a model does to information: takes something continuous and breaks it into something countable.
3. Vibecoding puts this in designers' hands. Not just noise or dithering generators, the ability to write a client's actual brand rules, palette, grid, motion, straight into code a tool runs, instead of notes on a page someone has to interpret correctly.
4. It's often the only practical way to create patterns. Hand-assembling one like this, dot by dot, line by line, is very irrational. That production necessity is what makes every generated output unique, and uniqueness like that often becomes a metaphor for the brand itself: no two pieces of it ever look quite the same.

The second time we did this: Mostik.ai @mostik_ai came to us at the earliest stage a startup can be at: a real product, but no designer on the team.

Congrats to the team! https://x.com/aimalysheva/status/2095232794792255848

We configured Claude to generate the brand's patterns, then handed over a design system built to run inside Claude Code itself. Claude took over the technical side, keeping every generated pattern on-grid and on-spec. The creative direction, the actual pattern design, still came from us.

Social media visuals the team can create with the system.

The pattern itself is vector, which is the point: one system that scales cleanly from a social post to a printed box, without redrawing anything for each format.

For a team like Mostik's, the value is the hire they didn't have to make. A generator like this replaces an in-house designer at the exact stage a startup can't justify one yet.

Static guide vs. brand generator

This isn't unique to branding agencies. The 2026 State of AI Design report found designers building their own tools across the industry: Stripe's team shipped ProtoDash and Dante for prototyping and content generation, AirOps built a skill library inside Claude specifically for on-brand asset creation, close to exactly what we did for Mostik, and Cursor built its design system directly into the product.

The same report found that 74% of designers at enterprise companies (2,000+ employees) use internally built AI tools, compared with 26% at small companies (up to 50 employees).

Three cases show what this looks like in our own work. Here's what actually changes when you swap a static guide for one of these:

Static guide

Brand generator

Who can use it

Anyone who can read design intent off a page

Anyone who can upload a file or type a prompt

Update cost

Re-export, re-send, hope people redownload

Ship a code update, everyone's on it

Best fit

One-off launches

Ongoing content, no in-house designer

How do you choose between a static guide and a brand generator?

Ask yourself three questions:

1. Will the client produce content regularly? A generator earns its build cost on a brand doing weekly social posts, while a one-time launch doesn't need software.
2. Is the brand system rule-based enough to encode? Grids, palettes, dithering effects, motion curves translate into code cleanly. A brand built on subjective art direction doesn't.
3. Does someone own it after you leave? Even a non-technical owner on the client side needs to know what inputs to feed it, or it goes unused exactly like the guide it replaced.

This is not a standard on every project yet, but every time a client asks for something a static file can't really deliver, or a tool wants money for something we can build ourselves in a day, this is the direction we reach for now at ubernatural.

Follow us on 𝕏 for more tools like this one. If your brand needs something similar, start a project with us.

Short FAQ for curious minds

What is procedural branding? A brand system where illustrations, patterns, layouts, and other visuals are generated by code following the brand’s rules, instead of pre-made assets a designer produces by hand each time.

What's the difference between a style guide and a brand generator? A style guide documents rules for a person to apply. A generator encodes those rules into a tool that applies them automatically from an input, a photo or a headline.

Do you need to code to use one of these tools? No, you just upload a file or type text into a simple interface, and get the final result.

How long does it take to build a tool like this? Depends what it needs to do. Our brand generator took us a day. A more complex system that has to plug into a client's own workflow, like the one we built for Mostik, takes longer.

Is a custom generator worth it for a startup? Yes, especially if you don’t have an in-house designer but still need consistent design for socials, decks, and so on.

We get asked this too often: why one website costs ten times another. Here's what I actually point to.

1. A unified visual style that isn't generic. Every element, every animation, every color choice belongs to the same system, and that consistency is what makes a site feel expensive before anyone reads a word of copy.

Son Daven, by The First The Last (designers Maksym Stepenko and Ivan Chopei), is the cleanest example I can point to: the same attention to detail runs from the hero to the smallest micro-interaction.

1. Visual storytelling. A real narrative told across three to eleven acts as you scroll, where the story keeps revealing itself the deeper you go.

Loft Thirty One, one of our own builds, does this very well. See for yourself:

1. Every element is interactive. Every headline, every card, everything on the page responds when you touch it.

Floema, by Bürocratik, took Site of the Month on Awwwards for exactly this in May this year.

1. The ability to surprise. Interactive isn't enough on its own. The best sites behave in ways you don't expect: a hover doesn't just light up a button, it runs a micro-animation inside it, and predictability stops being something to aim for.

Obys Agency turns its own logo into a working piece of the interface instead of a static mark:

Pensatori Irrazionali doesn't collapse its menu, it shakes the blocks off the screen:

1. Real 3D modeling. A studio that can model a physical product by hand, down to its actual proportions and materials, can visualize anything a client needs. AI alone can approximate an object. It can't match it.

One of our designers rebuilt Framer's branded keyboard from photos in Cinema 4D: every button's contact point, the backlighting, the proportions, matched to the real object at around 98% accuracy.

1. Doesn't look like it came out of Claude. AI speeds up the routine work here, but it doesn't make the actual design decisions.

The structure, the pacing, what goes first, all of that gets grounded in research on the specific niche, even on an MVP's first iteration, which is the difference between finishing fast and looking identical to the other hundred thousand sites built the same way this month.

What actually closes the deal

None of the above sells as hard as the work itself. On every call, it's the portfolio that convinces someone, not a pitch about process or research. A studio with a weak portfolio has to sell service and process, because that's all it has left.

Follow us on 𝕏 for more of what separates a $50K site from a $5K one. If that's the site you need, start a project with us.

FAQ

Why does a website cost ten times more than another one that looks similar at first glance?

The price difference usually is about unified style, real interactivity, and research specific to the client's niche instead of a template. A $5K site looks finished, but a $50K one is built so every element reinforces the same system.

What do you actually get for $50,000 that you don't get for $5,000?

A visual language carried consistently across every element, the highest precision into every detail, a real narrative built into the scroll, interactions that go beyond hover states, and in some cases custom 3D modeling of actual products, not their AI approximations.

Is a cheap AI-built website, like one made in Claude, good enough for a real business?

It can work for testing an idea fast, but most AI-built sites look alike, same gradients, same icons, because the model is making the design decisions instead of research. A studio using AI as an accelerant, not the decision-maker, avoids that look even at MVP speed.

How do you know if a web design studio is actually good, before hiring them?

Look at the portfolio, not the pitch. A studio that leads with process, methodology, or research slides usually doesn't have the work to back it up. A strong portfolio sells itself in the first ten seconds of a call.

Imagine waking up and seeing the website you built everywhere. The Instagram Reel is climbing, the comments are filling up, the thing you spent weeks on is finally working.

Then your client gets a $1,000+ bandwidth bill:

That's what actually happened to us. We didn't spend a dollar to make Loft Thirty One go viral, but the price for that was almost $1,300 that nobody had planned.

In February 2024, a developer opened the same email from Netlify, and it said $104,500. A static side project that normally sat under 10 GB a month had served 190 TB over four days. The cause was one heavy file, downloaded over and over.

Our bill was smaller because we had less traffic, but the mechanism was identical, and so was the surprise.

Here's the step-by-step version of what we learned and the checklist so this doesn't happen to you or your clients. Save & share it!

First, what bandwidth actually is (because the invoice makes no sense without it)

Bandwidth is the total amount of data your site sends to visitors. Someone opens a page and the server ships them the HTML, the fonts, the images and every frame of video on it.

Add that up across everyone who visits, and you get the number your host measures, includes some of it in your plan, and bills you for past that point.

A rough estimate is page weight multiplied by visits. That is the whole formula, and it decides your invoice. Here's what it looked like on Loft Thirty One.

What Loft Thirty One is, and where the $1,000 went

Loft Thirty One is an award-winning, full-service design-build firm based in the US. We’ve built their website around full-bleed video and immersive scroll sequences.

Then we posted the website on our Instagram and it went viral, gaining 38,700 likes and 7,633 comments without any paid promotion. Awwwards gave it an honorable mention around the same time and started sending traffic of its own.

Here’s what one visit to that site looked like with the cache disabled: 196 requests, 61.8 MB transferred, and 44 seconds to finish loading. The single heaviest thing on it was the scroll sequence: a folder of sliced frames the page pulls through as you move down it.

Across our projects, an average production site runs 8 to 15 MB per load, so Loft Thirty One costs about five times that on every visit. Multiply that by roughly 12,000 page views the website got, and that's the formula from above turning into a real invoice.

The background video was the one thing that cost us nothing, because we hosted it on Vimeo. The media Framer served itself, the two rows at 5.8 MB each, went straight onto the bill.

The number nobody checks before launch

A normal production site on a Basic plan runs out at around 5,000 page loads.

That counts loads, not people. This means one visitor who opens three pages uses three of them, and a good session costs you more than a bounce.

A Product Hunt feature might get through 5,000, and so does an Awwwards feature, or one viral post.

Before you launch anything, you should know your own version of that number. Here’s how.

Step 1: what your page weighs

Measured across our own projects:

• Clean landing page, no video: 3 to 5 MB per load
• Normal production site: 8 to 15 MB per load
• Showreel, interiors, autoplay, scroll sequences: 20 to 70+ MB per load

One visitor to a sequence-heavy site pulls more data than a hundred visitors to a simple landing page. Most people building the second kind have never seen the first number.

Step 2: what your Framer plan holds

As of September 2026:

• Free: 1 GB
• Basic: 50 GB
• Pro: 100 GB
• Over that: $40 per 100 GB, up to 2 TB

Divide one by the other and you get your limit. Basic covers about 17,000 loads for a 3 MB landing page, while Pro covers about 33,000. For a 10 MB website, Basic covers about 5,000, and Pro covers about 10,000 loads.

Now put Loft Thirty One into that maths and you can see the invoice coming from a long way off.

Crawlers bring zero revenue and still cost you

Framer bills every byte that leaves its servers, whether it's a paying customer or a bot. A crawler never converts, never buys, never becomes a lead, but it consumes bandwidth exactly like a real visitor, and you're billed for both the same way.

Googlebot and other rendering crawlers cost roughly 3 to 20 MB on our projects. The AI crawlers take a share on top of that, GPTBot and ClaudeBot and Bytespider among them.

Framer's own HTML runs 0.5 to 1 MB per page before a single image loads, so Googlebot spends most of a megabyte just to read your headline.

Social previews cost less than a visit and more than zero. X, Facebook and LinkedIn each fetch your HTML plus the preview image.

The better your launch goes, the more of your plan gets spent.

The three files that weigh more than anyone expects

This is the part that surprised us:

Fonts. You pick one family and assume 30 KB. We measure 0.7 to 1.3 MB on real projects. Regular, Medium, Bold and Italic each ship as a separate file. The page is still empty and it already carries the weight of a small photo gallery.

The HTML. Text should be cheap, so people budget 50 KB for it. A Framer page runs 500 to 1000 KB of markup. On one of our builds a single document came in at a megabyte on its own. Every visitor and every crawler downloads it before anything appears on screen.

Animated SVG. For icons, SVG is a great way to optimize your website size. But the size increases when the vector starts moving. A morph animation, or an illustration built from hundreds of anchor points, is a wall of coordinates written straight into the document, and Framer compresses images to AVIF while leaving vectors exactly as they are. We have seen pages carrying more than 200 of them where the document alone reaches a megabyte.

What does not count against you

Framer only bills what leaves Framer's servers, and files hosted elsewhere stay invisible to the meter: YouTube, Vimeo, Spline, Google Fonts.

That's why the Vimeo background on Loft Thirty One was free and the sequence was not.

What happens when you go over

The stories about sites going dark the moment they got popular describe an older policy. In 2026 it works like this.

1. First month over the limit. Framer emails you and shows a banner in the dashboard. Your site stays live.
2. Second month. They ask you to upgrade.
3. After that, automatic plan upgrade, or overage billed at $40 per 100 GB.

Nobody throttles you and nobody switches the site off that day. Traffic comes, you celebrate it, and the invoice reaches you after that.

Do this before your next launch

Stage 1: Budget

Set a page weight budget and write it into the project brief. Decide the number at kickoff, while someone can still say no to the 40 MB hero sequence. After the design is approved, that conversation costs a redesign.

Stage 2: Host

Decide where heavy media lives before you make it. Long videos belong on YouTube or Vimeo from day one, because those bytes never touch your plan. Moving a finished video later costs more than planning it.

Then, move anything media-heavy to Cloudflare R2 + Cloudflare Images + Cloudflare CDN for extremely fast image delivery worldwide.

Scroll sequences need the same treatment and cannot use YouTube. A sequence is sliced frames with its own playback logic. It goes to an R2 bucket, and the component reads from the R2 URL instead of Framer's servers.

Stage 3: Compress

• Export images at display size. A 4000 px file inside a 1200 px slot wastes 90% of its weight. Skip 4K unless a client asks. Everything ships as WebP.
• Re-encode video to WebM, then ask whether you need video at all. A GIF or a simple CSS transition replaces it more often than designers expect.
• Ship two font weights. Four of them cost you more than your hero image.
• Audit animated SVGs before launch. Icons are fine, but check the file size of anything that morphs or carries hundreds of anchor points, and simplify it or render it as a raster past 50 KB.
• Apply every compression method current browsers support. This one is free and people skip it.

Stage 4: Watch

Check bandwidth analytics in week one, not month two. You want your burn rate while you can still change something.

Watch the first spike. After a launch, a feature or a reel that lands, look at consumption the next morning.

If the bill already landed

Do the following:

1. Open Framer's bandwidth analytics. Sort by page, then by file: one asset is usually responsible for most of the bandwidth.
2. Move to Pro or buy the bandwidth add-on now. The spike ignores your billing cycle, and an overage invoice costs more than the plan you were avoiding.
3. Take the single heaviest asset off Framer. Use Stage 2 above.
4. Message Framer support. Tell them you have a spike, that you are already optimising, and ask them not to auto-upgrade your plan without warning.
5. Check the number on the next day. If it has not moved, the leak is somewhere else, and you should go back to step 1.

What building this taught us

Loft Thirty One did everything we wanted from a project: it got attention, an award, and an invoice for the privilege.

That's how we learned that a website is finished when it can carry the day everyone arrives at once, not just when it looks right in a browser.

Follow us on 𝕏 for more lessons like this one. If your next launch needs a site built to survive going viral, start a project with us.

FAQ

Why did I get an unexpected bandwidth notification or bill from Framer?

Framer calculates bandwidth by multiplying your page weight by your total visits and bot crawls. Framer won’t instantly auto-bill you on lower tiers; instead, you get a warning grace period to optimize your site, purchase a bandwidth add-on, or manually upgrade.

What counts as bandwidth on a website?

Every file your server sends to a browser or bot. This includes your core HTML document, CSS stylesheets, JavaScript files, custom fonts, images, and videos.

How many page views can I get before my Framer plan runs out?

It depends entirely on your total page weight. A basic plan with a 100 GB limit covers roughly 50,000 views for an optimized 2 MB page, or 10,000 views for a heavy 10 MB page. Divide your plan's monthly limit by your average page weight to find your maximum views.

Does removing video reduce my bandwidth bill?

Yes, but only if the video files are uploaded directly on Framer. If you switch to embedding videos via external platforms, that delivery bandwidth no longer counts against your Framer limits.