Digital

Mobile Optimization: Page Load in 3… 2… 1.

Your site should load as fast as possible. More importantly, your site should load as fast as possible on mobile devices. With mobile now making up more than half of overall web traffic, Google is moving forward with indexing sites mobile-first.

But mobile users can be hard to please. In a study by DoubleClick, 53% abandon a site that takes longer than three seconds to load. That’s up from 40% just a few years ago. Furthermore, Google recommends that a page’s above-the-fold content render in under a second.

So, how can you meet or even exceed those expectations? Here are some actions you should take, plus a few others to give you that extra cut above the rest.

6 Mobile Optimization Tips:

1. Reduce server response time.

Many factors contribute to a server’s response time. A website speed test, such as one by GTmetrix, can help you determine where to make improvements. Refer to the Waterfall Chart and review the listings leading with your domain name (usually the first two or three items).

2. Avoid redirects.

Most sites redirect from the non-www to the www counterpart—that’s fine. Other redirects, however, should ideally be avoided as each redirect can add several hundred milliseconds to load time.

3. Reduce render-blocking JavaScript and CSS.

Usually, a browser first downloads and handles JavaScript and CSS files before loading a page. This makes sense, as the page is essentially broken without these components. However, only a fraction of your total JavaScript and CSS is needed to render above-the-fold content properly. Consider inlining the essentials and postpone loading the rest.

4. Optimize content (HTML, JavaScript, CSS, images) delivery. Minify your HTML, JavaScript, and CSS. Compress your images.

5. Enable GZIP compression.

In conjunction with the previously mentioned optimizations, gzipping further reduces file sizes. Plus, it’s quick to enable.

6. Enable browser caching.

Browser caching reduces server load by negating the need for visitors to download assets with every return visit.

Plus, some nice extras:

1. Featured snippets

For some searches, Google displays a featured snippet at the top of the search results page. This snippet is created automatically, pulling relevant information for a particular search. Focus on creating high quality content, and your site may be featured. On mobile, the featured snippet space is even more valuable as it makes up a majority of the above-the-fold content.

“How many licks does it take to get to the center of a…?” Tootsie Roll presents the scientific research:

2. AMPs

Accelerated Mobile Pages, or AMPs for short, are pages built specifically with mobile speed in mind. Many AMPs see load times well within the one second range!

For this tip, (more so than the others) be diligent in your execution. AMPs are fast because they run on reduced HTML/CSS and exclude any custom JavaScript. Even with those constraints, AMP content should be similar to the original non-AMP version.

That’s it for now…

While not an exhaustive list, the tips we’ve listed offer a good start to optimizing for the mobile space. And if you can’t check off each item, don’t worry—even making just one or two improvements can produce visible results.

We hope you found these tips useful! If you’ve implemented any of these site improvements, share your experience and results in the comments section.

And if you need any assistance, send us a message.

Aldrick del Rosario

Aldrick del Rosario

Aldrick is a web developer and designer. He creates websites and emails, but spends most of the day scratching his head bug-fixing.
Aldrick del Rosario

Latest posts by Aldrick del Rosario (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *