Performance guidelines

Optimizing your app for performance is a key part of building a great user experience for internal users and clients. Performant apps receive higher ratings, are more likely to be recommended to others, and often have surprisingly positive impact on metrics. You can treat the below items as a checklist to ensure that you followed performance best practices.

Optimizing Network Efficiency

Minimize HTTP Requests

Reduce the number of HTTP requests as much as possible. Combine assets and employ inline SVGs to decrease the need for multiple requests.

Use CDN for Static Assets

Hosting static assets on a Content Delivery Network (CDN) ensures quicker load times by serving content from locations closest to the user.

If you’re using our Next.js-based custom app base and Vercel for hosting, you’ll get this behavior by default by storing assets in the public folder. For dynamic asset implementations, like user uploads, you can leverage Vercel Blob + Edge Network.

Resource Loading and Management

Optimize Asset Loading

Deferred loading of non-critical assets and asynchronous script loading are key to maintaining quick initial load times.

Efficiently Manage API Calls

Optimize API interaction by caching responses where feasible and being selective in the data requested. Smart management of API calls reduces load times and server strain, enhancing app responsiveness.

Implement Lazy Loading

Lazy loading defers the loading of non-essential resources until they are needed. This technique improves initial app performance by reducing the amount of data loaded upfront.

Code and Asset Optimization

Minify and Bundle Assets

Minifying HTML, CSS, and JavaScript files, and bundling them together reduces the size and number of files that need to be loaded. This streamlined approach is crucial for improving load times and overall app efficiency.

Most modern JavaScript frameworks like Next.JS, which Copilot’s Custom App Base is built on, will handle minification and bundling for you.

Use Web Workers for Background Processing

Offloading heavy computations to Web Workers keeps the main thread free for UI interactions, ensuring the app remains responsive and user-friendly.

Design and Usability

Responsive Design and Image Optimization

Ensuring your app is responsive and images are optimized for the web is vital. Properly sized and formatted images enhance load times and ensure consistency across various devices.

With Next.js you can leverage the next/image package to optimize delivery of images, one of the largest and most common assets delivered on the web, including lazy loading.

Performance Testing and Security

Test and Monitor Performance

Regular performance testing with tools like Lighthouse helps identify and rectify issues impacting user experience. Monitoring key metrics allows for continuous improvement of the app's performance.

Security and Data Privacy

Adhering to best practices for security and data privacy, including secure data transmission and encryption, is non-negotiable. Protecting user data ensures trust and compliance with privacy regulations.