Openmelodies Online: a phone-and-desktop teardown
We loaded https://openmelodies.online/songmaker 4 times on a simulated iPhone and 2 more on a 1366px desktop, and wrote down what a real visitor would see on each. No login, no insider access, no Harvv pixel needed. Here is what repeated visits already show, sorted by how we know it.
TL;DRWhat jumped out
Of everything we found on this scan, this is the one to start with: Tiny buttons are hard to tap on mobile. 69 of 79 tappable items on this page come in below 44×44 pixels, the minimum size Apple and Google recommend for reliable tapping. When visitors can't hit what they expect to, they get frustrated and many of them leave instead of trying again.
Below: what's already working, every finding ranked by impact and tagged with the screen it affects, the speed numbers on phone and desktop, and a checklist of what to fix first.
00What's already working
Start here so the problems below are in context. These held up across the test loads:
- Speed is good. The main content paints in about 0.4s in our test loads, inside Google's 2.5s "good" threshold. Real networks are slower, but the page itself is not heavy.
- Search basics are in place. Lighthouse scores SEO 100/100. The fundamentals Google looks for are present.
- Layout holds on phone and desktop. Nothing spilled past the edge at either 390px (phone) or 1366px (desktop), so the structure is responsive.
01Findings, ranked by what hurts conversion most
| Severity | Finding | How we know |
|---|---|---|
| High | Tiny buttons are hard to tap on mobileMobileAccessibility (WCAG)Conversion 69 of 79 tappable items on this page come in below 44×44 pixels, the minimum size Apple and Google recommend for reliable tapping. When visitors can't hit what they expect to, they get frustrated and many of them leave instead of trying again. The exact elements we found: paste into Claude, Cursor, or ChatGPT | median across loads |
| High | Images without sizes set make the page jump as it loadsBothPerformanceSEO 1 of 1 images on this page don't have width and height set. As each image finishes loading, the content below it slides down to make room. The visitor goes to tap one thing and ends up tapping another, and the cause is invisible to them. The exact images we found: paste into Claude, Cursor, or ChatGPT | |
| High | 42 form fields have no labelBothAccessibility (WCAG)ConversionTracking Screen readers can't announce these fields, and a sighted user who clears the placeholder can't recover the prompt. Wrap each input in <label>…</label> or add aria-label. The exact elements we found: paste into Claude, Cursor, or ChatGPT | |
| High | 24 interactive elements have no stable, accessible identityBothAccessibility (WCAG)Tracking These elements are clicked like buttons but expose no accessible name, or are a plain div/span used as a control with no role. Assistive tech announces only a role (or nothing), and analytics and heatmaps have no human-readable label or stable selector to bind the click to, so the click is both inaccessible and untrackable, and any redesign silently breaks click aggregation. Give each one a real <button>/<a>, an aria-label, and a stable id or data-attribute. The exact elements we found:
paste into Claude, Cursor, or ChatGPT | |
| High | Some text is low-contrast and hard to readBothAccessibility (WCAG) Text that does not stand out enough from its background is hard to read for many visitors, and fails accessibility guidelines Google checks. paste into Claude, Cursor, or ChatGPT | |
| High | JavaScript errors were logged during loadBothConversionTracking Errors in the console often mean a feature silently broke: a button that does nothing, analytics that did not fire, a form that will not submit. paste into Claude, Cursor, or ChatGPT | |
| Medium | Page is heavy and slow on mobile dataBothPerformance Each visit downloads about 39.4 megabytes — roughly 99 KB of images and 1147 KB of JavaScript across 85 separate downloads. On a fast connection that's fine. On a phone with patchy mobile data, that's several seconds of blank screen before the page is readable. paste into Claude, Cursor, or ChatGPT | median across loads |
| Medium | The page has no main headingBoth There is no <h1>. Search engines and screen readers use the H1 to understand what the page is about. Add exactly one that states the page's purpose. paste into Claude, Cursor, or ChatGPT | |
| Medium | 2 potential dead-click targetsBothConversionAccessibility (WCAG)Tracking Elements styled like buttons but with no anchor, no <button> wrapper, no role="button", and no click attribute. Real visitors tap these expecting something to happen, then leave. Examples on this page: "14px" (span.value-chip), "20px" (span.value-chip). The exact elements we found: paste into Claude, Cursor, or ChatGPT | |
| Medium | 4 inputs use the wrong type attributeBothConversion Mobile keyboards adapt to the input type (email shows @ key, tel shows numeric pad). Generic type="text" gets a generic keyboard and visitors mis-type. Switch to the correct type. The exact elements we found: paste into Claude, Cursor, or ChatGPT | |
| Medium | 6 input have font-size under 16px (iOS will zoom on focus)MobileConversion | |
| Medium | No analytics installed, so you cannot see your own trafficBothTracking No Google Analytics, GA4, or any analytics tag was detected. There is no way to know how many visitors arrive, where they come from, or what converts, and no data to retarget or measure a campaign against. Installing GA4 (free) is the baseline. paste into Claude, Cursor, or ChatGPT | |
| Low | Some text is too small to read on phonesMobileAccessibility (WCAG)Conversion 31 chunks of text come in under 12 pixels on this page. Most visitors don't zoom, they just skim past anything that small. Bumping the smallest body text to 14 pixels makes the page read without effort. paste into Claude, Cursor, or ChatGPT | median across loads |
| Low | No email capture or newsletter detectedBothConversion No email-marketing tag (Klaviyo, Mailchimp, etc.) was found. Email capture plus a welcome and abandoned-cart flow is consistently the highest-ROI addition for a small store, and it is owned audience you keep regardless of ad costs. paste into Claude, Cursor, or ChatGPT | |
| Low | No visible contact details (email or phone)BothConversion The page exposes no email or phone link. For higher-value or trust-sensitive purchases, a clear way to reach a human reduces hesitation. Add an email or phone link in the header or footer. paste into Claude, Cursor, or ChatGPT | |
| Low | Unused JavaScript is being downloadedBothPerformance Code that never runs on this page still costs download and parse time on every visit. Splitting or removing it speeds up load. Lighthouse measured: Est savings of 555 KiB. paste into Claude, Cursor, or ChatGPT | |
| Low | Unused CSS is being downloadedBothPerformance Style rules that this page never uses still block rendering while they download. Trimming them frees the paint path. Lighthouse measured: Est savings of 43 KiB. paste into Claude, Cursor, or ChatGPT |
Accessibility findings are automated checks against Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2. They flag potential barriers and legal risk, not a certification or a determination of compliance with the ADA, Section 508, or EN 301 549. Automated testing catches only a subset of issues; a full conformance review needs manual and assistive-technology testing by a qualified reviewer.
"How we know": unlabeled = a deterministic fact, identical on every load (e.g. element sizes). Most findings are this kind, so we only mark the exceptions: median across loads = a noisy lab metric, reported as a median. real-user field data = Google CrUX, actual Chrome visitors.
02Performance: phone, desktop, and real visitors
| Metric | Mobile | Desktop | Read |
|---|---|---|---|
| TTFB (lab median) | 272 ms | 224 ms | Lab |
| FCP (lab median) | 438 ms | 374 ms | Lab |
| LCP (lab median) | 438 ms | 374 ms | Good |
| Page weight (median) | 39.4 MB | 39.3 MB | Watch |
Google Lighthouse (lab): Performance 50 mobile / 80 desktop, SEO 100, Accessibility 77, Best Practices 77.
Lab numbers are from a headless mobile browser on an unthrottled connection: treat them as a floor, not a typical experience. Add a Google API key to light up real-user field data (CrUX) and Lighthouse scores.
03Tiny buttons are hard to tap on mobile
69 of 79 tappable items on this page come in below 44×44 pixels, the size Apple and Google both recommend for reliable tapping on a phone.
The buttons measuring below the minimum on this scan:
- button 70x36 "Sine ▾"
- button 38x38 "Undo"
- button 38x38 "Redo"
- button 50x42 "Draw"
- button 50x42 "Select"
- button 50x42 "Paint"
- button 50x42 "Erase"
- button 50x42 "Bend"
The fix is CSS-only on most sites: add padding around the icon (don't just change the icon size) so the actual tap area is at least 44×44 pixels. No redesign, no new assets.
04Technical SEO & structured data
| Check | Result |
|---|---|
| Title | SONGMAKER — Free Web DAW & Online Music Maker | OpenMelodies (60 chars) |
| Meta description | 197 chars |
| H1 | 0 on page |
| Canonical | Present |
| Structured data (JSON-LD) | WebApplication |
| Open Graph | Title + image |
05The fix checklist
Everything to fix, priority first, each tagged with the screen it affects and a rough effort. Work top to bottom.
- Tiny buttons are hard to tap on mobileMobileCSS only
- Images without sizes set make the page jump as it loadsBothCSS only
- 42 form fields have no labelBothVaries
- 24 interactive elements have no stable, accessible identityBothDev afternoon
- Some text is low-contrast and hard to readBothVaries
- JavaScript errors were logged during loadBothDev afternoon
- Page is heavy and slow on mobile dataBothSmall
- The page has no main headingBothVaries
- 2 potential dead-click targetsBothCSS only
- 4 inputs use the wrong type attributeBothVaries
- 6 input have font-size under 16px (iOS will zoom on focus)MobileVaries
- No analytics installed, so you cannot see your own trafficBothDev afternoon
- Some text is too small to read on phonesMobileCSS only
- No email capture or newsletter detectedBothVaries
- No visible contact details (email or phone)BothVaries
- Unused JavaScript is being downloadedBothVaries
- Unused CSS is being downloadedBothVaries
Effort is a rough read from the outside: "CSS only" means no new assets or backend work, "1 line" means a single tag, "Dev afternoon" means a developer needs to touch tracking or scripts.
06What this report cannot tell you
Everything above is from the outside, looking at the page on a simulated phone and desktop. The questions that actually decide revenue need real visitors. Install the Harvv pixel (one script tag, 16 KB, zero personal data, no engineering project) and within about 72 hours you'd know which buttons real customers tapped and missed, how often Google Analytics is missing visits, and exactly where mobile shoppers stalled and left. This report shows you where to look. The pixel shows you how often it happens, and to whom.
Drop the Harvv pixel on openmelodies.online and we turn this one-off scan into ongoing measured behavior: which taps miss, where sessions stall, and the real drop rates. Free to start, no card needed.
Add the pixel free07How we did this, and what it can't prove
- 4 mobile + 2 desktop loads of one URL from headless Chrome (iPhone viewport at 390px, desktop at 1366px), June 25, 2026. Enough loads to separate real defects from random noise, not a full-site crawl.
- Lab numbers, not real-user numbers (no field data was available for this run). Real devices on real networks run slower.
- Friction is inferred, not counted. We can prove a button is small. We can't, from the outside, count how often it causes a missed tap. That requires the pixel on a live page.
- This page rotates its content load to load, which is on its own a reason a single-shot scan can't be the last word on it.
Prepared by Harvv. Last updated June 25, 2026.