Optimization of the mobile version of a one-page website (landing page)

It is necessary to improve the mobile version of the one-page website. Optimize loading speed, adapt the first screen, and update the structure of the main content blocks. Make the site more user-friendly and faster for users on mobile devices.

Tasks:

• Optimize mobile version loading speed

  • I added a poster on the first screen. It works correctly on PC. When narrowing the browser window to mobile size, the poster also displays correctly. But I do not understand why it does not work at all on real mobile devices. It needs to be fixed so that the very lightweight poster loads instantly — even before the video loads and autoplay begins. After the video loads, the poster should disappear.

  • Problem: on mobile devices, the poster is not displayed, users see a white screen until the video loads.

  • Expected behavior:

    • The poster should appear instantly, even before the video loads.

    • After the video starts, the poster should disappear.

    • Check on iOS Safari.

  • Apply lazy loading for all images below the first screen.
  • Remove blocking scripts and styles (especially for mobile). Duplicate and conflicting styles. If possible, split JS into async/defer.
  • Prioritize first screen content in HTML.
  • Arrange blocks on mobile: align and adapt strange/broken layouts (especially on small screens).

• Adapt the first screen for mobile (width 320–375px)

  • All texts and the main button should be fully visible on the first screen without scrolling.

  • Check behavior on iOS Safari (verify layout for 320×693).

• “About the product” block

  • Shorten the text to one brief paragraph (no more than 3–4 lines).

  • Add a “Show more” button to open the full text if desired. For the PC version, leave the text open by default.

  • For desktop — the full text remains open.

  • On mobile:

    • Image on the left.

    • Text on the right (not under the picture!). Currently, on mobile, the text appears under a large picture, which is not correct.

  • After this block, add a call-to-action button “Get free measurements”.

• “Gallery” block

  • Make the tiles larger and reduce the spacing between them.

  • Ensure intuitiveness — users should immediately understand that images are clickable. If needed, change the gallery to another (more understandable for users but also supports swipes).

  • Add another “Get free measurements” button immediately after the gallery.