senternet-site-mobile-optimize

Use a `<picture>` element with `<source>` tags keyed to media queries, pointing mobile to a smaller `-sm.webp` variant. Add matching `<link rel="preload">` tags with `media` attributes so each viewport preloads only its own image.

CSS `display: none` hides an image visually but the browser still downloads it. To prevent the download entirely, conditionally render the image in JavaScript after checking `window.matchMedia`, accepting the hydration trade-off for prerendered pages.

Never apply `loading="lazy"` to the LCP or above-fold hero image, since it delays the most important render. Reserve lazy loading for below-fold images that are not in the initial viewport.

Yes, but implementation shifts to `next/image` with a correct `sizes` prop instead of manual `<picture>` sources, and `priority` on the hero replaces manual preload links. Viewport-gated components must be client components reading matchMedia in an effect.

Animations like glow pulses and floating effects force the GPU to repaint every frame, which tanks Speed Index and LCP on mobile CPUs. Disable them with a max-width media query or Tailwind's `md:animate-none` variant.