Limiting WordPress Post Loading on Mobile Devices

Earlier today, I caught a quick post to the Orange County WordPress group by Priscilla Christian:

Priscilla Gary Christian

This guy is harshing my (responsive design) mellow. What do you all think?
http://www.webdesignshock.com/responsive-design-problems/

Considering I gave a quick chat on responsive design last night at our meetup, I wanted to delve in to the article and see what the big fuss was all about. Well, it turns out that several of the points were (rightly) targeted at load times and page optimization. Responsive design using media queries implies that you’ve using “display: none” or “visibility: hidden” to limit what’s being shown on the page – but as the authors pointed out – that doesn’t prevent the data from being downloaded. Hence, the bandwidth problem. The page might appear less bulky, but in reality the device / browser is loading just as much data.

So, that got me thinking about load times for mobile devices. If you want to reduce load speed, wouldn’t the easiest solution just be to load less stuff?

My solution is pretty straightforward, relatively un-tested, and I’m certain it’s not a good fix (for reasons I’m not even clever enough to think of) – but for the moment I think it’s not a bad fix.

On my site, I have the home page set to load my 10 most recent posts. That’s fine for desktop browsers – and it encourages browsing. But on mobile sites, odds are the person visiting my site is really interested in just the latest post – or at most the last couple. My solution is to just load fewer posts on my homepage. In this instance, I have a default “posts per page” setup on my blog of 10 (the WP default). With the inclusion of the following code, I’m now doing a quick sniff for a mobile device, and if a mobile device is shown, all I’m doing is reducing the query from 10 down to 3. My visitor loses no functionality, and if they want to browse more posts they can do so with the “<< Older Posts” and “Newer Posts >>” buttons – just like a desktop visitor.

Here’s the code:

<?php 
// On mobile devices, limit results per page.
$device = $_SERVER['HTTP_USER_AGENT'];
$device = strtolower($device);
$aMobileDevices = array ( "iphone", "ipad", "ipod", "blackberry", "android", "nokia" );
$bIsMobile = false;
foreach($aMobileDevices as $mobiledevice){
	if (strpos($device, $mobiledevice)){
		$bIsMobile = true;
	}
}
if ($bIsMobile){
	$newArg = array ( 'posts_per_page' => 3 );
	query_posts ( $newArg );
}
?>
<?php if (have_posts()) : ?>

To start with, I just added this code on my index.php page, directly above:

<?php if (have_posts()) : ?>

That’s where I need to be to make changes to the query.

I start with a couple variables. Since my default state is to load everything as normal, and the “mobile” experience is nearly the same – I’m fine with delivering a potential false-negative. That’s why my array of mobile devices doesn’t have to cover every edge case, since those edge cases will just get the desktop experience.

$device = $_SERVER['HTTP_USER_AGENT'];
$device = strtolower($device);
$aMobileDevices = array ( "iphone", "ipad", "ipod", "blackberry", "android", "nokia" );
$bIsMobile = false;

Next, I ran through my array of mobile devices, and used strpos to see if the string was shown in the user agent field.

foreach($aMobileDevices as $mobiledevice){
	if (strpos($device, $mobiledevice)){
		$bIsMobile = true;
	}
}

If the boolean $bIsMobile is set to true, I just make a slight alteration to the query using a new argument of “posts_per_page”.

	
if ($bIsMobile){
	$newArg = array ( 'posts_per_page' => 3 );
	query_posts ( $newArg );
}

And that does it! Now my mobile site loads about 50% less information than my desktop version. Depending on the post, that could amount to 10-100k worth of saved bandwidth.

Hope that helps! Look forward to your thoughts and comments. Happy coding!

3 thoughts on “Limiting WordPress Post Loading on Mobile Devices”

  1. I’ve been thinking a lot about caching lately and I’m curious how this would work in wordpress with caching enabled. I’d imagine there would be a few challenges in doing so… you could end up with cached copies of the site for various devices but I’m not sure how that would work.

    1. Jason,

      Great point – unless you had the index set not to cache, this probably isn’t a very good solution. Potentially, if your first visitor were a mobile device when the cache is set, you could end up with a 3-post homepage for all visitors using this technique.

      To be honest, I tend to be such a tinkerer that getting to the cache stage is rarely a good option for me.

      Thinking about it though; a good solution on a cached site would be to do the device detect and just cache two versions of the home page – mobile & main. Not sure how to code that specifically, but it’s gotta be a function built in to cache plugins (to load one page or another).

      Thanks for your thoughts!

Comments are closed.