DEV Community: Muhammad Ali Raza

How we cut our homepage from 4 MB to 179 KB and reached Lighthouse 100

Muhammad Ali Raza — Fri, 13 Nov 2026 05:15:59 +0000

Two PNG images made up almost all of quantumines.com's 4 MB homepage. Serving them as AVIF and WebP at the size each screen needs cut the page to 179 KB and the mobile Largest Contentful Paint (LCP) from about 17 seconds to 1.8 seconds. Self-hosted fonts with size-matched fallbacks, two colour fixes and an accessible-name fix took the remaining Lighthouse scores to 100. We made all of these changes on 10 November 2026 in one commit. This write-up lists each one, with the code, so another small team can repeat it in an afternoon.

Where did the 4 MB come from?

The network list in Lighthouse and Chrome DevTools answered that quickly. The homepage loaded a 2.0 MB PNG for the hero sculpture and a 2.1 MB PNG for the product artwork, both exported straight from a design tool at full quality. Everything else on the page, HTML, CSS, JavaScript and icons, was small. A 1.6 MB logo PNG was also referenced from our structured data, though not displayed.

On a phone over a throttled mobile connection, which is what Lighthouse simulates, two megabytes take many seconds to arrive. And because the hero is the largest thing on screen, it is the element LCP measures: until it finishes, the page counts as not loaded.

quantumines.com homepage before and after (Lighthouse mobile, 10 November 2026)

Measure	Before	After
Total page weight	about 4 MB	179 KB
Largest Contentful Paint (mobile)	about 17 s	1.8 s
Accessibility score	96	100
All four Lighthouse categories	not all 100	100 / 100 / 100 / 100
Cumulative Layout Shift	not recorded	0

Step 1: serve images as AVIF and WebP, at the right size

We exported each large image three times (480, 768 and 1,024 pixels wide for the hero) in AVIF and in WebP, and let the browser pick with <picture>, srcset and sizes. The 1,024-pixel hero dropped from 2.0 MB as PNG to 44 KB as AVIF; a phone downloads the 480-pixel AVIF, which is 12.5 KB.

<picture>
  <source type="image/avif"
    srcset="assets/hero-480.avif 480w, assets/hero-768.avif 768w, assets/hero-1024.avif 1024w"
    sizes="(max-width: 760px) 100vw, 55vw">
  <source type="image/webp"
    srcset="assets/hero-480.webp 480w, assets/hero-768.webp 768w, assets/hero-1024.webp 1024w"
    sizes="(max-width: 760px) 100vw, 55vw">
  <img id="hero-image" src="assets/hero-1024.webp"
    alt="Sculpture of mint metal, glass and textured stone"
    width="1024" height="1280" fetchpriority="high">
</picture>

Three details matter. The width and height attributes let the browser reserve the space before the image arrives, so nothing jumps. fetchpriority="high" tells it to fetch the LCP image before other images. And the hero is never lazy-loaded: lazy loading the largest image on screen delays exactly the thing LCP measures. The product artwork, further down the page, got the same AVIF and WebP treatment at 768 and 1,536 pixels.

The 1.6 MB logo in our Organization schema was replaced with a 512-pixel PNG of 137 KB. Search engines don't need more than that, and it no longer turns up in audits.

Step 2: self-host the fonts and stop the text from jumping

The site used Manrope and DM Sans from Google Fonts. That meant a render-blocking stylesheet request to another domain, then the font files from a third. We downloaded the variable versions of both (they are under the SIL Open Font License), serve them as WOFF2 from our own domain and preload them:

<link rel="preload" href="/fonts/manrope-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/dm-sans-var.woff2" as="font" type="font/woff2" crossorigin>

With font-display: swap, text appears at once in a fallback font and switches when the web font arrives. The switch can move text, because Arial is wider or taller than the real font. So we defined fallback faces measured against Arial, with size-adjust and the ascent and descent overrides, and listed them right after the real font:

@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 94.9%;
  ascent-override: 112.4%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}
--display: 'Manrope', 'Manrope Fallback', sans-serif;

Together with the image dimensions, this is why Cumulative Layout Shift is 0.

Step 3: fix the last accessibility points

Accessibility was at 96. Lighthouse flagged two things. Some muted text in the light theme was below the 4.5:1 contrast ratio that WCAG requires for normal text, so we darkened those colours until each passed. And the mobile menu button's accessible name didn't match its visible label "Menu", which confuses people who use voice control: they say what they see. Making the name match the label fixed it. Both changes took minutes; finding them is what the audit is for.

Step 4: cache by file type

Our Node server sets Cache-Control from the file extension. Fonts never change under the same name, so browsers may keep them for a year. Images can be kept for a week and refreshed in the background. HTML, CSS and JavaScript are checked again after an hour, so a deploy shows up quickly:

ext === '.woff2' ? 'public, max-age=31536000, immutable'
: /^(\.avif|\.webp|\.png|\.jpe?g|\.svg|\.ico)$/.test(ext)
  ? 'public, max-age=604800, stale-while-revalidate=86400'
  : 'public, max-age=3600'

Step 5: make the next page feel instant

Two newer browser features cost a few lines each. Speculation Rules tell Chrome to prefetch a same-site page when the visitor hovers over its link, so the click usually lands on a page that is already downloaded. We exclude anything with side effects or private data, such as log-in, the app, admin pages and the API:

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[
  {"href_matches":"/*"},
  {"not":{"href_matches":["/login","/app/*","/admin/*","/api/*","/logout"]}}
]},"eagerness":"moderate"}]}
</script>

Cross-document view transitions add a short cross-fade between pages with one CSS rule, turned off for people who ask their system for reduced motion:

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

Browsers that don't support either feature ignore them, so there is no downside for anyone.

How do we keep it at 100?

Scores drift as pages are added. Every time the site is rebuilt, we run Lighthouse on the homepage, the newest post and one product page, and fix anything below 95 before it goes live. New images must be AVIF or WebP with width, height and srcset. Each page's preview image for social media is generated at build time, so nobody uploads a multi-megabyte PNG by hand. The same discipline carried over to adding WebMCP for AI agents: the site still scores 100 in all four categories with it.

What would we tell another small team?

Open the network list before touching code. On most small sites one or two images are most of the weight.
Fix the LCP image first: modern format, right size, fetchpriority="high", never lazy.
Give every image width and height, and give web fonts a size-matched fallback. That is most of CLS.
Treat accessibility warnings as bugs. They are usually quick to fix and they affect real people.
Re-run the audit on every build, not once a quarter.

Frequently asked questions

Is AVIF supported in all browsers?

AVIF works in current versions of Chrome, Edge, Firefox and Safari. The <picture> element falls back to WebP and then to the <img> source, so older browsers still get an image.

What is a good Largest Contentful Paint?

Google's Core Web Vitals treat an LCP of 2.5 seconds or less as good, measured at the 75th percentile of real page loads. quantumines.com's homepage measures 1.8 seconds in Lighthouse's mobile test.

Does a Lighthouse score of 100 guarantee good Core Web Vitals?

No. Lighthouse is a lab test on one simulated device. Core Web Vitals in Search Console come from real visitors' browsers. A high lab score makes good field data likely, but the field data is what Google uses.

Quantumines is a technology and product studio in Lahore, Pakistan, founded by Muhammad Ali Raza (Ali Arbi). We build websites and web apps for clients with the same standards; see our services.

Originally published on quantumines.com.

How to add WebMCP to a website: what we shipped on quantumines.com

Muhammad Ali Raza — Thu, 12 Nov 2026 05:20:04 +0000

To add WebMCP to a website, you register tools with the browser in JavaScript (the imperative API), or add a few attributes to an existing HTML form (the declarative API), and switch the feature on for real visitors with a Chrome origin-trial token. On quantumines.com we did both on 10 November 2026: four read-only tools that answer questions about the studio and its products, and a contact form that an agent can fill in but only the visitor can send. The whole client-side part is one 76-line file. This write-up shows what we built, why each choice was made and what we would do differently.

What is WebMCP, in one paragraph?

WebMCP is a proposed web standard from the Chrome team for exposing structured tools to AI agents that act inside a browser. Without it, an agent has to read the page, guess which button does what and simulate clicks and typing (Chrome's docs call this "actuation"). With it, the page says: here is a tool called get_product, it takes a product name, and it returns these facts. Chrome offers it as an origin trial from Chrome 149, and as a flag (chrome://flags/#enable-webmcp-testing) for local testing. It is still experimental and the API may change.

Why would a small studio site bother?

Quantumines is a technology and product studio in Lahore. Our site exists so that people, search engines and AI assistants get our facts right: who runs the studio, what each product does, how to reach us. We already publish those facts for machines in /facts.json, /llms.txt and a guide for AI readers. WebMCP was a small extra step that lets an agent working for a visitor ask the page directly instead of scraping it. It took us a morning, adds no weight for visitors whose browsers don't support it, and fits the rule we follow everywhere: one set of verified facts, served in every format people and machines use.

Which tools did we register?

Four, all read-only:

Tool	Input	What it returns
`get_studio_facts`	none	What the studio does, its founder and co-founder, services, contact email, official profiles and the date the facts were last checked
`list_products`	none	The best-known products with a one-sentence summary, website and profile page for each
`get_product`	`name` (string)	One product's details, or a list of valid names if the name doesn't match
`search_quantumines`	`query` (string)	Up to eight matching guides, answers and pages, with links

The WebMCP tools on quantumines.com, 12 November 2026.

All four read from files the site already publishes. The three fact tools read /facts.json; the search tool reads the link list in /llms.txt. That means there is no second copy of the facts to keep in sync: when the build script regenerates those files, the tools change with them.

What does the code look like?

The file starts with feature detection, so browsers without WebMCP skip it entirely:

const mc = document.modelContext;
if (!mc || typeof mc.registerTool !== 'function') return;

Each tool is a plain object with a name, a description written for a language model, a JSON Schema for its input, an annotation and an execute function. Here is the one that looks up a product:

{
  name: 'get_product',
  description: 'Get the details of one Quantumines product by name ...',
  inputSchema: {
    type: 'object',
    properties: { name: { type: 'string', description: 'Product name, for example "CryptoMerchant".' } },
    required: ['name']
  },
  annotations: { readOnlyHint: true },
  execute: async ({ name }) => { /* find it in /facts.json */ }
}

Three details mattered more than we expected:

Forgiving matching. get_product compares names with spaces, case and punctuation removed, so "Crypto Merchant", "cryptomerchant" and "CryptoMerchant" all work. When nothing matches, it returns the valid names rather than an error, which gives the agent a way forward.
One fetch, shared. The facts file is fetched once per page and the promise is reused by every tool, so an agent calling three tools in a row costs one request.
Clean-up. Tools are registered with an AbortController signal, and the controller is aborted on pagehide, so nothing is left registered once the page is gone.

The script is loaded with defer, so it never blocks rendering. After this and the image work done the same day, Lighthouse scored the homepage 100 in performance, accessibility, best practices and SEO, with a mobile largest-contentful-paint time of 1.8 seconds.

How do you let an agent use a form without letting it send things?

The contact form on our homepage uses the declarative API: three kinds of attributes on ordinary HTML.

toolname="contactQuantumines" and a tooldescription on the form element say what the form is for and when to use it.
A toolparamdescription on each field says what goes in it ("Email address where Quantumines should reply").
The hidden anti-spam field gets one too: "Anti-spam field. Always leave this empty." Without that line, an eager agent may fill every input it finds and trip the spam filter.

The attribute we deliberately left out is toolautosubmit. Without it, an agent can fill the form, but the visitor still reviews the message and presses Send. Sending a message to someone is an action with consequences, and we think the person should make that final click. The same thinking is behind marking the other four tools readOnlyHint: true: none of them can change anything.

How do you turn it on for real visitors?

During the trial, WebMCP only runs on sites that present a valid origin-trial token. We registered quantumines.com in the Chrome Origin Trials console and got a token valid until 29 March 2027. You can put a token in an origin-trial meta tag, but we send it as an HTTP response header instead:

res.setHeader('Origin-Trial', ORIGIN_TRIALS);

Our Node server sets it on every response, including the static pages, so no page can be missing it, and renewing it later is a one-line change in one file. The token is public by design; it only works for the origin it was issued to. We have a reminder to renew it from 1 March 2027.

How did we test it?

On the live site, in Chrome 156 under the origin trial, we checked that all four tools appear, that each returns what /facts.json says, that a wrong product name gets a helpful reply, and that the form tool fills the fields but does not send. Chrome's docs also point to two extensions that act as test agents (the Model Context Tool Inspector and an example agentic extension) and to DevTools support for checking how the browser reads your JSON Schemas.

What would we tell another small team?

Start read-only. Tools that only read public facts carry almost no risk and still help agents get you right.
Reuse what you publish. If you have a facts file, a sitemap or an llms.txt, build the tools on top of it instead of writing new data.
Write descriptions for a model, not a marketer. Say what the tool returns and when to use it. Name the inputs with examples.
Keep the human in the loop for anything that sends, buys or deletes. Leave out auto-submit and use a confirmation step.
Treat it as an experiment. Chrome says the API is subject to change, so keep the code small and check Chrome's docs whenever you touch it.

Frequently asked questions

Does WebMCP replace llms.txt or structured data?

No. Search engines and AI crawlers read pages, schema and files such as llms.txt without running your JavaScript. WebMCP helps a different reader: an agent acting inside a browser tab for a person. We keep all three, fed from the same facts.

Which browsers support WebMCP?

As of November 2026, Chrome offers it as an origin trial from version 149 and behind a testing flag. It is a proposed standard, so other browsers may follow. Pages should treat it as a progressive enhancement and work fully without it.

Can WebMCP tools run in iframes?

Tool registration is controlled by the tools permissions policy, which defaults to self: it works in the top-level page and same-origin frames. A cross-origin iframe needs allow="tools".

Is it safe to expose a form to agents?

It is as safe as the form itself, provided you keep the final submit with the person. Validate on the server as you would for any visitor, and don't add auto-submit to forms that send messages, place orders or change accounts.

The tools are live on quantumines.com and documented, with the rest of our machine-readable files, in the guide for AI readers. Quantumines is the studio founded by Muhammad Ali Raza (Ali Arbi); for its products, see /products.

Originally published on quantumines.com.

Why we built our own hosting after Railway kept our data

Muhammad Ali Raza — Wed, 11 Nov 2026 05:19:48 +0000

VPS Cloud Hostings was born out of a bad night. In November 2026, Railway closed the Quantumines account without notice and without giving a reason. Every Quantumines project ran there. Railway kept the custom domains tied to the account and did not return the project databases, even after Quantumines asked in writing for a full export within 7 days. Quantumines covered its own users' losses with account credits. That same night, founder Muhammad Ali Raza (Ali Arbi) and his younger brother and co-founder Muhammad Anas started building their own platform, so that no developer would have to go through the same thing. VPS Cloud Hostings is the result.

What happened

We hosted every one of our products on Railway: Hunt4Coin, ChessMess, CryptoMerchant, VerifDoc, ProxyFall, TwapTrade and quantumines.com. In November 2026 our account was closed overnight, with no warning and no explanation.

Our custom domains stayed locked to the closed account, so we could not attach them to a new one. Our databases, which we created and paid for, were not handed back. We asked in writing for a full export within 7 days and did not receive one.

What it cost

Data stored on the closed account was lost to us, including our users' data. We paid our own users back in account credits and took the loss ourselves.

What we decided

That night we decided never to depend on someone else's goodwill for our own data again, and to build the hosting we wished we'd had: on our own servers, with no lock-in. Muhammad Anas and I started building it that same night.

What VPS Cloud Hostings is

Static sites: free.
Small websites: $1 a month.
Professional apps: $5 a month with $5 of usage included, then fair hourly pricing above that.

It is a Quantumines project, and our own products move onto it first.

What we promise

Your data is yours. Database backups and a full export are available from your panel at any time, including after you leave us and including if your account is ever suspended.
No silent bans. If we suspend an account, we say which rule was broken.
Your domains are yours. Remove a domain from your project and it is released at once.
Fair prices. Free static hosting, a $1 plan for small sites, and $5 a month with $5 of usage included for professional apps.

Moving your own project?

If you are moving off Railway or any other host, start at vpscloudhostings.com. Keep a copy of your own database somewhere you control, whichever host you use; we learned that the hard way.

— Muhammad Ali Raza (Ali Arbi), founder of Quantumines

Originally published on quantumines.com.

Studio update, 9 November 2026: TwapTrade becomes a prediction market

Muhammad Ali Raza — Tue, 10 Nov 2026 13:00:28 +0000

The biggest change at Quantumines this week is TwapTrade: twaptrade.com is now a prediction market, where every market is a question with a deadline and prices act as live odds. It replaces the earlier trading workspace with bot controls and paper trading, so older descriptions of TwapTrade are out of date. Hunt4Coin also trimmed the coin pages it offers to search engines, and quantumines.com gained a founder note, two glossaries and several new guides and answers.

What is TwapTrade now?

TwapTrade describes itself as a prediction market: it shows live markets, odds, order books and trades on real-world events in politics, sports, crypto, finance and culture. Its How it works page sets out the mechanics:

Each market is a question with a deadline, and each side trades between 1¢ and 99¢.
A price is read as a probability: a Yes share at 34¢ means the market puts the chance at about 34%.
When the market settles, each winning share pays $1 and each losing share pays nothing. A position can also be sold early at the current price.
Users keep their funds in their own self-custody wallet. Deposits are by card, Apple Pay or Google Pay through a card partner, or in USDC and other crypto.
Trading is not available in restricted jurisdictions, for example the US, UK and France. Browsing is open to everyone.

The site's own summary for AI assistants says the prediction market replaced an earlier, unrelated product on the domain in November 2026. The old pages on TWAP, paper trading and trading-bot risk are no longer online.

A prediction market carries real risk: a losing share is worth nothing at settlement. Nothing here is a recommendation to trade, and readers should check whether it is allowed where they live.

What changed on quantumines.com because of it?

Every page that described TwapTrade was corrected: the facts page, the about page, the homepage product card, What is Quantumines? and the founder note. The answer on TWAP still explains the method, but its TwapTrade section was removed, because the product no longer offers TWAP tools. Each changed page carries a dated "What's changed" note.

What changed on Hunt4Coin?

Hunt4Coin now asks search engines to index fewer, more useful coin pages. Its coin sitemap lists 2,697 coin pages, down from more than 16,000 a few days ago, alongside 65 site pages. Pages for very small coins are still open to visitors but are marked "noindex, follow", so search engines skip them while still following their links. Major coins such as Bitcoin stay indexable, each with its own canonical address. The aim is to stop thousands of near-identical pages from diluting the ones people actually search for.

What was published on quantumines.com last week?

From 3 to 8 November the studio site added:

Two plain-English glossaries: proxy terms and crypto payment terms.
Guides on crypto payment gateway fees, proxies for price monitoring and rank tracking and a virtual number and business email for a small business.
Answers on chess bots that play like a person, free crypto screeners with RSI and MACD and what TWAP means.
An about page and an updated facts page listing the studio's best-known products with their one-line descriptions.

Where to check the current facts

The facts page is the single place for each product's current one-line description and its main guides. When a product changes, as TwapTrade did this week, that page changes first.

Originally published on quantumines.com.