How to increase the speed at which the website is opened on the mobile side

Originally from: http://www.studyofnet.com/news/173.html

This article reading : "Mobile network" is a very vague concept, 2g 3g WiFi is a mobile network, but the network features and corresponding optimization methods are still some differences. For mobile, perhaps the most important concern is the speed of access in a mobile network environment. The focus is on reducing network traffic and interactions, and leveraging the local cache.

Most people are disappointed with the browsing experience on the mobile side, and they spend more time on their smartphones when the experience improves. Because 64% of smartphone users want the site to load within 4 seconds, half of the site spends more than twice times as much as 9 seconds. Here's a quick introduction to some of the techniques you can make your website run faster on the move.

However, the download speed is not a bottleneck, network latency and the memory and CPU of the intelligent machine is the bottleneck. Even if the phone can download 1mb within 4 seconds, the page will take longer to load, because the phone needs to receive and parse the code and images.

On the desktop side, download files account for only 20% of the time of the display site, while the rest of the time is spent parsing HTTP requests, getting stylesheets, script files, and images. Because the CPU on the mobile side, the memory and the cache and the desktop side is completely unable to compare, these on the phone will take longer time.

How to reduce load time

• Fewer dependent files : Fewer files mean fewer HTTP requests and faster load times

• Reduce image size : Adapt and adjust high-resolution images, occupy the top spot in additional download times, and take up valuable memory and processing resources.

• Offload the client : The best practice is to rethink your JavaScript and reduce it to the smallest size

How to reduce dependent files

If you want to hide the picture for the mobile user, it display:none visibility：hidden is not possible to prevent the file from downloading. Test the following code:

<div style= "Display:none;" > </div> <div style= "Visibility:hidden;" > </div>

You can observe the waterfall chart below, the picture container settings display: none or the visibility: hidden post will still be downloaded.

The alternative is to use the CSS to load the background image, and then use media query to hide the image by using a conditional view. This technique was first tested by Jason Grigsby and then further expanded by Tim Kandlec. Amazon's standalone mobile page uses this technology to load specific images based on device conditions.

<meta name= "viewport" content= "Width=device-width" > <style> @media (max-width:600px) {. image {        Display:none;        }} @media (min-width:601px) {. Image {Background-image:url (image1.jpg); }} </style><div class= "image" ></div>

You can see that the picture does not load the waterfall diagram:

Keep the minimum number of external style sheets

You need to combine these files in a file to reduce the HTTP request. Alternatively, you can automatically insert a style sheet by judging the device by using backend processing.

Another scenario can use an internal style. The Amazon standalone Mobile product page has an external style sheet of 6 KB size, along with some internal styles. This only requires an additional HTTP request to download all the page styles.

Sprites chart

Sprites (Sprite) technology reduces HTTP requests by making images that are often used together as a single image. For example, when you synthesize four images into a sprite, the HTTP request is reduced from 4 to 1. The picture that needs to be displayed is background-position controlled by attributes.

Avoid inline iframe

Each inline framework (IFRAME) generates an HTTP request, which is not otherwise dependent on resources within the IFRAME. This is where we do a quick test to compare an IFrame containing only text.

To ensure that the Web site is loaded quickly, it is best not to use an IFRAME.

Split to multiple pages (separate mobile site)

Keep your core content on the page, and then provide links to secondary content to secondary content. This will reduce the load burden on the HTML while preventing the associated resources from being downloaded.

Amazon's mobile product pages have generic product information, while providing links to "user reviews", "descriptions and details" and "new & use offers."

This reduces the HTTP request for three images, and the size of the HTML is reduced by one KB.

Keep a minimum of redirects (separate mobile sites)

Amazon has a redirect to guide visitors to a separate mobile page, which brings a delay of 0.4 seconds. In contrast, Dell's Web site has two redirects, resulting in a 1.2-second delay.

How to reduce image size: responsive picture

The idea of a responsive picture is to let the visitor image download only those pictures that are most suitable for their device, and for smartphones, use low-resolution images to quickly download and render.

Amazon's standalone mobile product page uses responsive image technology to allocate a specific background image to a div using media queries. This is the Amazon code:

HTML Code Replication

<style>     @media   (max-width:390px)  {}{          #image-container {             max-width: 109px;        }         .image {}{             Background-image: url (image1);         }    }      @media   (max-width:390px)  and  (-webkit-min-device-pixel-ratio:1.5)   {}{        .image {             background-image: url (Image2);         }    }     @media   (max-width:390px)  and  (- Webkit-min-device-pixel-ratio:2)  {}{        .image {             background-image: url (image3);         }     }     @media   (min-width:391px)  and  (max-width:500px)  {}{         #image-container {             max-width: 121px;         }        .image {}{             background-image: url (image4);         }    }     @media   (min-width:391px)  and  ( max-width:500px)  and  (-webkit-min-device-pixel-ratio:1.5)  {}{         .image {&Nbsp;           background-image: url (IMAGE5);         }    }     @media   (min-width:391px)  and  (max-width:500px)  and  (-webkit-min-device-pixel-ratio:2)  {}{         .image {             background-image: url (image6);         }     }     @media   (min-width: 501px)  and  (max-width: &NBSP;767PX)  {}{         #image-container {             max-width: 182px;         }        .image {}{         &nbsP;   background-image: url (IMAGE5);        }     }     @media   (min-width: 501px)  and  (max-width:  767PX)  and  (-webkit-min-device-pixel-ratio:1.5)  {}{         .image {            background-image:  url (Image7);        }    }      @media   (min-width: 501px)  and  (max-width: 767px)  and  (- Webkit-min-device-pixel-ratio:2)  {}{        .image {             background-image: url (Image8);         }    }     @media   ( MIN-WIDTH:768PX)  {}{         #image-container {             max-width: 303px;        }         .image {}{             background-image: url (Image8);        }     }     @media   (min-width:768px)  and  (- webkit-min-device-pixel-ratio:1.5)  {}{        .image {             background-image: url (Image8);         }    }     @media   ( min-width:768px)  and  (-webkit-min-device-pixel-ratio:2)  {}{         .image {    &nbsP;       background-image: url (Image8);         }    }</style><div id= "Image-container" >     <div class= "image" >            </div></div>

To minimize JavaScript

Starbucks ' responsive website after disabling JavaScript under Chrome, it took 3.53 seconds to load the desktop-side network environment, and JavaScript was enabled to take 4.73 seconds to increase by 34%. The effect of JavaScript on load time, the smaller memory on the mobile side, the CPU and cache will appear more obvious. Usually, we want to rethink the use of JavaScript and keep it in the smallest size.

A good example is the JavaScript of the BBC Mobile website. The Web site does not use external JavaScript files--all inline. inline scripting is limited to a few lines and does not significantly affect memory, and HTML files and all inline JavaScript take 0.78 seconds to load. Like the BBC, Amazon's mobile product pages do not have external JavaScript files, and the fewest inline scripts are used. HTML files and all inline JavaScript take 0.75 seconds to load.

(Note that jquery is not a lightweight alternative, it's actually a complement to jquery itself.) Both sites are loaded in 4 seconds under iphone 4. Before using a JavaScript framework, consider whether it is really necessary. In some cases, it is more efficient to use a small amount of javascript than to invoke a frame.

Avoid components

The impact of the component on the actual load time is catastrophic.

Server-side (back-end) technology

In addition to optimizing the front end, server-side technology can also be used to speed up load times. These technologies are worth considering:

• Caching HTTP redirection to speed up duplicate access;

• Merge HTTP redirect chains to reduce redirects;

• Use HTTP compression to reduce the number of bytes (gzip or shrink).

Test performance on a mobile device

Because of the unpredictable nature of mobile devices, it is important to test performance on multiple devices. Here are some free performance testing tools:

• Mobitest,akamai: You can generate waterfall and har files for IOS 5.0,iphone 3 G and Nexus S on IPhone 4. Note The Nexus S test results are inconsistent with our own internal tests. Our server access logs show when we test the actual Android 2. The x device produces fewer HTTP requests.

• "Network panel," Chrome Developer Tools

Conclusion

To meet the high expectations of mobile users, you need to optimize your site for mobile devices and load them in 4 seconds or less. The best way to achieve this magic time of 4 seconds is to keep the minimum processing load on your smartphone by reducing JavaScript and optimizing HTML, CSS and images.

How to increase the speed at which the website is opened on the mobile side (GO)