We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Nikola Mitrovic - Superpowers of browser's Web API - DevWorld 2024
Optimize web performance with edge computing, code splitting, and lazy loading, while leveraging browser Web APIs, service workers, and libraries like UseSWR and React-Query to improve caching, data fetching, and offline capabilities.
- To optimize web performance, consider edge computing, which is like a CDN for dynamic data.
- The JavaScript size is a major bottleneck in web performance, and it’s essential to optimize its delivery.
- Code splitting and lazy loading can help reduce the initial bundle size and improve performance.
- Service workers can provide offline capabilities and more control over caching.
- Content addressable storage pattern can be used to store and retrieve data efficiently.
- Use libraries like UseSWR and React-Query to handle caching and data fetching.
- Progressive image loading and low-quality image placeholder pattern can improve image loading performance.
- Web APIs like Web Storage and Web Cache API can be used to store and retrieve data.
- Intersection observers can be used to detect when an element is visible or not.
- Preloading and prefetching data can improve page load times.
- Server-side rendering and progressive hydration can improve performance by reducing the amount of JavaScript that needs to be loaded.
- QUIC is a protocol that allows for initial loading of zero kilobytes of JavaScript and lazy loading of everything else.
- Libraries like Astro and Next.js provide features like server-first framework, UI-agnostic, and zero JavaScript by default.
- Browser’s Web API provides various functionalities that can be leveraged to improve web performance.