svg representing the bruno francisco logo
Unavailable for work

Fast frontend, from rough idea to real product.

Ten years shipping high traffic features for brands like WebMD, Foreo, and Car and Classic - shipping the kind of frontend that holds up under real traffic.

10
Years of
experience
+15
Projects
Completed
+6
Worldwide
clients
WebMD Logo
Foreo Logo
Car & Classic Logo
Lelo Logo
Lumiform Logo
Les Anciennes Logo
WebMD Logo
Foreo Logo
Car & Classic Logo
Lelo Logo
Lumiform Logo
Les Anciennes Logo
WebMD Logo
Foreo Logo
Car & Classic Logo
Lelo Logo
Lumiform Logo
Les Anciennes Logo
WebMD Logo
Foreo Logo
Car & Classic Logo
Lelo Logo
Lumiform Logo
Les Anciennes Logo

What shipped. What it changed.

Numbers from production systems serving millions of users.

WebMD · LCP Largest Contentful Paint

3.2s 1.5s

Largest Contentful Paint improvement for millions of daily users

Cutting LCP in half

for 30M monthly visitors

WebMD serves some of the most health critical pages on the web. When a user searches a symptom, every second of perceived load matter. We identified and resolved a cascade of rendering bottlenecks that cut their Largest Contentful Paint from 3.2s down to 1.5s.

Background

WebMD article pages are render heavy. Above-the-fold content includes a hero image, structured medical metadata, and dynamically personalised ad slots. LCP had crept past 3s on mid-range Android devices, pushing them out of Google's "Good" threshold and affecting organic search placement.

Approach

The work started with real-user data, not lab tests. That immediately surfaced something synthetic tooling had missed: desktop was fine, mobile was failing. From there, we worked through each phase - network, render, JS execution - as its own problem rather than treating LCP as a single thing to fix.

What we changed

  1. Images were too big and loaded too late

    Hero images were massive JPEGs with no size variants for mobile. We switched to AVIF, added responsive sizes, and told the browser to treat the hero as top priority - so it starts loading the moment the page is requested.

  2. Third-party scripts were blocking the page

    Four external scripts loaded upfront and stalled everything behind them. We deferred the ones that could wait and gave the browser an early heads-up on the ones that couldn't.

  3. Fonts made text invisible while loading

    Custom fonts were set to hide text until fully loaded. We changed the strategy so the page renders immediately with a system font, then swaps in cleanly once the custom font is ready.

  4. The server was just slow to respond

    Mobile users waited over 600ms before a single byte arrived. We moved the HTML to the edge so it's served from a location close to the user, cutting that wait to under 200ms.

  5. Ad slots were pushing content around

    Ad containers had no reserved space, so the page kept shifting as ads loaded in. We gave every slot a fixed size upfront so the layout is stable from the first paint.

WebMD Logo Image

"Once LCP hit the 'Good' threshold, mobile users stopped dropping off. More of them were actually finishing articles."

Product analytics, WebMD engineering

WebMD · FCP First Contentful Paint

0.8s .3s

First Contentful Paint - users see content 62% faster

Something on screen in under a second

for 50M monthly visitors

First Contentful Paint is simply how long until a user sees anything at all. On WebMD it was taking 0.8s - nearly a full second of blank screen before a single word appeared. We hunted down everything causing that delay and got it to 0.3s.

Background

People come to WebMD when they're worried about something. A blank screen is the last thing they should see. On slower phones the page was loading a pile of stylesheets, fonts, and scripts before showing anything - and users were leaving before a single word appeared.

Approach

We listed out everything the browser had to do before it could show anything, then asked - does this actually need to happen right now? Most of it didn't. We moved whatever we could out of the way and let the page get something on screen first.

What we changed

  1. CSS was holding the page hostage

    The browser won't show anything until it's finished downloading and reading every stylesheet. We pulled out only the styles needed for the top of the page, put them directly in the HTML, and pushed everything else to load later.

  2. Scripts were running before anything was visible

    A handful of scripts were running at the top of the page, making the browser wait for them before showing anything. We told them to wait their turn - run after the page has painted, not before.

  3. Fonts were showing up late to the party

    The browser wasn't finding out about the custom fonts until it was already part way through loading the page. We gave it an early heads-up so it could start fetching them straight away, in the background.

  4. External services needed a cold introduction every time

    Every time the page loaded something from a third-party - an ad network, an analytics tool - the browser had to introduce itself from scratch. We made those introductions happen earlier, in the background, so by the time they were needed the connection was already open. Thank you Partytown

WebMD Logo Image

"Users were leaving before they'd seen a single word. Once the page started showing up faster, that stopped happening."

Frontend engineering, WebMD

Lumiform · Fundraising

$0M

Series A raised while scaling the product - helped build the fullstack that got them there

Foreo · CLS Cumulative Layout Shift

.18 .18

Cumulative Layout Shift eliminated - zero visual instability

A page that never jumps, never shifts

for millions of shoppers worldwide

Cumulative Layout Shift measures how much a page moves around while it's loading. Foreo's score was 0.18 - well into the "needs improvement" range. Buttons would appear, then get pushed down. Images would pop in and nudge text out of the way. We got it to zero.

Background

Foreo sells premium skincare devices to customers who expect a polished experience. A page that lurches and rearranges itself while loading sends exactly the wrong signal - and on product pages, where people are deciding whether to spend $200, a jumpy layout erodes trust before they've read a single word.

Approach

We recorded the page loading at different connection speeds and watched every shift frame by frame. For each one we asked: why did this move? The answer was almost always the same - the browser didn't know how big something was going to be until it arrived. We fixed that.

What we changed

  1. Images had no reserved space

    Every image on the page was pushing content down when it loaded because the browser had no idea how tall it would be. We added explicit width and height attributes to every image so the browser could reserve the right amount of space before the image even started downloading.

  2. Ads and embeds were collapsing and expanding

    Third-party ad slots and embedded content were rendering at zero height and then snapping to their full size once loaded, shoving everything below them down the page. We gave each slot a fixed minimum height so the layout stayed stable regardless of what loaded into it.

  3. Fonts were swapping in late

    The page was rendering with a system font first, then swapping to the brand font once it had downloaded - and the two fonts were different enough in size to cause a visible shift. We preloaded the fonts and used size-adjust to make the fallback match closely enough that the swap became invisible.

  4. Dynamic content was injecting itself into the flow

    Personalisation banners and cookie notices were being injected into the middle of the page after it had already painted, pushing everything below them down. We moved them to fixed-position overlays so they appear on top of the content instead of inside it.

Foreo Logo

"The page used to feel unfinished while it loaded. Now it just appears - everything in the right place from the first frame."

Product & eCommerce, Foreo

Car and Classic · Team

0+

Built alongside the team a design system 15+ engineers ship with daily

Active

breadcrumb

pagination

...

coverage

94%

components

48

tokens

120

Fast by design. Not by accident.

Search experience for Europe's largest classic car market.

Make

Color

Price

Ferrari Monza BMW Porsche Ford

Millions of users.

Ten years and counting.

Building the foundation for what followed.

Took on client work across e-commerce and marketing sites. Learned to ship fast, communicate clearly, and own the full stack from design handoff to deployment.

HTML, CSS, JavaScript, PHP

Leading a global frontend team from scratch.

Led the frontend team from 1 to 3 engineers across a product sold in dozens of markets worldwide. Introduced component-driven architecture and established the team's first shared standards.

VueJS, Docker, PostCSS, Tailwind

Shipping fast through a high-growth phase.

Helped build complex, interactive workflows handling real business logic at speed. Shipped consistently through a high-growth phase that culminated in a $13.1M Series A investment round.

VueJS, Tailwind, Bulma

Performance at scale for millions of users.

Worked closely with the WebMD team to rebuild their rendering pipeline. The result: layout shift gone entirely, perceived load times down by more than half.

React, VueJS, Tailwind, Docker

Filtering infrastructure for millions of searches.

Worked with the Car and Classic team to build the search and filtering system powering Europe's largest classic car marketplace. Together we shaped a design system and component kit that 15+ engineers now rely on daily.

VueJS, TypeScript, Tailwind, Docker

Still shipping. Open to what comes next.

Open to the right opportunity - a product with real users, a team that cares about craft, and problems worth solving at scale.

Get in touch

The stack behind ten years of shipped products.

Reliable tools. Extensible by design.

Ideas, stories, and practical knowledge.

Articles written to share experience and lessons.

Read more

Navigation

Home
About
Blog