2013 has seen a significant increase in the number of people turning to Responsive Web Design as a solution to deliver a consistent experience across different screen resolutions.
Here’s why.
Web visitors expect a similar experience regardless of the device they are using. Therefore, if a person visits your site and it is not optimized for their machine, there is a good chance that she will end up leaving and not come back.
What Google recommends
Google has come out with some recommendations and tools to help webmasters improve performance on smartphone devices. If you want to rank well with Google and earn points with your visitors (and who among us doesn’t?), it pays to listen.
Research has shown that if there is a delay greater than one second it may interrupt the user’s train of thought and lead to a poor user experience.
Google recommends that your web page does not need to load within this timeframe but, by prioritizing above-the-fold content while the rest of the web page loads in the background, this should be achievable.
Google recommends that your server response time should be less than 200ms and another 200ms for the above-the-fold content on your page to render.
They also recommend that:
- Number of redirects should be minimized
- Number of roundtrips to first render should be minimized
- Avoid external blocking JavaScript and CSS in above-the-fold content
- Optimize JavaScript execution and rendering time
But there is another problem here.
Web Pages are Getting Bigger
The average web page size is now a hefty 1532 kB and growing bigger every day. This is bad for site owners and users alike. You don’t need to be an expert to know that larger pages lead to slower performance and higher bandwidth costs.
While bigger pages do have an impact on desktop users, the people who this impacts most are mobile users. People use their smart phones to discover information as it is quick and easy to do so, but with the ever increasing page bloat, it can take a long time to load a web page on a mobile device, especially if you are using 3G.
Recently Guy Podjarny conducted some tests on sites that use responsive web design (RWD). He discovered that most RWD sites downloaded the full content of the page on different screen resolutions, despite the fact that there were some differences in the content and size of images shown on the various sized screens.
As web pages continue to get bigger and demand grows for perfectly optimized page for all devices, it’s important that your designers and developers prioritize performance and you set a performance budget for your project.
Let’s take a look at how you could do that…
#1 Set a Performance Budget
A performance budget is a pre-determined limit on the speed or overall size of a page. Like a financial budget, it serves as a cap to spending (or, in this case) page bloat. This means that if new pages or elements need to be added or amended, you have to make sure there is enough room within the “budget.”
If you find that adding a new element means you will exceed your budget, you need to make a decision to optimize an existing feature so it is less complex or faster, remove an existing feature altogether, or not add the new feature at all.
#2 Optimizing Images in Responsive Web Design
One of the biggest problems with bloated web pages and slow page loading on responsive websites are images. Especially with the growing number of “Retina Devices,” people want higher resolution images for their sites and it’s important that pages don’t become cluttered with 1mb image files.
To manage this you can use a service such as Adaptive Images. It is a very small PHP script which detects the screen size and then automatically resizes, caches and serves a scaled-down version of the image. The software can also be customised, so you can set the quality of images and browser caching.
Some people might argue that mobile service providers already compress images automatically but, unfortunately, that is not always the case with all of them.
#3 Enable Compression
You should compress your resources by using gzip to reduce the number of bytes a page is sending across the network. This will make it much easier for users to access and navigate your website with faster loading pages as well as making the usage of your web server resources more efficient.
In addition you should minify CSS and JavaScript by removing any unnecessary line breaks and white space, as this will help reduce file sizes and increase the speed they are downloaded and parsed.
#4 Exclude Unnecessary Page Elements
It’s critical that you understand how your different page elements are used by users, because it makes it easier to determine which elements can be removed to improve performance.
As a hypothetical example, you might want to test a new widget on a web page that shows off your testimonials—but adding it will exceed your performance budget. On the web page, you have three email signup forms in different locations. If you have your analytics setup correctly, you will know which form is providing the fewest email signups, and you can easily remove it in favour of the new testimonial widget.
For other pages, it might be worth looking at excluding third-party requests such as social sharing buttons. ZurBlog highlights that to “… load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes 246.7k in bandwidth.”
If a responsive page does not rely heavily on social sharing as its main traffic source, it might make sense to remove them.
#5 Pick the Right Hosting Solution
No matter how many tweaks you make to your website, a lot of the performance comes down to the quality of the servers you are using.
There is a wide array of different hosting packages offering a range of benefits and complex pricing structures, from cheap shared hosting costing a meagre few dollars per month, to cloud services and fully managed dedicated servers costing hundreds of dollars per month.
It is important to invest time in researching web hosting packages to make sure you get the best value for money and can achieve the performance your users demand.
You can start by looking at the performance of your competitors and websites in different niches to see which ones are the quickest. Once you know which sites perform the best, you can enter their details in whoishostingthis.com, which will show you which hosting provider they are using, as well as reviews as to the quality of customer support and problems with down time.
If you are still not sure whether investing in a more robust server setup is worth the additional investment, consider this: Google uses page speed as a ranking factor and there is a correlation between the time to first byte (TTFB) and search rankings.
Sites with a lower TTFB respond faster and have better search rankings than slower sites with a higher TTFB.
On top of that, every extra second it takes for your website to load, it will cause a 7% decrease in your conversion rate.
#6 Use a Content Delivery Network for Static Content
A Content Delivery Network (CDN) is a network of different servers that duplicate your content across them; this improves performance by delivering the content based on how close your users are to the server determined by the minimum number of nodes.
For example if a CDN has servers in London, Texas and China, a user from India would likely see content on the server in China where as a user from Paris will most likely be delivered the content via the London server.
When choosing a Content Delivery Network people tend to consider speed and bandwidth.
To maximize on speed then you will need to make sure that your provider has server locations near to the majority of your target audience. For example If your audience is mainly in the UK, it’s important that your CDN has servers in the UK, France or Ireland.
As for bandwidth, look at your monthly stats in your normal hosting control panel. If you only use 5GB of bandwidth per month, it makes little sense to opt for the bigger packages. You should consider purchasing a package slightly higher than your current requirements to allow for growth.
The most popular Content Delivery Networks are MaxCDN and Cloudflare, which both offer very affordable starter plans.
Once you have been through this process and followed the guidelines recommended by Google, you should test your site with the PageSpeed Tool. It will show you how well your site performs and make any necessary recommendations for further improvements.
Good for Google and your mobile users
By taking these steps and following the guidelines that Google have provided then your responsive site will be optimized for performance and provide your users with a great experience.
Have you created a Responsive site yet? Have you prioritized for performance? I’d be happy to answer your questions in the comments below.
[authorsure_author_box]
