Astro.js Clinic Landing Page Examples (With Real Scores)

Beyond the Lighthouse Score: What These Builds Actually Contain

Most agency portfolios show screenshots and Lighthouse scores. Both are useful signals, but they leave out the architectural decisions — why certain choices were made, what problems they solved, and what the performance translates to for actual patient acquisition.

These case studies use three of our clinic implementations to illustrate how the principles from our complete guide to building clinic landing pages with Astro.js work in practice. Real scores, real architecture, real conversion elements.

Case Study 1 — Dental Clinic (Patient Acquisition Focus)

PageSpeed Insights Score (Mobile): 98 LCP: 0.8 seconds CLS: 0.01 TBT: 12ms JavaScript Delivered: 0KB

The Clinical Context

A multi-specialty dental clinic competing in a city with seven other dental clinics within three kilometers. The primary competitive challenge: patients searching “dokter gigi implan [kota]” see six to eight results and typically contact two or three before booking. The clinic needed to be the one that answered the patient’s intent question fastest and most credibly.

Architecture Decisions

The hero section was built around a single conversion job: get patients who are ready to book to contact via WhatsApp, and patients who are still evaluating to see enough clinical credibility to return or call. This meant:

• A split-attention hero layout that places the CTA button and phone number at immediate thumb-reach position on mobile
• Doctor portrait on the same visual line as the CTA — establishing that this is a real doctor, not a generic clinic
• Load time: 0.8 seconds from first network request to hero fully visible on a 4G connection

The trust section leads with the doctor’s PDGI registration number, university, and years as a specialist — not marketing language. The implicit message: this is a verifiable professional, not a marketing claim.

Local SEO Implementation

JSON-LD schema uses the Dentist type (more specific than MedicalClinic), with operating hours, aggregateRating synced from the Google Business Profile review data, and the clinic’s exact NAP matching the GBP listing character-for-character.

The page mentions the city and specific district in three natural-language contexts: the hero subheadline, the directions section, and the footer NAP block. No keyword stuffing — three natural mentions of geographic context.

Conversion Element That Works

The WhatsApp button reads “Konsultasi Jadwal Dokter” rather than “Book Now.” Small copy difference, measurable outcome difference. “Konsultasi” signals a low-commitment first step; patients who are still evaluating respond better to that framing than to transactional language.

---

Case Study 2 — Aesthetic and Beauty Clinic

PageSpeed Insights Score (Mobile): 96 LCP: 1.1 seconds CLS: 0.00 TBT: 30ms JavaScript Delivered: 8KB (Svelte island for the WhatsApp floating button)

The Clinical Context

An established aesthetic clinic running Google Ads for skin treatments in a competitive metro market. The client’s existing WordPress landing page had a PageSpeed score of 31 and a Quality Score averaging 4 on their top-spending keywords. They were spending Rp 10 million per month on ads with a cost-per-inquiry of approximately Rp 950,000.

Architecture Decisions

For aesthetic clinics, the visual experience of the landing page is a trust signal in itself. A patient evaluating skin aesthetics has a higher aesthetic sensitivity than average — they’re literally looking at your brand’s visual standard and inferring what your clinical aesthetic sensibility might be.

The design used a minimal, high-contrast palette with premium whitespace — the opposite of the dense, image-heavy layouts common on Indonesian aesthetic clinic websites. The photography is entirely of the actual clinic environment and actual doctors; the zero-stock-photography constraint was explicitly specified in the brief.

The hero image — a clean, well-lit photo of the clinic’s main treatment room — was delivered as AVIF format at 240KB, versus an equivalent JPEG at 840KB. This difference alone contributed 400ms of LCP improvement compared to the original WordPress build.

Conversion Element That Works

A visually distinct “Konsultasi Gratis” section positioned immediately after the treatment showcase. Not a pop-up, not floating, not a persistent sidebar — a section that appears at the natural point when patients have enough information to want a next step. Conversion tracking showed this section had the highest scroll-depth and WhatsApp click correlation.

Ad Performance After Migration

Post-migration Google Ads data (90-day comparison):

• Quality Score: 4 → 8
• CPC: Rp 15,200 → Rp 9,300 (−39%)
• Conversion rate: 1.1% → 3.4%
• Cost-per-inquiry: Rp 950,000 → Rp 252,000

Budget unchanged. The same Rp 10 million now generates approximately four times the qualified patient inquiries. The arithmetic behind this improvement is explained in full in our Google Ads cost reduction via landing page speed article.

---

Case Study 3 — Medical General Clinic (Local Pack Focus)

PageSpeed Insights Score (Mobile): 99 LCP: 0.7 seconds CLS: 0.00 TBT: 0ms JavaScript Delivered: 0KB

The Clinical Context

A general practice clinic targeting patients searching “klinik terdekat” and “[specific condition] dokter [kota]” queries. The primary goal was organic Local Pack visibility, not paid ad performance. They had a strong GBP profile but minimal organic presence because the landing page wasn’t indexed correctly and lacked local schema.

Architecture Decisions

For a general practice competing on local search, the landing page is less of a conversion page and more of a credibility verification page. Patients who arrive from Maps are already interested — they’re confirming that the clinic is legitimate, finding the operating hours, and deciding whether to call.

The architecture prioritized three things:

1. Speed — because the GBP click-to-website action is decisive; if the page is slow, patients abandon and call a competitor
2. NAP clarity — phone number, address, and hours visible in the hero without scrolling on any mobile screen
3. Schema completeness — MedicalBusiness type with specific services listed, operating hours with holiday exceptions, and aggregateRating synced to the GBP review count

Local SEO Result

The clinic was ranking position 7–9 for their primary local keyword before the landing page rebuild. Within 60 days of launch and Google Search Console sitemap submission, position moved to 3–5. Within 90 days, they had their first appearance in the Local Pack for their highest-volume keyword.

The GBP profile was unchanged. The reviews didn’t change. The only variable was the landing page: from a slow, unstructured WordPress page with no schema to an Astro-built page with 0.7-second LCP and complete local schema.

---

What These Three Builds Have in Common

Looking across the three case studies, the architectural commonalities are consistent:

• Zero render-blocking JavaScript — hero renders before any script executes
• WebP/AVIF hero images with explicit dimensions, fetchpriority=“high”, and preload declarations
• Self-hosted fonts loaded with preload links to eliminate external font HTTP requests
• JSON-LD schema valid in Google’s Rich Results Test
• Cloudflare Edge hosting with TTFB under 40ms to Indonesian visitors
• Single above-fold CTA with pre-filled WhatsApp message

The conversion elements vary by clinic type and patient intent. The performance architecture doesn’t.

For clinics wanting to see specific builds, our full portfolio shows 14 implementations across dental, medical, aesthetic, SMB, and hospitality categories — each with documented performance benchmarks.

References

1. Google Developers: PageSpeed Insights — 2024
2. Google Developers: Core Web Vitals — 2024
3. Google: Quality Score and Ad Rank — 2024
4. Cloudflare: Network Performance — 2024
5. Google Search Central: Structured Data — 2024