[Go] Responsive web Design Learning (3)-How to improve the performance of mobile device pages

Original address: http://www.jb51.net/web/70362.html

Objective

Because of the limitation of bandwidth and processor speed, mobile devices have higher requirements for the performance of Web pages. What elements of the Web page pull down the speed at which the page is loaded in the mobile device? What should these elements do to improve the overall performance of the page on the mobile device? Is there a design pattern that can meet both mobile and desktop page designs?

This article directory:

1. Performance testing of desktop Web pages

2. Performance detection of Web pages in mobile devices

3. Performance bottleneck of mobile device webpage

4, how to improve the performance of mobile device Web page

5. What is Mobile-first responsive Web design and progressive enhancement

Body

1. Performance testing of desktop Web pages

The page used by the desktop browser can be detected using a plugin called YSlow. This plugin is available on both Firefox and Chrome. It is a Yahoo-led project, the address is: Https://github.com/marcelduran/yslow/wiki

After installing YSlow in chrome, we'll open the Sina home page and test it out:

( loading page Components ...) ）

After loading, an analysis result will come out:

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

YSlow has a set of standards to test the performance of the page, it will be based on each of the standards to detect the page, and according to the circumstances of the page to give ratings and recommendations. such as Sina's homepage received the ratings and recommendations are:

Let's take a look at the first of these, make fewer the specific recommendations given by theHTTP request :

Grade F on make fewer HTTP requests

This page has external Javascript scripts. Try combining them into one.
This page has a external background images. Try combining them with CSS sprites.

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

Can see the Sina homepage of the chain JS file a lot, which will lead to a lot of HTTP requests. Excessive HTTP requests can slow down the loading of web pages.

Let's take a look at Sina's access to a, such as the use of get for AJAX requests, get the compliment is:

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

Sina is actually doing very well in many strips. But there is room for improvement.

2. Performance detection of Web pages in mobile devices

Desktop browsers can easily install plug-ins to detect the performance of Web pages, but the browser on the mobile side is out of the way. There is only one way to analyze the performance of a mobile webpage, which is to analyze the HttpRequest and HttpResponse when it is routed. Daniel can try using Proxy server to read the route log analysis. But now there is another option, which is to use blaze. It is a free mobile page performance Analysis Service, but can only serve one request at a time, so it may take some time to wait, not as fast as YSlow. But the resulting performance analysis is good.

Blaze's address is http://mobitest.akamai.com/m/index.cgi.

We use 3g Sina to do the testing:

Enter the address of the 3g Sina in the Address bar, then select the type of device later. Device and location now have only two options. In fact, we can also develop a Web service like this.

Enter a good parameter and then click

It then goes into the analysis, which can take a few minutes. The length of the wait depends on how many analysis requests you have in front of you ... This site can only parse one page at a time.

When the results come out, the average load time and size of the Web page is displayed in summary:

You can see that 3g Sina even outside the loading speed is acceptable, and the page size is very small.

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

Can look at the statistics

The picture still accounts for a large portion of the page traffic. In addition, JS and the size of the page text itself is almost the same, indicating that 3g Sina is still very much rely on JS.

Now use it again to try the mobile device browser to open the normal Sina homepage what will happen:

As you can see, a prompt appears on the page that advises users to use the phone's touch-screen version of Sina.

Let's take a look at the Har file and see how it does it.

You can see that the page request was sent to a PWS server ( the Microsoft-launched Personal Web server ) and the request was redirected ( status Code 302) to another address (http://sina.cn). These are not the keys, as seen in the request header below, User-agent gives the device on which the request was made and the type of operating system the device is running on. It can be assumed that Sina is using this information to make judgments, to prompt users to switch to the touch screen version of the Sina.

3. Performance bottleneck of mobile device webpage

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

The performance of the mobile device webpage is obviously affected by the picture file (the size of the HTML file and the JS file is also not to be underestimated). In addition, if the page contains embedded code, such as Google Maps, it will also load a lot of extra content that you expect to slow down the page.

4, how to improve the performance of mobile device Web page

Improving the performance of your mobile device's Web page also starts with images and embedded code blocks (Google Maps).

4.1 How do I reduce the size of my pictures to improve the speed of my mobile device?

There are two types of situations:

Situation one: The picture is in the CSS, give the link in the form of background

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

Scenario Two: The image is given as an IMG tag in the HTML file

In this case, you cannot use the alternative file method. Because the picture itself may not be provided by your server, but the external chain of pictures. For this scenario, you can use the following methods to improve:

The original HTML code snippet:

Copy CodeThe code is as follows:

Switch

Copy CodeThe code is as follows:

Sencha.io src automatically reconstructs the size of the image to fit the screen of the current device, which requires you to choose a clear picture when providing the source of the image. How does Sencha automatically reconstruct the image size based on the device? The principle is simple, is to store many devices on the server model and screen size. When the browser HttpRequest the image in this img tag, Sencha can get the model information of the device by using the User-agent property of the request header, then query to its corresponding screen size, then according to the size of the following Http://[domain]/[path]/brews_images/bensons.jpg the image for size compression, and then returns it to the browser.

The advantage of this is that the Web designer only needs to provide a high-definition picture, and then there is no need to worry about whether it can adapt to various devices, because Sencha will do this resize job for you.

The disadvantage of this is also obvious, that is, the image through the third-party server, the efficiency will certainly be affected. And this is the overseas service, not necessarily will support domestic most domestic handset. But people can develop a similar web service to do resize for domestic pictures.

4.2 How do I handle a map in a mobile device page?

This is also very simple, is to do a logical judgment we mentioned before, when the screen is smaller than a certain size, the map is set to invisible. Such as:

Copy CodeThe code is as follows:
@media screen and (max-width:480px) {
/*.. Other CSS style...*/
#map {
Display:none;
}
}

The same can be done with the Web page head big banner!

Copy CodeThe code is as follows:
@media screen and (max-width:480px) {
/*.. Other CSS style...*/
#map {
Display:none;
}
#banner {
Display:none;
}
}

5. What is 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". This means that RWD should be designed from the mobile version, slowly adding complexity.

Very Small Screens ( earlier 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. ):

You can add HTML5 features, simple layouts, smaller images ( larger than very small screen), more CSS, and JS if your phone supports it.

Medium Screens(ipad, tablet, etc. )

Because there is more space, you can consider adding optional content, such as sidebar or something. You can use multi-column layouts. You can use a larger picture.

Large screens( e.g. desktop display, TV, etc. )

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

5.2 Progressive Enhancement

Progressive enhancement The web design as a different level.

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

The second and third tiers are CSS and JS, and you cannot guarantee that all devices support these features, but if supported, then the user will have a good experience.

For many years, Web developers have developed web apps on avant-garde browsers, ignoring users who use older browsers. ( this situation seems to be not very serious in the country, people still take care of the old browser users ). Progressive Enhancement's design philosophy is to reverse, focus on the content, and then add the user experience to the top. At a minimum, the accessibility of the page content can be guaranteed without the device being supported.

5.3 Content-first Design

Mobile-first Responsive Web design and progressive enhancement are sometimes referred to as Content-first designbecause they all value the importance of content, and ranked it in the first place in the design. A good Content-first should be organized in the context of a bare-headed Web page.

Summarize:

The need for a mobile Web page to have good performance needs to be improved in many ways. The first is our design concept, should pay attention to the content selection and organization arrangement. Second, the factors that will slow down page loading can be avoided as much as possible (such as excessive HTTP requests), and they cannot be avoided and optimized as much as possible (slice shrinking and map hiding). Finally, the most important thing is the designer's consciousness. The pursuit of beautiful, dazzling design does not provide users with the best user experience. The best user experience should be based on the speed of response, on the basis of guaranteed speed to talk about landscaping.

[Go] Responsive web Design Learning (3)-How to improve the performance of mobile device pages