9 Tips for Improving Mobile Performance on Your Website
By Mark Raymond On May 14, 2018 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.
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.
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.
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.
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.
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.
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
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.
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.
Lead generation forms
Full page download suggestions
Full page product offers
Anything which blocks content and was not requested/necessary
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.
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.
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.