Mobile page speed

> > How mobile methods affect pagespeed

Updated: January 4th 2016

Menu

Which mobile method is fastest?

If someone tells you one mobile technology is faster than another they are very likely selling or promoting one method to you, or they simply do not understand mobile very well.

This article describes what you need to know about mobile and page speed without taking any sides so you can get a clear picture and make informed decisions.

The way to make mobile web content fast is to first understand how it gets to users in the first place. We will look at how each mobile technology works, and highlight when and where one method can outperform another by displaying content faster.




The two types of mobile content

The content of a mobile webpage is either the same content as the desktop page or it is different content than the desktop page...

different cont on mobile and desktop

Content that is the same as the desktop version of the page

  • the exact same file "example.html" is downloaded for both desktop and mobile
  • the image "thisimage.png" is displayed to both desktop and mobile users

Content that is different than the desktop version of the page

  • different files are downloaded for different devices "example.html" or "example-mobile.html" (or the files have different content)
  • the image "thisimage.png" is displayed to desktop and the image "this-tiny-image.png" is shown to phones
  • there is content on mobile pages that may not even exist on the desktop version of page

The basic truths of mobile page speed are...

  • If you send the same content on the same webserver and served that content with each of the three mobile methods (responsive, dynamic, mobile urls) the responsive content would be the fastest. This is a fact (brought to you by physics!) and will be shown below in detail.
  • If you send different content to mobile users than you do to desktop users it is possible to send vastly smaller (therefore likely much faster) content to mobile users using the methods of mobile URLS or dynamic content.

To understand why the above two statements are true let's examine the way the three methods deliver content to a mobile phone.

Responsive delivers mobile content as follows:

Page is requested by user, page is given to user.

mobile-responsive-works

Dynamic content delivers mobile content as follows:

Page is requested by user, web server detection occurs, then mobile content is given to mobile user.

how dynamic works

Mobile URLS deliver mobile content as follows:

Page is requested by user, web server detection occurs, webserver tells phone to go to another URL, phone requests the new URL, then user is given the mobile content.

mobile-mobile-url-work

Responsive is fastest when dealing with the same content

  • Responsive method has no additional steps to take to get to a mobile user. It is just the same as any other webpage (remember, it is just html and css).
  • Dynamic content method has one additional step that must occur before the user gets the content. The additional step is browser detection by the server.
  • The mobile URLs method requires more additional steps to occur before the user gets the content. The additional steps are browser detection, and redirection. Redirects in mobile have several steps of their own to take and is the most costly process to take as far as mobile pagespeed goes.

Because the same content must take additional steps, they take more time. The more steps that exist between a user and their content, the longer the pageload time is.

Dynamic content can be fastest when dealing with different content

A simple example of this would be to compare two webpages. One page is using dynamic content to display a custom made mobile page to a phone. The other page is using responsive web design, which means the page it shows to a desktop user is the exact same page it shows to a mobile user including the large image files. Let's see what this means for page load. In this scenario, the dynamic content mobile page can use small images with small file sizes, whereas the responsive website must use the larger file sized images.

Because the responsive webpage has to download the larger images, in this scenario, responsive is slower than other methods. This example highlights that sometimes dynamic content can be faster by being more lightweight or tailored for the mobile platform.

The most effective way to faster mobile page loads is to have all your content first optimized for speed, prior to mobile strategy implementation.

A slow website will be an even slower mobile website

Note: Officially, Google recommends responsive web design. 1 This does not mean they do not support other methods, but they do recommend responsive.






Patrick Sexton by