Mobile-friendly websites are a must. We are all using mobile devices more and more to access information and perform all kinds of work and tasks – shopping, banking, communication, dating, etc. Needless to say, if you operate a website, you more likely want to ensure people accessing it using mobile devices – tablets, smartphones, etc. – have a great experience. If they don’t, you’ll lose their trust, your brand won’t look so good in their eyes, you are likely to lose their business, and so on.
What to Monitor for Mobile-Friendly Websites
What exactly should you monitor? When you compare a mobile user experience with standard desktop websites there are several things you need to consider. The mobile-optimized site should adjust to smaller screen sizes, the content should be easily readable, it should have mobile-friendly navigations, etc. But there is also another aspect of being mobile-friendly – website performance. In this article, we’ll focus on website performance aspects – primarily page loading speed including, but not limited to Apdex, mixed with a bit of usability in the form of Core Web Vitals.
Which Website Monitoring Tools You Should Use
At a high level there are two ways you could go about monitoring how well your website performs when accessed by visitors on mobile devices. You could collect data from:
- Your real website visitors – aka Real User Monitoring
- Synthetic monitors (sometimes called checks or tests)
Real User Monitoring is what the name implies. With a RUM tool data from real users is collected, charted, dashboarded, etc. A good real-user monitoring tool will let you slice and dice your data using a number of dimensions, including device type (desktop, mobile, tablet) and even network connection speed (2G, 3G, 5G…).
Synthetic monitoring lets you configure monitors that run at specified intervals from one or more geographical locations of your choice, using the device type(s) of your choice.
Which one you should choose depends on which data you want to collect. If I had to recommend one of them, I’d recommend starting with synthetic monitoring because it’s easier to set up – there is nothing to install and you can start monitoring your website in literally just a few minutes. Moreover, synthetic monitoring will capture errors, and screenshots, let you set up alert notification rules with all kinds of conditions, script multi-page user journeys, etc.
In the rest of this article, I’ll show you how you can use Sematext Synthetics and Sematext Experience to monitor your website and ensure it performs well when accessed using mobile devices and tablets, as well as how you can dig into server and application logs to troubleshoot the root cause of poorly performing website.
What is Sematext Synthetics?
Sematext Synthetics provides a way to monitor and test the performance of your websites and endpoints. You can call your endpoints and websites in certain intervals automatically from different regions and calculate the availability and response times of these services. You can simulate these calls from desktop or mobile devices.
Sematext Synthetics also lets you write user journey scripts. A user journey is a path a user may take to reach their goal when using a particular website. By writing journey scripts, you can define the path you want to test and take screenshots from your websites within the journey scripts. This gives you the ability to see what your users are seeing when they are visiting your websites.
Once you know how your website looks on a mobile device and ensure the availability, let’s see what we can do further with an Experience App.
What is Sematext Experience?
Experience applications also known as Real User Monitoring (RUM) let you analyze data from real user sessions. You can monitor the overview of your website’s performance and the user satisfaction scores by measuring directly from your website visitors’ browser. These Apps can capture all the info when people browse websites on mobile devices, tablets, and desktop devices, plus filter things like type of connection (2G vs 3G, etc…).
Experience and Synthetic monitoring help you monitor your frontend and the interaction between your UI and customers.
Finding Root Cause by Correlating with Logs
Note that User Experience and Synthetic monitoring and alerting are only half of the picture. When you detect a performance or availability issue on your websites you may find that sometimes you will need to troubleshoot the backend services that power your APIs and websites. In other words, to find the root cause and figure out what might be causing these problems you may need to be able to troubleshoot the relevant backend service. To do that, you will want to cross-examine their logs, correlating them to API and website issues. We’ll cover how to do that later in this article.
How to Simulate User Journeys with a Mobile Device with Sematext
Sematext Cloud is an all-in-one platform, where you can monitor all the parts of your application described above.
Synthetic Monitoring from Simulated Mobile Devices
Here is a step-by-step walkthrough of how you can simulate user journeys from a mobile device with Sematext Synthetics, get notified when there is a performance issue on your websites, take screenshots of the pages, and see how they look on a mobile device. Go further and check user satisfaction scores with Sematext Experience and dig deeper into troubleshooting with Sematext Logs.
First, you need to create a Synthetics App and Browser Monitor to write your user journey script.
When you are creating a Browser Monitor, you have the option to simulate the user journey from various device types offered and the region you want this simulation to run.
After you pick your device type (iPhone 8 in this example), you are navigated to a page where you can write your journey scripts. For the simplicity of this example, we will navigate to www.sematext.com and then take a screenshot of the home page.
The next step is to configure alerts, in which you define which metrics to watch to calculate your website’s availability from a mobile device and get notifications when metrics don’t meet a certain criteria.
After you create the monitor, the user journey will be simulated automatically within the interval you’ve set and gives you the result, showing how www.sematext.com home page looks like when visited from an iPhone 8 mobile device.
Monitor Real Users’ Sessions with Mobile Devices
Now let’s check the real user experience data from mobile devices with our Experience App.
In order to monitor the real user experience with Sematext, you need to add a few lines of installation scripts to your website code.
You have the option to choose based on your website’s type
- “Website uses Single Page Architecture” if your website uses React, Angular, Ember, Vue.js, Backbone, or any other framework for building single page web applications
- “Standard website” if you have a multi-page website that works in a traditional way. Every change eg. displays the data or submits data back to server requests rendering a new page from the server in the browser.
Once you add the script to your website to start collecting real user data, you will see the reports with Apdex scores, based on user groups, top resources, top page load times, etc…
Below we are monitoring www.sematext.com user experience data filtered by mobile device types.
Along with the options to filter by device, connection type, and much more.
One of the key benefits of Sematext Cloud as an all-in-one platform is that you can view all these performance metrics collected with Synthetics Apps and Experience Apps on a single page using the Split Screen feature.
Below the screen is divided into two. On the left marked with green shows the Synthetics data for www.sematext.com, and on the right, you can view the real user experience data marked with orange. This gives you the ability to correlate/compare your mobile-friendly website’s performance and user experience data without switching contexts.
Synthetic and Experience App notifies you of the issues happening in the frontend. But to be able to solve these issues, you need to dig deeper and figure out the root cause.
Sematext Cloud supports log shipping from various web servers where you can ship logs and start instantly troubleshooting out-of-the-box reports.
In this example, our www.sematext.com website is hosted by an Apache server. So with Sematext Logs, you can collect Apache web server logs and gain insight into logs generated by your Apache Server.
Select the time range when you start experiencing issues and view error logs, figure out the starting point of your issues.
Summary
In conclusion, it is vital for your business to ensure the smoothness of your websites when visited from a mobile device. This builds trust and gives you the ability to interact with your customers more. You need to ensure the reliability of these websites. Sematext Cloud provides a powerful way to monitor your mobile-friendly website’s performance and availability from different aspects in an all-in-one solution. With all the solutions combined in a single place, you gain full-stack visibility into your whole infrastructure.