Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to improve the performance of mobile device web pages". The content is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to improve the performance of mobile device web pages".

Text

1. Performance testing of desktop web pages

The pages used by desktop browsers can be detected using a plug-in called Yslow. This plug-in is available on both Firefox and chrome. It is a project led by Yahoo and is located at https://github.com/marcelduran/yslow/wiki

After installing YSlow in chrome, let's go to the home page of sina to test it:

(loading web page components.... )

After loading, there will be an analysis result:

You can see that the score given is D, 62.

YSlow has a set of criteria for testing the performance of a page. It tests the page according to each of the criteria and gives ratings and recommendations to the page as appropriate. For example, the ratings and recommendations of Sina's home page are as follows:

Let's take a look at the first of these, the specific advice given by Make fewer HTTP request:

Grade F on Make fewer HTTP requests

This page has 19 external Javascript scripts. Try combining them into one.

This page has 33 external background images. Try combining them with CSS sprites.

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

You can see that there are a lot of outer chain JS files on Sina's home page, which will lead to a lot of HTTP requests. Too many HTTP requests can slow down the loading speed of a web page.

Let's take a look at Sina's An entry, such as Use GET for AJAX requests, and the praise is as follows:

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE's maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

Sina actually does a good job in many articles. But there is still room for improvement.

2. Performance testing of web pages in mobile devices

Desktop browsers can easily install plug-ins to test the performance of web pages, but mobile browsers are not. If there is only one way to analyze the performance of a mobile webpage, it is to analyze its routing HTTPRequest and HTTPResponse. Niuniu can try using proxy server to read route log analysis. But now there is another option, and that is to use Blaze. It's a free mobile page performance analysis service, but it can only serve one request at a time, so it may take some time to wait, not as fast as YSlow. However, the performance analysis is still good.

The address of Blaze is http://mobitest.akamai.com/m/index.cgi.

We tested it with 3G Sina:

Enter the address of 3G Sina in the address bar, and then select the type of device later. Both device and location now have only two options. In fact, we can also develop such a web service in China.

After entering the parameters, click

Then it goes into the analysis, which may take a few minutes. The length of the wait depends on how many analysis requests are lined up in front of you. This site can only analyze one page at a time.

When the results come out, the average load time and size of the web page are briefly displayed:

You can see that 3G Sina's loading speed is acceptable even abroad, and the page size is very small.

We can take a look at further performance analysis (click to view the HAR report-HAR:HTTP Archive Report):

You can check the statistics.

Pictures still account for a large part of the page traffic. In addition, the size of the JS and the page text itself are almost the same, indicating that 3G Sina still relies heavily on js.

Now use it to try what happens when you open a normal Sina home page with a mobile device browser:

As you can see, a prompt appears on the page advising users to use the touch-screen version of Sina.

Let's look at the HAR file again and see how it does this.

You can see that the page request is first sent to a PWS server (Microsoft's personal web server), and then the request is redirected (status code 302) to another address (http://sina.cn). These are not critical. In the Request header below, user-agent gives the device on which the request was made and the type of operating system that the device is running. It can be guessed that Sina used this information to make judgments to prompt users to switch to touch-screen versions of sina.

3. Performance bottleneck of mobile device web pages

Several page statistics are analyzed, which are basically similar to the following distributions:

The performance of web pages on mobile devices is obviously affected by image files (the size of HTML and JS files is not to be underestimated). In addition, if the page contains embedded code, such as google Maps, etc., it will also load a lot of unexpected content, causing the page to slow down.

4. How to improve the performance of mobile device web pages

Improving the web performance of mobile devices should also start with pictures and embedded code blocks (google maps).

4.1 how to reduce the size of the picture to improve the access speed of the mobile device?

There are two situations:

Case 1: the picture is in CSS and the link is given in the form of background

Then you can use software such as PS to reduce the quality of the picture in order to reduce the size of the picture.

Case 2: the picture is given in the form of img tags in the HTML file.

In this case, an alternative file cannot be used. Because the picture itself may not be provided by your server, but outside the chain picture. In this case, you can improve it by using the following methods:

The original HTML snippet:

The code is as follows:

Change to:

The code is as follows:

Sencha.io Src will automatically resize the image to fit the screen of the current device, which requires you to choose a clear picture when providing the image source. How does sencha automatically reconstruct the image size according to the device? The principle is simple: store the model of many devices and the size of the screen on the server. When the browser HTTPRequest the image in the img tag, sencha can obtain the model information of the device through the user-agent attribute of the Request header, then query the corresponding screen size, and then compress the subsequent http://[DOMAIN]/[PATH]/brews_images/bensons.jpg image according to this size, and then return it to the browser.

The advantage of this is that web designers only need to provide a high-definition image, and then they don't have to worry about whether it can adapt to a variety of devices, because sencha will do the resize job for you.

The disadvantage of this is also obvious, that is, the efficiency of the image passing through the third-party server must be affected. And this is an overseas service, which will not necessarily support most domestic mobile phones. However, Chinese people can develop a similar web service to do resize for domestic pictures.

4.2 what do you do with the map on the mobile device page?

This is also very simple, which is to make a logical judgment we mentioned earlier, making the map invisible when the screen is smaller than a certain size. Such as:

The code is as follows:

@ media screen and (max-width:480px) {

/ *.. other CSS style...*/

# map {

Display:none

}

}

The same can be done with the banner with a big head!

The code is as follows:

@ media screen and (max-width:480px) {

/ *.. other CSS style...*/

# map {

Display:none

}

# banner {

Display:none

}

}

5. What are Mobile-first Responsive Web Design and Progressive Enhancement

5.1 Mobile-first Responsive Web Design

Mobile-first Responsive Web Design means "RWD techniques that start from a mobile template". That is to say, the design of RWD should start with the version of mobile and slowly increase complexity.

Very small screens (early nokia and blueberry phones, etc.):

Use the most basic HTML, the simplest layout, very small pictures, limited css and js

Small screens (smartphone: iphone, etc.):

If the phone supports, you can add HTML5 features, simple layout, smaller pictures (larger than very small screen), more CSS and js

Medium screens (ipad, tablet, etc.)

As there is more space, you can consider adding optional content, such as a sidebar. You can use a multi-column layout. You can use larger pictures.

Large screens (eg desktop monitor, TV, etc.)

You can use widescreen layouts (such as three or four columns, etc.) and use large pictures. For TV users, consider optimizing navigation, because the user may be standing 10 feet away to remotely control the page.

5.2 Progressive Enhancement

Progressive Enhancement treats web design as a different layer.

The first layer is the structural content, this layer will determine the basic structure and content of the web page, if the design stays at this layer, then almost all devices can open your page.

The second and third layers are CSS and JS, and you can't guarantee that all devices support these features, but if they do, users will have a good experience.

For many years, web developers have been developing web applications on avant-garde browsers, ignoring users who use older browsers. This situation does not seem to be very serious in China, and people still take good care of old browser users. Progressive Enhancement's design philosophy is the reverse, focus on content, and then increase the user experience. In the case that the device does not support it, the accessibility of the page content can at least be guaranteed.

5.3 content-first design

Mobile-first Responsive Web Design and Progressive Enhancement are sometimes called content-first design because they both attach great importance to content and put it at the top of the list of designers. A good content-first should be well organized when the web is streaking.

The above is all the contents of the article "how to improve the performance of mobile device web pages". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.