Image via istockphoto
Written by Eric Gockel
You’ve redesigned your site using the latest frameworks, and now it’s responsive.
But is it truly mobile-friendly? A responsive site that adapts to different viewport sizes is just the first step toward an optimal mobile experience.
To find out how your website fares, run it through Google’s PageSpeed Insights and Mobile Friendly Tester. These tools can reveal issues that might be slowing down or hindering your website’s performance on mobile devices.
Here are three important factors to consider for mobile optimization:
#1 Image Optimization
Are you still loading up 800k hero slider images on your homepage? They weren’t optimized before, but now if they’re getting force-sized down, you need to revisit your optimization workflow. If you’re not handy with Photoshop, some good online tools for crunching your images include JPEG Optimizer and TinyPNG.
Better yet, use responsive image techniques such as srcset, sizes and media to serve up smaller-sized images for smaller devices. We did that for one client with their photo galleries on their ExpressionEngine website delivered by Flickr.
This will improve your website’s loading time and serve better images to your users because you’re offering multiple sizes of the same image.
The browser will do the calculations for you and will select the best image based on the device’s specifications, i.e., loading a 2x image on a 2x display
#2 Tap targets
You might want to punch up the button sizes on your screens, either overall or just for smaller viewport sizes, at least 48 CSS pixels tall/wide. Then, give those buttons some breathing room by providing around 32 CSS pixels of space between your tap/click targets.
#3 Lazy Load
Consider implementing lazy loading to maximize your website’s rendering speed. Lazy loading defers the loading of non-critical resources (such as images below the fold) until they’re needed, using JavaScript. This can speed up your website, especially for users who don’t scroll down to the bottom of the page.
To see if lazy loading is right for your website, you can use Lighthouse to run an Offscreen Images audit.
By optimizing your images, improving your tap targets, and using lazy loading, you can create a truly mobile-friendly website that delivers a great user experience.