How to Keep Your Site Fast for Mobile Devices. Is Your Site Mobile-Friendly?

In the US, 94% of traffic comes from mobile devices, even if the user has access to a computer.

If a website is not user-friendly, you will lose clients. Search engines also analyze how well the site adapts to mobile devices. If there are issues with this, you will never get into the top 5 for smartphone searches.

Mobile-Friendly Website Structure

Mobile-friendly is a search Google algorithm that gives preference when ranking sites to those that have a good user interface for smartphones.

А mobile-friendly website is a site that is adapted for sites with different extensions.

Having a mobile-friendly and mobile-fast website is an essential part of your online presence. In many countries, the traffic from a smartphone now exceeds that from a computer. If your site is not yet mobile-friendly, you urgently need to fix it.

Support Google

What is Needed for a Site to Work Quickly on Mobile Devices

1. Adaptive Template

When creating a site from scratch, consider having a full mobile version. For it, you can use just a simplified design and remove unnecessary JavaScript elements from the code. This will make the website fast for mobile devices.

When buying a site, give preference to adaptive options.

2. Refuse from Flash

The Googlebot cannot count it, which lowers the site speed in tests. Additionally, most smartphones do not support this technology.

3. Material Design

Google strives to make websites as user-friendly as possible, so the company has created a graphic language, Material Design is a unified space for the user.

Google Design

What are the Main Features of Material?

Sites that are based on this principle guess the users’ desires.
Buttons and banners are located where the user wants to see them, motion design elements are as interactive as possible.
To select import blocks, use highlighting.
All elements are initiative, they are as similar as possible to analogs from the physical world.
Smooth and consistent transitions from one element to another.
Large margins between links, a large reasonable font, so that the user is as comfortable as possible to read the entire text without scaling and to navigate links.

Over time, Material Design will probably become an important ranking factor. Thus, you should pay attention to it at the site creation stage.

4. Minimize the Use of Custom Fonts

For all their attractiveness, they slow down site loading, as they require the use of CSS and Javascript. Ideally, use these fonts for the main title and to highlight important elements.

5. Compress Images

Heavy images slow down the loading of web pages, so you should use special image compression services.

For WordPress, the best image compression plugins are Smush, ShortPixel, and TinyPNG. They reduce the size of the image without automatically reducing the quality when uploading to the site.

You can also use online services such as Optimizilla, TinyJpg, ImageOptimizer, and Compressor.

Use the JPEG 2000, JPEG XR, and WebP image formats to compress images more efficiently.

6. Forget About Redirects

Redirects slow down the site because it takes time for the signal to go to the server and back. The same applies to switching from HTTP to HTTPS. It is better to initially install an SSL certificate on the site. There is more information on this subject in the article: HTTPS vs. HTTP.

7. Limit the Use of Third-Party Apps

A service like LiveChat improves communication with customers, but it slows down site loading by an average of 1,825 m/s.

8. Do Not Use Recaptcha For Accessing the Site

Using Recaptcha protects the site from robots, but it significantly increases the loading time. Additionally, when a user just logs on to the site and is asked to search for traffic lights, bicycles, etc., they will just leave. At most, use it in the form of feedback because it is true that you can trick a robot by adding a question that requires choosing. We recommend using the option to select the time and date of the manager’s call to the client. The robot will not pass, and the client will not be disturbed during an important meeting.

9. Use Google AMP

AMP is the technology of accelerated mobile versions of pages in which the code is open.

Replacing HTML and Javascript code elements with similar AMP elements, as well as cache, allows you to load pages on smartphones in one second. Google marks these pages with an icon, and when users see such sites, they deliberately click on them in the search results. You can read more on this topic in the article: Accelerated Mobile Pages.

10. Use the Meta-Tag name=”viewport”

It will tell browsers that the site is adapted for mobile devices and how to adjust the scale and size of the content.

Google Developers

11. Mobile-friendly JavaScript

JavaScript (JS) allows you to animate the site and set the implementation of conditions. However, if the JS execution time is more than two seconds, you will receive an error message in the service to assess the speed of the site.

To avoid this problem, Google recommends using 3 types of JS implementation:

Adaptive JS – all of the devices use the same code, and when JavaScript is executed on the device, the site’s rendering changes. This is the best option.

Combined Definition – the site reads device parameters from the server and uses JS in parallel.

Dynamic JS Processing– the code is registered individually for the parameters of each device.

Google Developers

12. Use Mobile-Friendly CSS

CSS (cascading style sheet) sets the appearance of the site. It is responsible for the mobile adaptability of the site.

How to Make CSS Mobile-Friendly

Enter the properties of the mobile version of the site in a style.css file. For each element, set the size, font, color, alignment, and margins. Google recommends that the size of interactive elements should be at least 48×48 dp, and the distance between them should be more than 8dp. If the distance changes, apply the minWidth and minHeight attributes.

Google Support

Set all font properties in one place. It is better to add font classes via rem since this makes it possible to adapt them individually to the device parameters. If you set the text size in px, you will have to specify your font size for different devices with differing screen resolutions, which will increase the size of the CSS file and slow down the processing.
When loading web fonts, use the front-display property; this will speed up text loading.
When applying alpha channel colors, set the hex value to prevent errors.
Use the CSS Grid Layout. It will allow you to avoid using containers, reduce the CSS file, and the speed of its processing.
Be careful with the text-transform property. It is only good with an English-language site. If you have a multilingual site, additional characters may be added when working with registers.
If you set the CSS transitions and animations properties, the browser has to redraw the page from scratch. As a result, you can forget about the site fast on a smartphone with simple hardware. The site will load slowly, the elements can slide and become inconvenient. It is better to set animation using JavaScript.

13. Do Not Use GIFs

These videos are quite heavy and slow down the site. For animated content, it is better to use video in MPEG4/WebM format.

14. Minimize Your Code

Google recommends adding CSS and JS to HTML code, but this is inconvenient. If you need to make changes, the programmer will have to do it manually in the files on every page. It is much easier to edit the file in the site admin panel.

If you are not a programmer, you can use special plugins, such as W3 Total Cache, W3 Total Cache, WP Cloudflare Super Page Cache, and others.

15. Do Not Overload the Site’s DOM Structure

DOM is a tree of site documents. The more complex and branched it is, the more nodes it contains. Therefore, the browser will need more time to load the page.

Common site JS query selectors that contain many links will overload the memory of mobile devices. This will also reduce the speed of the site on your smartphone.

To fix this problem, create only the DOM elements that are necessary. Also, make it easier to calculate styles. This can be achieved using Object-Oriented Programming (OOP), which is based on the class methodology.

The browser spends up to 50% of the time when loading a page comparing site selectors. Therefore, the simpler they are, the faster the download speed of the mobile version.

I Am Scaling My Project, How Do I Maintain Speed?

The site loading speed depends largely on the server bandwidth.

When choosing a hosting service, you need to evaluate the approximate traffic. For example, you can use competitor sites.

Traffic can be evaluated using the following services: Semrush, SimilarWeb and others.

Semrush

In the screenshot, we can see the traffic for apple.com in a month is 699.3 million users and 23.31 million in a day.

If your expected traffic is up to 3,000 people, virtual hosting is suitable, when there are many sites on the same server that share resources.

For traffic up to 10,000 people, you need VPS-hosting, a server where you are allocated a certain amount of disk space.

If you have more than 10,000 people, you will have to buy a private server or find a provider that provides a dedicated-server service.

How to Analyze the Performance, Speed, Visual Appearance, and Adaptability of Sites

So, how do I find out if a site is suitable for mobile devices?

The first thing to do is to use Google Webmasters tools: Mobile-Friendly, Search Console, Lighthouse, and PageSpeed Insights.

We can see that the Amazon site has problems loading the site. If you click on the notification, you can analyze the list of problems.

It looks like it is time for Amazon to take up administration.

Google Search Console is a more advanced Google tool for webmasters. You need to connect it to the site and then go to the Convenience for the mobile section. If there are problems, you will be notified.

Lighthouse allows you to evaluate the page quality. In the Google Chrome browser, it is located in the developer tools. There you can evaluate the site’s display on different devices.

Select a device from the list to check the appearance of the mobile version of the site, select Lighthouse on the right, and click Create a report.

The result we get is an overall rating of 2.

Apple has a problem with site loading speed.

PageSpeed Insights allows you to evaluate the download speed of the mobile version of individual site pages and see problems that reduce it.

You can also use tools such as Pingdom Tools, WebPagetest, and Web Site Optimization to evaluate the speed of your mobile site. They also allow you to find and fix performance errors.