Blog

Tips for Speed in Mobile Web—Part II

Craig Isakson  |  April 29, 2014

Avoiding landing page redirects is exactly as it sounds. Don’t use redirects! This really just comes down to numbers. Take for instance the mobile device has a latency somewhere between the 150 and 400 ms, a round number being 200 ms. When making a call to a website from the device there are essentially three round trips from the device to the server with HTTP and four round trips if you are using HTTPS. This can be seen in the following diagram:



With a 200 ms response time and the three full round trips, the current time that has passed has been 600 ms plus whatever server processing time there is all without any content being presented to the user. If a redirect is added say from http://www.sundoginteractive.com to http://m.sundoginteractive.com, add another 600 ms plus server processing type.



That means over 1.2 seconds has passed and the user has yet to see anything show on their device. The time is already over the magic one second load time and nothing has been loaded yet.

There are a number of ways to avoid using mobile redirect. Depending on the web server being used it may be possible to know if the user is on a mobile device by checking their user-agent and serving a different page or layout if it is mobile than if it is a desktop device. Being as that Sundog does a lot of mobile web development on the Salesforce platform, an example of serving different content is as follows:

In your controller class you can include the following code:

public Boolean isMobile {get;{
	String userAgent = System.currentPageReference().getHeaders().get(‘User-Agent’);
	if(userAgent.containsIgnoreCase(‘iPhone’) || userAgent.containsIgnoreCase(‘Android’)){
		return true;
	}else{
		return false;
	}
	set;
}

This will make available to your page that uses this controller a boolean value named isMobile. With this boolean you can then use that to determine what to render on your page. A simple example is:

<apex:page controller=”MyController”>
	<c:My_Mobile_Layout rendered=”{!isMobile}”/>
	<c:My_Desktop_Layout rendered=”{!!isMobile}”/>
</apex:page>

Here you can see that we are using the controller with the boolean we just created to determine what component to load. The components can contain any or all markup for the current page. This way, anytime the user lands on the one URL they will be served the content most appropriate to them. A nice feature about this method is that if the users requests the desktop site the mobile browser changes their user-agent and they will be presented with the full desktop site, whereas if they were to do the same thing on a page that was a redirect the content would not change.

Part III

Posted in: Mobile, Salesforce, Software Development, Technology, Web Development, Technical Strategy

Share