2.3 Mobile Optimisation
Prerequisites
Before you start, make sure you have:
- A live website (Section 2.2)
- A smartphone for testing
- Google Chrome browser on desktop (for DevTools)
Step-by-Step
Test on a real phone
Open your website on your actual phone. Scroll through every page. Can you read the text without zooming? Can you tap buttons without hitting the wrong one? Is anything cut off? Make notes of everything that needs fixing.
Use Chrome DevTools
On desktop, open Chrome, go to your website, press F12, then click the phone/tablet icon. Test at iPhone SE (375px), iPhone 14 (390px), and iPad (768px). Check for horizontal scrolling.
Run Google PageSpeed Insights
Go to pagespeed.web.dev and enter your URL. Aim for 90+ on the Mobile tab. Common fixes: compress images, remove unused scripts.
Fix common mobile issues
Images too large — resize to max 1200px wide, compress at tinypng.com. Buttons too small — minimum 44x44 pixels. Text too small — minimum 16px on mobile. Forms too wide — fields should stack vertically.
Test page load speed
On your phone, time how long your site takes to load on 4G. More than 3 seconds and you’re losing visitors. Each additional second of load time reduces conversions by approximately 4.4% (Portent, 20,000 pages analysed).
Chrome DevTools responsive testing mode — use the device toolbar to simulate different screen sizes. Press F12 and click the phone/tablet icon.
PageSpeed Insights mobile score for rmdboothco.com.au — 84 Performance, 100 Accessibility, 100 Best Practices, 92 SEO. Mobile scores are always lower than desktop due to simulated slow 4G throttling.
PageSpeed Insights desktop score for the same site — 100 Performance, 100 Accessibility, 100 Best Practices, 92 SEO. The gap between mobile (84) and desktop (100) is normal.
- Designing desktop-first — Design mobile-first, then expand for desktop.
- Images not compressed — A 4MB photo should be under 200KB for the web. Use tinypng.com.
- Pop-ups on mobile — Google penalises intrusive interstitials on mobile.
- Only testing in DevTools — Always test on a real phone too.
Google uses mobile-first indexing — they rank your site based on the mobile version, not desktop. Make sure every important element exists on mobile.
You're Done When
- Site is fully usable on a phone — text readable, buttons tappable, no horizontal scroll
- PageSpeed Insights mobile score is 80+ (ideally 90+)
- All images are compressed
- Forms work on mobile
- Tested on at least one real phone