Responsive web design (III)-web page performance of desktop and mobile devices

Preface

Because mobile devices are limited by bandwidth and processor computing speed, they have higher requirements on web page performance. What elements in a webpage have slowed down the loading speed of a webpage on a mobile device? What should these elements do to improve the overall performance of pages on mobile devices? Is there a design mode that can meet the needs of both mobile and desktop page design?

Directory:

1. Desktop Web page Performance Detection

2. Web page Performance Detection on mobile devices

3. performance bottleneck of mobile device web pages

4. How to Improve the Performance of mobile device web pages

5. What is mobile-first responsive web design and progressive enhancement?

Body

1. Desktop Web page Performance Detection

The page used by the desktop browser can be detected by a plug-in named yslow. Both Firefox and chrome have this plug-in. It is a yahoo-led project with the address: https://github.com/marcelduran/yslow/wiki

After installing yslow in chrome, let's test the Sina homepage:

(Loading webpage components ......)

After loading, an analysis result is displayed:

The score is D and 62.

Yslow has a set of standards to test the page performance. It checks the Page Based on each entry in the standard and provides rating and suggestions for the page based on the situation. For example, the Sina homepage gets the following ratings and suggestions:

Let's take a look at the first one,Make fewer HTTP RequestSpecific suggestions:

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 when CES 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.

We can see that there are many external link JS files on the Sina homepage, which leads to many HTTP requests. Too many HTTP requests will reduce the webpage loading speed.

Let's take a look at Sina's article A, such Use get for Ajax requests, The praise is:

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 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 is actually doing well in many articles. However, there is still room for improvement.

2. Web page Performance Detection on mobile devices

Desktop browsers can easily install plug-ins to detect the performance of web pages, but mobile browsers won't work. If you want to analyze the performance of a mobile webpage, you can analyze the httprequest and httpresponse when routing it. You can try to use the proxy server to read the route log analysis. But now there is another option, that is, using blze. It is a free mobile phone page Performance Analysis Service, but only one request can be served at a time, so it may take some time, not as fast as yslow. However, the performance analysis is good.

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

We use 3G Sina for testing:

Enter the 3G Sina address in the address bar, and then select the device type. Device and location both have two options. In China, you can also develop such a web service.

Enter parameters and click

The analysis will take several minutes. The length of wait depends on how many analysis requests are arranged before you ...... This website can only analyze one page at a time.

After the results are displayed, the average loading time and size of the web page are displayed:

The loading speed of 3G Sina is acceptable even outside China, and the page size is small.

Let's take a look at the further performance analysis (click to view the Har Report-har: HTTP archive report ):

You can view the statistics.

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

Now we can use it to try to use the mobile device browser to open the normal Sina homepage. What will happen:

As you can see, a prompt will appear on the page. We recommend that you use Sina, Mobile Phone Touch screen version.

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

The page request is first sent to a PWS server (Personal Web servers launched by Microsoft), And the request is redirected (Status Code 302) To another address (Http://sina.cn). These are not critical. In the request header below, the User-Agent provides the device where the request is sent and the operating system type of the device. It can be guessed that Sina uses this information for judgment to prompt users to switch to the Sina of the touch screen version.

3. performance bottleneck of mobile device web pages

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

The performance of mobile device web pages is obviously affected by image files (the size of HTML files and JS files cannot be underestimated ). In addition, if the page contains embeddedCode, Such as Google Maps, it will also load a lot of content that you expect, leading to slow web pages.

4. How to Improve the Performance of mobile device web pages

To improve the web page performance of mobile devices, you also need to start with images and embedded code blocks (Google maps.

4.1 how to reduce the image size to Improve the access speed of mobile devices?

There are two scenarios:

Scenario 1: The image is in CSS and links are given in the form of background

You can use software such as PS to reduce the image quality to reduce the image size.

Scenario 2: images are presented as IMG tags in HTML files.

In this case, you cannot use an alternative file. Because the image itself may not be provided by your server, but an external link image. In this case, you can use the following method for improvement:

Original HTML code snippet:

 
<IMGSRC= "Brews_images/bensons.jpg">
 

Changed:

 
<IMGSRC="Http://src.sencha.io/Http: // [domain]/[path]/brews_images/bensons.jpg">
 

Sencha. Io SRC automatically reconstructs the image size to adapt to the screen of the current device. This requires you to select clear images whenever possible when providing the image source. How does sencha automatically reconstruct the image size based on the device? The principle is simple, that is, the model and screen size of many devices are stored on the server. When the browser makes httprequest for the image in the IMG label, sencha can obtain the model information of the device through the User-Agent attribute in the request header, and then query the corresponding screen size, then, according to this sizeHttp: // [domain]/[path]/brews_images/bensons.jpgCompress the image 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 do not need to worry about whether it can adapt to various devices, because sencha will do this resize for you.

The disadvantage of doing so is obvious, that is, the efficiency of images passing through a third-party server is definitely affected. In addition, this is a foreign service and may not necessarily support most domestic mobile phones in China. However, Chinese people can develop a similar web service to resize domestic images.

4.2 How do I deal with maps on mobile device pages?

This is also very simple, that is, to make a logic judgment we mentioned earlier, when the screen is smaller than a certain size, the map is set to invisible. For example:

@ Media screen and (max-width: 480px){/*... Other CSS style...*/# Map {display:None;}}
 

You can also handle the huge banner in the webpage header!

 
@ 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 ". That is to say, the RWD design should start with the mobile version and gradually increase complexity.

Very small screens (Nokia and blueberry mobile phones long ago):

Use the most basic HTML, the simplest layout, small images, limited CSS and JS

Small screens(Smartphones: iPhone, etc.):

If supported by mobile phones, you can add HTML5 features, simple layout, and small images (Larger than very small screen), More CSS and JS

Medium screens(IPad, tablet, etc.)

With more space, you can consider adding optional content, such as the sidebar. You can use multi-column layout. Large images can be used.

Large screens(Such as desktop monitors and TVs)

You can use a wide screen layout (such as three or four columns) and large images. For TV users, you should consider optimizing navigation, because the user may be standing on a remote control page outside 10 feet.

5.2 progressive enhancement

Progressive enhancement regards web design as different layers.

The first layer is the structure content, which determines the basic structure and content of the webpage. If the design stays on this layer, almost all devices can open your page.

The second and third layers are CSS and JS. You cannot guarantee that all devices support these features. However, if they are supported, users will enjoy a good experience.

For many years, Web developers have developed web applications on cutting-edge browsers, ignoring users who use older browsers. (This situation does not seem to be very serious in China. We still take care of old browser users.). The design concept of progressive enhancement is to emphasize the content and then increase the user experience. If the device does not support it, at least the page content accessibility can be ensured.

5.3 content-first design

Mobile-first responsive web design and progressive enhancement are sometimes calledContent-first designThis is because they all attach great importance to the importance of content and place it first in design. A goodContent-firstThe information organization should be well organized when the web page is streaking.

Summary:

to Improve the Performance of mobile Web pages, we need to make improvements in many aspects. First, our design philosophy should focus on Content Selection and organization. Secondly, we should try our best to avoid factors that will reduce the page loading speed (for example, excessive HTTP requests). We should also try our best to avoid and optimize the problems (slice reduction and map hiding ). Finally, the most important thing is the designer's consciousness. The pursuit of beautiful and dazzling design does not bring the best user experience to users. The best user experience should be based on the response speed and the improvement of speed.