5 Ways to Speed Up the Mobile Web
There is no denying mobile’s importance on the Web today.
With the number of mobile devices climbing higher and higher businesses must evolve alongside their consumers if they wish to survive let alone thrive.
However, having a mobile site is not enough. Businesses must optimize their mobile sites if they wish to excel on the platform. If they don’t, they risk losing valuable conversions for a number of reasons ranging from slow site speed to actions that are not mobile compliant (like flash) to simply being too difficult to navigate.
Luckily for businesses there are numerous ways for them to optimize their mobile sites.
While redirects may not cause a problem on desktops, they can cause a large time difference on mobile devices.
In a study of the top 500 e-retailers conducted by Boston-based mobile and Web optimization company Yottaa, the company found that it can take sites that are redirected four times can take up to 16 seconds to render, eight seconds longer than those with no redirects. The study also found that 39 percent of the top mobile e-retailers mobile sites redirect consumers two or more times before beginning to load.
Iwo Kadziela, product manager at SiteSpect, stated that the problem stems from how redirects are set up. “The problem is that a lot of the times redirects are improperly implemented,” said Kadziela.
“There are solutions that make this fast. The best thing to do is to listen to the user agent, figure out the origin. If that person is on a mobile phone or a desktop on the initial request and then respond with the appropriate version right away.”
Perhaps one of the basic techniques, image compression is a linchpin website optimization technique. No matter whether you are coding for a desktop or a mobile device, images should always be compressed.
With a typical compression ratio between 30:1 and 50:1, JPG offers the most compression however it is a “lossy” compression which means that any information that it takes out is permanently lost. On the other hand, PNGs are “loseless” compression however they do not offer quite as much of compression as JPGs. Finally, GIFs contain the least amount of compression with a typical ratio between 4:1 and 10:1 however they have a unique purpose in that they are the only file type that supports short animated snippets.
Simplify Pages with HTML5 and CSS3
With many mobile users connecting to the Internet only through their mobile carrier’s network, devices already struggle to keep up with their desktop counterparts.
While images and clickable buttons are aesthetically pleasing on websites, each one adds to the amount of time it takes for a site to load. Where it’s possible, developers should look to replace images and buttons with HTML5 and CSS3 code. By doing so, developers will cut down on the amount of information that each page needs to load thus cutting down on the length of time it takes the site to load. One example of pictures being preplaced by CSS3 is background images.
Considering how much smaller mobile screens are than those on desktops and laptops, it can be difficult to see background images clearly (if at all). By simplifying the background with CSS3 developers can create a simple, quick loading background that is still aesthetically pleasing and within the theme of the site.
Shorten the Code
Until you write code, it is difficult to understand the complexities behind entering in something as simple as a link or picture. While not always possible (and certainly never easy), shortening the code can scratch away at the time it takes a mobile page, or a page on any device for that matter, to load. One great way to do this is through image sprites.
Instead of having to load each picture individually, sprites combine images into a single file. This helps sites, on both mobile devices and desktops, load faster because it reduces the amount of requests sent to the sites server every time it loads. For example, if a sprite contains five images it only has to send one http request to the server instead of having to send one for every image.
Split-Up Long Pages
While navigating from page to page can be a pain on mobile devices, especially when the “Next” button is inexcusably small (like on many non-optimized sites). By this logic, one would assume that having one seemingly never-ending page would be the best solution to the problem. Unfortunately, you’d be wrong.
It’s rather simple, the longer the page the longer the code and the longer the code the longer the page load time.
While having one endlessly long page can be nice for the aforementioned reason, it results in having to load all of the sites information at once which will undoubtedly take more time. By meticulously optimizing your site design so consumers can easily navigate from the first page all the way to the very last, you can significantly cut down on your site's mobile load time.