How can a web designer speed up mobile web page loading times?

By 2020 it is expected that all mobile web pages will load in under 3 seconds. If you ask me, websites should be doing this already, and many well-made sites do. Websites for mobiles have significantly improved in regards to optimisation over the last few years, but it’s still important for web designers to make sure their web design isn’t over-taxing for phones.

Of course, the issues of mobile web page loading speeds are directly linked to the mobile network capacity. These days, with 4G available, many web designers are feeling more free to include data-heavy elements to their mobile sites under the assumption that a 4G network can load it in no time. This would be sound logic but 4G is still pretty fresh to the UK – less than half of UK mobile subscribers have subscribed to 4G. It can’t be assumed that all users have access to excellent connections.

So web designers need to consider how what they do affects the page loading speed. The key factor is unnecessary content. The more there is on the page, the longer it’ll take it to load. Even things like typeface – particularly if it’s an ornate or obscure typeface – can slow down load times. If you go to Google Fonts, when you have selected a font you can check the load time to figure out how much it will impact your site’s speed. The speed difference is marginal, but it all adds up. For mobile, it’s best to only use ornate fonts in the title and use a more standard font in the main body of text.

As well as what a user actually sees on the screen, you also need to consider what is hidden. On desktop web pages, buttons often have a rollover state – the way a button adjusts its sprite when a mouse hovers over or clicks on it. These elements are hidden on the page, but still add to the load times. When designing a mobile site, these kinds of elements ought to be cut down. It’s important to have a visual indication  that the user has pressed a button helps with the UX, even if that user isn’t on a desktop and using a mouse. That’s why coding has become more sophisticated in response to modern mobile browser challenges. Rather than having to load a sprite, you can code a button with a hex reference to change its colour when it has been activated, meaning there aren’t any other hidden elements slowing the site down.

But how do you know what features to scrap for the mobile site? You need to think about the hierarchy of elements. When a site is shrunk down to a mobile site, keeping all the content from the desktop site will not only increase page loading time, but also make for very long pages, which in turn makes it difficult to find relevant information and hinders the user experience. Establishing an information hierarchy makes it easier to identify any of the less important elements. The removal of these elements may benefit the navigation of content and the UX. In particular, unnecessary dynamic elements, such as graphics that transition or animate into place, or parallax scrolling; these features look great on desktop, but tend not to translate well to smaller screens and add to the load time. Before smartphones became the main method for browsing the web, skeuomorphism was popular in website design. However, due in part to the necessity to reduce the data requirements, this was phased out when smartphones became the main tool for browsers.

Next, consider redundancy in the content. As mentioned, content should be concise and use the limited space efficiently. There might be information that you want to keep, but not necessarily include in the initial page loading time. You can use accordion menus to conceal content that you still want to be accessible on the page. These menus will then only load when requested. Accordions are often displayed as ‘read more’ buttons, where the user can expand on a subject.

As a designer, it’s easy to just let someone else worry about the speed at which mobile web pages load, but it’s the responsibility of everyone in development. Load speed is a UX factor, and designers should have user experience in mind at all times. In fact, UX should be paramount to everyone involved. While optimising a site to load as efficiently as possible is technically the duty of a developer, it’s the designer who defines what kind of a task that is. “It’s kind of the developer’s problem to make a site load faster”, Ilze, our Front End Developer, tells me, “But it is the responsibility of the designer to design it so we can make that happen.”

Designers and developers will produce the best results when they’re working with the other in mind. Think of it like designing a car: the designer creates the look and shape of the model, taking into account things like user experience and accessibility, while the developer builds the engine and makes sure it runs at its best capacity based on the design. If the designer tries to add rocket engines and make the car water-submersible, the developers won’t be able to create an efficient engine for those specifications.

Designers need to understand their parameters. Parameters work as a guide to what limits you have when adding features and deciding what should be taken out. When designing a mobile web page, the main parameter is that the page must open in less than three seconds. By including data-heavy elements in your design – such as videos, animated elements, or large pictures – you are going outside of your parameters because those all hinder the loading speed.