Mobile End site Optimization: Mobile end site optimization Full contact

Article Description: In order to meet the high expectations of mobile users, you need to optimize the site for mobile devices, in 4 seconds or less time to download the completed. The best way to reach the magic time of 4 seconds is to keep the least processing load on the smartphone by reducing JavaScript and optimizing HTML, CSS, and images.

A recent study found that 80% of netizens were disappointed with the browsing experience at the mobile end and spent more time on smartphones when the experience improved.

This is not surprising, because 64% of smartphone users want the site to be loaded in 4 seconds, but half of the site takes twice times more time and reaches 9 seconds. This article will illustrate some of the techniques that can make your site run faster on the mobile side.

Download speed for mobile end users

Let's look at what's going on with the speed of web loading on smartphones. The most obvious reason for

is the speed of the smart machine. In the best case, mobile end users use 3g and 4g Internet. In the United States, 57% of users use 3g Internet and 27% of users use 4g. In Canada, there are fewer 4g users. In Britain, 4g is still a novelty. PCWorld's research shows that in the United States, the 3g average download speed of 2mbps,4g is 6.2mbps. Ofcom's research shows that 3g downloads are 2.1mbps in the UK. Connections outside North America and Europe are generally slower. 1mpbs can be converted to 122KB per second, or 0.12MB per second, so the above data can be converted as follows:

• 244 kb/s 3G User Average speed value (0.24 MB/s)
• 756 kb/s 4G user Average Speed value (0.76 MB/s)

If the above value is multiplied by the mobile user wait time of 4 seconds, this means that the site is up to 1MB for 3g users, while 4g users are 3MB.

However, the download speed is not a bottleneck, and network latency and the memory and CPU of the smart machine are bottlenecks. Even if the phone can download 1mb in 4 seconds, the page will take longer to load, because the phone needs to receive and parse code and pictures.

On the desktop side, the download file only accounts for 20% of the time displayed on the Web site, and the rest of the time is spent parsing HTTP requests, getting style sheets, script files, and pictures. Because the CPU on the mobile side, memory and cache and the desktop side is completely unable to compare, these on the phone will take a long time.

How to reduce load time

Building a fast Web site is a process of making tough decisions and cutting off non-core experiences. If a certain demand is of little value, remove it. This principle applies to all development phases, especially when planning and coding.

• Reduce dependent files : Fewer files means fewer HTTP requests and faster load times
• Lower picture size : Adapts and adjusts high-resolution images, occupies the top spot in additional download time, and consumes valuable memory and processing resources.
• ease the burden on the client: best practice is to rethink your JavaScript and bring it down to the minimum size

How to reduce dependent files

How to reduce dependent files

If you want to hide the picture for the mobile end user, display:none visibility：hidden It is not possible to prevent the file from downloading. Test the following code:

<div
					style="display:none;">
			
			</div>
			<div
					style="visibility:hidden;">
			
			</div>
		

You can look at the waterfall below and the picture container display: none will be set or visibility: hidden still be downloaded.

The alternative is to use CSS to load the background picture, and then use media query to hide the picture through the condition. The technology was first tested by Jason Grigsby and then further expanded by Tim Kandlec. Amazon's standalone Mobile-end page uses this technique to load specific pictures based on device conditions.

<meta
					name="viewport"
					content="width=device-width">
			<style>
					@media (max-width:600px) {         .image
					{             display:none;
							}     }     @media (min-width:601px) {         .image
					{             background-image:
											url(image1.jpg);
							}     } </style>
			<div
					class="image"></div>
		

You can see the waterfall diagram without loading the picture:

[1] [2] [3] [4] [5] Next page