mobile
Eric Gockel

Written by Eric Gockel

Share

You’ve redesigned your site using the latest Bootstrap and now it’s responsive. It’s mobile-friendly, you say. But is it?

Having an adaptive / responsive website that adjusts to the viewport size of your visitor’s devices is just the beginning.

If you’d like to play along, plug in your website’s URL into Google’s PageSpeed Insights and see where it hurts. They also just added a Mobile Friendly tester too.

#1 File sizes

Are you still loading up 800k hero slider images on your homepage? They weren’t optimized before, but now if they’re just getting force-sized down, you really 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. That’s what we did for one client that has their photo galleries in their ExpressionEngine website delivered by Flickr.

This will improve your website’s loading time as well as 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

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. Give those buttons some breathing room, too, by making sure that you give around 32 CSS pixels of space between your tap/click targets.

#3 Lazy Load

After you’ve trimmed down some of your scripts and image sizes and you still want to try to speed things up, you can look into setting up lazy loading.

How does lazy loading work?

Lazy loading defers the loading of non-critical resources (aka “below-the-fold” images) until they’re needed to maximize the rendering speed by using JavaScript. If users don’t scroll completely down on your web page, there’s no need to bother loading images at the bottom, if there are any.

To see if that’s something that might help your website, you can run Lighthouse to see your Offscreen Images audit.