Site Speed Versus Responsive Design

Is there a tradeoff between responsive design and site speed?

People are using their mobile devises to search the internet more and more. Over half of all web searches are now conducted on a mobile devise and businesses haven taken notice. Most websites nowadays are built on a responsive design platform. Responsive design allows websites to adjust to the device they’re being displayed on. It greatly enhances the visitor experience. But many believes it has a negative effect on site speed. Is there a trade off?

It begs a question. Do websites look great if nobody sees them? According to Crescentek, “42% of users leave a website that takes more than 3 seconds to load.” If responsive design slows down a website too much, is the loss of visitors too big of a price to pay for a wonderful experience once you do land on a website? What can you do to mitigate the loss of traffic to your website?

Here are five steps you can take to increase your site speed on mobile devises.

1. Minify CSS, JavaScript, and HTML. There is a lot of unnecessary code in most websites. You can dramatically increase your site speed by optimizing your code. Remove spaces, commas and other unnecessary characters. Google has several suggestions on how to do this on their developers page.
2. Leverage browser caching. Retrieving data over the web is time consuming. It may take several round trips between the client and server to render a page. When a server returns a response, it sends two heads, cache control and ETag. Cache control signals how and for how long an individual response can be cached by the browser. For performance purposes, the best result is a result that doesn’t have to travel through a server. By storing a local copy in your browser, you can eliminate that step. You can learn more about caching here. ETag sends a revalidation token to the browser to check if resources have been changed since the last request was received.
3. Use gzip compression. Gzip is a method of compressing files for quicker network transfers. According to Yahoo “Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip”. Gzip is a code that is attached to the .htaccess file. You can access your .htaccess file through the file manager on your server.
4. Reduce the size of “above the fold” content. If the amount of data exceeds a certain amount, it may require additional round trips between the server and the users’ browser. For users on mobile networks, this can result in quite a delay in loading. To enable a page to load faster, limit the size of the data. This includes HTML markup, images, CSS and JavaScript. Using CSS rather than images can speed your page along. BuildaModulehas some clever ideas about how to go about this.
5. Accelerated Mobile Pages. Accelerated Mobile Pages (AMP) allows publishers to load their websites quickly. It is an open source coding standard. It helps eliminate desktop elements that don’t really have a purpose on a mobile site. Under AMP, everything is stripped down, including JavaScript, CSS. AMP is not yet a ranking factor for SEO, but will be probably be so in the not distant future.

The advantages of responsive design

1. Far better user experience. Internet users are surfing the web from all kinds of different devices. Responsive design allows the user to maximize their experience by adapting the webpage to the device it is being shown on.
2. It provides a consistent look and feel to your website across devices as the website style carries over from one device to the next. Functionality and performance are dependable. Consistency leads to visitor comfort and to conversions.
3. By not having to deal with a mobile site, it makes tracking traffic and conversions much easier. You don’t have to check two websites to get the full picture of how your website is performing. All your traffic can be condensed into one report with sub-headings for each device.
4. Saves time and money. One responsive design website does the work of both a desktop and mobile website. It’s half the work to build and half the work to manage. Content is consistent over all devices. This helps with user experience and with SEO.

So what’s more important, site speed or responsive design?

When push comes to shove, site speed is always important. If you run a business where “on the go” people are your likeliest customers, speed is king. Here are some stats from Kissmetrics:

• 73% of mobile internet users say that they’ve encountered a website that was too slow to load
• 47% of consumers expect a web page to load in 2 seconds or less.
• 40% of people abandon a website that takes more than 3 seconds to load.

Responsive design has become the industry standard and helps in so many ways to get and keep customers. But are your customers willing to wait for it. These are the things to consider as you go about developing your mobile marketing plan.