Skip to Content
Shopify logo
  • By business model
    • B2C for enterprise
    • B2B for enterprise
    • Retail for enterprise
    By ways to build
    • Platform overview
    • Shop Component
    By outcome
    • Growth solutions
    • Shopify
      Platform for entrepreneurs & SMBs
    • Plus
      A commerce solution for growing digital brands
    • Enterprise
      Solutions for the world’s largest brands
  • Customer Stories
    • Everlane
      Shop Pay speeds up checkout and boosts conversions
    • Brooklinen
      Scales their wholesale business
    • ButcherBox
      Goes Headless
    • Arhaus
      Journey from a complex custom build to Shopify
    • Ruggable
      Customizes Headless ecommerce to scale with Shopify
    • Carrier
      Launches ecommerce sites 90% faster at 10% of the cost on Shopify
    • Dollar Shave Club
      Migrates from a homegrown platform and cuts tech spend by 40%
    • Lull
      25% Savings Story
    • Allbirds
      Omnichannel conversion soars
    • Shopify
      Platform for entrepreneurs & SMBs
    • Plus
      A commerce solution for growing digital brands
    • Enterprise
      Solutions for the world’s largest brands
  • Why trust us
    • Leader in the 2024 Forrester Wave™: Commerce Solutions for B2B
    • Leader in the 2024 IDC B2C Commerce MarketScape vendor evaluation
    What we care about
    • Shop Component Guide
    How we support you
    • Premium Support
    • Help Documentation
    • Professional Services
    • Technology Partners
    • Partner Solutions
    • Shopify
      Platform for entrepreneurs & SMBs
    • Plus
      A commerce solution for growing digital brands
    • Enterprise
      Solutions for the world’s largest brands
  • Latest Innovations
    • Editions - June 2024
    Tools & Integrations
    • Integrations
    • Hydrogen
    Support & Resources
    • Shopify Developers
    • Documentation
    • Help Center
    • Changelog
    • Shopify
      Platform for entrepreneurs & SMBs
    • Plus
      A commerce solution for growing digital brands
    • Enterprise
      Solutions for the world’s largest brands
  • Get in touch
  • Get in touch
Shopify logo
  • Blog
  • Enterprise ecommerce
  • Total cost of ownership (TCO)
  • Migrations
  • B2B Ecommerce
    • Headless commerce
    • Announcements
    • Unified Commerce
    • See All topics
Search
Type something you're looking for
Log in
Get in touch

Powering commerce at scale

Speak with our team on how to bring Shopify into your tech stack

Get in touch
blog|Growth strategies

How to Improve Web Application Performance

Website performance factors like page load times can have an outsized effect on user experience. Learn how to improve your site so it runs smoothly.

by Shopify Plus
ShopifyPlus Blog Web Application Performance
On this page
On this page
  • What is web application performance? 
  • Key metrics to measure web application performance
  • Tools for measuring web application performance
  • How to boost web application performance
  • 1. Compress and optimize images
  • 2. Minimize HTTP requests
  • 3. Optimize server performance
  • 4. Use a content delivery network (CDN)
  • 5. Implement caching
  • 6. Optimize code
  • 7. Implement lazy loading
  • 8. Monitor continuously
  • Web application performance FAQ

The platform built for future-proofing

Get in touch

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.

Click here to talk with sales about Shopify plans for enterprises

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

    Apdex

    (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.

Drive your business forward with Shopify’s analytics

Explore Shopify’s analytics

How to boost web application performance

  1. Compress and optimize images

  2. Minimize HTTP requests

  3. Optimize server performance

  4. Use a content delivery network (CDN)

  5. Implement caching

  6. Optimize code

  7. Implement lazy loading

  8. 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.

Visit the Shopify Experts Marketplace

Visit now

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.

SP
by Shopify Plus
Updated on 12 Oct 2023
Share article
  • Facebook
  • Twitter
  • LinkedIn
by Shopify Plus
Updated on 12 Oct 2023

The latest in commerce

Get news, trends, and strategies for unlocking new growth.

By entering your email, you agree to receive marketing emails from Shopify.

popular posts

Enterprise commerceHow to Choose an Enterprise Ecommerce Platform for Your Scaling StoreTCOHow to Calculate Total Cost of Ownership for Enterprise SoftwareMigrationsEcommerce Replatforming: A Step-by-Step Guide To MigrationB2B EcommerceWhat Is B2B Ecommerce? Types + Examples
start-free-trial

Unified commerce for the world's most ambitious brands

Learn More

popular posts

Direct to consumer (DTC)The Complete Guide to Direct-to-Consumer (DTC) Marketing (2025)Tips and strategiesEcommerce Personalization: Benefits, Examples, and 7 Tactics for 2025Unified commerceHow To Sell on Multiple Channels Without the Logistical Headache (2025)Enterprise ecommerceComposable Commerce: What It Means and Is It Right for You?

popular posts

Enterprise commerce
How to Choose an Enterprise Ecommerce Platform for Your Scaling Store

TCO
How to Calculate Total Cost of Ownership for Enterprise Software

Migrations
Ecommerce Replatforming: A Step-by-Step Guide To Migration

B2B Ecommerce
What Is B2B Ecommerce? Types + Examples

Direct to consumer (DTC)
The Complete Guide to Direct-to-Consumer (DTC) Marketing (2025)

Tips and strategies
Ecommerce Personalization: Benefits, Examples, and 7 Tactics for 2025

Unified commerce
How To Sell on Multiple Channels Without the Logistical Headache (2025)

Enterprise ecommerce
Composable Commerce: What It Means and Is It Right for You?

subscription banner
The latest in commerce

Get news, trends, and strategies for unlocking unprecedented growth.

Unsubscribe anytime. By entering your email, you agree to receive marketing emails from Shopify.

Popular

Headless commerce
What Is Headless Commerce: A Complete Guide for 2025

29 Aug 2023

Growth strategies
How To Increase Conversion Rate: 14 Tactics for 2025

5 Oct 2023

Growth strategies
7 Effective Discount Pricing Strategies to Increase Sales (2025)

Ecommerce Operations Logistics
What Is a 3PL? How To Choose a Provider in 2025

Ecommerce Operations Logistics
Ecommerce Returns: Average Return Rate and How to Reduce It

Industry Insights and Trends
Global Ecommerce Statistics: Trends to Guide Your Store in 2025

Customer Experience
Fashion Brand Storytelling Examples to Inspire You

24 Mar 2023

Growth strategies
SEO Product Descriptions: 7 Tips To Optimize Your Product Pages

Powering commerce at scale

Speak with our team on how to bring Shopify into your tech stack.

Get in touch
Shopify logo

Shopify

  • About
  • Careers
  • Investors
  • Press and Media
  • Partners
  • Affiliates
  • Legal
  • Service status

Support

  • Merchant Support
  • Shopify Help Center
  • Hire a Partner
  • Shopify Academy
  • Shopify Community

Developers

  • Shopify.dev
  • API Documentation
  • Dev Degree

Products

  • Shop
  • Shopify Plus
  • Linkpop
  • Shopify for Enterprise

Solutions

  • Online Store Builder
  • Website Builder
  • Ecommerce Website
  • Australia
    English
  • Canada
    English
  • Hong Kong SAR
    English
  • Indonesia
    English
  • Ireland
    English
  • Malaysia
    English
  • New Zealand
    English
  • Nigeria
    English
  • Philippines
    English
  • Singapore
    English
  • South Africa
    English
  • UK
    English
  • USA
    English

Choose a region & language

  • Australia
    English
  • Canada
    English
  • Hong Kong SAR
    English
  • Indonesia
    English
  • Ireland
    English
  • Malaysia
    English
  • New Zealand
    English
  • Nigeria
    English
  • Philippines
    English
  • Singapore
    English
  • South Africa
    English
  • UK
    English
  • USA
    English
  • Terms of service
  • Privacy policy
  • Sitemap
  • Privacy Choices