Top Tips For Speeding Up Your Responsive Website

[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.

If you’ve got lots of legacy content, you simply need to prevent it from loading to your responsive design. One way to do that is altering the markup by changing src or img. Consider software like Adaptive Images which uses a total of one htaccess (hypertext access) file, one php file and a single line of Javascript code to automatically detect user screen sizes. Then you can just count on it to create, cache and deliver appropriate HTML images.

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.

Conditional loading

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.