A showreel can be the reason someone chooses your studio. Its pacing, colour and detail are not incidental decoration. When that reel makes a portfolio slow to open, the useful question is not whether motion belongs on the page. It is which parts of the delivery can change without weakening the work.
Improving video website performance means separating the creative requirement from the download and playback decisions around it. A film that visitors choose to watch has different needs from a background loop. A video at the top of a project page has different loading priorities from one further down the same page.
We recommend a repeatable comparison: document the current media, agree what must remain visually intact, test a specific change under consistent conditions, then review both performance and presentation. The method below is practical guidance, not a report of measured improvements on a client site.
01
Define What the Video Must Preserve
Before changing an export setting, describe what the video contributes. On an animation portfolio, timing and clean edges may demonstrate the quality of the work. On a collection page, texture and colour may matter most. For a release trailer, sound and its relationship to the edit can be essential.
Turn that purpose into acceptance criteria that a designer and developer can both use. “Keep it looking good” leaves too much open to interpretation. More useful checks identify the fine detail that must remain visible, the crop that keeps the subject in frame, and the transitions that need to stay smooth.
Choose reference moments from the footage before preparing alternatives. Include difficult material where it exists: a dark gradient, a fast movement, fine texture or lettering within the image. Reviewing only an easy, static shot can miss damage elsewhere in the sequence.
Also define the experience before playback. The poster image, surrounding project title and play control form part of the design. A technically lighter video is not an acceptable replacement if the visitor first sees an awkward crop or cannot tell how to start it.
These criteria give the comparison a clear boundary. You can change how the browser receives the work without treating every visible compromise as an unavoidable cost of speed.
02
Inventory the Media and Its Loading Behaviour
Record what the page actually serves, rather than relying on the filename of the original production export. Note the video’s file size in bytes, container, codec, pixel dimensions, duration and audio stream. Record alternative sources and their order, along with which source the test browser selects.
The distinction between container and codec matters. MP4 and WebM describe containers; the video inside is compressed using a codec. A filename alone does not explain the compression settings or establish that one version will be the better choice.
Alongside the media inventory, record the page behaviour:
- Whether playback starts automatically or waits for the visitor.
- Whether the video sits inside the initial viewport at the tested screen size.
- Which poster image appears, including its dimensions and file size.
- What the browser requests before playback, during playback and after scrolling.
- Whether the player is a native video element or a third-party embed.
The full video file size and the amount transferred during initial loading answer different questions. A large film that waits for a click may contribute differently to the opening experience from a smaller loop that starts downloading immediately.
Browser network tools help make that distinction visible. Inspect video, poster and player requests rather than assuming the video file is the only cost. A hosted player may bring additional JavaScript and other resources, so recompressing the film alone may leave the main problem untouched.
03
Establish a Comparison You Can Repeat
In web.dev’s explanation of lab and field data, the distinction begins with this definition: “Lab data is determined by loading a web page in a controlled environment with a predefined set of network and device conditions.”
For a useful before-and-after comparison, write down those conditions. Keep the page URL, browser, viewport, device or emulation settings, network settings and cache state consistent. Record the version being tested so a later template edit does not quietly become part of the experiment.
Start with a cold-cache comparison to examine loading without previously stored resources. If repeat visits matter to the portfolio or catalogue, test a returning visit separately. Do not compare a cached candidate with an uncached baseline and attribute the difference to the media change.
Repeat the baseline and candidate tests under the same conditions. Treat an unusually favourable run as something to investigate, not the result to publish. Keep other page changes out of the comparison where possible, especially script, font and image changes that could affect the same loading period.
Record more than a headline score. Identify the Largest Contentful Paint, or LCP, element, examine when the relevant requests begin, and observe when the page becomes visually useful. Then follow a defined interaction sequence: start playback, scroll to later media and use the project navigation or enquiry route.
A loading test alone cannot show whether a deferred player shifts the layout when activated or whether navigation feels responsive while footage plays. Those interactions belong in the comparison, even when the initial score looks satisfactory.
04
Give the Opening View the Right Priority
The first loading decision is about placement and purpose, not compression.
For a visitor-initiated film near the top of the page, a well-chosen poster can communicate the work before the full video is needed. The video’s preload setting can indicate that the browser should fetch no video content or only metadata before playback. That setting is a hint, however, so check actual requests in the browsers and devices you intend to support.
The poster can itself be the LCP element. Where testing confirms that role, giving it higher loading priority may be worth comparing. Prioritising every poster is not the same improvement: an image that is not critical to the initial view can compete with resources that are.
An autoplaying hero needs a different evaluation. If immediate motion is part of the accepted design, inspect how quickly the poster or first video frame appears and how the transition into playback looks. A poster that flashes briefly before a noticeably different opening frame can make the page feel less considered even if a loading measurement improves.
For footage below the initial viewport, consider deferring the download until it approaches view. As web.dev’s video performance guidance explains, autoplaying video can begin downloading even when it is off-screen. Placement alone does not make it lazy-loaded.
The newer video loading attribute can defer poster and preload downloads where supported. Treat browser support as an implementation check, not an assumption that every visitor receives identical behaviour. Viewport-triggered loading is another approach to evaluate. In either case, test the scroll into the video: a lighter opening view should not simply move an unacceptable wait further down the page.
05
Change Encoding Without Making Quality an Afterthought
Once loading priorities are understood, prepare a candidate export that addresses a specific issue. Changing dimensions, compression, codec and playback behaviour together makes it harder to identify which change helped and which introduced a defect.
Compare encoded dimensions with the size at which the footage is displayed. A small preview and a large project presentation may justify different delivery choices. Use the actual layout and target screens to assess that choice rather than assuming the source resolution is necessary, or that a smaller export is automatically adequate.
Compression settings also need a visual comparison. Inspect the agreed reference moments at their intended display size, then watch the complete sequence. A still frame can reveal lost texture or damaged lettering, but it cannot establish that motion and transitions remain acceptable.
Check the audio stream separately. Muting playback is not the same as removing audio data from the file. If a decorative loop has no need for sound, removing an unnecessary audio stream can reduce its size, including when that stream is silent. Keep audio where it serves the work, such as a trailer whose edit depends on dialogue or music.
Do not choose a codec solely because it is newer. Compare the resulting file, supported playback and visual quality on the intended devices. Where multiple sources provide format alternatives, their order affects browser selection. Verify which one is used rather than assuming the smallest supplied file is the one visitors receive.
The acceptance decision should pair the technical result with the creative review. A candidate that transfers fewer bytes but loses essential texture has failed the agreed test. A visually acceptable candidate still needs page-level measurement to establish whether it addresses the loading problem.
06
Test the Player and the Surrounding Page
Third-party hosting can handle video delivery, but the embedded player has its own performance cost. If testing points to player resources loading before anyone watches, a poster-based placeholder that loads the embed on interaction is worth evaluating.
That change alters the start of the viewing experience. Check that the placeholder clearly offers playback, that activation works with the intended controls, and that the wait after activation remains acceptable. Otherwise, the opening page may look faster while the visitor who came to watch the reel receives a worse experience.
Keep the space for the media stable through poster display, player loading and playback. Check the mobile crop and the placement of controls, particularly where project text or navigation sits close to the video.
The rest of the page still has a job to do. A visitor should be able to identify the project, understand the studio’s contribution and reach the relevant next page or enquiry path without depending on the film to explain everything. Video delivery and useful page content are complementary decisions.
Our technical SEO work connects speed data and template checks with practical fixes and verification. That is useful when the diagnosis needs to distinguish a media export problem from player scripts, rendering or a shared portfolio template before development effort is committed.
07
Use Field Evidence to Set Priorities
Lab tests help isolate causes. Field data describes the experience of real visitors across different devices, networks, locations and behaviours. Those results can differ without either being invalid.
Even the LCP element can change with screen size. A large display might show the hero video immediately, while a smaller viewport gives most of its opening space to text. Real visitors may also arrive with cached resources or interact at different points in the loading sequence.
Where field data is available, use it to prioritise problems that visitors actually experience. Use controlled tests to investigate those problems and compare proposed fixes. Do not present a better lab result as proof of a corresponding improvement for the whole audience.
If field evidence is unavailable, keep the conclusion narrower: the candidate performed differently under the recorded conditions. That can support a technical decision, but it does not establish a measured real-user improvement.
08
Keep the Design and Make the Change Accountable
The practical answer is to preserve the video’s creative purpose while testing its delivery in parts. Agree what must remain intact, establish a baseline, then compare a targeted change to loading, encoding or player behaviour. Accept it only when the page-level evidence and visual review support the same decision.
Before requesting implementation, prepare the affected project URLs, media inventory, baseline conditions and visual acceptance criteria. That gives the work a defined scope and a way to check success without defaulting to a rebuild.
Our SEO-first development offer includes performance, content structure and QA for visual sites, with implementation guidance available for an existing developer. The next step is to identify whether the evidence calls for an export adjustment, a player change or a template improvement. Keep the motion that demonstrates the work; change the delivery where the comparison justifies it.