More motion usually means a heavier page, and a heavier page usually means slower load times and weaker search performance. So how do you add an animated hero and get a near-perfect score?
Øyvind Sørøy, CTO at Ahodzil, found the answer in SVG animation. He switched to SVG built in SVGator, and his site now runs an animated hero while scoring 99 for performance and 100 for SEO.
Table of contents
1. The challenge: Motion that doesn't slow the site down
2. The solution: How SVGator fits his workflow
3. The results: A fast, search-friendly page with motion
4. The payoff shows up in the numbers
5. SVG compared to GIF, MP4, and Lottie
The challenge: Motion that doesn’t slow the site down
Øyvind has been animating for the web since the Flash era, so this was never a question of animation being hard. The problem was the format. His view on Flash’s legacy format is direct:
That format was the wrong fit for a fast, search-friendly site on a few counts:
- It is a proprietary, binary format that was never built for the web
- Search engines struggle to read and index it, which works against SEO
- It locks animation away in a format the rest of the web has moved past
He wanted to stay in vector graphics, and SVG is the natural answer: web-native, lightweight, and easy for search engines to read.
He works across a designer-developer stack of VSCode, Compiler Explorer, Affinity Designer, Blender, and SVGator, so he wanted his motion work to slot in the same way the rest of it does: natively on the web, with no runtime layer and no need to relearn how he works.
The solution: How SVGator fits his workflow
SVGator gave Øyvind a way to animate SVG that felt familiar from day one. The thing that mattered most to him was that he did not have to start over:
There was no new mental model to learn and no workflow to rebuild. He could keep designing the way he always had, and simply export to a better format. What made the switch work for him:
- A familiar, visual workflow, so coming from Flash meant almost no learning curve
- Native SVG export, the web-friendly format he wanted in the first place
- A single animated file with no separate player or runtime to load
- Clean output that stays light and easy for search engines to crawl
He uses SVGator in bursts rather than on a fixed schedule, usually when a page needs updating. The animation slots into the update, ships as part of the page, and does not drag anything down with it.
The results: A fast, search-friendly page with motion
The payoff shows up in the numbers
On a live site with SVGs, Øyvind’s Lighthouse report came back almost perfect.
| Metric | Results |
| Performance | 99 |
| SEO | 100 |
| Accessibility | 100 |
| Best Practices | 100 |
| Largest Contentful Paint | 0.8 s |
| Total Blocking Time | 0 ms |
| Cumulative Layout Shift | 0 |
The scores line up with the way an SVG behaves on a page. Because it loads as part of the page rather than as a separate file, the hero shows up fast, and the layout does not jump around while it settles.
The biggest win was one Øyvind did not expect: SEO. SVGs are easy for search engines to read, which helped him hold a top SEO score. What mattered most was that SVGator let him keep those scores.
What changed for him, in short:
- A clean break from Flash to a web-native format, he considers better in every way
- Top SEO and performance scores that survived adding SVGs
- A page that loads fast and reads clearly to both people and search engines
SVG compared to GIF, MP4, and Lottie
Part of why the scores held is the format itself. A hero animation can ship a few different ways, and they do not cost the page the same amount. The three things Lighthouse cares about are file weight, decode cost, and runtime cost. Here is how the common options stack up.
| Format | File weight | Runtime cost |
| SVG | Light, a few KB | None |
| GIF | Heavy, capped at 256 colors | Constant CPU work |
| MP4 | Light to medium | Adds a video element |
| Lottie | Light JSON, a few KB | JS runtime (~300 KB) |
For a hero that has to load fast and stay search-friendly, SVG has three things the others do not:
- Plain text under the hood, so search bots and crawlers can read it
- No JavaScript runtime to ship, parse, or execute
- Native browser rendering, with low layout-shift risk when the SVG is sized in markup
Final thoughts
Øyvind’s site is a clear answer to an old assumption: that animation and performance cannot live on the same page. With the right format, they can. SVG is web-native, lightweight, and easy for search engines to read, which is exactly why SVGs did not cost him his scores.
If you want motion that keeps your page fast and search-friendly, SVGator exports the kind of light, no-runtime SVG that makes a score like this possible.