3 Tips to Improve Your Responsive Website Performance
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 some viewport size detection and 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.
#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 Overall load time
This one is a biggie, literally. One client requested to have 75 stories fed onto their Wordpress powered website's homepage. Many of the posts didn't have excerpts either, meaning entire posts were showing, along with multiple, large images. For comparison, I pointed them to Dealbook's homepage that had only 15 posts on their homepage, while a single post (of the 75) on the client's site had more words than the entire Dealbook's homepage.
After cutting back their homepage to 15 posts, the bounce rate dropped 41%, mostly on mobile devices. Average time on site and pages viewed also improved at least 30%.
That's it for our quick tips today. Share any of your own in the comments below!
Filed under Mobile