Faster, Smaller, Sasier: 5 Tweaks to Significantly Improve Your Website’s Mobile UX

Faster, Smaller, Sasier: 5 Tweaks to Significantly Improve Your Website’s Mobile UX

Internet use has definitely shifted to mobile. Just this year, Black Friday holiday sales data showed that mobile transactions accounted for $1 billion in sales, or about 30 percent of the $3.34 billion total sales made by e-commerce sites during that day. This shows how mobile has taken over our online activities. Google and Facebook have both acknowledged the importance of good mobile user experience (UX), both pushing for better mobile loading speeds from website publishers.

Image source: Pixabay

According to a Google report, half of mobile users abandon sites that load longer than 3 seconds. Unfortunately, most mobile sites load at an average of 19 seconds. If your site one of the slower ones, then it’s about time you make some changes.

Here are 5 tweaks you can do to improve your site’s UX for mobile:

1. Use a CDN to speed up content delivery to users around the globe

One of the main culprits of slow page loads is latency. Data has to travel the distance between your web host and the user. So if your site has visitors from London and your web host is located in Dallas, data will physically have to cross the Atlantic, the continent, and back. Distance increases load times.

A content delivery network (CDN) address this issue by caching copies of your website on its servers distributed all over the globe, so that when you get multiple visits from these places, the resources are loaded from the CDN server nearest them, thereby reducing latency and also reducing the need for your server to consume bandwidth. CDN provider Incapsula reports that their service allows sites to load 50 percent faster and uses 70 percent less bandwidth. If you are also running on hosts with bandwidth limits, a CDN can help you manage costs by minimizing bandwidth consumption.

2. Enable caching options

Caching is essentially temporarily storing data, and it can be used to speed up page loads. Web browsers can cache static content, such as essential theme files and branding graphics. The next time a user loads a frequently-visited page, those files don’t need to be downloaded again. If you are running your site on Apache like most PHP or WordPress installations, you could enable browser cache by editing your .htaccess file.

The problem usually is when a visitor accesses a page for the first time. This means the user has to load all the files first before it gets cached locally. This usually becomes a problem when a post gets suddenly popular or viral that your site gets many first-time visitors. If your page load dynamically (meaning content is loaded from the database every time), then expect your server response to slow down. A way around this is enabling server-side caching. One such method is page caching where dynamic resources are stored either in the disk or memory to quickly serve them upon request. The easier way around this is using a CDN which does the server caching for you.

3. Optimize images used as design elements

Compared to text content and code, images take a lot of space and bandwidth. As designers, we should always know which file format to use given a situation. This means understanding the differences between vector and raster graphics and the various lossless and lossy file formats.

For example, simple logos and branding elements can be delivered as PNG-8. JPEGs are better for images that contain minute details such as photographs, but they have to be optimized to an acceptable level of compression so that they have ideal file sizes but don’t look pixelated in the target display. Detailed images that need transparency would require PNG-24. Use web-based optimizers like Kraken.io to keep the image file sizes to a minimum.

Use CSS when applicable as loading from stylesheet code is lighter than loading images from the page body. Now, you can even use glyphs and symbols for non-photographic design elements instead of images so that scaling and size wouldn’t be much of an issue.

4. Minify JavaScript and CSS used as resources

Web design today relies heavily on JavaScript (JS) and CSS to create more interesting functionalities. Code is smaller than images, but saving even on the littlest of bytes help.

JS and CSS can be minified – compressing by removing unessential spaces and line breaks without altering how they function. Browsers would not have to read those extra characters anyway, so each space removed is a byte saved. Another technique is to minify multiple scripts together so that only one consolidated JS or CSS is downloaded from the server and yet still enables all the functions and features needed by the page.

5. Minimize use of unnecessary plugins and add-ons

If you are using a CMS like WordPress or Drupal, you can also take note of the amount of plugins and add-ons you are using. While these can deliver additional features and functionality to your site, they also take up server time and resources to load and process. This gets worse if the plugins are set to run every time a page loads, since it can have an impact on server response.

You should actually review the plugins you use for continued support from the developer. Unsupported and abandoned plugins may contain security exploits that usually are prime targets for hackers to gain access to your system. So aside from a speed issue, these can cause security issues. So disable and delete such plugins from your system.

Conclusion

Try measuring your site’s performance by checking how fast they load across devices. Google’s PageSpeed Insights gives you a score on how quickly your site loads in both mobile and desktop settings. Using a CDN can instantly give your site as much as 20-point score increase. Implementing all these tweaks will be sure to give you a faster loading website and your visitors a speedier experience from their mobile devices.