Point: Studio.Design's published site infrastructure and display performance
As of June 11, 2026, Studio.Design's published site infrastructure has been updated to a setup that returns fully rendered HTML from the server. This new infrastructure is designed to deliver better page load speed, stability, and SEO performance.
For projects created before June 11, 2026, switching to the new published site infrastructure can help improve display speed.
💡 For step-by-step instructions on switching infrastructure, see Switching your site's publishing infrastructure.
💡 For details on the specifications of the published site infrastructure, see Studio.Design's published site infrastructure.
This article provides a checklist for maximizing your site's display performance, based on the new infrastructure (MPA + SSR + caching). You can use Lighthouse and PageSpeed Insights (PSI) scores as benchmarks during production, review, QA, and pre-delivery checks.
0. Measurement prerequisites
The checklist items in this article assume measurements are taken under the following conditions:
Measurements are taken on both Mobile and Desktop.
Measurements use the production URL (the URL actual users visit).
An incognito window or similar is used to eliminate the effects of cache and browser extensions.
Measurements are taken at least 3 times, and the median score and metrics are used.
Results are checked in both Lighthouse and PageSpeed Insights.
1. Performance
These metrics directly affect how users experience your page — things like load speed and how smoothly it responds to interactions.
1-1. LCP (Largest Contentful Paint)
The time it takes for the largest element (such as an image or heading) in the above-the-fold view to appear.
This is a key metric that reflects when users feel "the page has loaded."
☝️ Checkpoints
You're not using image boxes that are unnecessarily large.
You're not using images served via the Unsplash or Studio.Stock API.
💡 You can optimize images by downloading them from these services and uploading them as assets in the editor.
Images are placed using img elements (not boxes), and you're not relying solely on CSS background-image.
There are no unnecessary entrance animations in the above-the-fold view.
There are no fake loading effects (loading animations that aren't actually needed).
There are no unnecessary redirects.
No unnecessarily high-resolution videos are placed.
YouTube or Vimeo content is not placed in the above-the-fold view.
Carousels are not placed in the above-the-fold view.
References:
1-2. INP / TBT (Interaction response)
These metrics measure how quickly the page responds to clicks and taps.
They're important for preventing experiences where users feel "nothing happens when I tap" or "the page feels laggy."
☝️ Checkpoints
You've removed any custom code (JavaScript) that isn't needed on initial load.
Your custom code isn't bloated.
You're keeping externally loaded scripts to a minimum.
You've reviewed any JavaScript loaded through a tag manager.
References:
1-3. CLS (Cumulative Layout Shift)
This measures how much the layout shifts while the page is loading.
Shifts like "the element I was about to read just moved" cause user frustration.
☝️ Checkpoints
All images have width and height specified.
iframe and embed elements have enough height reserved.
Space is reserved in advance for dynamically changing elements like ads.
There are no unnecessary entrance animations.
1-4. FCP (First Contentful Paint)
The time it takes for the first text or image to appear on screen.
From a user's perspective, this is how quickly "the blank screen goes away."
☝️ Checkpoints
CSS for custom code or embeds isn't bloated.
You're not adding unnecessary style declarations (unused CSS) through custom code.
You're not using too many web fonts.
You're not loading unnecessary font weights.
Unnecessary divs and excessive nesting have been cleaned up.
You're not using a tag manager, or you're keeping immediately executed JavaScript loaded via the tag manager to a minimum.
You're using SVGs in place of icon fonts wherever possible.
References:
1-5. Image and media optimization
These are the basics for reducing data usage and improving load speed and perceived performance.
☝️ Checkpoints
All images are an appropriate size (up to about 4× the required display size).
Images are uploaded to Studio.Design rather than fetched through an external API.
Elements that can be replaced with SVGs have been converted to SVG.
You're not relying heavily on videos in the above-the-fold view.
1-6. Addressing Lighthouse Opportunities
This covers the improvement suggestions ("Opportunities") that Lighthouse flags as ways to make your site faster.
☝️ Checkpoints
You've removed any unused JavaScript from custom code or embeds.
You've removed any unused CSS from custom code or embeds.
You're using images at an appropriate size (about 4× the required display size).
You're keeping externally loaded scripts to a minimum.
You've reviewed JavaScript loaded through your tag manager.
2. Accessibility
This category evaluates whether your site is usable by everyone, regardless of disability or input method.
Reference:
2-1. Basic settings
☝️ Checkpoints
The page language is set correctly (lang attribute).
A title element is present and accurately reflects the page content.
A meta name="description" is present and appropriately summarizes the page.
2-2. Images and non-text elements
Make sure your content is accessible to people using screen readers.
☝️ Checkpoints
All meaningful images have an alt attribute.
Icon buttons have an aria-label set.
Alt text on image links describes what the link points to.
Reference:
2-3. Forms
Aim for inputs and error messages that anyone can understand.
☝️ Checkpoints
input and label elements are properly associated.
You're not relying solely on placeholders to describe what to enter.
Required fields are clearly marked.
Reference:
2-4. Color and contrast
Check that information is conveyed without relying on color perception.
☝️ Checkpoints
There's sufficient contrast between text and background.
Links aren't distinguished by color alone — they're also identifiable through styling or underlines.
Hover and focus states are visually noticeable.
Reference:
2-5. Keyboard navigation
It's important that the site can be used in environments where a mouse isn't available.
☝️ Checkpoints
All interactive elements can be reached with the Tab key.
Focus indicators are visually clear.
Focus order follows a logical sequence.
When a modal is open, focus stays within the modal.
Reference:
2-6. Structure and landmarks
☝️ Checkpoints
Heading structure follows a logical hierarchy.
Heading elements are not used purely for visual styling.
Landmark elements such as header, nav, main, and footer are used appropriately.
Reference:
3. Best Practices
These items cover security, technical quality, and basic UX principles.
3-1. Image and media quality
☝️ Checkpoints
Image aspect ratios aren't distorted.
Resolutions are appropriate.
Autoplay videos have muted / controls attributes set.
3-2. UX considerations
☝️ Checkpoints
There are no intrusive popups that disrupt browsing.
There are no ads that cover the entire screen.
There are no elements that can't be operated on mobile.
4. SEO (Search Engine Optimization)
These are the fundamentals for helping search engines correctly understand and evaluate your page.
Reference:
4-1. Meta and basics
☝️ Checkpoints
The title is set to an appropriate length (roughly 30–60 characters).
A meta name="description" is set.
Reference:
4-2. Heading structure
☝️ Checkpoints
There's exactly one h1 per page.
The h1 represents the main topic of the page.
h2 through h4 follow a logical hierarchy.
Heading levels don't skip (e.g., h2 directly to h4).
Reference:
4-3. Image SEO
☝️ Checkpoints
Alt text is written appropriately.
Alt text isn't stuffed with unnatural keywords.
Reference:
4-4. Content
☝️ Checkpoints
There's enough text content on the page.
The page isn't made up of images only.
Internal links are placed appropriately.
Link text uses specific language that describes the destination — not just "click here."
Reference:
4-5. Indexing and crawling
☝️ Checkpoints
noindex isn't set incorrectly.
404 and 5xx errors aren't occurring frequently.
References:
5. Mobile experience (key PSI items)
Check how easy your site is to use and read on mobile.
☝️ Checkpoints
Tap targets aren't too small.
There's enough space between tap targets.
The layout doesn't cause horizontal scrolling.
The purpose of the page is clear from the above-the-fold view.
Text isn't too small on mobile devices.
Reference:
6. Cross-checks (reference)
Check that performance improvements are balanced with SEO and UX.
☝️ Checkpoints
Performance optimizations aren't hurting SEO.
The site isn't overly reliant on JavaScript, so crawlers can still access the main content.
Accessibility improvements aren't compromising UX.
Readability and usability are maintained on mobile.
7. Recommended focus by phase
It's more efficient to shift your focus across different metrics depending on the phase — production, pre-publish, and pre-delivery.
☝️ Checkpoints
During production: Focus on Performance and Accessibility.
Before publishing: Focus on Best Practices and SEO.
Before delivery: Review all Lighthouse categories along with PSI's real-user metrics (field data).
This article was put together to coincide with the launch of the new published site infrastructure, drawing on hands-on testing aimed at achieving perfect scores in each category, as well as the experience of team members with backgrounds in real-world site production.
We plan to update this article over time as we continue to operate and test the platform.
If you have suggestions or feedback grounded in expertise around accessibility or performance, please share them through our chat support. We'll use your input to consider further improvements.