[guest post by Simone Smith]
If it fails to appear on their screen within this time frame, 57% will abandon the website. Yes, it’s that simple. If your responsive design loads content like images and scripts intended for other devices, you might be in trouble.
Fortunately, there are ways you can speed up your responsive website and ensure that its load time never affects your traffic stats or ROI. Here are 6 tips to help you do just that.
Use one URL
Browser redirects to m-dot sites are costly. By redirecting your users from desktop to mobile, you’ll be losing on potential SEO benefits. That’s why Google recommends going for responsive design for mobile websites, keeping the same URL across all devices. It’s simple and it works!
Limit the number of scripts
This move will speed up your website because you’ll be already displaying primary content as other parts keep loading. Move your scripts to the end of your HTML templates and you’ll instantly build a better experience on your responsive website.
Work on images
Images are usually the main culprit behind slow load time. Those designed for desktop will underperform when rendered on mobile devices, so the problem definitely requires your attention. First, consider alternative file formats like WebP – it reduces images by 25-30%, which is a great benefit when compared to PNG and JPEG.
Make sure to resize images for different screen resolutions as well. You should be serving right sized and high quality images to different devices loading your website – especially important with Retina screens becoming more widespread.
Choose the right content delivery network
Sure, cloud storage services are booming and becoming increasingly accessible, but slower wireless connections might still need something more. Find a serious CDN partner to boost the performance of your website and maximize your ROI.
Consider textual content
Text can be more challenging for responsive design than you’d expect. When a device is narrow, the wrapping of textual content can easily cause display issues. And that’s something you’d want to avoid. One tool that can help you here is a jQuery plugin called FitText, which automatically updates font sizes, with minimum and maximum options. Use this tool to take full control of your headlines, which most often fall victim to resizing – you can be sure that badly rendered textual content will affect the load time and look of your responsive website.
This is a strategy which can be used for any type of content that you don’t want your responsive website to load. Be it social widgets, specific images or heavy maps, conditional loading helps to easily stop all types of content from slowing down your load time.
But be smart about this kind of optimization. As you apply new restrictions to content download, you should be testing your website at every single stage – this way you’ll be able to tell which elements made a difference, and which ones didn’t bring as much benefit as you had expected.
Follow these tips and you’re bound to seriously reduce the load time of your responsive website, delivering a great experience to your target audience and capitalizing on your mobile design.
** About the author: Simone Smith is a blogger and a staunch supporter of a healthy work-life balance working at Online Courses Australia. She likes to cover stories on careers and successful business development.