Optimize for mobile devices

Especially with more and more users viewing your Joomla website on mobile devices, you need to make sure it loads fast on those devices as well. While most desktop users in developed countries will have a broadband connection, this might not always be true for users on the go, with a 3G connection.

Even if you use a responsive template, the way the site is viewed adapts to the screensize, but the resources that are loaded are the same as for the desktop user.

Make sure to keep this in mind. It takes some advanced techniques to cater for this, so this is a subject beyond the scope of Joomla SEO.

logo 500

User Agent Detection plugin

Just one tip for an extension that I found usefull is the User Agent Detection plugin developed by dutchman Rene Kreijveld. It detects whether you are on a desktop, phone or tablet. The feature works based on user agent. Though not 100% proof, this is a reliable method for mobile-detection. With some PHP knowledge you can then prevent modules or images from loading. So, it does not just HIDE, like what happens if you set a bootstrap-class of hidden-phone, but it actually prevents loading and executing the code to load the whole module.

Example code: Only show the module if the user-agent tells you that we are NOT on a mobile device:

<?php if($ualayout != "mobile") {?
<jdoc:include type="modules" name="big-slider-module-x" style="xhtml" />
<?php } ?>

Recently, Rene also released a content-plugin with user-agent detection that allows you to use tags in your articles, which makes the plugin even easier to use, like this:

{ifmobile} This only shows if browser is mobile {/ifmobile}
{!ifmobile} This shows everywhere except if browser is mobile {/ifmobile}

Also useful: his User Agent Template Switcher.

Simple Mobile Detection

joomla simple mobile detection

A similar plugin has been developed by Conflate, the Joomla Simple Mobile Detection plugin. It also detects the user-agent, but is has some more configuration settings in the plugin, allowing you to define things like whether all Android devices or Ipads should be treated as not, set redirect-URLs, etc. What coukld also be very useful is that you can use specific tags in your article's content to offer specific content for specific devices (set the Content Switch on first), like this:

{IfMobile}
   This is mobile content, only displayed on mobile devices
{ElseMobile}
   This is non mobile content, and displayed on i.e. desktops
{EndIfMobile}

You can also use more advanced tags though.

DSC - Device Specific Content

Just recently, Kubik-Rubic extensions by Victor Vogel also released an extension to add content based on device detection, similar to the earlier discussed extensions: DSC - Device Specific Content. It also allows you to add these content between tags, distinguishing between Desktop, Tablet and Mobile.

Advanced Module Manager

Another possibility is the use of the Nonumber extension Advanced Module Manager, which also works based on user-agent. It allows you to specify many parameters, including whether or not to load modules for mobile browsers:

 nonumber-advanced-module-manager-mobile-browsers-2

More mobile extensions

There are also solutions for serving images in your articles depending of the device. A nice example for this is the adaptive images plugin by Extly.com. It checks the device and based on this, serves a maximum size for the images. As an example: phones should not be offered any images larger than 480px, or any value you set for this.

Many more examples are listed in the Joomla Extensions Directory, category Mobile Display. For some advanced tips on mobile performance, check this article on the Moz.com blog.

Caching issues

If you have cache switched on, you can sometimes have issues if you use these extensions: if the first visitor after clearing cache is a desktop user, this view may be stored in cache for any user following, including mobile. For this reason, Joomla 3.5 introduced the mechanism of Platform Specific Cache in your global configuration. If you then still have issues, also using Jotcache can fix this, as it allows for browser- and platform-specific caching.

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.