Written by Eric Gockel
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.
#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
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?