We have already written about why your company’s website needs to be accessible for mobile browsers, but now, let’s talk about how you can improve your pages to make them more easily viewable for mobile users. Here are our five quick tips on how to optimize your site.
1. Be merciless about improving performance for mobile users
While mobile data connection speeds are getting faster, websites still take far too long to load. You can expect to lose mobile traffic if your site doesn’t load within a few seconds. This means you have to be constantly on the lookout for bottlenecks in your page loading times and dive deeper into optimizing your HTML code. You should be looking at code that causes delays in fetching content from other sites, or makes use of outdated software routines. By keeping mobile images to 72dpi, you can reduce mobile load times as it’s not necessary to load a high-resolution image on a small screen.
This is a big topic to tackle, but there are lots of tools and techniques to help you in the quest for quicker pages. For general performance issues, this free service from Webpagetest.org will let you test your website’s performance. Another good place to start is this guide on how to best optimize a WordPress-based site.
2. Use a content delivery network (CDN) if you have lots of images or video elements
The WordPress guide also mentions using CDNs as a way to improve performance for all of your users, as they can cache frequently accessed pages of your site.
“With a CDN, it doesn’t matter where your site is hosted. If you have visitors in other parts of the world, the CDN caches that content close to them and shaves seconds in aggregate off of the total page load time for your site.”
There are a number of CDN services available to choose from, many inexpensive or even free, with Amazon CloudFront perhaps the most famous. When deciding which to choose from, consider your site’s goals and needs and weigh that against the value you’re getting from the particular CDN.
3. Understand responsive design and use it liberally
Responsive design allows for webpages to dynamically resize the page contents to fit any size browser or screen. It allows you to design your site once, and then use code to shift elements around to always provide the optimum viewing experience regardless of the size screen you are on. There are a number of good basic tutorials available on the web. And if you’re not sure about your site’s design, it’s easy to test this yourself without any special tools: Simply resize your browser window down and see if images, copy, and navigation items resize themselves for a pleasant viewing experience. If it’s difficult to read things, or the viewing experience is unchanged, then the site is not responsive and it’s time to make some changes.
4. Load navigation elements before your pages’ content
Chances are that you’ve been to a site when on your phone or tablet where you see images and other content appear before navigation menus and links. It can be incredibly frustrating for users to have to wait for these. Optimizing your site to load these elements first is a good way to help mobile users see where they have to go without having to wait for the full site to load.
Instead of loading the entire page as soon as a user comes to your site, implement code that dynamically loads page content as it is needed. Load times will be faster, and the user won’t notice as the site will load necessary areas as the site is scrolled.
5. Use Google code libraries
Google makes various coding libraries, such as those for jQuery and WordPress, freely available for your use. Take advantage of this by linking to them in your pages whenever you can, rather than loading them from your own website. There are three reasons for doing so:
- Decreased network latency in fetching this code across the Internet, so you can download the jQuery routines faster.
- Making your page code more parallel, so that multiple tasks can run concurrently.
- And perhaps the best reason: you might already have a cached copy of jQuery or specific WordPress code on your client from some other site. This can obviate the need to download any code whatsoever, giving mobile users a faster, more enjoyable experience.