I looked under the covers of one of the UKs award winning mobile career websites. I took apart what made their mobile site. This site has a great design and really look appealing. But as I discovered you need more than looks to deliver maximum conversion of candidates.

They use a basic responsive website - it is not adaptive or progressive. The home page is 1.4MB on desktop and 1.4MB on mobile. A speed test over 3G saw the site take over 15 seconds to load on an iPhone 4S running iOS 7.2. According to Google this is at least 14 seconds too slow. This is not going to score points with Google and could damage the sites SEO ranking. 

A good page size target to aim for on mobile is 300KB - this site was over this by 1,100KB. The bigger the size the slower the site - so what was making it so large and slow?

The site loads exactly the same code and files on mobile as it does on desktop (a flaw of basic responsive sites).

The total javascript downloads for the page was 651k spread across 3 files. On a typical 3G connection it would take around 5 to 7 seconds to download just the javascript. This volume of javascript will make the site very slow on older or cheaper smartphones

Every file, image ,css, etc has to individually downloaded to the phone. Mobile web browsers are not as quick at doing this as desktop browsers. To fully load the site the browser had to make 79 web requests. Every request adds overhead and makes the site slower.

The site uses many statistical tools, it included Webtrends, Google Analytics, Adobe Tag Manager and Quantserve. Each one slows the site down, one would be less noticeable but 4 is over the top. Anything other than the most expensive newest smartphone would run the site slowly as these statistical tools use up CPU & bandwidth. 

The use of photos is well managed on the site with photo sizes being mobile width on desktop so they flow into mobile without the need for resizing. This is solid basic responsive design practice.

The use of graphics was not optimised. The background image used in 3 places is a single large 53k file that is 958px wide. This will be slowing down the mobile site, and in this case could have been a narrow square image tiled in the background. 

The site also uses the a newer image type called svg which are typically efficient and mobile friendly with lossless quality between different size screens due to their vector nature. Unfortunately older mobile devices struggle with SVG, ideally the site would have used a different format on older devices. Instead older devices showed a nasty broken image or crashed.

To deliver on brand the site also uses 3 custom fonts costing an additional 94k. This could have been avoided on mobile - but not with a basic responsive website.

So how do you know if your vendor has an advanced solution that will give your mobile job seekers a fast experience that makes you look good and generates applications? I would start by asking one question, "What is the download filesize on mobile compared to desktop?".

If you have any questions feel free to reach out to me.

 

Posted
AuthorDave Martin