Overview
This article is a reference checklist for using Lighthouse and PageSpeed Insights (PSI) scores—key indicators for user experience and SEO—as shared metrics during production, review, QA, and pre‑handoff in Studio.Design.
You can use it as a guide to get the most out of the new publishing platform (MPA + SSR + cache) and maximize the performance of your live site.
The list items are based on hands‑on attempts to achieve a score of 100 in each category when launching the new publishing platform (beta), as well as the experience of team members who have worked on many real‑world projects.
We plan to keep this content up to date as we learn more through ongoing operations and testing.
If you have suggestions or feedback that involve deeper expertise in accessibility or performance, please contact us using the chat support.
Note: The new publishing platform is currently available as a beta and is rolling out in stages.
In some cases, compatibility with certain features is still limited, and we are actively testing and improving support for a wide range of sites.
We share known compatibility issues and bugs on the page below and update it as needed.
🔗 Public Site New Platform (beta) Issues (All in Japanese)
If you want to try publishing on the new platform, follow the “Switching steps” in the article below to change your publishing platform.
0. Before you measure
The checklist in this article assumes the following conditions when you collect metrics:
You measure on both Mobile and Desktop.
You measure using the production URL (the URL that real users see).
You use a private/incognito window so that cache and browser extensions do not affect results.
You run the test at least three times and check the median of the scores and metrics.
You review the results in both Lighthouse and PageSpeed Insights.
1. Performance
These metrics relate directly to what users feel, such as how fast a page appears and how smooth it is to use.
1‑1. LCP (Largest Contentful Paint)
This is the time it takes for the largest element in the first view (such as an image or heading) to appear.
It is a key metric that matches the moment when users feel “the page has loaded.”
☝️ Checkpoints
You are not using image boxes that are unnecessarily large.
You are not using images from Unsplash or Studio.Stock via API.
💡 For better optimization, download the image from the service and upload it as an asset in the editor.
You place images using img elements instead of boxes alone and do not rely only on CSS background‑image.
There are no unnecessary entrance animations in the first view.
There is no “fake loading” animation that is not actually needed.
There are no unnecessary redirects.
There are no unnecessarily high‑resolution videos placed.
You do not place YouTube or Vimeo content in the first view.
You do not place a carousel in the first view.
1‑2. INP / TBT (Interaction responsiveness)
These metrics relate to how quickly the page responds to taps and clicks.
They help prevent experiences where users feel “nothing happens when I tap” or “the page stutters.”
☝️ Checkpoints
You remove custom code (JavaScript) that is not needed for the initial view.
Custom code is not overly large or complex.
You keep externally loaded scripts to a minimum.
You regularly review JavaScript loaded through tag managers.
References:
1‑3. CLS (Cumulative Layout Shift)
This metric shows how much the layout shifts while the page is rendering.
It is a common cause of frustration, such as when elements move just as someone tries to read or click them.
☝️ Checkpoints
You set width and height on all images.
You allocate enough height for iframe and embed elements.
You reserve display space in advance for dynamic content such as ads.
There are no unnecessary entrance animations.
References:
1‑4. FCP (First Contentful Paint)
This is the time until the first text or image appears on screen.
For users, it corresponds to how quickly the blank screen ends.
☝️ Checkpoints
Custom code or CSS for embeds is not overly large.
You do not add unused styles (CSS) through custom code.
You are not using too many web fonts.
You are not loading unnecessary font weights.
You remove unnecessary divs and overly deep nesting.
You either avoid tag managers or keep JavaScript that runs immediately via tag managers to a minimum.
Where possible, you use SVG instead of icon fonts.
References:
1‑5. Optimizing images and media
These are basic steps for reducing data transfer and improving load speed and perceived performance.
☝️ Checkpoints
All images are an appropriate size (up to about 4× the required display size).
You use images uploaded to Studio.Design, not images fetched via external APIs.
You convert elements to SVG where SVG is a suitable replacement.
You do not overuse video in the first view.
1‑6. Addressing Lighthouse “Opportunities”
These are the improvement suggestions Lighthouse shows under “Opportunities” when it detects areas that could speed up your page.
☝️ Checkpoints
You delete any unused custom or embed JavaScript.
You delete any unused custom or embed CSS.
You use appropriately sized images (up to about 4× the required display size).
You keep externally loaded scripts to a minimum.
You regularly review JavaScript loaded through tag managers.
2. Accessibility
Accessibility measures whether anyone can use your site regardless of disability or how they operate their device.
Reference (English directory may be available; if not, remove the link):
Studio accessibility checklist
References:
2‑1. Basic settings
☝️ Checkpoints
The page language (lang attribute) is set correctly.
A title element exists and reflects the page content.
meta name="description" exists and describes the page appropriately.
2‑2. Images and non‑text content
Make sure people using screen readers can understand your content.
☝️ Checkpoints
All meaningful images have alt text.
Icon buttons have aria‑label attributes.
The alt text for linked images describes the destination of the link.
References:
2‑3. Forms
Aim for forms where everyone can understand what to enter and how to fix errors.
☝️ Checkpoints
Each input is correctly associated with a label.
You do not rely on placeholder text alone to explain what to enter.
Required fields are clearly indicated.
References:
2‑4. Color and contrast
Confirm that information does not rely on color alone.
☝️ Checkpoints
Text has enough contrast with its background.
Links are not distinguished by color alone; they are also identifiable by style or underlines.
Hover and focus states are clearly visible.
References:
2‑5. Keyboard operation
It is important that users can operate the site even without a mouse.
☝️ Checkpoints
All interactive elements are reachable with the Tab key.
Focus is visually apparent.
Focus order follows a logical sequence.
While a modal is open, focus stays within the modal.
References:
2‑6. Structure and landmarks
☝️ Checkpoints
Headings follow a logical hierarchy.
You do not use heading elements purely for visual styling.
You use landmark elements such as header, nav, main, and footer appropriately.
References:
3. Best Practices
These items cover security, technical health, and core UX rules.
3‑1. Image and media quality
☝️ Checkpoints
Image aspect ratios are not distorted.
Image resolution is appropriate.
Videos that autoplay include muted and controls attributes.
3‑2. UX considerations
☝️ Checkpoints
There are no intrusive pop‑ups that strongly block viewing.
There are no ads that cover the entire screen.
There are no elements that are effectively unusable on mobile.
4. SEO (Search engine optimization)
These are basic items that help search engines correctly understand and evaluate your page.
References:
4‑1. Meta and basics
☝️ Checkpoints
The title has an appropriate length (roughly 30–60 characters).
meta name="description" is set.
References:
4‑2. Heading structure
☝️ Checkpoints
There is only one h1 per page.
The h1 represents the main topic of the page.
h2–h4 headings form a logical hierarchy.
There are no jumps in heading levels.
References:
4‑3. Image SEO
☝️ Checkpoints
alt text is written appropriately.
You do not stuff alt text with unnatural keywords.
References:
4‑4. Content
☝️ Checkpoints
There is enough text content.
The page is not made up of images only.
Internal links are placed appropriately.
Link text is more specific than just “Click here” and helps users understand the destination.
References:
4‑5. Indexing and crawling
☝️ Checkpoints
There are no pages accidentally set to noindex.
You do not have many 404 or 5xx errors.
5. Mobile experience (Key PSI items)
These items confirm how easy your site is to read and use on mobile.
☝️ Checkpoints
Tap targets are not too small.
There is enough space between tap targets.
The layout does not cause horizontal scrolling.
The first view makes the main purpose of the page clear.
Text sizes are not too small on mobile devices.
References:
6. Cross‑checks (for reference)
Use these checks to balance performance improvements with SEO and UX.
☝️ Checkpoints
Performance optimization does not hurt SEO.
The site does not rely too heavily on JavaScript, and crawlers can access key content.
Accessibility improvements do not degrade UX.
Readability and usability are preserved on mobile.
7. Recommended focus in each project phase
It is more efficient to change which metrics you focus on at each stage of production, publishing, and handoff.
☝️ Checkpoints
During production: Focus on Performance and Accessibility.
Before publishing: Focus on Best Practices and SEO.
Before handoff: Review all Lighthouse categories together with PSI’s real‑user metrics (field data).