← Back to SOTIA Top
JA

PageSpeed Clinic Demo

Clinic-site demo for
before/after comparison

This page is the English overview for the clinic PageSpeed demo. The comparison summary is in English, while the actual before and after demo pages remain in Japanese so the visual comparison stays unchanged.

Open the before page Open the after page
What this demo compares
  • The before page keeps layout shift, heavier PNG delivery, third-party libraries, and eager map loading.
  • The after page improves LCP image discovery, CSS delivery, responsive image output, and below-the-fold loading order.
  • The PSI screenshots below use the actual mobile reports collected for this demo.
Before Mobile PSI Mobile 44
After Mobile PSI Mobile 100
Before Desktop PSI Desktop 68
After Desktop PSI Desktop 100

PSI report panels

PSI shared links are not ideal for long-term storage, so this page also keeps the actual mobile report screenshots alongside the live links.

Before Japanese demo page

Before page

PSI Mobile before report
PageSpeed Insights mobile report for the before page
Report Mobile PSI
Main issues CLS / images / JS load
Demo page Japanese before page
Open PSI report Open the before page
After Japanese demo page

After page

PSI Mobile after report
PageSpeed Insights mobile report for the after page
Report Mobile PSI
Main improvements images / JS / render path
Demo page Japanese after page
Open PSI report Open the after page

What changes between before and after

The content and visual direction stay close, but the implementation layer is reorganized.

Before

Issues kept in the before page

  • A notice bar is inserted after load, causing layout shift in the first viewport.
  • The logo, hero, doctor photo, gallery, and staff photo are delivered as heavier PNG assets.
  • The page loads the slider and multiple external libraries up front.
  • Hidden heavy images and legacy reservation-widget style work still run after initial load.
  • The Google Maps iframe is eagerly requested during initial rendering.
After

Main improvements applied

  • The hero image uses `preload`, `srcset`, `sizes`, `loading="eager"`, and `fetchpriority="high"` for LCP.
  • Critical CSS is inlined in the head, while the remaining CSS is loaded asynchronously.
  • Images are converted to WebP and delivered with responsive `srcset` and `sizes`.
  • Feature, service, gallery, and staff images start as placeholders and are hydrated only when near the viewport.
  • The Google Map is lazy-loaded, and analytics is delayed until interaction or a later timer.

Most important implementation changes

These are the four changes that explain most of the score difference.

LCP image prioritization

The hero image stays as a normal `img`, but now uses `preload`, `srcset`, `sizes`, and `fetchpriority="high"` together.

Critical CSS

Header and hero styles are inlined first, while the rest of the stylesheet is loaded later to reduce render-blocking work.

Responsive image delivery

The site no longer just swaps PNG for WebP. Logo, profile, gallery, and staff images are also served in size variants.

Below-the-fold deferral

Offscreen images hydrate later, the map is lazy-loaded, and analytics is delayed so the first render stays focused.