PUT THIS PAGE TO WORK
A homepage release brief that preserves the design
Say your homepage has a bold hero image, moving project previews, testimonials and an interactive tool. Before we change how anything loads, we screenshot the desktop and phone layouts, note the section order and mark the first thing a visitor can tap. In this sample brief, keeping the design is a requirement. We'd turn down any speed fix that breaks it.
For the hero, name the image that must appear immediately and the crop needed on a narrow screen. Specify its intended display dimensions, alternative text and a stable space before loading. Prepare smaller image variants from the same source. The acceptance question is whether the image remains recognizable and sharp enough at its actual displayed size, not whether the smallest possible file exists.
For the moving project preview, define a still frame that communicates the work before the animation begins. The control should work with a keyboard, and the content should remain understandable when motion is reduced. Keep the animation module outside the initial path if its purpose begins farther down the page. That decision should preserve the project story rather than replace it with an unrelated stock image.
Test one realistic mobile visit after the changes: enter the homepage, see the hero, scroll to a project, open the relevant service and submit a permitted test inquiry. Note any layout jumps, slow buttons or missing images next to the speed numbers. A file conversion can pass every test and still fail this visit if a crop cuts off the subject or the contact button gets hard to press. We put the design first on our own homepage too, when we rebuilt it from Framer as a separate Cloudflare build. We kept the original hero artwork. The mobile source is a 252,220-byte PNG, and the AVIF copy the rebuild offers is 58,327 bytes, both at 1300 x 678 pixels. A fresh desktop export came out larger, so we kept the existing WebP. Those are single file sizes, and they don't measure how fast the page loads.
| Decision | Working example | Usable output |
|---|---|---|
| Hero | Original composition with responsive crop | Approved phone and desktop views |
| Project motion | Useful still frame before interaction | Readable reduced motion state |
| Conversion | Homepage to service to inquiry | Completed journey with no lost context |
Start with the image converter for source assets, then use the website design service to review the full release.
A fast business site can keep its look and its interactive tools, as long as each piece earns what it costs to load. We'd rather move a feature later in the load order than delete it, and we won't add one without measuring what it does to the page.
This guide follows what a visitor needs to do: understand the offer, find evidence, use a tool if it helps, then take the next step. Set any speed budget for the site in front of you and check it with measurements, since no single number fits every project.
Begin with the page's essential job
- Offer
- Explain what the customer can get.
- Evidence
- Support the offer.
- Action
- Make the next step easy to use.
Choose a representative homepage, service page, article, and tool route. For each, write the minimum useful experience. A service page needs a clear offer, scope, location information, evidence, and contact action. An article needs readable text and sources. A tool needs understandable inputs, trustworthy results, and a way to use the output.
Now list everything loaded before the visitor does anything: images, fonts, videos, analytics, chat, maps, carousels, animation libraries, and shared code. Ask which items directly support that minimum experience. We take that list to the designer, because a named file is easier to talk through than a request to make the site lighter.
Measure loading, responsiveness, and stability separately
Google's Web Vitals documentation identifies three current Core Web Vitals: LCP for loading, INP for interaction responsiveness, and CLS for visual stability. The good thresholds are 2.5 seconds, 200 milliseconds, and 0.1 respectively, assessed at the 75th percentile of visits with mobile and desktop considered separately.
| Visitor experience | Useful question | Typical inspection target |
|---|---|---|
| Main content takes too long to appear | What is delaying the largest visible element? | Server response, image discovery, critical resources |
| A click feels delayed | What work blocks the response? | Event handlers, large rendering work, loaded scripts |
| The page moves unexpectedly | What appears without reserved space? | Images, embeds, fonts, expanding interface sections |
We use a lab test to check one change at a time, and real visitor data, where the site has it, to see what people actually get. The two answer different questions. A good lab score describes the test conditions only; it doesn't promise every visitor the same speed.
Give the hero image a clear delivery plan
On a slow page, the first thing we check is which image or text block the browser reports as the largest one on screen. It isn't always the picture your team calls the hero. Inspect what the browser loads and when it discovers that resource. A visually simple page can still delay its key image behind unnecessary script execution.
The web.dev LCP guide explains the importance of early resource discovery and avoiding lazy loading for the likely LCP image. Use that guidance to review the implementation rather than adding a preload to every file. Competing priorities can erase the benefit of prioritization.
Choose image dimensions appropriate to where the asset appears. Export an efficient format when it preserves the needed appearance, provide responsive variants, and inspect the result on a real display. A file can be technically small but visibly damaged. Keep the original artwork available for future changes so repeated compression does not become the editing workflow.
Give images intrinsic dimensions or an appropriate aspect ratio. The layout should know how much space to reserve before the image arrives. This is especially useful for case study previews where several images appear further down the page.
Reduce typography cost without losing character
- Media
- Advertising spend.
- Landing page
- Work on the destination page.
- Measurement
- Tracking and review.
- Management
- Campaign planning and upkeep.
Identify the families and weights actually used. A site that inherited several design iterations may load more typography than a visitor ever sees. Keep the display face that gives the brand its character and a readable body face, then remove unused variants after checking the pages that rely on them.
Review line wrapping with the fallback font and the final font. A headline that jumps between three and five lines can move important content. Test at narrow widths and with long real headings, not only the shortest example on the homepage. Typography is part of both performance and layout quality.
Load a feature when its purpose begins
An interactive map near the bottom of a service page can be valuable, but it does not necessarily need to load during the first screen. Show a useful coverage description and a lightweight preview. Load the interactive map when the visitor requests it, while retaining a text alternative or ordinary directions link.
Use the same reasoning for video, large galleries, and optional tools. A visitor reading an article should not download the code for every calculator on the site. Route specific loading keeps each page responsible for the features it actually offers.
For example, the Search Opportunity Finder needs table parsing when the visitor uses that tool. The homepage can explain and link to it without importing the parser. The AI Answer Kit can have its own output logic without adding that code to every location page.
Make interactions responsive by design
Short, meaningful state changes can make a site feel capable without an animation framework. A selected control can move a thin rule, reveal a useful answer, or highlight supporting evidence. Keep the layout stable and the result immediate enough that the visitor understands the action succeeded.
When an interaction is slow, inspect the work it triggers. The web.dev INP guide covers reducing long tasks and unnecessary main thread work. For a large table tool, practical options include processing manageable chunks and showing a summary before thousands of rows. Measure the chosen approach with a realistic input.
Respect reduced motion preferences and avoid requiring a drag or hover to use an essential control. A useful interaction should retain its function when motion is removed. Test keyboard focus and error states as carefully as the polished default view.
Audit third party code as a business decision
- Event → record
- Define the event and check the record.
- Meaning → decision
- Review the business meaning before acting.
For each external script, name its owner, purpose, pages where it is needed, and what would break if it were removed. This can reveal abandoned tracking tags, duplicate widgets, or tools added for a campaign that has ended. Remove only after checking the dependency and measurement implications.
Delay optional features appropriately, but do not hide a broken measurement setup behind a better score. The business needs reliable analytics and a usable site. Document the tradeoff and verify the actual event or contact flow after a change. A fast page that silently loses all inquiries is not a successful optimization.
Use hosting and caching for the problems they can solve
Efficient delivery helps, but hosting cannot make unnecessary client side work disappear. A large script still needs to arrive and execute. An oversized image still needs to be decoded and displayed. Review the full path from request to usable page rather than treating a hosting migration as a complete performance fix.
When caching is part of the solution, check that published changes reach visitors as intended. Confirm that contact details and service information are current after deployment. Keep personalized or sensitive results out of shared caches. The caching plan should match the page's actual content and update needs.
Verify one complete customer journey
On a narrow phone viewport, open a service page, read the offer, inspect evidence, reveal the map if present, and start the contact flow. On a tool page, enter realistic data, trigger a validation error, correct it, and download or copy the result. Check that the page responds without unexpected movement.
Record the conditions used for performance checks and repeat the same comparison after the change. Broaden testing when a concrete risk remains, such as a large input, a slow device, or a font that wraps differently. Avoid chasing tiny score fluctuations once the experience and required gates are sufficiently verified.
For search context, read the website performance and growth overview and the search opportunity workflow. Trojan's website design service can apply this playbook to a distinctive site with clear performance budgets, useful interactions, and a customer journey that remains easy to use.
A migration decision from our own website
How we are carrying the Trojan website from Framer into a separate Cloudflare build
The practical challenge is familiar to a business that likes its website but wants better delivery: keep the recognizable design, preserve useful pages and make the files do less unnecessary work. Our own migration provides a concrete example. The original Trojan hero artwork, existing content identities and page addresses are part of the brief. The Framer original is retained while the separate build is reviewed. As of September 8, 2026, this is a private build prepared for Cloudflare, before the public domain move.
Start with the pages customers already know
We compared the original CMS records with the current content collection by identifier, page path, slug and original publication date. All 28 original records retained those values. This matters when an older article has been shared, bookmarked or linked from another website. The content can be improved at its existing address, with the same record remaining available for future editing.
Preserving an address is one part of migration quality. The replacement must also retain the page's useful purpose, appropriate links and relevant media. A record count alone cannot establish that the new page answers the visitor's question. Our review therefore treats content continuity and visual continuity as separate decisions to inspect.
Keep the actual artwork and offer suitable image files

The original desktop and mobile source images both measure 1300 × 678 pixels. The rebuilt homepage offers each source in AVIF and WebP, with widths of 480, 960 and 1300 pixels. The browser can choose among those files using the screen size and supported format. Keeping a separate mobile source preserves the intended artwork instead of substituting an unrelated stock image.
| Source choice | Preserved source | Current delivery files | Implementation decision |
|---|---|---|---|
| Desktop hero | WebP, 56,688 bytes | WebP, 56,688 bytes. AVIF, 38,176 bytes. | Compare each export with the existing compressed source. |
| Mobile hero | PNG, 252,220 bytes | WebP, 114,214 bytes. AVIF, 58,327 bytes. | Offer smaller formats while retaining the mobile artwork. |
The preserved desktop WebP is used for the full size WebP fallback. An additional export was larger, so retaining the original avoids adding bytes merely to call the file optimized. The mobile figures compare different formats at equal dimensions. These are individual file sizes, not a claim about the original website's total download size or a measured percentage improvement in loading time.
Make the hero appear as part of the page
The homepage declares the hero in its image markup with its dimensions, eager loading and high fetch priority. It does not wait for a scroll to request that first screen image. This follows the resource discovery principle in Google's LCP guidance. It still requires a browser measurement to establish which element actually determines LCP on a particular visit.
The visual treatment also changed deliberately. A soft vertical gradient blends the top and bottom into the dark page, with the middle clear and no horizontal side fade. The image retains its natural proportions. That addresses the hard rectangular edge without adding another large image, a video layer or an animation dependency to perform the blend.
Give the hosting move its own acceptance checks
The image variants are included with the website's static assets. Cloudflare documents static asset delivery and caching across its network. That is a delivery mechanism, not proof of a particular mobile experience. A broken asset reference or unnecessary script still needs a direct fix.
The recorded checks cover source routes, content identities, local image references and generated page markup. The offline rendering uses an empty database adapter. It cannot establish live CMS behavior, browser interactions, inquiry delivery, public HTTP responses or real visitor Core Web Vitals. Those distinctions make the evidence useful: we can identify what has been inspected without presenting preparation as a completed public launch.
Use this evidence to plan your own migration
Ask for a page preservation list, representative visual references, measured asset choices and a customer journey to verify before moving the domain. Google's hosting migration guidance separates copying and testing from the actual domain routing change, followed by traffic and crawl monitoring. Keeping those stages visible helps the business assess the release.
For a different example of how visuals support a customer's decision, see the Moto Supreme cabin website design study. For your own site, discuss the pages, artwork and customer actions your migration needs to preserve.





