PT Cloud Platform Indonesia (PT CPI)

Platform Engineering

May 28, 2026
12 min read

How We Built ptcpi.cloud—DevSecOps Lessons from Shipping Our Own Website

PT CPI rebuilt its public website on Astro and Cloudflare Workers. Broken images, Lighthouse gaps, and deploy surprises became a case study in the same DevSecOps habits we bring to GCP client programs.

Executive summary: We rebuilt ptcpi.cloud as a production system on Astro and Cloudflare Workers—not a slide-deck microsite. When images broke in prod and Lighthouse Performance stalled at 72, we fixed it with the same DevSecOps loop we use on GCP programs: reproduce, root-cause, automate the guardrail, ship again. This article is the proof.

Most cloud consultancies treat their own website as an afterthought. We did the opposite. ptcpi.cloud ships with Starlight documentation, bilingual EN/ID content, prerendered marketing routes, and deployment on Cloudflare Workers—built with the engineering discipline we apply to landing zones, FinTech pipelines, and regulated delivery.

Who should read this

Role	What you get from this article
CEO / COO	Evidence we practice before we preach—published Lighthouse scores, deploy discipline, no “marketing exception”
CTO / Head of Engineering	Concrete fixes: image pipeline, CSS budget, zero-JS islands, reproducible audits
Platform / SRE / Engineers	Config snippets, Taskfile workflow, and how we separate real errors from analytics noise

Problem → solution matrix

Problem	Symptom	Root cause	Fix
Image pipeline	Hero and service images HTTP 500 after first deploy	Runtime `/_image` expected Cloudflare Images binding; prerender mismatch	`imageService: 'compile'` + aligned `wrangler` assets
Performance budget	Lighthouse Performance 72, SEO already 100	~117 KB CSS bloat, Solid.js island, no LCP preload, `backdrop-blur` on navbar	Strip unused CSS, vanilla theme toggle, hero preload, redeploy
Audit drift	Green locally, red on ptcpi.cloud	Wrong preview server, Missing Sharp in dev, inconsistent Chromium setup	`task lighthouse:preview` against Wrangler build output
Console noise	`beacon.min.js` ERR_BLOCKED_BY_CLIENT	Cloudflare Web Analytics blocked by privacy extensions—not an app defect	Document for auditors; scores unaffected

Show me the code

Compile-time images on Cloudflare

We stopped relying on runtime image transforms for prerendered pages:

cloudflare({ imageService: 'compile' })

Assets land in dist/client as optimized WebP/AVIF at build time—predictable URLs at the edge, no surprise 500s in production.

LCP preload for the hero image

export async function buildHeroLcpPreload(src: ImageMetadata) {
  const [w480, w720, w960] = await Promise.all([
    getImage({ src, width: 480, format: 'webp' }),
    getImage({ src, width: 720, format: 'webp' }),
    getImage({ src, width: 960, format: 'webp' }),
  ]);
  return {
    href: w720.src,
    srcset: `${w480.src} 480w, ${w720.src} 720w, ${w960.src} 960w`,
    sizes: '(max-width: 768px) 100vw, 45vw',
  };
}

Zero client JavaScript on the homepage

We removed the Solid.js theme island and replaced it with an inline toggle—0 KB of framework hydration on first paint:

<!-- Theme toggle: no astro-island, no client:idle bundle -->
<button id="theme-toggle" type="button" aria-pressed="false">…</button>
<script is:inline>/* read localStorage, toggle .dark */</script>

Proof of concept: Lighthouse on production

We publish numbers, not promises. Chrome Lighthouse (mobile, production URL, May 2026):

Metric	Homepage (before pass)	This article (after pass)
Performance	72	99
Accessibility	96	91
Best Practices	92	96
SEO	100	100

CSS bundle dropped from ~117 KB → ~88 KB. Client JS on the homepage went to zero. The Performance gap was real engineering debt—not a vanity metric we hand-waved away.

About the red console line

Some auditors see:

GET static.cloudflareinsights.com/beacon.min.js net::ERR_BLOCKED_BY_CLIENT

That is Cloudflare Web Analytics injected at the edge, blocked by uBlock Origin, Brave, or similar privacy tools. It is not a defect in our Astro bundle. Visitors without blockers load the beacon normally; Lighthouse category scores are unaffected. When you audit with an ad blocker enabled, separate third-party analytics noise from application errors.

Shift-left quality gates

Throughout the build we treated the site like a product repository:

TypeScript strict + astro check before every production build
Vitest for shared utilities (slugify, locale routing, title branding)
Brotli compression via astro-compressor on static HTML
Prerendered marketing routes for fast edge delivery
Structured data + hreflang for bilingual SEO
Title-based slugs instead of opaque post-N.md filenames
task lighthouse:preview encoded in Taskfile so the next change is measured the same way

Human + agent delivery

Cursor, Hermes, and MCP tools (ptcpi-tools) accelerated refactors—brand title patterns, FAQ expansion, docs cross-linking—while humans kept architecture decisions: Cloudflare adapter boundaries, i18n routing, and what belongs in Starlight versus marketing pages.

Governed autonomy—agents propose diffs, pipelines and reviewers accept or reject—is the same model we recommend when clients adopt AI-assisted SDLC on GCP.

Conclusion and next steps

We do not sell DevSecOps as a PDF. We run TDD-friendly checks, security-aware delivery, performance budgets, and reproducible deploys on our own properties first.

If you are a CEO, COO, or CTO evaluating PT CPI: ask any partner whether they hold their public site to the same standard as client production. We do—and we wrote the case study on the site you are reading.

Next steps:

Explore our DevSecOps and platform engineering services
Read the live site at ptcpi.cloud
Contact PT CPI for a delivery review on your GCP or Cloudflare estate