Best practices

Best practices are engineering decisions made at the start of a project — from the framework we choose to the way we load a single font file.

Part of our published engineering standards: Performance, Accessibility, Security, Best Practices, and SEO.

Zero JavaScript by default

A TechTailors site ships no client-side JavaScript unless a specific feature explicitly requires it. We don't use React, Vue, or jQuery — just HTML and CSS rendered at build time.Your visitor’s phone doesn’t have to download, parse, and run hundreds of KB of framework code before they can read your page or click a button. The page is interactive the instant the HTML arrives. On a weak signal at the back of a coffee shop, this is the difference between “site loads” and “site looks broken.”Your visitor’s phone doesn’t have to download, parse, and run hundreds of KB of framework code before they can read your page or click a button. The page is interactive the instant the HTML arrives. On a weak signal at the back of a coffee shop, this is the difference between “site loads” and “site looks broken.”

Why this matters for your site Show less

Every kilobyte of JavaScript a browser downloads must be parsed, compiled, and executed before the page is fully interactive. Frameworks like React routinely add 100–300 KB of overhead before a single line of your business logic runs. Our approach eliminates that cost entirely: Astro pre-renders every page to static HTML at build time, so the browser's work is done the moment the HTML arrives.

The result is zero Total Blocking Time — the main thread is never locked, input responsiveness is instant, and there's nothing to hydrate. Interactive features that genuinely need JavaScript (like our theme toggle or sparkle animations) are authored as isolated vanilla JS with no framework overhead.

CSS architecture

We write every line of CSS by hand using a hybrid global + component-scoped architecture — no utility-class frameworks, no CSS-in-JS runtime, no generated class names.Your visitors download a fraction of the CSS that framework-based sites ship — faster paint, faster interaction, lower bounce rate. And when something needs to change, it changes immediately. We don’t hunt through generated class names or utility-class soup to find what styles which element.Your visitors download a fraction of the CSS that framework-based sites ship — faster paint, faster interaction, lower bounce rate. And when something needs to change, it changes immediately. We don’t hunt through generated class names or utility-class soup to find what styles which element.

How our CSS is structured Show less

Global design system partials handle shared concerns: tokens (colours, spacing, typography), fonts, reset, layout grid, prose typography, button variants, card patterns, CTA blocks, and utilities. Each partial owns one concern and is small enough to audit at a glance — the largest is around 130 lines.

Component-scoped styles live alongside their markup in Astro's <style> blocks, co-locating the CSS with the HTML it styles. Page-specific styles stay in the page file itself. Dark-mode overrides live immediately below their corresponding light-mode rules — never in a separate file. This follows Josh Comeau'sA web development educator known for deep-dives into CSS, animations, and component architecture single-source-of-styles principle: when you change a component, you never have to hunt for its styles elsewhere.

The result: zero dead CSS, no specificity wars, no runtime cost, and total CSS shipped to the browser is a fraction of what framework-based sites produce.

Progressive enhancement

Every feature on a TechTailors site works without JavaScript first, then is enhanced with interactivity when the browser supports it.If a visitor has JavaScript disabled — corporate firewall, privacy extension, ad blocker over-blocking, intermittent connection — your site still works. They can read, click links, fill forms, submit contact requests. No broken UI, no blank screens, no lost lead.If a visitor has JavaScript disabled — corporate firewall, privacy extension, ad blocker over-blocking, intermittent connection — your site still works. They can read, click links, fill forms, submit contact requests. No broken UI, no blank screens, no lost lead.

Examples of progressive enhancement Show less

Our scroll-reveal animations start with all content visible by default. The animation system only activates when both JavaScript and IntersectionObserver are available — on older browsers, content simply appears without animation. Nothing is hidden behind a transition that might never fire.

FAQ accordions use native <details>/<summary> elements with 97%+ browser support — they expand and collapse without a single line of JavaScript. Our theme toggle persists preferences to a cookie, but the site renders correctly with any theme if JavaScript is disabled. View transitions provide smooth page navigation in supported browsers while falling back to standard full-page loads everywhere else.

Modern image delivery

Images are typically the heaviest assets on any web page. We optimise every image through Cloudinary's automatic format negotiation — serving the smallest possible file to every browser.Every image is automatically resized and re-formatted per device. An iPhone gets AVIF, a desktop gets a sharper WebP, a customer on a weak signal gets a smaller version that still loads. No 5MB-photo-stuck-loading moments, no wasted bandwidth, no thinking about it.Every image is automatically resized and re-formatted per device. An iPhone gets AVIF, a desktop gets a sharper WebP, a customer on a weak signal gets a smaller version that still loads. No 5MB-photo-stuck-loading moments, no wasted bandwidth, no thinking about it.

How image optimisation works Show less

When a visitor loads your page, Cloudinary detects their browser's capabilities and serves the optimal format: AVIF for Chrome and Firefox (up to 50% smaller than WebP), HEIC for Safari, and WebP as a universal fallback. Quality is automatically tuned per-image to balance visual fidelity with file size.

Every image below the fold carries loading="lazy" and decoding="async" — the browser only downloads them when they approach the viewport. For hero content, we use a deferred hero video — the hero paints a solid colour first and the video mounts only after the page’s main content has rendered, so it never delays first paint. Combined with Cloudflare's 30-day immutable cache, returning visitors see images instantly from local cache.

Optimised font loading

We conditionally preload only the fonts each page actually uses — not the entire font family on every request.Text never jumps around as fonts arrive — your layout is stable from first paint. That subtle absence of layout shift is the difference between a site that feels “polished” and one that feels “janky” without the visitor being able to name why.Text never jumps around as fonts arrive — your layout is stable from first paint. That subtle absence of layout shift is the difference between a site that feels “polished” and one that feels “janky” without the visitor being able to name why.

How conditional font loading works Show less

The homepage preloads Sriracha (the display font used in the hero) while all other pages preload Archia 600 (the heading weight). This saves approximately 5 KB of bandwidth per non-homepage page load — bandwidth that would otherwise be wasted preloading a font the page never references.

We also use metric-adjusted fallback fonts that match the dimensions of our custom fonts as closely as possible. This prevents CLSCumulative Layout Shift — a Core Web Vital measuring how much content visually moves during loading caused by text reflowing when the web font arrives, keeping your layout stable from the first paint.

Below-the-fold optimisation

Sections below the initial viewport use content-visibility: auto to defer rendering until they're about to scroll into view — dramatically reducing initial page load cost.Your site renders only the visible content first, skipping the rest until users scroll toward it. On long pages with many sections, this can cut initial paint cost by 60% or more — first-screen content appears faster regardless of how much content sits below.Your site renders only the visible content first, skipping the rest until users scroll toward it. On long pages with many sections, this can cut initial paint cost by 60% or more — first-screen content appears faster regardless of how much content sits below.

How content-visibility works Show less

When the browser encounters a section with content-visibility: auto, it skips the layout and paint work for that section entirely — treating it as if it doesn't exist until the user scrolls near it. Each deferred section includes a contain-intrinsic-size estimate so the scrollbar length remains accurate.

We combine this with scroll-reveal animations using a double requestAnimationFrame timing fix: the browser gets two full paint cycles to render the section before the opacity transition begins. This solves a race condition where content-visibility and CSS transitions would otherwise conflict — the section would become visible but the animation would be swallowed.

Engineering done right

Every TechTailors project — from a single landing page to a full-scale platform — is built this way.

See What We Can Build for You