Responsive Web Design Learning (3) - How to improve the performance of web pages on mobile devices

Preface

Mobile devices have higher requirements for web page performance due to the limitations of bandwidth and processor speed. What elements on a web page slow down the loading speed of the web page on mobile devices? What should be done with these elements to improve the overall performance of the page on mobile devices? Is there a design pattern that can satisfy both mobile and desktop page design?

Contents of this article:

1. Desktop web page performance test

2. Performance testing of web pages on mobile devices

3. Performance bottlenecks of mobile device web pages

4. How to improve the performance of web pages on mobile devices

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

text

1. Desktop web page performance test

Pages used by desktop browsers can be detected using a plug-in called Yslow. This plugin is available for both Firefox and Chrome. It is a project led by Yahoo, the address is: https://github.com/marcelduran/yslow/wiki

After installing YSlow in Chrome, we open the homepage of Sina to test it:

( Loading web components... )

After loading, an analysis result will appear:

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

YSlow has a set of standards for testing page performance. It will detect the web page according to each of the standards and give a rating and suggestions based on the situation. For example, the ratings and recommendations on Sina's homepage are:

Let's look at the first one, Make fewer HTTP requests, which gives specific suggestions:

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.

It can be seen that there are many external link JS files on the Sina homepage, which will result in many HTTP requests. Too many HTTP requests will slow down the loading speed of web pages.

Let’s look at the items where Sina got an A, for example   Use GET for AJAX requests , and the compliments are:

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

2. Performance testing of web pages on mobile devices

Desktop browsers can easily install plug-ins to detect the performance of web pages, but mobile browsers cannot do so. If you want to analyze the performance of a mobile webpage, there is only one way, that is to analyze the HTTPRequest and HTTPResponse when it is routed. Experts can try using a proxy server to read route log analysis. But now there is another option, that is to use Blaze. It is a free mobile page performance analysis service, but it can only serve one request at a time, so you may need to wait for some time, not as fast as YSlow. Still, the performance analysis is good.

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

We use 3g sina to do the test:

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

After entering the parameters, click

It will then begin analyzing, a process that may take several minutes. The length of the wait depends on how many analysis requests are queued ahead of you... This site can only analyze one page at a time.

When the results come out, a summary of the average loading time and size of this web page will be displayed:

It can be seen that the loading speed of 3G Sina is acceptable even outside the country, and the page size is very small.

Let’s take a look at a more in-depth performance analysis (click to view the HAR report - HAR: HTTP Archive Report):

You can check the statistics

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

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

As you can see, a prompt will appear on the page, suggesting that users use the touch-screen version of Sina on their mobile phones.

Let's take a look at the HAR file to see how it does this.

It can be seen that the page request is first sent to a PWS server ( a personal web server launched by Microsoft ), and then the request is redirected ( status code 302 ) to another address ( http://sina.cn ). These are not the key points. In the Request header below, user-agent gives the device where the request is made and the type of operating system running on the device. It can be guessed that Sina used this information to make a judgment and prompt users to switch to the touch-screen version of Sina.

3. Performance bottlenecks of mobile device web pages

After analyzing several page statistics, they 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 should not be underestimated). In addition, if the page contains embedded code, such as Google Maps, it will load a lot of unexpected content, causing the web page to slow down.

4. How to improve the performance of web pages on mobile devices

Improving web page performance on mobile devices also starts with images and embedded code blocks (Google Maps).

4.1 How to reduce the size of images to improve access speed on mobile devices?

There are two situations:

Case 1: The image is in CSS and is linked as background

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

Case 2: The image is given as an img tag in the HTML file

In this case, the alternative file method cannot be used. Because the image itself may not be provided by your server, but an external link image. For this situation, you can use the following methods to improve it:

Original HTML code snippet:

The advantage of this is that web designers only need to provide a high-definition picture, and then they don’t need to worry about whether it can adapt to various devices, because Sencha will do the resizing work for you.

The disadvantage of doing this is also obvious, that is, the image passes through a third-party server, which will definitely affect the efficiency. Furthermore, this is an overseas service and may not support most domestically produced mobile phones in China. However, Chinese people can develop a similar web service to resize domestic pictures.

4.2 How to handle maps on mobile device pages?

This is also very simple. It is to make a logical judgment as we mentioned before. When the screen is smaller than a certain size, the map is set to invisible. like:

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 from the mobile version and gradually increase the complexity upwards.

Very small screens ( early Nokia and Blueberry phones, etc. ):

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

Small screens ( smartphones: iPhone, etc. ):

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

Medium screens ( ipad, tablet, etc. )

Since you have more space, you can consider adding optional content, such as a sidebar. A multi-column layout is available. Larger images may be used.

Large screens ( such as desktop monitors, TVs, etc. )

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

5.2 Progressive Enhancement

Progressive Enhancement views web design as different levels.

The first layer is structural content. This layer will determine the basic structure and content of the web page. If the design stays at 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, but if they do, users will have a good experience.

For many years, web developers have been developing web applications for cutting-edge browsers and ignoring users of older browsers. ( This situation does not seem to be very serious in China, and everyone still takes good care of users of old browsers ). The design concept of Progressive Enhancement is the opposite, focusing on content and then improving user experience. In the case that the device does not support it, at least the accessibility of the page content can be guaranteed.

5.3 Content-first design

Mobile-first Responsive Web Design and Progressive Enhancement are sometimes referred to as content-first design because they both place great importance on content and put it first in the design. A good content-first page should have information organized in an orderly manner even if the web page is naked.

Summarize:

To achieve good performance on mobile web pages, many aspects need to be improved. First of all, our design philosophy should focus on the selection and organization of content. Secondly, factors that slow down page loading speed should be avoided as much as possible (such as too many http requests), and those that cannot be avoided should be optimized as much as possible (such as image reduction and map hiding). Finally, the most important thing is the designer's awareness. The pursuit of beautiful and dazzling design does not bring the best user experience to users. The best user experience should be based on response speed, and only when speed is guaranteed can beautification be discussed.