How To Make Your Websites Faster On Mobile Devices

Download Speeds For Mobile Users

244 KB/s on average for 3G users (0.24 MB/s),
756 KB/s on average for 4G users (0.76 MB/s).

If you multiply that by the 4 seconds that mobile users are expecting to wait, this means the website could be a maximum of 1 MB for 3G users and 3 MB for 4G users.

However, download speed is not the bottleneck. The bottleneck is the network latency, smartphone’s memory and CPU. Even if the phone can download 1 MB in 4 seconds, the website will take longer to load because the phone needs to receive and process the code and images.

On a desktop, only 20% of the time it takes to display a Web page comes from downloading files. The rest of the time is spent processing HTTP requests and loading style sheets, script files and images. It takes even longer on a smartphone because its CPU, memory and cache size are much smaller than a desktop’s.

How To Minimize Loading Time

Having a fast website is all about making the hard decisions and getting rid of what’s not at the core of your experience. If it doesn’t add a lot of value, remove it. This is true for all phases of the development process, but especially so for planning and coding.

• Reduce Dependencies

  Fewer files to download means fewer HTTP requests and faster loading times.

• Reduce Image Dimensions

  On top of the extra download time, precious processing power and memory are used to resize high-resolution images.

• Reduce Client-Side Processing

  Rethinking the use of JavaScript and keeping it to a minimum are best.

How To Reduce Dependencies

Load Images Through CSS

If you want to hide content images from mobile users, relying on display: none or visibility: hidden won’t prevent them from being downloaded. We tested the following code:

<div style="display:none;">
   <img src="logo-none.png" />
</div>

<div style="visibility:hidden;">
   <img src="logo-hidden.png" />
</div>

You can see in the two waterfall charts below how content images set to display: none or visibility: hidden are still downloaded.

Instead, load them as background images in CSS, and use media queries to conditionally hide them. The basis for this technique was originally tested by Jason Grigsby and expanded upon by Tim Kadlec. A variant is used on Amazon’s separate mobile pages to conditionally load device-specific images.

<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>

这样做只有在符合media query时才加载相应的图片，否则不会加载。

Keep External Style Sheets To A Minimum

If you’ve been using separate style sheets for each break point, you may want to rethink this. 像这样的代码：

<link href="extra-small.css" rel="stylesheet" media="screen and (max-width: 390px)" />
<link href="small.css" rel="stylesheet" media="screen and (min-width: 391px) and (max-width: 500px)" />
<link href="medium.css" rel="stylesheet" media="screen and (min-width: 501px) and (max-width: 767px)" />
<link href="large.css" rel="stylesheet" media="screen and (min-width: 768px)" />

经过测试发现，它们都被加载了，并且因为被分成四份，HTTP请求数也比合并成一份css多。或者你可以通过服务端的函数去根据设备动态地插入正确的样式表。

还有一种方法就是使用行内样式。

Amazon’s separate mobile product pages have one external 6 KB style sheet, along with some inline styles. This results in a single additional HTTP request to download all page styles. Amazon’s desktop version isn’t as efficient, with nine external style sheets, totalling 40 KB combined.

CSS3 Instead Of Images

Rounded corners, drop shadows, gradient fills, and so on — these styling features can be used instead of images, reducing the number of HTTP requests and speeding up loading time.

Although CSS3 can reduce HTTP requests, it adds to the processing load. We created a series of simple HTML files, each containing one basic CSS3 styling feature. You can see from the chart below that the effect on loading time is minimal but should still be considered. Notice how the box-shadow effect has the biggest impact on loading time.

Loading times for CSS3 styling features on an iPhone 4, iOS 5.0.

Data URI Instead of Images or Web Font Files

Inline Scalable Vector Graphics (SVG) Instead of Images

Image Sprites

Font Icons

Font icons are fonts consisting of symbols and glyphs (like Wingdings or Webdings), and can be used instead of loading an image file.

Avoid Inline Frames

Code for Mobile-First

Here’s an example of coding for desktop first:

<style>
.image {
   background-image: url(image1.jpg);
}

@media (max-width:390px) {
   .image {
      display: none;
   }
}
</style>

<div class="image"></div>

Here’s an example of coding for mobile first:

<style>
@media (min-width:391px) {
   .image {
      background-image: url(image1.jpg);
   }
}
</style>

<div class="image"></div>

By default, the image isn’t displayed, while wider screens are progressively enhanced using a media query.

Split Content Onto Multiple Pages (Separate Mobile Websites)

还有很多，来自：How To Make Your Websites Faster On Mobile Devices