Optimizing Web Performance with Expo
If you’ve read my other articles, you might have seen me mention my recent Expo web app release. Before diving into mobile development with…
If you’ve read my other articles, you might have seen me mention my recent Expo web app release. Before diving into mobile development with React Native years ago, I worked as a Full Stack Web Developer. Over time, I’ve picked up a lot about performance optimization for both web and mobile apps. When preparing to launch my latest Expo web side project, I noticed my Lighthouse scores could use some improvement. So, I spent a day tweaking things, and the results were worth it! In this article, I’ll walk you through the best web performance optimizations I applied and how you can use them too.
Performance Profiling and Monitoring
Profiling and monitoring are key to spotting performance bottlenecks in your app. Tools like Chrome DevTools let you dig into load times, rendering performance, and network requests in Expo web apps, helping you identify slow components or heavy API calls. My favorite quick-check tool is Lighthouse, built right into Chrome DevTools. It audits your app for performance, accessibility, SEO, and more, with a goal of keeping load times under 3 seconds. While other profiling tools exist, I’ve stuck with Lighthouse so far. I’m planning to explore alternatives soon, maybe even write about it, so watch this space!
Static Rendering
Static rendering, supported by Expo Router, generates HTML files at build time, boosting both performance and search engine optimization (SEO). By reducing server load and delivering content instantly, it’s a game-changer for web apps, especially content-heavy ones that don’t change often. Compared to single-page applications (SPAs), static rendering speeds up load times and helps search engines crawl your site more effectively. I’d recommend it over an SPA unless you’re building a simple one-page marketing site.
Tree Shaking
Tree shaking strips unused code from your production bundles, shrinking file sizes and speeding up load times. In Expo SDK 52, this feature is still experimental, but I’ve used it successfully in production at my day job and on my side project with minimal hiccups. It delivered the biggest Lighthouse score boost in my optimizations.
To enable tree shaking, tweak your configuration like this:
Update metro.config.js:
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: true,
},
});
module.exports = config;Update .env:
EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1
EXPO_UNSTABLE_TREE_SHAKING=1One quirk I hit: my Clerk Authentication component shifted off-screen. I fixed it by adjusting my +html.tsx file(Only add this if you are running into similar issues):
<head>
<style
// biome-ignore lint/security/noDangerouslySetInnerHtml: Necessary for inline styles
dangerouslySetInnerHTML={{
__html: `
html, body, #root {
height: 100% !important;
margin: 0;
padding: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
`,
}}
/>
</head>
<body>
<div
id="root"
style={{
height: "100%",
display: "flex",
flexDirection: "column",
}}
>
{children}
</div>
</body>Image Optimization
Images often drag down performance, so optimizing them is non-negotiable. Here’s how I tackle it:
- Resize and use WebP: WebP’s superior compression beats PNG and JPEG, slashing file sizes without losing quality. Resize images before uploading and convert them to WebP using tools like tinypng.com, which can shrink files by up to 80% for free(WebP formats work on mobile as well!).
- Leverage expo-image: I love the expo-image library, especially its useImage hook. It preloads images into memory, skipping extra network requests and speeding up rendering. Here’s a quick example:
import { useImage, Image } from 'expo-image';
import { Text } from 'react-native';
export default function MyImage() {
const image = useImage('https://picsum.photos/1000/800', {
maxWidth: 800,
onError(error, retry) {
console.error('Loading failed:', error.message);
},
});
if (!image) {
return <Text>Image is loading...</Text>;
}
return <Image source={image} style={{ width: image.width / 2, height: image.height / 2 }} />;
}Note: expo-image can stumble with FlatLists full of images, but it’s my go-to for most cases.
Third-Party Libraries
Third-party libraries can bloat your app if you’re not careful. For Expo web projects:
- Pick libraries that play nice with web platforms.
- Opt for tree-shaking-friendly ESM versions.
- Skip oversized or unneeded dependencies.
You might need a hefty library sometimes, and that’s okay if it’s actively maintained, updates often bring performance perks. Avoid unmaintained libraries, though; they’re risky for both speed and security. Sticking to popular React Native libraries usually ensures solid performance and tree-shaking support.
Conclusion
With these tweaks, profiling, static rendering, tree shaking, image optimization, and smart library choices, I bumped my Lighthouse performance score up by 20 points. Using free tools and a bit of elbow grease, you can supercharge your Expo web app’s performance in no time. What optimizations have you tried on your projects? Drop your thoughts below, I’d love to hear from you!
Try BanKan Board — The Project Management App Made for Developers, by Developers
If you’re tired of complicated project management tools with story points, sprints, and endless processes, BanKan Board is here to simplify your workflow. Built with developers in mind, BanKan Board lets you manage your projects without the clutter.
Key Features:
- No complicated processes: Focus on what matters without the overhead of traditional project management systems.
- Claude AI Assistant: Get smart assistance to streamline your tasks and improve productivity.
- Free to Use: Start using it without any upfront cost.
- Premium Features: Upgrade to unlock advanced functionality tailored to your team’s needs.
Whether you’re building a side project, managing a team, or collaborating on open-source software, BanKan Board is designed to make your life easier. Try it today!
