Responsive Website Optimization: 5 Essential Strategies

Responsive Website Optimization: 5 Essential Strategies

Is having a responsive website enough?

Having a responsive website is not a trend anymore. When the number one search engine, Google, recommends responsive design for websites, we need to listen.

Winning the Race

Imagine that you have just purchased a thoroughbred race horse that has never raced. What would your plan of action be?

Two things on your list would most likely be that you would want to hire an experienced lightweight jockey and choose the optimal race track to race your thoroughbred on to give you the best chances of winning the race.

Having a responsive website is like having a race horse. Simply having one is not going to win the race. You need a plan of action to give you the best chances of winning the race by placing in the search engine results.

What is Responsive Design?

Responsive website example

Responsive website example

Responsive web design is the practice of designing and developing a website that responds to any device’s screen size and orientation that any person uses to view it.

This technique uses the same HTML with adaptable grids in layouts and cascading style sheets (CSS) to provide a design that adapts to any device.

Whether someone views the website on a mobile phone, tablet or desktop computer, the design adjusts to and accommodates the screen resolution.

Google on Responsive Design

In June 2012, Google published the company’s recommendations for smartphone-optimized sites. The search engine giant stated that the following is Google’s recommended configuration:

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

In February of 2015, Google made an important announcement that will have a significant impact on search results:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.

Top 3 Goals for a Mobile Strategy

Now that we have established what responsive design is and why we need to implement it, let’s take a look at three main goals that we should have for our mobile strategy. These goals include:

  1. Providing a fast performing responsive site.
  2. Presenting a flawless user experience across any device.
  3. Reaching your visitors and attracting customers.

Google on Speed

Speed matters. According to Google, “over half of mobile site visitors leave a page that takes longer than three seconds to load.”

In fact, Google is planning to move to a “mobile-first” search index in 2017.

Google has also announced that page speed will be included as a ranking factor in the mobile-first index.

Having a website that adapts to any device is the first step. However, there are challenges that you need to be aware of if you want to rank well in search engines and keep your visitors from clicking away.

Challenges of Responsive Websites

If you have a responsive website, don’t stop there. One of the major challenges of a responsive design is speed. What may load fine on a desktop computer, may not load quickly on a mobile device. Top challenges for responsive websites include:

  • Slow loading time on mobile devices.
  • Social Sharing: Social sharing that covers page content.
  • Font size too small.
  • Links too close together.

5 Essential Strategies for Responsive Website Optimization

Having a responsive website is the first step to cater to our mobile users. However, if a website loads too slowly, the mobile viewer may click away. With the growing use of mobile devices worldwide, we need to improve the responsive design’s mobile experience.

How do we optimize a responsive website to serve the best possible experience to our viewers?

Site speed – which impacts page speed – is one of the factors that Google uses to determine your site’s ranking.

The following is a five-step plan that will concentrate on improving the speed of your responsive site to help win the race:

  1. Optimize Images
    Unoptimized images are a common problem for page load speed of a responsive website. Heavy images that take a long time to load will increase the chances of your visitors clicking away especially on a mobile device. Similar to choosing a lightweight jockey, you will want to choose lightweight images for your web pages.

    As a rule of thumb, JPEGs are typically better to use for photos and PNGs for graphics. There are a number of tools to optimize images available. You will want to choose one that is a “lossless” tool. This means that images are optimized without changing their look or visual quality.

    One example of an online image optimization tool is the Pixlr Editor at Pixlr.com.

    The photo on the left – or first if you are viewing this on a mobile device – below is an unoptimized JPEG image with the weight of 90.1 KB. The optimized image (or second image) on the right is 17.5 KB – an 80.56% reduction.

    Unoptimized image

    Unoptimized image – 90.1 KB

    Optimized image: 17.5 KB

    Optimized image – 17.5 KB

     
  2. Enable Compression
    To speed up your web pages, Google recommends enabling compression. Google PageSpeed Insights states that by enabling gzip compression, you can “reduce the size of the transferred response by 90%.” This can reduce the download time considerably.

    If you have a WordPress driven website, WP Rocket is an invaluable tool. It can reduce Up to 80% bandwidth by the minifying and the HTTP compression of HTML, CSS, and JavaScript.

  3. Leverage browser caching
    When a browser renders a web page, it has to fetch and download the resources of your website. To speed things up, you can enable browser caching.

    Browser caching is the process of your browser remembering or storing elements of your web page. This process will increase the download speed of your web pages.

    To leverage browser caching, you will need to modify your site’s .htaccess file. This can be done through a cPanel if you have one or you can ask a professional to help. The following is an example of the directives to leverage browsing caching:

    ## EXPIRES CACHING ##

    ExpiresActive On
    ExpiresByType image/jpg “access 1 year”
    ExpiresByType image/jpeg “access 1 year”
    ExpiresByType image/gif “access 1 year”
    ExpiresByType image/png “access 1 year”
    ExpiresByType text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType text/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 2 days”

    ## EXPIRES CACHING ##

  4. Minify CSS, JavaScript, and HTML
    There are a number of ways and online tools to help you minify the CSS, JavaScript, and HTML of your website. The reason why you need to do this is to send as few of bytes to the server to download as possible.

    Again, if you have a WordPress website, you can use the premium plugin, WP Rocket to minify these files.

  5. Eliminate the Bloat
    Does your website have a great deal of extra weight? Do you have plugins that are causing you website to load slowly?

    One way to determine what may be slowing your website down is by using Google Developers PageSpeed Insights or GTmetrix.

    In one of our tests to reduce the speed of a website, the plugin, Shareaholic was deactivated. The download speed score the page was increased from 81/100 to 91/100 simply by eliminating this one plugin.

    Other plugins may be slowing down your website. You will need to test and determine if a certain plugin is worth having. You may have plugins that duplicate the function of another.

    For instance, WordPress SEO by Yoast generates an XML sitemap. If you have this installed, you won’t need an additional plugin to create an XML sitemap.

Summary

Optimizing your responsive website for speed is an essential strategy to compete in winning the race to deliver a fast loading experience for website visitors. While there are additional techniques that can be used, these 5 will help you on your way.

Your Turn

Have you optimized your responsive website for speed? If you need help, please give us a call!

Let’s Get Started

Recap of Tools

Fascinated with the growing potential and power of the Internet, Robin founded R & R Web Design LLC in the Chicago area in 2000. As creative director, she is passionate about helping others reach their Internet objectives through a strategic online presence with results driven custom web design, ethical SEO, and social media marketing.

This article was published on: May 10, 2017 and was last modified May 11, 2017
Posted in SEO, Web Design
4 comments on “Responsive Website Optimization: 5 Essential Strategies
  1. Thank you so much for this article Robin.
    I have learned so much from you today. My website is extremely slow on mobile and have checked out your linked sites and I have so much to work on. I have thousands of pictures on my website and all need to be optimized. I always changed the pixel before loading but did know know to optimize them. I do have this built into my picture edit tools after searching thank goodness. Overwhelming indeed but will start bit by bit on what you have suggested to help my site. Cheers

  2. Veronica Solorzano Athanasiou says:

    Thanks for putting this together, Robin. Love the information about the photos, so it’s not only jpeg files but also optimised? Will have to test Pixlr.com out! I’ve also noticed the Featured image doesn’t load so it can stay bigger for better thumbnails when sharing a link, right?

    • You are so welcome, Veronica! I’m happy to hear that you like the section about the photos. For your site’s featured image, I have it set so that it does not load on the page. This way, your featured image as a PNG can be shared to Pinterest at the highest quality. I hope that I’ve answered your question. Please let me know and thank you for taking the time to read this and for commenting!

Leave a Reply

You have to agree to the comment policy.

*