How We Hit ~100 Mobile PageSpeed Insights

TL;DR

• A high PageSpeed score is a useful stress test, not a lifetime guarantee. On 21 August 2026, africanvanilla.co.za scored about 100 across Performance, Accessibility, Best Practices and SEO on mobile, with the page feeling roughly one second to first paint.
• What actually helped: hosting fonts ourselves, cutting heavy add-ons, delaying chat, compressing images properly, and fixing contrast so text is readable.
• Do the heavy fixes first. Atmosphere and “nice to have” widgets come last.
• Fancy agent tooling is useful for machines reading your site. It is not a PageSpeed category, and we do not sell it as one.
• Want the same checklist on your site? Start with a free IT / website audit.

Lab scores are not the same as every customer on every network. They are a useful stress test: if mobile PageSpeed Insights is dragging, something on the first load is usually wrong. You can open our mobile PageSpeed Insights report for that run.

Scores move when networks, ads or chat widgets change. What follows is the checklist we actually used on this marketing site: the same levers we apply when we deliver website building and optimisation for Johannesburg and wider South African SMEs.

Why should you host fonts yourself?

Hosting fonts on your own site removes an extra trip to Google (or another font service) before the page can look finished.

Many sites load fonts from a third-party service. That adds another stop on the way to a usable page. We host the weights we actually use and preload only the ones that appear in the first screen. Extra weights for the footer can wait.

Rule of thumb for Jo’burg marketing sites: two font families max, three weights max on the home hero. If a weight is not in the first view, do not rush it.

What third-party extras should you cut from every page?

Cut shopping carts, tag managers, live chat and marketing pixels that cost more speed than they earn on a lead-gen homepage.

We removed a full cart runtime from the critical path. Shop and offers still work as catalogues that drive contact, without loading ecommerce software for every visitor.

If you need analytics, load it after the page is usable, not in the first rush of scripts. Visitors should see your offer before your dashboards start counting them.

When should chat and “nice to have” widgets appear?

Chat should wait until the visitor interacts, or until the page has finished loading and the browser is idle, so the first screen is not competing with a chat bubble.

Chat is useful. Chat on first paint is not. If someone arrives on a deep link that needs chat open immediately, you can still force it then.

Same idea for decorative motion: if it is not the product, it should not block the product.

How do you keep brand motion without slowing the first screen?

Load decorative effects after the page is ready, only where they earn their keep, and skip them entirely when someone prefers reduced motion.

Our navy/cyan particle field is part of the brand. It is also extra work for the browser. We keep the atmosphere without paying for it on first paint:

• Only mount it where it matters (homepage hero and dark bands)
• Start it after the page loads, when the browser is idle
• Respect “reduce motion” by skipping the animation entirely
• Pause it when it is off-screen or the tab is hidden

That is how you get brand presence and a clean lab run. If every card in the first fold needs particles, push back, or accept the score hit.

What image setup keeps the page fast and stable?

Use modern compressed images, set width and height so the layout does not jump, and pick one main hero image instead of a collage fighting for attention.

We convert images at build time (AVIF works well for a static marketing site). Pair that with:

• Explicit sizes so content does not leap around as images arrive
• One dominant first-screen image
• Social share images in formats scrapers prefer (JPEG or WebP)

A stable layout is mostly discipline: reserved space, no late banners shoved above the content, and fonts that do not shove the hero around after load.

Why does readable contrast still matter next to speed?

Low-contrast text fails real people and pulls down Accessibility. Fast and illegible is still a bad site.

We fixed homepage contrast and in-text link visibility on purpose. Speed scores without readable copy do not help a lead who cannot see the button.

What do we not claim about a 100 mobile score?

We do not claim agent tooling is a PageSpeed subscore, that every suburb will see a one-second load on a bad network, or that PageSpeed alone is SEO.

• Tools that help AI agents understand a page are useful. They are not a scored PageSpeed category. Do not sell them as if they were.
• A 100 mobile lab score does not mean every suburb in Gauteng will see a one-second load on a weak connection during load-shedding recovery. Field data in Search Console matters when you have enough traffic.
• SEO is more than speed. Crawl hygiene, clear intent pages and honest schema still matter. See our SEO guide for Johannesburg businesses.

Practical order of work for an SME site

1. Kill or delay the heaviest add-ons on the homepage
2. Host and preload only the fonts you need
3. Fix the main first-screen element (usually hero text or one image)
4. Stop the layout from jumping
5. Fix contrast and tap targets
6. Only then add atmosphere (particles, motion) behind the first load

What should you do next?

Book a free audit if you want this checklist applied to your marketing site, or folded into month-to-month hosting and optimisation.

Start with a free IT / website audit or browse our services. We build for leads and real-world speed, not for a screenshot that dies the day someone drops another widget on the homepage.