According to surveys in the United States 31 percent of mobile Internet users say their mobile phone is the primary way they access the Internet.
Although the performance of mobile devices is growing all the time, mobile device is just a mobile device and everything on it is a tradeoff between its capabilities and power:

  • They are powered by batteries and it limits the amount of usable performance in mobile devices.
  • CPU, memory and cache size are much smaller than a desktop’s. So receipt and processing of code and images will take longer.
  • Internet connection: differences between the network conditions of a desktop’s cable modem connection and cell connection are significant.

Why is so important fast website performance

  • A recent study found that most users are disappointed with the web browsing on mobile devices but will use them more if the browsing experience improved. If your site is slow, you risk to lose a lot visitors: according to estimates the optimal time of website loading should not exceed 4 seconds, after that user likely will close website.
  • The use cases of mobile websites are often differ from those of the desktop: some information is needed immediately to resolve something affecting you in the real world and other information is not needed or should be shown another way.
  • The capabilities of mobile devices are far behind the desktop. So site loading on mobile device must be more optimized.
  • Google will soon start using performance as a factor in ranking search results for mobile websites.

Problem of responsive web design performance

Our statistics of newest responsive WordPress themes, received using PageSpeed ​​Insights, shows:

  1. Despite the fact the websites change their look when loaded on a small screen, they are still downloading the full (or even more – especially for mobile resolution) website content.
  2. Load time is not dependent on the resolution – it’ the same
  3. The number of requests and the amount of bytes are almost identical for most tested themes.
  4. For mobile resolution additional CSS is downloaded: Media queries don’t prevent CSS downloads because it can be used by JavaScript.
  5. Simplicity of site version on mobile device isn’t reflected in DOM

And as result websites on mobile devices are extremely slow.

The main  Causes of Slow Website Performance

1. Content Served Without HTTP Compression

How to correct

Enable HTTP compression on webserver: it will significantly reduce the size of the downloaded page and improving load time.

2. Too Many HTTP Requests

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

How to correct

CSS and JavaScript

Combine multiple script files into one and include the contents of subsequent .css files into one combined stylesheet or dynamically insert the correct style sheet based on the device resolution.

Images
  • combine background images with sprites;
  • use CSS3 styling features instead of image files (for example for background colors, borders, buttons, hover effects and styled text);
  • for smaller images use technique “data URIs” (embed images directly into HTML and stylesheet) and Inline Scalable Vector Graphics (SVG).
Inline Frames

Each iframe by itself results in one more HTTP request, in addition to any dependencies within the iframe. To keep the website fast, it’s best not to use them.

HTTP redirects

Additional HTTP redirects can add one or two extra network roundtrips, so keep redirects to a minimum.

Lazy Load Content

Don’t make requests until necessary.

3. Minimal Client-side Processing

Pushing all the work to server instead of to leverage the capabilities of the client.

How to correct

  • use JavaScript and CSS for data visualization and validation;
  • use Ajax techniques that allows change parts of the page  in response to user actions without reloading the whole page.

4. Third-party Widgets

Third-party widgets can have a catastrophic impact on loading time.

How to correct

  • use only those widgets that are really needed;
  • if possible use widgets that provide asynchronous implementations. Some popular scripts (such as Facebook, Twitter, Google Analitics) support asynchronous script loading by default.

5. Too Many Bytes Download – too heavy pages

There are several reasons:

Downloading unused data (especially images)

Responsive websites usually return to any client a single HTML which contains or references all that’s needed to provide page display on the biggest resolution. On a smaller screen sections that shouldn’t be shown are often hidden using the “display:none” or “visibility: hidden” style properties. But it does not prevent the loading of resources referenced in a hidden part. As a result, the browser will download all the resources.

Unoptimized Images

Sizes of images downloading for all resolutions are the same and as in the first case their size is matched for display on the biggest screen. Images are only shrinked to suit small screens (and it is not only size problem – browser resizing is CPU and memory intensive).

How to correct

  • Code for Mobile-First
  • Use “lossless” optimization – reduce size of images without visual impact to your user – save images in optimal for web quality and to an appropriate format, use image compression.
  • Use Responsive Images – serve lower resolution images to smaller screens (see such techniques as Adaptive Images, HiSRC, Sencha.IO).
  • Keep CSS background images in scoped media queries to avoid downloading pictures intended for the other resolution.
  • Use Font Icons (such as Awesome Font) instead of loading an image files. Moreover there are tools such as IcoMoon  allowing to build custom font from SVG files.
  • Conditionally load JavaScript and even HTML fragments based on screen size and capabilities.
  • JavaScript and CSS refactoring and minification (deleting unnecessary bytes – line breaks, indentations, spaces).

The best perfomance tested WP themes

100   100
5 errors

98   98
HTML valid!

94   80
HTML valid!

93   92
25 errors

93   87
38 errors

93   83
6 errors

93   75
HTML valid!

92   79
HTML valid!

91   75
HTML valid!

90   78
3 errors

90   78
2 errors

90   78
HTML valid!

90   76
HTML valid!

90   73
HTML valid!

90   73
16 errors

89   75
HTML valid!

89   75
18 errors

89   74
HTML valid!

88   54
6 errors

87   73
1 errors

87   73
HTML valid!