# TechKis TechKis is an AI-first software & engineering studio. We build end-to-end platforms and implement AI in your workflows — from LLM agents and RAG assistants to the full-stack web, mobile, desktop and backend services needed to ship them. Actively booking our first 2–3 founding clients. TechKis is an AI-first software engineering studio. We build end-to-end platforms and implement AI in your workflows — full-stack web apps, mobile apps, desktop apps and backend services, with LLM agents, RAG assistants and workflow automation baked in where they help. ## About TechKis - **Legal name**: TechKis - **Type**: Software Engineering Startup - **Location**: Remote · Global - **Team**: Small senior team - **Website**: https://techkis.tech - **Email**: techkis.tech@gmail.com - **Status**: actively booking our first 3 founding clients - **Pricing**: tailored to scope on a 30-minute discovery call — written proposal within 48 hours ## Key numbers - **AI-first** — Approach - **Senior** — Team - **1** — Founding client - **Free** — Strategy call ## Our work TechKis has completed the following client engagements: ### Puratan Ayurveda — Founding Client #1 - **URL**: https://techkis.tech/work/puratan-ayurveda - **Industry**: Retail & E-commerce - **Year**: 2026 - **Engagement**: End-to-end design, build & launch Puratan Ayurveda needed a home of their own online — a store that matched the brand, handled real orders, and didn't lock them into a monthly SaaS bill. Puratan Ayurveda had built a loyal following for their traditional Ayurvedic products, but their online presence was scattered across third-party marketplaces. Every sale meant paying platform fees, accepting someone else's checkout experience, and having no direct relationship with the customer. They came to us wanting to change that — a store that felt like theirs, that their team could run without a developer on call, and that could grow with the business. **The situation:** The brand needed more than a website. They needed a complete commerce experience: a storefront that communicated trust and heritage, a smooth checkout that converted browsers into buyers, a back-office their non-technical team could operate confidently day to day, and the ability to take payments and fulfil orders without manual handoffs. All of it had to be owned outright — no recurring platform fees, no vendor lock-in. **What we focused on:** - **A storefront built for the brand** — We designed and built a custom storefront from scratch — product catalogue, categories, search, cart and wishlist — styled to reflect the heritage and trust that Puratan Ayurveda's customers expect. No off-the-shelf theme, no compromises on the brand experience. - **A checkout customers actually complete** — The checkout flow was designed around reducing drop-off: clear product pages, a streamlined cart, secure online payments, and instant order confirmation. Customers can log in, view their order history and download invoices — all without contacting support. - **A back-office the team can run themselves** — We built a full admin panel covering catalogue management, inventory and stock levels, order processing, homepage banners and blog content. The team can make changes, process orders and update the store day to day without needing a developer. - **Ownership, not a subscription** — The entire platform — storefront, admin panel, data — is owned outright by the client. No per-seat SaaS fees, no vendor dependency. As the business grows, they can extend the platform on their own terms. **Results:** - Puratan Ayurveda now has a fully owned online store — their first direct channel to customers, free from marketplace fees and constraints. - The team manages their entire catalogue, inventory, orders and content from one admin panel, with no developer involvement needed for day-to-day operations. - Customers get a smooth, branded checkout experience with online payments, order confirmation and the ability to track their delivery. - The business owns the platform outright — no per-seat fees, no vendor dependency, and a codebase they can extend as they grow. ## Services ### AI Agents & Workflows _Category: AI & Automation · [Detail page](https://techkis.tech/services/ai-agents-workflows)_ LLM agents that take real action — read your docs, call your APIs, ship work back. We design and ship LLM agents that do real work — not chatbots that just talk. Built with LangGraph or pure code, evaluated before launch, and observable in production. **What we deliver:** - Production-ready agents with tool-use and function calls - Eval suites covering accuracy, refusal and regression - Tracing, cost monitoring and structured logs - Human-in-the-loop gates on anything irreversible - Safe deployment with rate limits, fallbacks and timeouts **Tools:** LangGraph · LangChain · OpenAI · Anthropic · Temporal · AWS Bedrock **Ideal for:** - Ops teams replacing repetitive manual workflows - Support orgs automating triage and routing - Products that need agentic UX baked in ### RAG & Knowledge Assistants _Category: AI & Automation · [Detail page](https://techkis.tech/services/rag-knowledge-assistants)_ Internal copilots that actually know your company — docs, wiki, Slack, code, with citations. Retrieval-augmented assistants that answer questions from your real knowledge base. Ingestion pipelines, hybrid semantic + keyword search, access control and source citations on every answer. **What we deliver:** - Document ingestion + chunking pipelines - Hybrid search (vector + BM25) with reranking - Per-user / per-tenant access control - Citations and source previews on every answer - Eval datasets and quality dashboards **Tools:** pgvector · Pinecone · Qdrant · LangChain · OpenAI Embeddings · Cohere Rerank **Ideal for:** - Companies whose docs live across Notion, Slack and GitHub - Support and success teams answering the same questions - Sales orgs needing instant access to product knowledge ### Workflow Automation _Category: AI & Automation · [Detail page](https://techkis.tech/services/workflow-automation)_ Replace manual ops work with AI-augmented pipelines — n8n, Temporal or pure code. Process automation that combines deterministic logic with LLMs where it actually helps. Built on n8n, Temporal or custom services depending on your stack — with human approval gates baked in. **What we deliver:** - End-to-end pipelines from trigger to system of record - LLM classification, extraction and decision steps - Human-in-the-loop review queues for sensitive steps - Retries, idempotency and dead-letter handling - Audit logs and observability for every run **Tools:** n8n · Temporal · Make.com · Zapier · Playwright · AWS Lambda **Ideal for:** - Ops teams drowning in copy-paste work - Finance teams processing invoices and receipts - Marketing teams running repetitive content ops ### AI Strategy & Architecture _Category: AI & Automation · [Detail page](https://techkis.tech/services/ai-strategy-architecture)_ Find the AI & automation opportunities that actually move your business — then a roadmap to execute. A short, focused engagement — usually 1–3 weeks — to identify the highest-ROI AI/automation opportunities for your business, score them, and turn the winners into a roadmap your team can actually execute. **What we deliver:** - Discovery interviews across teams and workflows - Opportunity backlog scored on impact vs effort - Build-vs-buy recommendations per opportunity - A staged roadmap with concrete first project - Optional pilot implementation to prove value **Tools:** Workshops · Process mapping · Opportunity scoring · Build-vs-buy matrices **Ideal for:** - Leadership teams overwhelmed by AI hype - Product teams unsure where AI fits the roadmap - Ops leaders wanting an honest automation audit ### Full Stack Web Development _Category: Engineering · [Detail page](https://techkis.tech/services/full-stack-web-development)_ Customer-facing platforms end-to-end — Next.js, React 19 and TypeScript front to back. Modern web apps built on Next.js App Router with React 19, TypeScript everywhere, and the production polish to actually ship. AI features baked in by default — chat, streaming UIs, structured extraction — where they help. **What we deliver:** - Next.js 16 App Router architecture with RSC by default - Type-safe data layer (Drizzle / Prisma + tRPC or REST) - Auth, billing, multi-tenant scaffolding - Streaming UIs and Vercel AI SDK integration - SEO, OG images, sitemap, JSON-LD and Core Web Vitals tuning **Tools:** Next.js 16 · React 19 · TypeScript · Tailwind v4 · Drizzle / Prisma · Vercel AI SDK **Ideal for:** - Founders shipping a new SaaS product - Teams rebuilding a legacy web app - Companies that need design + engineering under one roof ### Mobile App Development _Category: Engineering · [Detail page](https://techkis.tech/services/mobile-app-development)_ iOS and Android apps — React Native or native — with AI features that actually feel native. Mobile apps that look native, ship fast and pass App Store / Play Store review on the first try. We default to React Native or Expo for cost-effective cross-platform, native Swift / Kotlin when you need the metal. **What we deliver:** - React Native / Expo apps with native modules where needed - On-device LLM and Whisper integrations - Offline-first sync, push notifications, deep linking - App Store and Play Store submission - OTA updates via EAS or CodePush **Tools:** React Native · Expo · Swift · Kotlin · Firebase · EAS Build **Ideal for:** - Founders shipping their first mobile app - Teams needing a companion mobile experience - Products with on-device AI / voice features ### Desktop App Development _Category: Engineering · [Detail page](https://techkis.tech/services/desktop-application-development)_ Cross-platform desktop apps — Electron or Tauri — with the polish of a native client. Desktop applications for Windows, macOS and Linux. Electron when you need the rich web stack inside a window, Tauri when you need the smaller binary and tighter OS integration. **What we deliver:** - Tauri or Electron app skeleton with auto-update - Native OS integrations (tray, notifications, shortcuts) - Code-signing and notarization for macOS / Windows - Local LLM inference (Ollama / llama.cpp) where it fits - Telemetry, crash reporting and update channels **Tools:** Tauri · Electron · Rust · TypeScript · Sqlite · Ollama **Ideal for:** - Power-user tools that need to feel native - Local-first apps with strict data residency - Products bundling local LLM inference ### API Platforms _Category: Engineering · [Detail page](https://techkis.tech/services/api-platforms)_ Versioned, documented, well-tested HTTP and event APIs your customers and downstream teams will enjoy. API-first platforms with proper versioning, generated SDKs, OpenAPI documentation and the operational story (auth, rate limits, idempotency, webhooks) that customers expect. **What we deliver:** - REST or GraphQL with auto-generated docs - OpenAPI spec + typed SDKs (TS / Python / Java) - Auth (API keys, OAuth2, JWT) and per-tenant rate limits - Webhook delivery with retries and signing - Sandbox + production environments **Tools:** OpenAPI · GraphQL · Spring Boot · Node.js · Kong / AWS API Gateway · Stripe SDK patterns **Ideal for:** - Products opening up a platform to third-parties - Teams formalising internal services into a real API - Companies that need partner integrations ### Cloud & AWS / DevOps _Category: Engineering · [Detail page](https://techkis.tech/services/cloud-aws-devops)_ Cloud-native delivery on AWS — IaC, CI/CD, observability and a sensible monthly bill. Production cloud infrastructure on AWS done right. Terraform for everything, GitHub Actions for CI/CD, OpenTelemetry for observability, and cost guardrails so your AWS bill doesn't surprise you. **What we deliver:** - Terraform modules for VPC, ECS/EKS, RDS, S3, CloudFront - GitHub Actions CI/CD with blue-green or canary deploys - OpenTelemetry traces, metrics and structured logs - Cost monitoring with budgets and anomaly alerts - GPU autoscaling and Bedrock integration for AI workloads **Tools:** AWS · Terraform · GitHub Actions · ECS / EKS · CloudWatch · OpenTelemetry **Ideal for:** - Teams moving off Heroku / Render at scale - Companies needing SOC 2 / HIPAA-ready infrastructure - Products with GPU / AI workload requirements ## Use cases we automate ### Customer support Triage inboxes, draft on-brand replies, route tickets with full context — and escalate only what truly needs a human. ### Internal knowledge A company-wide copilot that answers from your docs, wiki, Notion and Slack — with citations, access control and audit trails. ### Document & data extraction Pull structured data from PDFs, contracts, invoices and reports straight into your systems. No more manual entry. ### Sales & outreach Enrich leads, draft personalised outreach and keep your CRM clean — automatically, with humans approving the sends. ### Content operations Repurpose long-form into briefs, social posts and newsletters with brand-aware tone, fact checks and a review queue. ### Developer workflows PR review summaries, ticket triage, changelog generation and intelligent on-call digests — built around your existing tools. ## Industries we serve ### Fintech & Financial Services Compliance-aware platforms for payments, lending and wealth. We've worked on payment platforms, lending workflows and risk systems. We default to compliance-aware architecture: audit trails, encryption at rest and in transit, and idempotent money movement. **We can help with:** - Payment & ledger services - AML / KYC document workflows - Fraud detection with LLMs - Compliance reporting automation ### SaaS & Developer Tools Multi-tenant platforms, billing and developer experience. We build SaaS products end-to-end — multi-tenant data models, Stripe billing, role-based access and the developer-experience polish that lets you charge premium prices. **We can help with:** - Multi-tenant data + auth - Stripe billing & metering - Public APIs with SDKs - Dashboards & admin tooling ### Healthcare & MedTech HIPAA-aware workflows for clinical and patient data. Patient portals, clinician tooling, document intake and AI assistants that handle PHI responsibly. We design for HIPAA & SOC 2 from day one — not bolted on later. **We can help with:** - Patient intake & onboarding - Clinical document extraction - AI assistants on PHI - Audit trails & access control ### Retail & E-commerce Headless commerce, AI search and personalisation. Headless commerce builds, AI-powered search and recommendations, and the operational tooling (inventory, returns, support) that real retail businesses need to run. **We can help with:** - Headless storefronts (Next.js) - AI product search & recs - Inventory & OMS integrations - Returns + support automation ### EdTech & Learning AI tutors, content generation and LMS integrations. Learning platforms with AI-augmented tutoring, content generation pipelines and LMS / LTI / SCORM integrations for institutions. **We can help with:** - AI tutoring & feedback loops - LMS / LTI / SCORM integrations - Course content generation - Student knowledge assistants ### Travel & Hospitality Booking flows, dynamic pricing and AI trip planners. Booking platforms, dynamic-pricing engines and AI trip-planning assistants — built to plug into the legacy GDS, OTA and PMS systems the industry still runs on. **We can help with:** - Booking & checkout flows - AI trip planners - Dynamic pricing models - OTA / GDS / PMS integrations ### Media & Marketing Content ops, attribution and AI-augmented creative. Content operations pipelines, marketing-attribution platforms and AI-augmented creative tooling — brand-aware, with humans approving the sends. **We can help with:** - AI content pipelines - Brand-aware copy generation - Attribution & analytics - CMS & MarTech integrations ### Logistics & Operations Document processing, dispatch and workflow automation. Document-heavy operations: invoices, bills of lading, customs forms. We replace manual entry with AI extraction and human approval — fewer errors, faster cycle times. **We can help with:** - Document data extraction - Dispatch & routing tools - OCR + LLM verification - Operational dashboards ## Capabilities ### AI & ML Engineering Senior LLM engineering — from agent design to production observability. We pick the right model and tools for your problem, not a fixed vendor stack. - **LLM agents & tool-use** — Orchestration with any modern agent framework - **RAG pipelines** — Hybrid search, reranking, citations - **Vector search** — Any vector DB — pgvector, Pinecone, Qdrant and others - **Evals & benchmarks** — Regression suites, drift alerts, golden sets - **Fine-tuning & adapters** — LoRA, SFT, RLHF where it genuinely helps - **Multimodal** — Vision, voice, audio across leading providers - **Prompt engineering** — Templates, guardrails, structured output - **Cost & latency tuning** — Model routing, caching, batching ### Backend Engineering Production backends with the observability and resilience real systems need. JVM, Node or Python — we work in whatever fits the problem. - **JVM services** — Spring Boot, Java, Kotlin — modern JVM - **Node & TypeScript APIs** — Fastify, NestJS, Express - **Python services** — FastAPI, Django, async-first - **Microservices & DDD** — Clean domain boundaries - **Event-driven systems** — Kafka, RabbitMQ, SQS and others - **REST & GraphQL APIs** — OpenAPI, typed SDKs - **Relational databases** — PostgreSQL, MySQL, schema design - **Caching & queues** — Redis, Memcached, background workers - **Observability** — OpenTelemetry, Prometheus, Grafana ### Frontend, Mobile & Desktop Modern clients — accessible, fast, AI-ready. We work in the framework and platform that fits your team and product, not a single fixed stack. - **Modern web frameworks** — Next.js, Remix, Astro and similar - **TypeScript front-to-back** — React, Vue, Svelte — type-safe - **Design systems & theming** — Component libraries, tokens, dark mode - **Streaming AI UIs** — Server-driven streaming, leading AI SDKs - **Cross-platform mobile** — React Native, Expo, Flutter - **Native iOS & Android** — Swift, Kotlin where they earn their keep - **Cross-platform desktop** — Tauri, Electron, auto-update channels - **Accessibility** — WCAG 2.2 AA, keyboard-first, screen-reader tested ### Cloud & DevOps Cloud-agnostic infrastructure, IaC and CI/CD — with cost guardrails baked in. We meet your cloud where it is. - **Cloud platforms** — AWS, Azure, GCP — managed where it helps - **Infrastructure as code** — Terraform, Pulumi, CloudFormation - **CI/CD pipelines** — GitHub Actions, GitLab, blue-green, canary - **Containers & orchestration** — Docker, Kubernetes, ECS, serverless - **Compliance readiness** — SOC 2, HIPAA, GDPR audit trails - **Cost optimization** — Budgets, anomaly alerts, rightsizing - **Secrets & identity** — IAM, KMS, Vault, OIDC, SSO - **GPU autoscaling** — For inference and training workloads ### Product & Architecture The cross-cutting work that decides whether a project succeeds long after delivery. - **System design reviews** — Independent audits - **Migration & modernization** — Off legacy, onto cloud - **Performance engineering** — p95 latency, query tuning - **Security audits** — Threat modelling, secrets hygiene - **Technical due diligence** — For acquirers and investors - **ADRs** — Decision logs your future team will thank you for - **Design systems** — Component libraries, tokens - **Documentation** — Runbooks, API docs, onboarding ## Custom Software Development deep dive (https://techkis.tech/capabilities/custom-software-development) We design and build custom software end-to-end — web, mobile, desktop and the APIs behind them. AI features baked in where they help. Senior engineers, written architecture, weekly demos and production-grade rigour from day one. ### What you gain - **Tailored to your problem** — No template SaaS, no offshore handoff. We design for the specific workflow, integration and user you're shipping to — not the generic case. - **Cloud-native by default** — AWS, multi-AZ, infrastructure-as-code. Built to scale horizontally and be redeployed in minutes — not pinned to a single box. - **AI where it actually helps** — Smart extraction, assistive UX, summarization, structured outputs — wired in deliberately, with evals, not sprinkled in for the demo. - **Built for the long run** — Type-safe code, CI/CD, observability and tests. The codebase a competent team can keep building on for years — not a dead-end you'll rewrite. - **Architecture-first** — We write the architecture document before the first line of feature code. You'll know exactly what's being built, why and what trades it makes. ### What we build #### Web development Customer-facing platforms, internal tools, SaaS products and dashboards built on the modern web framework that fits your team — React, Vue or Svelte, with TypeScript end-to-end. Streaming UIs, type-safe data layers, auth, billing and multi-tenant scaffolding — production-grade from day one. - Modern web frameworks — pick what fits your team - Type-safe data layer end-to-end - Auth, billing and multi-tenant scaffolding - SEO, accessibility and Core Web Vitals tuning Linked service: https://techkis.tech/services/full-stack-web-development #### Mobile application development Native-feeling iOS + Android apps built cross-platform where it makes sense, and native Swift / Kotlin where it earns its keep. AI-driven personalization, offline-first, deep linking and push notifications baked in. - Cross-platform (React Native, Expo, Flutter) or native - Offline-first sync with conflict resolution - Push notifications and deep linking - App Store and Play Store submission and review Linked service: https://techkis.tech/services/mobile-app-development #### Desktop applications Cross-platform desktop apps — small footprint, OS-level integrations, auto-update channels and code-signed installers for Mac, Windows and Linux. Ideal for power-user tools and AI assistants that need local context. - Cross-platform (Tauri, Electron) or native - Auto-update channels and code-signed installers - OS-level menus, tray icons and shortcuts - Local AI inference where privacy matters Linked service: https://techkis.tech/services/desktop-app-development #### Backend & microservices JVM, Node or Python microservices designed for scale from day one — we work in whatever fits your team and existing platform. Event-driven where it helps, observable everywhere, with clean domain boundaries and idempotent data flows. - JVM, Node or Python — whichever fits your stack - Domain-driven service decomposition - OpenTelemetry traces, metrics and structured logs - CI/CD with blue-green or canary deploys Linked service: https://techkis.tech/services/undefined ### What you can achieve - **01 Validate your vision** — We can start with a 2–4 week proof-of-concept — clickable prototype, AI feasibility test or thin-slice MVP — before committing to a full build. - **02 Ship fast, ship well** — Weekly sprints behind feature flags. Working software in front of real users within weeks, not quarters. - **03 Future-proof your stack** — Modern foundations (Next.js, React 19, Java 21, AWS) and CI/CD pipelines that make the next year of changes feel boring — not terrifying. - **04 Maximize operational efficiency** — Process automation, smart admin tooling and AI-augmented workflows wired into the product — so your team scales without scaling the headcount. - **05 Build on solid architecture** — Written architecture docs, clear domain boundaries and documented trade-offs. The codebase a competent team can keep building on for years. - **06 Stay resilient** — Observability, health checks, rollback paths and on-call runbooks from day one — so production stays boring even when traffic isn't. ### Six steps, from kickoff to production. Every custom software engagement follows the same outline — adapted to your timeline, stack and risk tolerance. No black boxes. #### 01 Discovery & planning Deep dive into business goals, users, constraints and integrations. Output: written scope, feasibility notes, a roadmap and the architecture document for what we'll actually build. #### 02 Design & prototyping Interactive wireframes and a clickable prototype reviewed with you. We validate usability, edge cases and AI/data assumptions before writing feature code. #### 03 Build Agile sprints behind feature flags. Type-safe code, automated tests, peer review on every PR, and a public changelog you can read at any time. #### 04 Testing & QA Functional, performance, security and user-acceptance testing. We hunt vulnerabilities before launch — not after a postmortem. #### 05 Deployment Zero-downtime releases with CI/CD, infrastructure-as-code and blue-green or canary deploys. Production gets boring, the way it should. #### 06 Support & maintenance Monitoring, dependency upkeep, security patches and a 30-day support window — or an ongoing retainer for new features and tuning. ## Experience Transformation deep dive (https://techkis.tech/capabilities/experience-transformation) We help teams move beyond clunky legacy software — without rewriting everything from scratch. Cloud migration, UI/UX redesign, intelligent automation and clean data pipelines, delivered as one coordinated programme rather than four disconnected projects. ### What you get - **Custom-fit to your business** — We modernize the bits that hurt and leave alone the bits that don't. No template rewrite, no rip-and-replace just because a vendor said so. - **Scale without overhauls** — Cloud-native infrastructure and horizontal-scale architecture so the next round of growth doesn't trigger another expensive rebuild. - **Exceptional user experience** — Modern, accessible, fast interfaces that your team and customers actually want to use — designed against real user research, not gut feeling. - **Seamless integration** — We meet your existing stack where it is — ERPs, CRMs, legacy databases, third-party APIs — and connect the dots without making everyone rewrite their tools. - **Data-driven ROI** — We measure performance gains and operational cost savings — and we instrument the new system so you can keep measuring after we leave. ### What we do #### Revitalize legacy systems Outdated systems slow your business and limit growth. We move them to cloud-native architecture, strangle them with a modern facade, or rewrite the parts that are holding you back — without a year-long freeze on shipping new features. - Cloud migration to AWS / Azure / GCP - Strangler-fig refactoring instead of big-bang rewrites - Database modernization (Oracle/MSSQL → PostgreSQL) - Containerization and orchestration on Kubernetes/ECS #### Enhance user experience A seamless digital experience is the difference between users tolerating your product and recommending it. We research, prototype and ship interface redesigns optimized for accessibility, performance and conversion. - User research, journey mapping and information architecture - Component-library design system (Figma → code) - WCAG AA accessibility from the ground up - Core Web Vitals and performance budgeting #### Process automation Manual processes slow productivity and multiply errors. We automate the workflows that actually hurt — using deterministic logic where it suffices and LLMs where they genuinely help — with human approval gates on anything sensitive. - End-to-end workflow pipelines on n8n / Temporal / pure code - LLM classification, extraction and decision steps - Human-in-the-loop review queues for sensitive steps - Audit logs, retries and idempotency built in #### Data integration Siloed data limits insights and decision-making. We connect the systems, unify the schemas and build pipelines you can trust — feeding analytics, AI features and operational tools from one clean source of truth. - ETL / ELT pipelines on Airflow / dbt / Dagster - CDC streams to data warehouse or lake - Schema modeling and data quality monitoring - Single-source-of-truth feeds for BI and AI features ### What you can achieve - **01 Revitalize legacy systems** — Get off unsupported platforms, retire technical debt and free the team from the constant maintenance tax. - **02 Boost efficiency** — Automate the busywork so your people can spend time on the work that actually moves metrics. - **03 Enhance user experience** — Modern interfaces that customers and staff want to use — measured against real research, not opinions. - **04 Enable future-readiness** — Cloud-native foundations that the next AI feature, the next acquisition, the next pivot can build on cleanly. - **05 Drive competitive advantage** — Faster iteration, lower marginal cost per transaction and product capabilities your incumbent competitors can't match. - **06 Ensure seamless transition** — Strangler-fig migration paths, blue-green deploys, dual-write windows and rollback plans — so the lights stay on while we modernize underneath. ### Seven steps, from audit to live. Modernization that doesn't put your operation at risk. Every step has a written gate — nothing moves forward until both teams agree it should. #### 01 Discovery & assessment We audit the existing system end-to-end — code, data, users, integrations and pain points. Output: a written assessment with prioritized risks and a 'don't break this' list. #### 02 Strategy & roadmap We design the modernization strategy aligned to your business priorities — milestones, cutover plan, rollback paths and the resource shape needed to get there. #### 03 UI/UX design & prototyping We redesign the surfaces that matter, validate with real users, and ship the design system that the new product hangs off. #### 04 Technology modernization Cloud migration, framework upgrades, database modernization and AI integration — done incrementally with feature flags, not as a single big-bang cutover. #### 05 Testing & optimization Functional, performance and security testing on every release. Performance budgets and SLOs defined and monitored, not assumed. #### 06 Deployment & integration Zero-downtime cutover with blue-green or canary deploys. Integration smoke tests run on every release — not just at the end. #### 07 Ongoing support & monitoring Continuous monitoring, security patching and a proactive optimization cadence. We can stay on retainer or hand over to your team — your call. ## Founding Partner Program (https://techkis.tech/capabilities/founding-partner-program) TechKis is a brand-new AI-first software studio actively booking our first 2–3 founding clients. In exchange for being a flagship reference, you get founder-friendly terms, a senior team's full attention and direct access to the people writing the code — not a sales layer. ### What you get - **Co-create your product** — We refine your idea, sharpen the wedge and design the MVP with you — combining product workshops, technical feasibility and AI opportunity mapping. The output is a written scope and roadmap you can hold us to. - **Sprint to a working MVP** — A focused 4–8 week sprint to ship a working MVP — agile delivery, weekly demos behind flags and AI features baked in where they actually help. Built on Next.js, React 19, Spring Boot or whatever your roadmap demands. - **Founder-friendly terms** — Discount, milestone-based billing or a hybrid arrangement on our first 2–3 engagements while we build our portfolio. Concrete numbers stay offline — but the trade is simple: lower cost in exchange for being our flagship case study. - **Scale & support beyond launch** — Post-MVP support, hardening and growth work on a retainer if it's a fit. We don't disappear after launch — and we don't get in the way of you scaling the team in-house when the time comes. ### Three steps, from idea to launched MVP. We keep the operating model simple — three phases, weekly cadence, written outputs at every gate. #### 01 Co-discover Intensive workshops to refine the vision, map the user, score AI opportunities and write the architecture. Output: an MVP scope you actually want to build, with edge cases and trade-offs on paper. #### 02 Co-build An agile sprint with weekly demos behind feature flags. We ship to real users early, gather feedback, and bake in AI, evals and observability from day one — not as an afterthought. #### 03 Co-operate Launch, monitor, learn. Post-MVP we move into a smaller retainer for tuning, new features and supporting the team you'll eventually hire to take it over. ### What it feels like, phase by phase. A founding engagement isn't a transaction — it's a working relationship. Here's how each phase actually plays out for you. #### 01 Spot the opportunity We meet, listen, ask the awkward questions and write back our honest read of the opportunity within a week. If we don't think we're the right partner, we'll tell you. #### 02 Build fast, pivot smarter Working software in front of real users within weeks. Weekly demos, written changelogs and decision logs. Every assumption gets tested against real usage, not slide decks. #### 03 Break technical barriers We handle the scaling questions, the AI evals, the security review and the architecture upgrades — so your team can stay focused on customers and product. #### 04 Win or learn — together Some bets land, some don't. Either way you walk away with shipped software, real user feedback and a senior team that helped you make the call — not a vendor who disappeared at the contract end. ## AI Services deep dive (https://techkis.tech/capabilities/ai-services) We help teams move from AI experiments to production. From LLM agents and RAG copilots to automated workflows and decision systems — built with evals, observability and senior craft so it actually holds up in production. ### What you get - **Automate repetitive work** — Eliminate manual copy-paste across tools — ticket triage, document extraction, lead enrichment, content ops — with pipelines that combine deterministic logic and LLMs where each helps most. - **Accelerate decisions with data** — Turn fragmented signals into clear recommendations. Forecasting, anomaly detection, ranking and prioritization — surfaced where your team already works. - **Personalize at scale** — Tailor experiences for each customer without hiring an army. Recommendations, dynamic copy, smart onboarding and assistive UX that adapts to context. - **Unify fragmented knowledge** — Connect Notion, Slack, Drive, GitHub, Zendesk and your data warehouse into one searchable assistant — with access control and source citations on every answer. - **Stay competitive with AI** — Avoid AI theatre. Get a focused roadmap of the AI opportunities that move metrics, scored on impact vs effort — with the team to execute the winners. ### What we do #### AI-driven process automation Agentic workflows that do real work — read your docs, call your APIs, write back to systems of record. LangGraph or pure-code orchestration, tool-use everywhere, human-in-the-loop gates on anything irreversible. Built with evals before launch and tracing once it's live. - Agent orchestration with LangGraph or Temporal - Tool-use and function calls across your stack - Human-in-the-loop approval queues - Eval suites covering accuracy, refusal and regression Linked service: https://techkis.tech/services/ai-agents-workflows #### AI-powered virtual assistants Internal and customer-facing assistants that actually know your company. Retrieval-augmented generation on your real knowledge base, hybrid semantic + keyword search, per-tenant access control and source citations on every answer — not vibes. - Hybrid search (vector + BM25) with reranking - Document ingestion + chunking pipelines - Per-user / per-tenant access control - Citations and source previews on every answer Linked service: https://techkis.tech/services/rag-knowledge-assistants #### Predictive AI for smarter decisions Where models genuinely beat heuristics, we build them. Forecasting, classification, anomaly detection and ranking — wrapped in pipelines you can retrain, monitored for drift, and integrated into the surface where the decision actually happens. - Build-vs-buy analysis for every model choice - Retraining pipelines with feature stores - Drift monitoring and quality dashboards - Decisions wired into the product, not a notebook Linked service: https://techkis.tech/services/ai-strategy-architecture #### AI-driven data integration & insights Stitch fragmented data sources into a single trustworthy view, then layer AI on top to extract, classify and route automatically. Built on n8n, Temporal or pure code depending on your stack — with retries, idempotency and audit logs baked in. - End-to-end pipelines from trigger to system of record - LLM classification, extraction and decision steps - Retries, idempotency and dead-letter handling - Audit logs and observability for every run Linked service: https://techkis.tech/services/workflow-automation ### Why TechKis for AI - **01 Faster time-to-value** — We ship behind feature flags every week — so AI features reach real users sooner, not after a six-month research project. - **02 Measurable AI outcomes** — Every AI feature ships with evals and a regression suite. You'll know when the model drifts — before customers do. - **03 Stronger customer experiences** — From assisted support to personalized onboarding — AI surfaces that feel like a teammate, not a chatbot. - **04 Operational resilience** — Idempotent pipelines, retries, dead-letter queues and tracing. AI workflows that survive flaky APIs and noisy inputs. - **05 Lower marginal cost per task** — We pick the right model for the job — small + distilled where it works, frontier where it has to. With cost monitoring and budgets per workflow. - **06 Architecture that scales** — We design the platform once, well — model providers, eval harness, observability and access control — so adding the next AI feature is a week, not a quarter. ### A six-step process, from idea to production. Every AI engagement follows the same outline — adapted to your stack and risk tolerance. No black boxes, no surprise pivots. #### 01 Exploration & discovery We map the workflows, data, constraints and stakeholders. Output: an opportunity backlog scored on impact vs effort, and a clear 'don't do this yet' list. #### 02 Strategy & roadmap We pick the first 2–3 projects, decide build-vs-buy per opportunity, and write the AI architecture that the rest of the work hangs off — model providers, evals, observability, access control. #### 03 Model & system design We design the prompts, retrieval, tools, schemas and guardrails — and the eval dataset that defines 'good enough to ship'. Reviewed with you before a line of feature code is written. #### 04 Build & integrate Weekly sprints behind feature flags. We integrate into your real systems — auth, data, APIs — not a sandbox demo. Every step shipped with tests and observability from day one. #### 05 Eval & optimize We run the eval suite on every change, tune cost vs quality vs latency, and pilot with a small user cohort. Nothing scales to all users until evals and pilot metrics agree. #### 06 Operate & evolve Production launch with monitoring, drift detection, fallbacks and a clear on-call runbook. Optional retainer for tuning, new features and adapting to new model releases. ## About TechKis TechKis is a brand-new AI-first software & engineering studio. We started TechKis because most agencies bolt AI on as an afterthought, and most AI consultants don't ship code. We do both — production-ready software with AI built in from the start. ### Mission Software is changing faster than most teams can keep up. AI now reshapes how products are built, supported and operated — but the gap between a working demo and a reliable, production-grade AI feature is bigger than ever. TechKis helps ambitious founders and product teams cross that gap with senior craft, real engineering rigour and zero hype. ### What we believe - **AI-first by default** — We start every engagement asking 'where does AI or automation actually help here?'. If the answer is 'it doesn't', we say so. - **Senior engineers only** — No juniors, no offshore handoff. The engineers who scope your project are the same people writing prompts and code. - **Evals over vibes** — Every AI feature ships with measurable evals and a regression suite. You'll know when the model drifts — before customers do. - **Radical transparency** — Weekly demos, written changelogs, decision logs. Nothing happens behind the curtain. - **One project at a time** — We deliberately take on a small number of engagements so each gets full attention from a senior team. ### The team We're a small, senior team. The founders have been building production software for years, and shipping with LLMs since GPT-3. We work fully remote and overlap with US, EU and APAC working hours. ### Founding-client invitation We've landed our first founding client and are actively booking the next 1–2. To make it worth working with a new studio, we're offering founder-friendly terms on our remaining founding engagements while we build our portfolio — details we'll share on a scoping call. If you're a founder or product leader who wants senior craft at startup velocity, we'd love to talk. ## Technology stack ### AI & LLM - OpenAI - Anthropic - LangChain - LangGraph - pgvector ### Automation - n8n - Temporal - Playwright - Make.com - Lambdas / Cron ### Backend & Data - Java - Spring Boot - Node.js - PostgreSQL - Redis ### Frontend & Cloud - Next.js - React - TypeScript - AWS - Docker ## How we work ### 01. Discovery & AI fit A focused 30-minute call to map the AI / automation opportunities that actually move your business — and the ones that don't. ### 02. Proposal & eval plan Within 48 hours: written scope, milestones, deliverables, a fixed-or-time-boxed estimate and the evaluation criteria for every AI feature. ### 03. Weekly AI sprints Ship AI features behind flags every week — evaluated before they touch production users, with public changelog and decision logs. ### 04. Launch & guardrails Production launch with monitoring, evals, fallbacks and a 30-day support window — or an ongoing retainer for tuning and new features. ## Our founding-client promise ### AI-first by default Every engagement starts with 'where does AI or automation actually help?'. If the answer is 'it doesn't here', we say so. No AI-for-show. ### Senior, AI-fluent engineers We've been building with LLMs since GPT-3. No juniors, no offshore handoff. The engineers who scope your workflow write the prompts and the code. ### Evals over vibes Every AI feature ships with measurable evals and a regression suite. You'll see when the model drifts — not weeks after a customer complains. ### Founding-client offer Our first 2–3 engagements get founder-friendly terms — meaningful incentives we discuss directly on a scoping call. Senior craft at startup-friendly conditions. ## Why work with us - Senior engineers building with LLMs since GPT-3 - AI-first: agents, RAG and automation as default tools - Evals over vibes — every AI workflow measured - Full stack: Java Spring Boot · Next.js · AWS · LangGraph - Architecture-first — we design before we ship - Founder-friendly terms on our first 2–3 engagements ## Frequently asked questions ### Will AI workflows actually work reliably in production? Yes, with the right approach: tight scope, evals before launch, human-in-the-loop on anything irreversible, fallbacks for model failures, and observability so you see drift before customers do. That's the bar we hold ourselves to. ### What does TechKis do? We build end-to-end platforms and implement AI in your workflows. ### How do you price projects? We tailor pricing to scope on a 30-minute discovery call rather than publishing rate cards online. Send us the brief and we'll come back with a written, fixed-or-time-boxed proposal within 48 hours — including a founder-friendly offer for our first 2–3 founding clients. ### Is TechKis a new company? Yes — we're a brand-new studio actively looking for our first founding clients. Our founders are senior engineers who've been building with LLMs since GPT-3, with prior experience at product startups. We're offering founder-friendly terms on our first 2–3 engagements while we build our portfolio — happy to discuss details on a scoping call. ### Do you have client case studies yet? Yes — our first founding client is Puratan Ayurveda, an Ayurvedic e-commerce brand we took from marketplace-only to a fully owned online store. We're actively booking our next 1–2 founding clients. ### How does an engagement start? We hop on a 30-minute scoping call, then send a written proposal with scope, milestones, deliverables, evaluation plan and a fixed or time-boxed estimate within 48 hours. ### Do you work with existing in-house teams? Absolutely. We plug into your Git, Slack, Linear/Jira and CI workflows, pair with your engineers, and try to leave them more capable than we found them — especially on AI tooling and evals. ### What is the typical project timeline? Most engagements run 4–12 weeks. We work in weekly sprints with a public changelog so you always know where things stand. ### Do you offer ongoing support after launch? Yes — flat-rate monthly retainers for maintenance, eval monitoring, model upgrades and incremental feature work once the initial delivery is live. ## Insights (https://techkis.tech/insights) Engineering notes and field reports from the TechKis team. Each post lives at `https://techkis.tech/insights/`. ### A Lighthouse 100 doesn't mean your site is fast - **URL**: https://techkis.tech/insights/lighthouse-score-vs-core-web-vitals - **Published**: 2026-07-21 - **Reading time**: 9 min read - **Author**: The TechKis team - **Tags**: Performance, Core Web Vitals, SEO, Web Platform Lighthouse is a lab simulation on a throttled mid-range phone. Google ranks on field CrUX p75 for LCP, INP and CLS. Here's why the two disagree, and what to measure instead. Somebody screenshots a green 100 in Lighthouse and puts it in a deck. Two months later, Search Console says the site's LCP is "Needs improvement" on mobile for a big chunk of its URLs. Both things are true at once, and the reason they're both true is the single most misunderstood thing about web performance measurement. Lighthouse is a lab test. Google's page-experience signal is a field measurement. They are not the same number, they don't use the same inputs, and one of the three Core Web Vitals **cannot be measured in a lab at all**. A perfect Lighthouse score tells you your site is fast under one specific simulated condition, once. It tells you very little about whether your actual users are having a fast time. ## What Lighthouse actually does Run Lighthouse and you get a mobile audit under a fixed, deliberately pessimistic set of conditions: - **Device emulation** of a mid-range Android phone — Lighthouse 12 emulates a Moto G Power, having used the older Moto G4 for years. - **CPU throttling**, typically a 4× slowdown applied to your machine's actual CPU. - **Network throttling** to a simulated slow 4G: roughly 1.6 Mbps down, 750 Kbps up, 150ms RTT. - **A single cold run** with an empty cache, no service worker warm, no HTTP cache, no browser extensions, no third-party consent banner having already been dismissed. That last point matters more than people expect. Lighthouse measures the worst realistic first visit. Your real traffic is a mixture of first visits, repeat visits with warm caches, users on fibre with an M-series MacBook, and users on a five-year-old budget Android on congested mobile data. Lighthouse models exactly one point in that distribution and then reports it as a score out of 100. ![Lighthouse measures one simulated cold visit; field data is the whole distribution of real sessions across devices, networks and cache states.](figure:lab-vs-field) It's also noisier than the three-significant-figure presentation suggests. Run the same page five times on the same machine and scores commonly move by 3–8 points, more if there's third-party JavaScript involved, more again if you're running it on a laptop that's also running your dev server, Slack and forty Chrome tabs. Simulated throttling estimates timings from an unthrottled trace rather than measuring them directly, which adds its own modelling error. A change from 92 to 96 is usually noise. A change from 92 to 61 is a signal. ## The score is a weighted average, and the weights are opinionated The Lighthouse performance score isn't a measurement — it's a weighted blend of five metrics, each scored against a log-normal curve derived from real-world HTTP Archive data. In Lighthouse 10 and later, the weights are: | Metric | Weight | What it captures | | --- | --- | --- | | Total Blocking Time (TBT) | 30% | Main-thread blocking between FCP and TTI | | Largest Contentful Paint (LCP) | 25% | When the main content finishes rendering | | Cumulative Layout Shift (CLS) | 25% | Visual stability during load | | Speed Index (SI) | 10% | How quickly content is visually populated | | First Contentful Paint (FCP) | 10% | First pixel of content | ![Lighthouse's performance score is 30% TBT, 25% LCP, 25% CLS, 10% Speed Index and 10% FCP — a weighted blend, not a measurement.](figure:lighthouse-score-weights) Two things fall out of that table. First, **TBT is the largest single lever**, at 30%. If you want to move a Lighthouse score cheaply, you cut and defer JavaScript. That's usually good for users too, so no complaints — but be aware you're optimising a proxy. Second, and more importantly: **Interaction to Next Paint is not in the table at all.** INP replaced FID as a Core Web Vital in March 2024. It measures the latency of real interactions — taps, clicks, key presses — from input to the next frame painted. Lighthouse can't measure it, because Lighthouse doesn't interact with your page. Nobody clicks anything. So Lighthouse substitutes TBT as a proxy for interaction responsiveness. TBT is a reasonable proxy for *load-time* responsiveness. It is a poor proxy for what INP actually catches: the expensive React re-render when someone opens a filter panel, the 400ms handler on your "add to cart" button, the modal that takes half a second to appear because it hydrates on open. None of that happens during a Lighthouse run. You can score 100 and still ship an INP of 600ms. ## What Google actually uses The page-experience signal in Google Search uses **field data from the Chrome User Experience Report (CrUX)**, not your local Lighthouse run. Specifically: - Real Chrome users, opted into usage statistics, on public URLs with enough traffic to meet CrUX's reporting threshold. - The **75th percentile** of each metric — so the experience of the slowest quarter of your visits, not the average. - A **rolling 28-day window**, which means changes you ship today show up in the data gradually over the following month. The thresholds are fixed and public: | Metric | Good | Needs improvement | Poor | | --- | --- | --- | --- | | LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s | | INP | ≤ 200ms | 200ms – 500ms | > 500ms | | CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | A URL passes Core Web Vitals when all three are in the "good" band at p75. ![Core Web Vitals thresholds at the 75th percentile: LCP 2.5s/4.0s, INP 200ms/500ms, CLS 0.1/0.25.](figure:cwv-thresholds) The p75 detail is the one that catches teams out. Optimising for your median user does nothing here. If 70% of your traffic is on decent hardware and 30% is on cheap Androids over patchy mobile data, p75 sits squarely inside that second group. Your dashboards showing a healthy median LCP of 1.8s can coexist happily with a failing p75 of 4.3s. ## How to read the data you're actually graded on Three sources, in rough order of how quickly you'll need them. **Search Console → Core Web Vitals report.** This is CrUX data grouped into URL patterns, split by mobile and desktop. It's the closest thing to seeing what Google sees. It's also slow — 28-day window, plus reporting lag — so treat it as a monthly scorecard, not a feedback loop. **The CrUX dashboard / API.** Origin-level and URL-level histograms, month by month. Useful for the "did that release actually help" question and for comparing yourself against competitors, since CrUX covers any sufficiently trafficked public origin, not just yours. **Your own RUM.** This is the one most teams skip and the one that actually lets you fix things. The `web-vitals` npm package is small, maintained by the Chrome team, and reports the same metric definitions Google uses: ```js import { onLCP, onINP, onCLS } from 'web-vitals'; function send({ name, value, rating, id, attribution }) { navigator.sendBeacon('/rum', JSON.stringify({ name, value, rating, id, path: location.pathname, element: attribution?.element, // what caused it conn: navigator.connection?.effectiveType, })); } onLCP(send, { reportAllChanges: false }); onINP(send); onCLS(send); ``` Two details worth keeping. Use `sendBeacon` (or `fetch` with `keepalive`) so reports survive the page unloading — INP and CLS finalise late, often at page hide. And pass the attribution build's `attribution` object through: knowing your LCP is 3.9s is mildly useful, knowing it's the hero image on the category template on slow connections is actionable. Once you have your own RUM, segment it. By route, by device class, by connection type, by whether the session was a first visit. That segmentation is what turns "our LCP is bad" into "our LCP is bad on the product listing page for users arriving cold from Instagram." ## When 100 is worth chasing, and when it's vanity Chasing the score is worth it when: - **The page is genuinely new** and you have no field data yet. Lighthouse is the only signal available, so use it. - **You're regression-testing in CI.** A score that drops 20 points on a PR is a good tripwire, even though the absolute number means little. - **The audit list is telling you something specific** — render-blocking resources, unsized images, oversized bundles. The recommendations are frequently better than the score. - **You're on a marketing or content site** where cold first visits genuinely are most of the traffic. Here the lab conditions are a fair model of reality. It's vanity when: - **The app is authenticated and interaction-heavy.** A logged-in dashboard's problem is INP, and Lighthouse has nothing to say about INP. - **You're grinding 94 to 100.** Those last points are curve-fitting against a log-normal scoring function. Users can't feel them; p75 won't move. - **Field data disagrees with you.** If CrUX says LCP p75 is 3.6s and Lighthouse says 98, the field data is right and your lab conditions are wrong. Go find out which segment of real traffic you've been ignoring. - **You optimised for the audit rather than the user.** Lazy-loading the LCP image improves nothing and often makes LCP worse; it just stops an audit complaining. The one client site we've shipped so far — Puratan Ayurveda, an Angular storefront on a Laravel back end — is a good example of the shape of this problem rather than a benchmark: a product page's lab score and its real p75 answer different questions, because most of that traffic arrives on mid-range Android over mobile data, and the interactions that matter (variant selection, cart) happen long after Lighthouse has stopped watching. ## What we'd do Our default order of operations, and we'd argue it in any project kickoff: 1. **Instrument field RUM on day one.** `web-vitals` with attribution, beaconed to whatever you already use for analytics. Before any optimisation work. You cannot prioritise what you can't segment. 2. **Set the KPI as CrUX p75 passing all three**, per template, on mobile. That's the number that's actually graded. 3. **Put Lighthouse in CI as a tripwire**, with a budget rather than a target — fail the build on a meaningful regression, not on missing 100. 4. **Use Lighthouse's diagnostics, not its score**, when you're debugging a specific field regression you've already found in RUM. 5. **Measure INP separately and deliberately**, because nothing in the lab will surface it. Long tasks in interaction handlers, hydration on interaction, and heavy re-renders are where it lives. ![Field RUM tells you what's broken and for whom; Lighthouse tells you why; CI guards the fix; CrUX p75 confirms it landed.](figure:perf-measurement-loop) ## TL;DR Lighthouse simulates one cold visit on a throttled mid-range phone and blends five metrics into a weighted score — 30% TBT, 25% LCP, 25% CLS, 10% SI, 10% FCP. Google grades you on something else entirely: real Chrome users' 75th-percentile LCP, INP and CLS over a rolling 28 days, from CrUX. The gap is structural, not a bug. INP, the Core Web Vital that replaced FID in March 2024, cannot be measured without interaction, so Lighthouse approximates it with TBT and misses everything that happens after load. Instrument field RUM first, make CrUX p75 the KPI, and keep Lighthouse where it earns its keep — as a regression tripwire in CI and a diagnostic tool when you already know what's broken. Never as the number you report. If your Search Console report and your Lighthouse score are telling you different stories, [we'd be happy to dig into it](/#contact). --- ### Fixing Core Web Vitals in the Next.js App Router - **URL**: https://techkis.tech/insights/fixing-core-web-vitals-nextjs-app-router - **Published**: 2026-07-16 - **Reading time**: 10 min read - **Author**: The TechKis team - **Tags**: Performance, Core Web Vitals, Next.js, Frontend, Web Platform A hands-on guide to fixing LCP, INP and CLS in the Next.js App Router — client boundaries, next/image, next/font, Suspense streaming and a Lighthouse CI budget. Most Core Web Vitals advice is written as a checklist, which is why it doesn't work. You apply eleven generic tips, the score moves two points, and nobody can say which tip did it. The App Router makes this worse in one specific way: the framework gives you enough server rendering by default that teams assume performance is handled, then quietly undo it with a `"use client"` at the top of the layout. This post is the opposite of a checklist. It goes metric by metric — LCP, INP, CLS — and for each one names the mechanism, the App Router-specific thing that breaks it, and the code that fixes it. The thresholds worth memorising: **LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1**, measured at the **75th percentile over a 28-day window** in field data. INP replaced FID as a Core Web Vital in March 2024, which matters more than it sounds — FID was easy to pass by accident, and INP is not. ## LCP: it's almost always the critical path, not the image Largest Contentful Paint measures when the biggest above-the-fold element finishes rendering. Step one is not optimisation, it's identification: open DevTools, run a Performance trace, and look at the LCP marker — it tells you the exact element. Teams routinely spend a week compressing a hero image that isn't the LCP element at all, because the real one is an `

` blocked on a web font. Once you know the element, the question is what's on its critical path. There are usually only four candidates: the HTML arriving late, the image discovered late, the font blocking the text, or JavaScript standing between the server response and first paint. ![The LCP critical path from request to paint, showing where the server response, image discovery, font loading and hydration each add delay.](figure:lcp-critical-path) If the LCP element is an image, `next/image` with `priority` is the single highest-leverage change. It sets `fetchpriority="high"`, opts the image out of lazy loading, and emits a preload hint so the browser starts fetching before it parses that far down the DOM. ```tsx import Image from "next/image"; export default function Hero() { return ( Product dashboard ); } ``` `sizes` is the part people skip, and skipping it costs more than the `priority` gains. Without an accurate `sizes`, the browser assumes the image occupies the full viewport width and picks the largest source in the srcset — so a phone downloads a 1440px asset to render it at 390px. Get `sizes` wrong and you have made the LCP worse while feeling productive. Fonts are the other half. Use `next/font` — it self-hosts the font files at build time, so there's no third-party connection to negotiate before text can paint, and it applies `font-display: swap` by default so text renders immediately in a fallback rather than sitting invisible (FOIT) while the webfont downloads. ```ts import { Inter } from "next/font/google"; export const inter = Inter({ subsets: ["latin"], display: "swap", preload: true, fallback: ["system-ui", "arial"], }); ``` Then JavaScript. This is the App Router-specific trap. A client component boundary high in the tree means the server still streams HTML, but that HTML is inert until React hydrates it — and if your hero lives inside a provider chain that's marked `"use client"`, the whole subtree ships as a client bundle and its paint waits behind download, parse and hydrate. The framework didn't fail you; the boundary placement did. Worse is `dynamic(..., { ssr: false })` on anything above the fold. That's an explicit instruction to render nothing on the server, ship the JS, execute it, and only then paint. For a hero, it converts an LCP that could have been server-rendered in the first byte into one gated on the entire client runtime. It's a legitimate escape hatch for genuinely browser-only widgets far down the page. It is never right for hero content. Suspense is the tool for the common case where one slow query holds up an otherwise fast page. Wrap the slow region, give it a real placeholder, and the shell — including your LCP element — streams and paints immediately. ```tsx import { Suspense } from "react"; export default async function Page({ params, }: { params: Promise<{ slug: string }>; }) { const { slug } = await params; return ( <> }> ); } ``` Note `await params` — in Next 15 the dynamic APIs are async, and awaiting them at the top of a server component is the correct shape. ## INP: you don't have an interaction problem, you have a long-task problem Interaction to Next Paint measures the full latency from a user's input to the next frame the browser paints. When it's bad, the cause is nearly always the same: the main thread is busy with a long task, so your handler can't start, or it starts and can't finish before the next frame. There are four reliable sources. Oversized client bundles that take hundreds of milliseconds to parse and execute. Hydration of components that never needed to be client components. Event handlers doing real work synchronously. And third-party scripts — analytics, chat widgets, tag managers — executing whenever they feel like it. The structural fix is to push `"use client"` down the tree. Interactivity is usually a leaf: one button, one input, one dropdown. If the boundary sits at the page or layout, every descendant becomes part of the client bundle even though nine tenths of it is static markup. ```tsx // app/products/page.tsx — server component, no client JS import { AddToCart } from "./add-to-cart"; export default async function Page() { const products = await getProducts(); return products.map((p) => (

{p.name}

{/* only this leaf is "use client" */}
)); } ``` ![Moving the client boundary from the page root down to individual interactive leaves, shrinking the hydrated subtree.](figure:client-boundary-push) This is the change we reach for first on any App Router codebase with a bad INP, because it usually removes more JavaScript than every other optimisation combined. Third-party scripts get `next/script` with a deliberate strategy. `afterInteractive` runs the script after the page becomes interactive — correct for things you actually need early, like a consent manager or analytics you care about. `lazyOnload` waits until the browser is idle — correct for chat widgets, heatmaps, and anything marketing added without asking. ```tsx import Script from "next/script";