Faster, higher, stronger: These words inspire Olympic hopefuls to achieve their best. In the mobile website world, where an awesome user experience defines the gold medal standard, I adhere to a slightly different motivational mantra.
Quicker, friendlier, leaner: That’s how my company optimizes its mobile user experience. With mobile encompassing 70% of our web traffic, we take a mobile-first approach in everything we do. We strive to make that experience the best it can be.
Websites that load more quickly, are less cluttered, and offer simpler navigation are more likely to reach the top of a mobile user’s search engine results. It’s one of the most important ranking factors Google uses. How important? Forty percent of all mobile users abandon a page if it takes more than three seconds to load. Also, each one-second delay in a page’s load time can decrease customer satisfaction by 16 % and reduce conversions by 7%.
Boosting Speed With AMP
Trust me, higher rankings matter. Why? The higher the rank, the more traffic. The more traffic, the higher your revenues and market share. Higher rankings also validate your company’s focus on providing the best possible user experience. It’s better to be on the leading edge of technology than not.
In fact, Google recently initiated an incentive for companies to elevate their mobile experience rankings. Accelerated mobile pages (AMPs), which are essentially HTML-lite with fewer scripts and tags, introduce a new standard for building mobile web content that strips away underlying code and eliminates unnecessary content — even ads. It can also integrate with analytics software.
AMP-compliant mobile sites load in less than half a second and appear in the Top Stories section of Google search results, though AMP itself isn’t currently a ranking factor. But faster loading time plus an uptick in user clicks will end up generating better rankings.
How To Make AMP Boost UX
As mobile site views continue to beat out desktop in 2017, keeping your site’s user experience up to par is crucial. Based on our own experience, here are four strategies to ensure your site isn’t lagging behind.
1. Optimize Your Database
Most mobile sites use a database to store data behind the scenes, but these structures can hinder your page speed. One of the most effective ways to optimize your database is by adding an index. Your database will be able to locate information much faster by scanning a few hundred record sets instead of millions.
Our database, for example, is 12 times faster than it was before we implemented an index; our average query time is now 10 seconds instead of two minutes.
2. Compress Image Sizes
Managing image sizes with CSS3 and HTML5 makes it easier to complete edits. Since switching to this structure for images, our site moves between pages four times faster. It also made developing our app much easier. Previously, the desktop, mobile and app were all tied together, using the same images on mobile as on our desktop, which increased wait time for images and pages to load.
To rectify the situation, I first cleaned up our database by removing old images and files the company no longer needed. It was time-consuming, but simply removing outdated data sped up each version of the site. Then, I divided our database into two segments: one for the full website and one for the mobile and app version. For the mobile version, I compressed the size of each file and image being used. This resulted in quicker load times without reducing the quality of the images.
3. Enable A User Cache
The final step was to enable a caching system that put certain files into a user's cache, which allowed users to avoid having to re-download every asset on the site. While this worked on both desktop and mobile, it had a bigger impact on the speed of the mobile site. A tip: Not all devices support Java or Flash, so removing animated features on a site can speed up performance as well. My previous company found that our pages loaded in one to two seconds instead of our competitors’ three to five seconds when we got rid of animations.
4. Consolidate Tags
Tags are pieces of code that send information to a third party such as Google Analytics. We use Google Tag Manager to specify the tracking scripts we need and when they should be activated.
This means tags are no longer a necessary part of our source code. It improved page loading time because scripts were loaded asynchronously. It also made it easier to maintain the scripts because they were in one place.
In today’s mobile-first world, delivering the best user experience and highest-quality content to your users should be your top goal. And tools like AMP can help your company improve its search rankings. Your site may not win an Olympic medal with these tools, but it’ll win in the eyes of your users.