Posted on Oct 20 • Originally published at casca.space This article is for website creators who have some knowledge of backend and NGINX. It's about how we improved our browser extension to make it faster and better. By reading it, you'll learn about the tools and tricks we use to fix slow loading and other annoying problems. Casca is a browser extension that replaces your default new tab into a personalized dashboard. It lets you set up different workspaces (like one for work and one for personal stuff), customize your dashboard with helpful widgets, interact with ChatGPT, choose nice backgrounds, preview websites and more. It’s all about making your online space tidy and efficient.At Casca, we prioritize the speed and performance of our extension for several reasons:To build Casca Extension, we used a bunch of different technologies such as:By using NGINX Content Caching and IndexedDB, we have improved the way we get large background images and multiple favicons. This means we can quickly save and retrieve images from a cache so they can be accessed immediately in the future.A part of our NGINX configuration:Express.js middleware:And usage on the client side:These optimizations made a big difference. For example, our background image used to be a large 1.9MB, but with the Sharp library, it's now just 334kB. This not only speeds up loading but also saves on network data and RAM usage. This makes the Casca Extension work smoothly, even on devices with less memory, providing a better user experience.The original image and our highly optimized copy:The differences in quality are not noticeable to the naked eye.To fetch data from other websites, we used Node.js and Express to create a middleware. It allows to save and serve the data quickly, even if the original website is slow.In addition, we store the fetched data in the localStorage cache. Therefore, the data is accessed offline and updated only when subsequent requests are fulfilled.The implementation of the useEvent hook:Usage:There are multiple names for this hook. You can find the documentation under the names useEvent or useEffectEvent.For more information you can check the library documentation at https://github.com/CascaSpace/keep-unchanged-valuesTo build a fast browser extension, it's important to consider more than just writing efficient code. Here are some tips for frontend developers:By following these tips, you can make sure that your browser extension runs well and efficiently, giving your users a better experience.We have made the Casca Extension much faster and more efficient by using different technologies. We fixed problems like slow loading of images and favicons, dealing with slow requests, and reducing unnecessary re-renders. As a result, our users now enjoy a quick and smooth browsing experience. We prioritize speed and responsiveness to ensure a seamless and enjoyable online experience without using too much of your device's resources. We will continue to improve our technology to keep Casca lightweight and efficient for our users.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Pavel Lazarev - Oct 13 Yoav Ganbar - Oct 12 sandra oghenesode - Sep 30 Alexandra - Sep 29 Once suspended, qostya will not be able to comment or publish posts until their suspension is removed. Once unsuspended, qostya will be able to comment and publish posts again. Once unpublished, all posts by qostya will become hidden and only accessible to themselves. If qostya is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Constantine. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag qostya: qostya consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging qostya will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.