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

This article mainly introduces "how to improve the performance of mobile Web". In daily operation, I believe many people have doubts about how to improve the performance of mobile Web. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to improve the performance of mobile Web"! Next, please follow the editor to study!

Make your web page and Apps more suitable for mobile device access

1. Provides a significant mobile portal on desktop applications

If you have a website with a lot of images, when you develop a mobile version of it, do you still want mobile users to continue to use the original desktop version? Be sure to let users know that there is still a mobile version of your site.

two。 Mobile URL should follow the idiom and promote it.

Although there is no requirement for you to set the address of the mobile version of the original desktop service, here are some address design conventions to refer to: M. yoursite.com mobile.yoursite.com or yoursite.com/mobile. Select a simple mobile URL and post it on the original desktop site.

3. Design a user interface suitable for mobile devices

Try to avoid letting users enter too much information. Provide more click functions. The URL is designed to be as short as possible to facilitate user input. Select the appropriate UI components and functions so that your application can be easily displayed and operated on a small screen. Think more about the user's access scenario-- maybe not sitting comfortably in a chair, so try to make it possible for users to find the information they want quickly. Make sure your message is clear and concise.

Gmail provides a mobile version that is more in line with the way mobile devices access.

4. Make your website suitable for all kinds of mobile browsers

There are full-featured (Mobile Safari, Android, etc.), semi-functional (BlackBerry), and low-functional (old flip phones) browsers. Think about how to make your mobile web page display on both a 150 x 128 pixel screen and a 640 x 480 pixel screen. Mobile browser standards vary from country to country. If your users are from different countries, make sure your design meets the equipment standards of those countries.

Reduce request and data transmission

To reduce latency, your website or application should try to avoid sending requests to the server. In TCP and socket mechanisms, the transmission speed of one request from big data is faster than that of multiple requests for small data. This is particularly important in mobile development.

Use CSS Sprite to process your pictures, or convert your pictures to data URI scheme. You can refer to the logo icon on the Google Search search results page, which uses CSS sprite. Some of Google's services, such as Wave, solidify static requests by using data URI scheme to inline static data in web pages. (data URI technology cannot be used on older browsers. It is designed for web pages and applications on iPhone,Android and other mobile web browsers.)

If your image contains a string of base64, some data may be lost during compression (images in this format must be compressed using gzip compression). But even so, try not to create a new connection or send a new HTTP request.

If your application contains a CSS file, it also needs to import some other resources; if it contains a JavaScript file, you also need to download some additional code to put all the information that your web page needs to download into one file. Putting your request in a file will speed up your application.

1. Simplify the code

The less code, the smaller the data transferred, the faster your web page will open. Reducing the amount of data transferred is not as effective as reducing the number of communications. For high-latency mobile connections, each bit reduction will help increase your application loading speed. Take a look at an article about HTML optional tags and CSS optimization.

two。 Avoid redirection

Sometimes Web pages and Web services redirect a request multiple times. If your service needs to redirect requests, try to handle them on the server side, not on the client side, and minimize the number of network interactions on the client side.

3. Pre-consider and lengthen the content download process

Transfer data only when needed, and download data as early as possible. Don't download pictures that users can't see at all. Time-to-text is very important on mobile devices. If your device is displaying a set of images, consider downloading the images before and after it to speed up UI, but don't download pictures too far apart.

Take a look at the introduction to Web Performance Best Practices in Page Speed.

Take full advantage of the new features of HTML

1. Using Appilcation Cache in mobile applications

HTML5 browsers (Mobile Safari, Android) can reduce page startup time and allow users to access them offline by using Application Cache.

two。 If possible, try to use CSS3 instead of pictures

HTML5 browsers that support CSS3 can use a variety of rich properties, such as rounded corners, gradients, shadows, text conversion, canvas, and so on. Using CSS instead of images to decorate your page can reduce the overhead of data transmission.

The new APIs provided by HTML5 has been used on Google's mobile Apps. For example, Mobile Gmail uses Application Cache. Mobile Google Search uses HTML5 Geolocation API to display the location results of the search. Both Google Maps for Mobile and Mobile Gmai use the canvas flag to avoid image transmission.

Check out articles about HTML 5 and Mobile web App.

3. Take into account the running environment on the configuration device

If you want more users to access your web page or app, you must make sure that your application is compatible on a variety of devices. Concise code not only makes your application more responsive, but also usually makes your application more compatible.

At this point, the study on "how to improve the performance of Mobile Web" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.