A business website might appear at first glance to be a collection of pages with text and images displaying products, but shoppers expect more than a static site. They’re used to web apps that enable shopping cart functions, account login, product filtering, and secure payments.
What is web application performance?
Web application performance describes how efficiently and effectively a web application functions, including its speed, responsiveness, and user experience. Factors that impact web application performance include network latency (delay in data transmission), web server response time, code efficiency, caching, and content delivery.
Key metrics to measure web application performance
One of the first steps for improving web app performance is to monitor a few key web application metrics.
Apdex score:
An
(Application Performance Index) score measures how satisfied users are with the time it takes a web app to respond, resulting in an overall performance rating between 0 (worst) and 1 (best).
Page load times: Page load time is the time required to load an entire web page, including all its resources, such as HTML, CSS, JavaScript, images, and other assets.
Speed index: Speed index measures how quickly visible content loads “above the fold” (i.e., the portion of the page immediately visible in the user’s browser window).
Time to first byte (TTFB): TTFB measures how long, in milliseconds, it takes for a user’s browser to receive the first byte from the web server after making a request.
Time to first paint (TTFP): TTFP measures the time it takes for the browser to render the first visible content on the screen. It’s measured in milliseconds.
Error rate: Error rate is the percentage of requests made to a web application that result in errors or failures.
Network latency: Network latency measures the time it takes for data to travel between the user’s device and the web application server, providing insights into network performance.
Peak response time: Peak response time represents the maximum time it takes the web application to respond to a user request during a specific period, typically during peak usage or a high-traffic scenario.
Tools for measuring web application performance
You can obtain web application metrics using multiple tools.
Web performance monitoring tools: User friendly software designed to evaluate web performance metrics include Google PageSpeed Insights, WebPage Test, and Pingdom.
Browser developer tools: Browsers contain built-in toolsets for developers. They’re accessible in Chrome, Firefox, and Safari by right-clicking an item on the page and selecting “Inspect.”
Performance APIs: You can install tools like Navigation Timing API or User Timing API in a website’s back end, allowing developers to fine-tune performance at a granular level.
Third-party analytics services: Services like New Relic, Dynatrace, and Datadog are paid, external software suites that monitor web performance as well as server performance, application code, and infrastructure metrics.
Drive your business forward with Shopify’s analytics
Shopify’s user-friendly reports and analytics capabilities help you make better decisions, faster. Choose from pre-built dashboards and reports, or build your own to spot trends, capitalize on opportunities, and supercharge your decision-making.
How to boost web application performance
Compress and optimize images
Minimize HTTP requests
Optimize server performance
Use a content delivery network (CDN)
Implement caching
Optimize code
Implement lazy loading
Monitor continuously
Once you’re monitoring web app performance, the next step is to optimize your performance metrics. These best practices help make your web app run more quickly and responsively to improve your customers’ shopping experience:
1. Compress and optimize images
Images can be large files, taking a long time to download and render properly for users. Modern image formats like WebP and AVIF compress images, reducing file size while maintaining image quality.
If you omit the “width” and “height” attributes in your HTML code, users will only download images optimized for their device size. Including these attributes in the HTML may result in higher-resolution images being downloaded, potentially exceeding the screen size requirements.
2. Minimize HTTP requests
HTTP (hypertext transfer protocol) requests are attempts by the browser to fetch the necessary resources for rendering a web app. The more requests there are, the longer it takes to load the app. You can reduce these requests by:
Consolidating CSS and JavaScript files into single documents for each type, ensuring they download only once.
Eliminating URL redirects on high-traffic web pages to maintain usability.
Exploring HTTP/2 server push, a technique that proactively sends anticipated resources to users’ browsers before they request them. While not suitable for all websites, it’s worth exploring if your server supports it and if you can allocate resources for implementation. This involves identifying specific resources to push to users’ browsers throughout the site.
3. Optimize server performance
You can enhance your web server’s performance for quicker user responses by implementing server-level caching mechanisms, which involve installing modules or plug-ins to cache web content. Moreover, optimizing database queries—like rewriting slow queries—can further improve response times for critical site functions like product searches and shopping cart management.
If server speed is a concern, consider upgrading your hardware to increase processing power.
4. Use a content delivery network (CDN)
Content delivery networks (CDNs) are geographically distributed servers strategically located throughout the globe to deliver static assets—like images, JavaScript files, fonts, and video files—to nearby users.
This reduces the distance data must travel, decreasing loading times. Without CDNs, users in different locations would retrieve assets from a single server, increasing loading times due to longer geographic distances.
CDNs are third-party services and set up processes vary. Popular options include CloudFlare, Akamai, and CloudFront.
5. Implement caching
Caching is the practice of storing copies of frequently accessed or expensive-to-compute data in the user’s browser so the resources don’t need to be downloaded every time the user visits your site.
Start by identifying the content you want to cache (normally images, CSS files, or JavaScript files) then enable cache control headers on your web server, which tell the browser how long to store the given resources.
6. Optimize code
Minifying code is the process of reducing the size of a web app’s source code while preserving its functionality. To do this, remove unnecessary characters, white spaces, comments, and line breaks from your code. Tools like UglifyJS (for JavaScript), CSSNano (for CSS), and HTML-Minifier (for HTML) can automate this process for you or your programming team.
Visit the Shopify Experts Marketplace
Find experienced commerce professionals who will help you grow your business. Browse the different services Shopify experts offer, post a job, and hire a professional to work with.
7. Implement lazy loading
Lazy loading is a software design technique that involves only loading images, videos, and other non-critical resources when they’re needed—when the user scrolls down far enough to see them, for example—rather than loading everything upfront.
Enable lazy loading with Intersection Observer API, which is a built-in JavaScript tool that lets you detect when an element is inside a user’s viewport. Alternatively, enable scroll event listeners, which detect when the user is scrolling close to a new element. Either of these can then trigger the dynamic loading via JavaScript.
You can also simplify the process by utilizing lazy loading libraries such as LazyLoad or Lozad.js.
8. Monitor continuously
While all of these techniques can positively impact your web app performance, monitoring key metrics and their variability over time is essential for proactively identifying and addressing issues, optimizing user experience, and making data-driven improvements.
Web application performance FAQ
How does browser caching improve web application performance?
Browser caching improves web application performance by storing static resources locally on the user’s device. It results in faster load times by ensuring that subsequent page loads retrieve these resources from the cache instead of making additional server requests.
How can I optimize database queries for better web application performance?
You can optimize database queries by indexing relevant columns, avoiding unnecessary joins or subqueries, optimizing query execution plans, and caching query results to minimize the impact on server resources.
What is the impact of network latency on web application performance?
Higher latency can increase the time it takes for a web application to send and receive data, leading to slower response times and increased page load times. Both can negatively impact the user experience.
 - Shopify (2024))
