Card image cap

9 Tips for Improving Mobile Performance on Your Website

By On Surfcode post tags: CMS , Performance ,


Why is mobile performance important? Because—Google said so, with two recent updates that will yet again disrupt the world of indexing and ranking as we know it.

If your website’s search ranking is important to you I would recommend familiarizing yourself with Google’s latest updates; which we have outlined below.

We put together this guide to highlight some of the performance and UX related changes you should consider so your website doesn’t get left behind in Google’s latest algorithm shuffle.


When did this Start?
April 21st, 2015, the date Mobilegeddon occurred, which penalized websites without a mobile-friendly design. Since that time Google’s algorithm updates have been increasingly mobile focused. Google points to increasing mobile search volume as the reasoning for the increased emphasis on mobile friendliness.


What’s Changing?
Mobile-First Indexing - March 2018
Google will no longer use the desktop version of a website when indexing and ranking content, only the mobile version of a website.

Speed Update - July 2018
Previously, page load speed was only measured with the desktop version of a website. This update will now use the mobile page load speed when ranking a website. What’s interesting about this update is that Google is not providing a scaling benefit for the fastest performing websites, only a penalty for the slowest.

So, now that we have addressed what’s changing it’s time to look into what you can do to ensure your site maintains its good graces with Google. Let’s get things rolling with tip #1.


1. Responsive Design
After Mobilegeddon responsive design became a web standard and aside from the positive impact it has on ranking it offers an even greater benefit to those browsing content on their mobile device.

If you are unfamiliar with responsive design it is code which scales content to the dimensions of the screen it is being displayed on. Responsive design is more than just code, it is a methodology which draws upon design and performance.

Below you will find the four main responsive design considerations outlined by Google.

Meta Viewport Tag
The meta viewport tag instructs browsers such as Chrome or Safari on how a pages content should be scaled up or down based on the dimensions of the browser.

Here’s the all important tag and the details on how to implement it.

<meta name="viewport" content="width=device-width, initial-scale=1">

Below you can see an example of what a webpage looks like on a mobile device with and without the viewport tag.


Source: https://developers.google.com/web/fundamentals/design-and-ux/responsive


Patterns

Responsive patterns are the layouts used to predetermine how content will adapt as screen size changes. With patterns, organizations get to choose the layout that best suites their product or service.

Here's an example of a pattern. You can learn more with this guide via Google.


Source: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns

Responsive Images
Google recommends controlling how images are displayed on mobile devices to provide the best experience for users. This approach is one part design and one part performance, as organizations will have to determine how and even which images are represented as screen size changes.

 

Source: https://developers.google.com/web/fundamentals/design-and-ux/responsive/images


Images often represent the majority of data being loaded by a website. Organizations should weigh the value of images against performance. Ensure that the beautiful, high resolution visuals marketers want to portray are not taxing page load speed.

See the full details on responsive images here.

Multi-Device Content
With the ever increasing emphasis on mobile it’s important that organizations create content that is designed with mobile users in mind.

“Research shows that people don't read web pages, they scan. On average, people only read 20–28% of web page content” - Nielsen Norman Group

Google recommends writing content optimized for a variety of devices, distilling the purpose of your website in under 70 words. This is especially important when creating home and landing pages.

The last bit of advice would be to focus on creating only relevant content, especially as it relates to the keywords your marketers are targeting, seems obvious but higher bounce rates and lower dwell time are not good for ranking.

There’s a lot to consider when implementing responsive design on your website, which is why we’ve given a few extra tips - so you can ignore the "9" in the title of this article and consider our next tip!


2. R.I.P. Flash

Are you still using Adobe Flash on your website for videos and animations? Here’s three reasons why it’s time to adopt a more modern web standard.

Google stopped using Flash for YouTube and implemented HTML5


Flash lacks mobile and browser support, less secure than HTML5 and other web standards

Adobe to end-of-life Flash end of 2020


With Adobe planning to end-of-life the product the time to move is now. Consider a more modern standard such as HTML5.

 


Random thought but what would be the epitaph for Flash? Let us know in the comments. Now, let’s talk performance.


3. Content Delivery Networks(CDNs)

I’ll turn to a vendor we often utilize, Cloudflare, for an explanation on what a CDN is.

“A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.”  –Cloudflare

 


Why use CDNs?

Delivering content faster means shorter page load speeds

Pages that load slowly will be penalized by Google

Provide site visitors with a better experience
 and prevent them from bouncing due to frustration
Here’s some noteable CDN vendors
Cloudflare

Amazon CloudFront 


Akamai 


Microsoft Azure 

CDN’s are a great tool for fast content delivery, although most have a cost. So let’s check out our next performance tip, which only requires configuration.


4. Browser Caching
Reduce user frustration and increase page load speed by implementing browser caching. This method stores the content(images, header text, body text, etc) you specify as important on the computer of your website’s visitors. When they return to your site pages loads faster, who wouldn’t want that?

 


Remember, you want users to stick around and nothing is more frustrating than a slow loading website; especially for mobile users who need information fast.

Our next tip is all about optimizing your images. If a picture is worth a thousand words, I’m sure a handful of compressed images are worth quite a few bytes!


5. Image Compression
Remember, images often represent the bulk of data being loaded by your website. Image compression helps by removing the unnecessary data within images, reducing their file size and boosting your page load speeds.

There’s a lot of easy-to-use tools available but you can always use Adobe Photoshop if you’re Photoshop savvy and have it available. See below for some of the tools we have found.

TinyPNG

Compressor

Optimizilla

Adobe Photoshop
We’ve spent a lot of time talking about performance, which is important, but the next tip is all about your visitors and how you can design your website with them in mind.


6. Think of the User—Experience
Performance is important, but only if your visitors stick around. Always consider the path your users take when navigating your site and work to continuously improve it. Here’s a few common UX best practices we’ve curated to give you an idea of where to start.

One Page, One Task

Focus user attention on a singular objective per page

Reduce the number of questions you ask of your users

Make the journey simple, intuitive and fun

Less is More

Focus on creating a clean user interface for displaying only relevant content

Reducing clutter helps increase user focus, make use of negative space

 

 
Simple Site Navigation

Keep your menu structure simple and easy-to-use

Users are less likely to bounce from your website when they can easily find relevant content

One Handed Design

Help your on the go users to easily interact with your website by ensuring content can be accessed with a single hand

These UX tips came from UX Planet which is a great resource if you'd like to learn more. If your goal is to get content in front of your visitors, and fast, this next tip is for you.


7. Consider AMPing it up!
Accelerated Mobile Pages are a new, lightweight way to build pages. They strip away excessive design elements and put content and performance first.

 

Why use AMP? It’s a great way to quickly deliver content to your visitors and not overburden them with design elements. A great use case would be articles, blog posts, and any scenario in which the quality of the content outweighs the emphasis on design.

Who’s using AMP?

Technology firms like triplelift & Cloudflare

Companies like TransUnion

Publishers like The Washington Post

Developers like us
Time to address a strategy that has been around since the dawn of the internet with our next tip. This is something you have undoubtedly encountered in your journey across the web.


8. Popups — Use them wisely
But why? Google said so, with yet another update!

Helping users easily access content on mobile - January 2017

Google is in the business of helping searchers find content and fast. Chances are most popups you encounter are not what you are searching for, but rather an offer or signup form. Tread carefully when implementing popups and consider the good and bad examples Google suggests.

Bad Popups

Source: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html

Lead generation forms

Full page download suggestions

Full page product offers

Anything which blocks content and was not requested/necessary

Good Popups

Source: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html

Cookie/GDPR data privacy consent

Age verification for sites not intended for minors

Mobile application downloads

As much as we would have loved to title this tip “Popups—Just stop” we couldn't, for there are some limited use cases in which they add value and are not penalized. So remember, don’t build a wall between your visitors and the content they seek.

Let’s wrap things up with our last tip which might be the first step of your journey to mobile optimization.


9. Performance Testing Tools
Last but not least, use the tools provided by Google to measure and enhance your website’s performance. Fortunately Google provides a suite of tools specifically geared towards optimizing your mobile site.

We’ve curated four of the main tools provided by Google to help with this task. If your website is not optimized for mobile the tools below offer a great place to start. Listen to the feedback Google provides and start determining your priorities.

Lighthouse

PageSpeed Insights

Test My Site

Mobile-Friendly Test


In Summary
Although Google’s updates are mobile themed the objective is actually user focused. The data says “more people are searching on mobile” and the response is an emphasis on mobile, but the point is to deliver a better user experience for those searching on mobile.

So, go forth and fine tune your website’s performance but think about mobile optimization in terms of “what does success look like?” the answer should be a user experience which helps people get the content they are looking for, fast and with ease.

Need help?
We have been helping organizations implement mobile friendly websites for years, years before Mobilegeddon occured. If you've read the tips above and need a helping hand feel free to shoot us a line here.

Latest Posts

Card image cap

Slow websites suck. Don’t let your website be one of them.

By Mark Raymond On October 22, 2018


Let’s face it, no one likes a slow website. So why are so many marketers building them? Customers don’t like slow, nor do employees, vendors and especially Google’s search ranking algorithm. But instead, what ...

Read More

Card image cap

New website; who's this? Relaunching our website!

By Mark Raymond On September 27, 2018


After months of planning, development and hard work we are pleased to announce that today marks the relaunch and rebrand of 4Hilton.com to Surfcode.io. It's been a long time coming but thanks to ...

Read More

Card image cap

Securing your website with SSL Certificates

By Mark Raymond On June 12, 2018


If Paul Revere were alive today and had found a career in digital marketing his new proclamation might be “The Google updates are coming!”.  The frequency of Google updates doesn’t appear to be ...

Read More