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 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:
- Providing a fast performing responsive site.
- Presenting a flawless user experience across any device.
- 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:
- 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.
- 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.
- 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 ##
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 application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”
## EXPIRES CACHING ##
Again, if you have a WordPress website, you can use the premium plugin, WP Rocket to minify these files.
- 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?
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.
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.
Have you optimized your responsive website for speed? If you need help, please give us a call!