There are three key indicators of page performance in the Lighthouse report:

First meaningful paint

This is when the primary content of your page is visible. For a blog post this would be the headline and above-the-fold text. It also includes any images, such as product photos, that are essential for users to understand your content.

First interactive

This is first point at which users can interact with the page. At this point most, but not necessarily all, of the UI components on the screen are interactive. The page should respond to user input in a reasonable amount of time, though this doesn’t have to be immediate.

Consistently interactive

At this point the page has completely loaded and is fully interactive.

Remember – not all of your users will be on a high-speed connection. While 4G is available in most major towns and cities, coverage is often patchy in more rural areas. A good target is to get your page to be consistently interactive in under 3 seconds on a 3G connection.

Performance improvements

This 3 second target might seem out of reach if your page currently takes ten times that long to load. However, just a few simple changes can drastically reduce page loading times. Here are some of the steps you can take to make the biggest impact, listed in order of complexity:

Optimise your images – reduce the file size of images by compressing them without affecting quality. Download your images, compress them using software such as Kraken or ImageOptim, and then reupload them to your site.
Cut down on unnecessary scripts – all of the analytics, personalization, and other tracking scripts that you add to a page increase the amount of JavaScript that has to be downloaded by a user’s browser. The easiest way to solve this is to get rid of the scripts.
Lazy-load images below the fold – reduce the time it takes to reach first meaningful paint by only loading images above the fold until a user scrolls down the page.
Defer JavaScript or load it asynchronously – if you (or your boss) are really attached to your tracking scripts, defer them or load them asynchronously. The same goes for other JavaScript on your page.
Upgrade your infrastructure – most websites are currently hosted on servers that use HTTP or HTTPS protocol to communicate over the World Wide Web. A new standard – HTTP/2 – offers considerable speed advantages over the older protocols. As well as speeding up the site by allowing more assets to be downloaded concurrently, it also allows the server to push assets it thinks the user will need before they need them, speeding up loading.

Responsive websites vs mobile apps

An increasing number of businesses and organisations are building native mobile apps. It's no wonder, because as much as 90% of time spent on mobile devices is using apps. However, the vast majority of this time is spent using apps that are products in their own right, apps like Facebook, YouTube and SnapChat. And, most consumers still begin their research using search or branded websites – so if you do decide to develop a native app, you still need to have a great website.

Responsive websites also have several benefits over native mobile apps when it comes to user experience:

A user looking to complete a task on their mobile might not be able to download your app due to data restrictions.
Website content will appear in search engines results, unlike content in native mobile apps, making it easier to find.
By following mobile-first design principles you can create a website that works well on desktop and mobile – ensuring a consistent user experience across all devices.

Also bear in mind that responsive websites incur lower maintenance costs than native apps – you only have one platform to maintain as your responsive website should be built to work in any mobile browser. If you decide to offer a mobile app you’ll need to create and maintain apps for various mobile operating systems, at least for the two most widely used platforms, Apple’s iOS and Google’s Android. These apps will require frequent updates as Apple and Google make breaking changes to their operating systems.

Progressive web apps

Progressive web apps, or PWAs, offer the best features of a responsive website and native mobile app in one package. They are normal websites that can be access using a regular web browser, but are built in a way that makes them feel like a mobile app and allows them to be downloaded and used offline. They can also be installed like a native app on Android devices.

PWAs have several advantages compared to both responsive websites and natives apps:

Users can browse offline – because PWAs cache content and assets they can be used without a data connection
PWAs preload assets – this cuts loading times by reducing the amount of data downloaded from the server each time a user opens the app
They allow access to device features – developers can make use of device features and hardware such as notifications, voice recognition, and cameras
There's no need to push updates through the app store – your PWA will update whenever a user opens it with a data connection
They're universally available – your PWA won't be subject to any restrictions (such as geographic restrictions) imposed by app stores

If you have identified a user need for a native mobile app and possess the budget to develop and maintain both a first-class website and an app, then go for it. In reality, most organisations work with a limited budget and are better off investing in developing a fantastic website rather than spreading their resources too thinly. PWAs offer a way to have the best of both worlds and provide an improved user experience at the same time.

Conclusion

Ensuring your design is easy to use on mobile isn’t difficult. It’s all about making sure that users can quickly find and download your content – either through your navigation or using your search – and doing everything you can to make it as easy as possible to fill in forms quickly and accurately. The easiest way to check you’ve got this right is to use your site yourself. Even better, get at least five real users to test it. You’ll soon gain some valuable insights into areas you can improve.

Mobile user experience – tips and best practice

Ready to get started?