Why does mobile performance matter?
The web is going mobile. According to Statista, 51 percent of global webpage views are on mobile devices. In some regions, such as Asia and Africa, the percentage is much higher. In each case, this percentage is steadily growing year over year.
The major search engines are aware of this trend, which is why they are prioritizing sites with fast mobile load times. Mobile users may have limited bandwidth but still want to find information quickly. These users tend to have less patience, which means high bounce rates for slow loading sites. (‘Bounce rate’ is the percentage of website visitors who leave the site after viewing just a single page).
Google and other site-speed authorities have determined that the maximum load time for a mobile site should be around three seconds. After three seconds, user retention drops dramatically. Search engines will ‘punish’ sites that load slowly by putting them further down in search results, particularly for mobile users.
A three second load-time limit over a mobile connection is not very forgiving, but there are tried and true strategies to keep mobile load times down.
How to improve mobile performance
There are a number of factors that affect mobile performance, so a number of strategies and best practices can improve load times.
Minimize file sizes and file count
To ensure a quicker load time, all website files should be made as small as possible. Images are often the biggest files requested, and these can be made smaller by using image optimizers or converting them to a lightweight image format, such as SVG.
Cache resources at the edge
Typically when a user visits a website, the user’s device has to communicate with the web server to get the website files. If the web server is in San Francisco and the user is in Berkeley (10 miles away), this should be pretty quick. But what if the user is in Tokyo (5,000 miles away)? That means each request and response will have to travel thousands of miles, adding significant delay to the website loading.
A common way to mitigate this problem is by utilizing a Content Delivery Network (CDN). A global CDN caches content at the network edge. This means the CDN has caching servers that live in data centers all over the globe. Anyone with Internet access is never too far from a data center. These data center servers can communicate with origin web servers to cache website data so that users visiting a website that utilizes the CDN can get website files from their local data center. This ensures a speedy request-response time for users, regardless of their location.
Cache API Calls
API calls are HTTP requests to fetch data from external resources. For example, a movie review site like Rotten Tomatoes may make API calls to a ticketing service like Fandango so that users browsing Rotten Tomatoes can see local movie showtimes. While API calls can help create a robust experience and reduce redundant work, they also create new HTTP requests, which can slow down load times.
API calls can be cached to minimize these extra HTTP requests. In our movie showtime example above, Rotten Tomatoes only needs to fetch Los Angeles movie showtimes once per day. They can configure their site to cache this API call once per day. This way, if 10,000 Los Angeles users visit Rotten Tomatoes each day, only the first one of those users will have to wait for the API call to Fandango.
Prioritize Visible Content
What a user immediately sees when loading a webpage is often the tip of the iceberg; they must scroll down to see the rest of the page. The content that appears on a user’s screen before any scrolling occurs is called ‘above-the-fold’ content. Web developers should be writing code in such a way that above-the-fold content is always loaded first. One technique to achieve this is called lazy loading, which works by dynamically loading below-the-fold content as a user scrolls down the page.
For various reasons, some websites create redirects on page loads. For example, 301 redirects are commonly used on websites that are renamed or rebranded. This practice should be avoided whenever possible, as redirects consume precious load time.
As mobile browsing takes over the web, it becomes more and more important to have a high-performing mobile site. Speedy mobile sites are rewarded with higher engagement and improved conversion rates, plus an SEO boost. Website owners should implement some or all of the strategies outlined above to reap these benefits.