HOW TO OPTIMIZE WEBSITES FOR MOBILE DEVICES?

Are you sure your site is fully mobile-friendly?

Have you heard that Google has introduced a new policy called Mobile First?

Every year more and more people refuse to surf the web on personal computers, preferring to browse sites and make online purchases using mobile devices.

Responsive web design has made it possible to create websites that work equally well on all platforms. Despite this, responsive design is just one of many mobile UX optimization strategies.

If you are looking to really noticeably increase the performance of your resource, then you will have to look at other options.

That is why so much attention is now paid to the creation of the site in accordance with the principle of Mobile First. In other words, your design and content should be optimized for smartphone and tablet users first.

Notwithstanding the above, this article is not about how to develop a new website from scratch. Instead, a number of fundamental web design principles for tablets and smartphones will be covered. We also paid attention to the technical aspects of optimizing the user experience for mobile users.

 

DEVELOPMENT WITH AN EYE ON MOBILE DEVICES

 

 

For decades, the World Wide Web was built primarily to serve personal computer users. The Internet at its best, including cutting-edge technology, looks best on a good, large monitor. But smartphones and other mobile devices have become a part of our daily lives, so it’s time to start adapting websites in accordance with the concept of Mobile First.

What should you pay attention to when developing mobile sites, in addition to the obvious things?

• Prioritization. Available space on the screens of smartphones and tablets is very limited. In addition, content is presented vertically on mobile devices, as opposed to the much wider (horizontal) structure used on personal computers. What elements of the site are most important to your users? How prominent will CTA (call to action) buttons be on smartphone and tablet screens?
• The main thing is content, not beauty. Mobile design allows you to do a lot of interesting things, but not in the way that is customary when developing websites for desktops. First of all, you need to allocate space for content. Make all texts and other useful content accessible and readable. Don’t get too carried away with visual elements when creating a mobile-friendly site.
• Ease of navigation. On a smartphone or tablet, you can’t just return to the home page with one click. Unless, of course, you plan a similar way of navigation in advance. Experiment with Scroll-to-Top widgets (Go To Top button) and add sticky headers whenever possible.

The easiest way to test whether you are doing well is to visit the site from your own smartphone. Carefully analyze which design elements worked better and which should be redesigned.

Whether you’re sitting in a coffee shop or waiting for a flight at an airport, nudge someone on the shoulder and politely ask them to check your site. Listen carefully to feedback. In most cases, you will be surprised at how people perceive your site’s user experience.

 

RESOURCE OPTIMIZATION: IMAGES, ICONS, AND MORE

 

Have you ever noticed that you use visuals based on personal preference and not on the rules of UX design? This kind of thing happens quite often. If you’re going to get creative, you need to understand how media optimization works.

Visual elements (photos, illustrations, icons, and videos) account for the bulk of a website’s bandwidth.

There is no single standard for web page size that everyone must conform to. However, it is obvious that the “lighter” a site is, the faster it loads.

How to save extra kilobytes or even megabytes of visual content on the site?

• Resize images. Pretty easy, right? Resizing allows you to reduce the size of an image by 80% of its original size. In addition, on mobile devices, there is no need to use images with a length and width greater than 600-700 pixels.
• Reduce file size by compressing. Compression (optimization) of an image is a reduction in the number of details and colors in a file using special software. You can significantly reduce the size of the images, but they do not suffer in terms of quality.
• Use alternate formats. Everyone knows the JPEG and PNG formats, which have been used for decades. De facto, they have become the standard for images on the web. However, this will soon change. Advanced technologies for transferring digital images have already emerged using the WebP and SVG formats. The latter, for example, is able to automatically scale to fit the screen, thereby reducing the amount of resources required to load visual components.

Optimizing the user experience with Mobile First is a smart approach. When designing spontaneously, you won’t be able to consider the long-term consequences of your decisions. On the other hand, a conscious approach will help you to create a site with mobile users in mind from the very beginning.

Addendum: You don’t have to reuse the same visual components to be Mobile First. Remove a couple of background images and replace them with simple colored backgrounds. It won’t ruin the user experience on smartphones. Try to use all the ways to save even the slightest bit of bandwidth.

 

PRELOADERS AND LAZY LOADING

 

Is it really necessary to load all media resources on pages that take a long time to read? Should external pages be rendered before users even visit them?

First, let’s look at preloaders (preloaders). With their help, the page informs the browser about potential navigation opportunities. For example, the user can go to page B from page A.

Preloading the user’s device will render page B before they even click the navigation link on page A.

 

 

 

Keep in mind that preloading doesn’t always work. The final decision is made by the browser. Device type, bandwidth, and other factors are considered on a case-by-case basis.

 

What types of preloaders are most common?

• prefetch. Such a preloader is used when the next choice for navigation is likely to be a specific URL. If the browser satisfies the request, important page resources are automatically cached. This, in turn, will significantly speed up the loading of the next one.
• prerender. Prefetch only fetches certain resources, while this preloader caches the entire page. All displayed content is stored in the user’s device memory.
• DNS prefetch. All this preloader does is ask the browser to resolve the DNS for the domain ahead of time if you will be connecting to it soon and want to speed up the initial connection. This reduces the time required for navigation.
• preconnect. Works the same as the previous one, but adds additional internet connection negotiation (TCP and TLS).

Here are code examples for different preloaders:

• <link rel=”dns-prefetch” href=”customURL.com”>
• <link rel=”preconnect” href=”customURL.com”>
• <link rel=”prefetch” href=”folder/script.js” as=”script”>
• <link rel=”prerender” href=”customURL.com/preview.html”>

Since preloaders use dynamic HTML tags, you can preload content (like Google Fonts) or create a custom script to preload JavaScript assets in WordPress.

By the way, if you use WordPress, then try WP Rocket – it will help to increase the speed of the site.

Well, you are familiar with the preloaders. It’s time to talk about lazy loading.

 

What is lazy loading?

 

When you open a new page, whether it’s a blog post or a regular website, the web browser will fetch all of its content and then offer it up for viewing. Usually, you need to download it completely.

At the same time, lazy loading forces the browser to load (render) content that only enters the visitor’s viewport. In other words, if a page contains large videos or images, they will be displayed only when the browser screen reaches the corresponding part of the site.

Don’t worry about potential SEO issues. The Yoast team has proven that Google renders pages using lazy loading. Moreover, the search engine considers it as a positive signal of improved performance.

We strongly recommend using the Layzr.js library for easy and efficient lazy loading of images. Users can find dozens of other lazy-loading plugins in the public domain.

 

WEB CACHING

 

Web caching involves creating a copy of the version of the page on the first visit, which will be shown to the user in the future. If the site visitor tries to access it next time, instead of showing the current version, the server will show the cached one.

The task of any caching method is to speed up the site and optimize its internal resources. Depending on how you’ve implemented caching, you can use triggers to set up custom intervals and other events.

The most popular web caching offerings are Varnish, Squid, and Memcached. However, there are a huge number of other solutions on the market, which is especially true for those who do not use WordPress.

You should also consider using a CDN.

 

What is a CDN (Content Delivery Network)?

 

The content delivery network provides very fast content delivery using a global cluster of distributed servers. It is able to quickly transfer all popular types of network content, including videos, photos, and JavaScript files. Almost all traffic on the Internet today is transmitted using content delivery networks.

The most important thing to know about a CDN is that it works best on frequently visited sites. In other words, you are unlikely to notice significant improvements if your resource is visited by no more than a couple of thousand people every month. However, a content delivery network is an excellent solution for speeding up site loading, reducing bandwidth costs, increasing content availability, and enhancing security.

If you’ve never worked with a CDN before, you should try Cloudflare, it’s a great learning platform that provides free access.

 

AMP (ACCELERATED MOBILE PAGES)

 

AMP on Google – mobile optimization on steroids! Essentially, this framework leaves only the bare essentials on the pages to ensure super-fast loading while still keeping the content readable. The speed of the site is very important – how can you refuse the ability to enable almost instantaneous page loading?

On paper it sounds good, but how are things in reality?

AMP is a simple HTML page that can only display certain types of content. The framework allows you to achieve faster loading times and improve overall performance by limiting the work of some scripts and other elements.

JavaScript, for example, doesn’t work with AMP. Of course, only if you are not using the AMP JS library, which can be downloaded from GitHub. She’s pretty helpful. With its help, you can avoid blocking ads. However, if you are after performance, then use the standard AMP.

 

TEST CHANGES BEFORE MAKING THEM

 

Nowadays, there is no excuse for not having a separate testing environment (staging environment) for each project. Most cloud hosting platforms provide them by default. Check with your ISP if you have access to such an environment.

 

What is a testing environment?

 

The easiest way to answer this question is to take a look at your current running website.
It presents all your code, scripts, and content in real time. The testing environment in this context is a copy of this site. You can call it a duplicate site. In a staging environment, you can make changes or add new features without breaking the main resource.

Here I would like to recall Ashley Harpp’s post “Do not waste time – check changes before making them.”

She believes that we “deceive” ourselves to avoid certain actions – this is a prime example of how people refuse to take responsibility if they make a mistake. However, Ashley’s article has links to useful tools for creating a local staging environment.

Testing is not as scary as it seems. Accidentally deleting the entire database on the main server is what you really need to be afraid of!

CONCLUSION

Optimizing your site for mobile devices is not that difficult. All you need is a little determination and a desire to apply the methods described in this article. Chances are you’re already familiar with things like content caching and lazy loading. Do you use test environments and preloaders?

We hope that this article has provided you with useful information about modern website optimization for mobile devices.