## Abstract
Arweave^[[Arweave](https://www.arweave.org)] made the Permaweb – a permanently available level for web applications. Web applications that do not require a hosting infrastructure or a backend. These single page applications are based on web technologies, they communicate via REST API and use Arweave Blockchain for data storage.
The objective of Permaweb developers is to build complex applications that are responsive, lightweight, speedy and usable for (mobile) users^[[Mobile phone ownership over time](https://www.pewresearch.org/internet/fact-sheet/mobile/)]. Progressive web applications^[[PWAs](https://en.wikipedia.org/wiki/Progressive_web_applications)] can be installed as native desktop applications, so they should fill up as native OS applications.
> Today roughly one-in-five American adults are “smartphone-only” internet users – meaning they own a smartphone, but do not have traditional home broadband service.
All performance optimization techniques results in a smaller app size that has a positive effect to the reduced transfer costs.^[[Arweave Fee Calculator](https://jcx2olqdzwgm.arweave.net/71giX-OY-3LwXtfr44B2dDyzW8mPHEAKA-q0wGT0aRM)]
## Techniques
Which opportunities provide the performance boost to Permaweb apps? What makes an application fly?
#### 1. Less Dependencies
The fastest and easiest way to build web applications is to use JavaScript frameworks and libraries like React. There are also various plugins, external components and node modules. All these dependencies are installed very quickly, but generate tons of unused code.^[[Stop. Using. JS Frameworks. By. Default.](https://twitter.com/MattWilcox/status/1185613995308408832?s=20)]
Save a few kilobytes^[[Angular CLI and Moment.js: A recipe for disaster](https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173)] by asking yourself the following questions:
1. Do I really need a particular library or plugin? What problem does it solve?^[[Carelessly including modules](https://electronjs.org/docs/tutorial/performance#1-carelessly-including-modules)]
2. What dependencies does a package have? Does it increase the app size?
Also, more dependencies mean more potential vulnerabilities. For an app that remains unchanged forever, it's a disastrous scenario.
In a nutshell an accurate summary: The less dependencies an app has, the better it is for the web performance, the app size and the security.
#### 2. Optimized Assets
Optimize all the things! It's about the file size of each static file. Before deploying a project to Permaweb, respect the following checklist:
- Minify all CSS and JavaScript files in the `public/dist` folder^[[Minification](https://en.wikipedia.org/wiki/Minification_(programming))]
- Lossless compression^[[Lossless compression](https://en.wikipedia.org/wiki/Lossless_compression)] for images to make them smaller
- Use webpack^[https://webpack.js.org], rollup^[https://rollupjs.org], Parcel^[https://parceljs.org] to automate the processes
- Run `arweave deploy`^[[Arweave Deploy User Guide](https://docs.arweave.org/developers/tools/arweave-deploy)] with its useful utilities
##### More possibilities about pictures
1. Prefer SVG instead of JPEG/PNG; SVG is scalable and can be gzip compressed
2. Use modern image formats (e.g. WebP^[https://en.wikipedia.org/wiki/WebP]) with a fallback
3. Love the `picture` tag, because it is for playing with responsive pictures^[[Web Fundamentals / Responsive Images](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images)]
#### 3. Install Service Worker
Service Worker^[[Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)] is a wonderful, simple and maintenance-free tool for client-side caching of resources. All static files like JavaScript, stylesheets, images, web fonts can be stored in the browser memory without depending on the HTTP Cache Headers^[[Cache-Control HTTP Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)].
Cached assets will be reduce the amount of HTTP requests to the server and greatly increases the performance of an application.
```
<script>
('serviceWorker' in navigator) && navigator.serviceWorker.register('sw.js');
</script>
```
_Register Service Worker as sw.js JavaScript file_
```
self.addEventListener('fetch', event => {
const request = event.request;
const url = new URL(request.url);
if (url.origin !== location.origin) {
return;
}
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
```
_Get all internal file requests from the client cache_
FYI: _Arweave Deploy_ is prepared for using Service Worker^[[Deploy a directory to Arweave](https://github.com/ArweaveTeam/arweave-deploy#deploy-a-directory)].
#### 4. Use localStorage
Store data that never changes in `Window.localStorage`^[[Window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)]. For example, transaction information does not change and can be saved quietly in browser (local)storage. Instead of querying a transaction via REST API, the app reads the data from the memory. This provides a performance boost for the application.
```
const postTransaction = async (data, wallet) => {
const tx = await arweave.createTransaction({data}, wallet);
await arweave.transactions.sign(tx, wallet);
await arweave.transactions.post(tx);
window.localStorage.setItem(tx.id, JSON.stringify(tx));
return tx;
}
```
_Create, post and cache a new transaction_
```
const getTransactionById = async txid => {
let tx = window.localStorage.getItem(txid);
if (tx) {
return JSON.parse(tx);
}
tx = await arweave.transactions.get(txid);
return tx;
};
```
_Get a transaction from cache with REST API fallback_
#### 5. Micro optimizations
Other smaller but effective techniques to improve the speed of a web application:
1. Understand the difference of loading priorities^[[JavaScript Loading Priorities in Chrome](https://addyosmani.com/blog/script-priorities/)]
2. Prefetch or preload hight priority assets^[[Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)]
3. Prefer the WOFF2 web font format^[[WOFF 2.0 - Web Open Font Format](https://caniuse.com/#feat=woff2)]
## Conclusion
These techniques allow every frontend developer to build high-performance Permaweb apps. Arweave nodes are fast. ArQL and GraphQL queries are fast. The Permaweb applications should also be fast.
### Author
[Sergej Müller](https://github.com/sergejmueller)
### License
Attribution-NonCommercial 4.0 International ([CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/))