乐视宣布放弃收购Vizio 或在美国裁员三分之一

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.

HTML, JavaScript, and CSS files can also be made smaller through minification. Code minification means taking all of the white space and comments out of the code and restructuring it in the most compact way possible. This will reduce the file size to the bare minimum. While this makes the code practically unreadable to a human being, a web browser will still be able to execute the code just fine.

In addition to creating smaller file sizes, the number of overall files should be kept to a minimum. Every additional file required to load a website means an additional request and response, and these round trips contribute to load time. Sites with multiple JavaScript and CSS files should consolidate all the JavaScript code into one file, and do the same with CSS. For pages that require very little JavaScript or CSS, using inline styles* can significantly improve load times.

*Typically web developers write HTML, JavaScript, and CSS code in different files. Using a technique called ‘inline styles’ a developer can write their JavaScript and/or CSS code in the same file as their HTML.

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.

Avoid Redirects

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.

Summary

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.