> For the complete documentation index, see [llms.txt](https://strv.gitbook.io/frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://strv.gitbook.io/frontend/a11y-0.0.1/project-guidelines/quality-output/performance.md).
# Performance
**Web is fast, web is slow**. Your app should be accessible to all users, regardless if they are on a super-fast fiber network or on a 3G/2G. You can have an amazing app running super fast, but if users are not able to load it, it’s useless.
There are many studies about how page load time actually affects conversion rates. After 2014, mobile usage has taken over desktop use; since then, we've needed to focus on mobile first. And mobiles are unfortunately prone to be on a slow network.
The math here is simple. The less data there is to load, the faster the load is.
Tools like [Lighthouse](https://developers.google.com/web/tools/lighthouse/) and [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) help you analyze your output and improve the overall user experience.
Performance plays a major role in the success of any online venture. Please follow [Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/) on Google’s Web Fundamentals. Take an extra look on provided *case studies*. It’s obvious that when a web app is faster, it’s more successful.
* - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
*
## Loading Performance
Loading performance is all about how fast the end-user will see your app. There are a few terms you should be aware of:
* Time to First Byte (TTFB) - seen as the time between clicking a link and the first bit of content coming in.
* First Paint (FP) - the first moment any pixel becomes visible to the user.
* First Contentful Paint (FCP) - the time when requested content (article body, etc.) becomes visible.
* Time To Interactive (TTI) - the time at which a page becomes interactive (events wired up, etc.).
>
The audit tools mentioned above will help you fix the majority of issues with loading performance.
### How to improve loading performance?
* Service Workers
* Lazy loading images
* [Optimizing bundle size](https://app.gitbook.com/s/-LrJff76CchkMVtpFAgb-2836075413/project-guidelines/quality-output/bundle-size.md)
* Minification
* Code splitting
* Tree shaking
* [CDN](https://app.gitbook.com/s/-LrJff76CchkMVtpFAgb-2836075413/project-guidelines/quality-output/deployment.md#content-delivery-network-cdn)
## Runtime Performance
Runtime Performance is more about how smooth and fluid your app is. You should aim to have 60fps all the time. You can use Chrome’s flame chart, which visualizes JavaScript performance. Also, there is the FPS meter.
### How to improve runtime performance?
* [react-window](https://github.com/bvaughn/react-window) - React components for efficiently rendering large lists and tabular data
* WebGL for hardcode web animations accelerated by GPU
* web-workers
* WebAssembly
## Articles
* [20 Ways to Speed Up Your Website and Improve Conversion in 2019](https://www.crazyegg.com/blog/speed-up-your-website/)
* [Smashing Magazine's Frontend Performance Checklist 2020](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/)
* [2019 Page Speed Report for Marketers](https://unbounce.com/page-speed-report/)
* [Industry Benchmarks on Mobile Page Speeds](https://www.thinkwithgoogle.com/intl/en-aunz/advertising-channels/mobile/au-mobile-page-speed-new-industry-benchmarks/)
* [Impact on conversion rates](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm)
* [Mobile pages speeds](https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/)
* [How fast should a website load?](https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/)
* [Value of speed](https://web.dev/value-of-speed/)
* [Google Mobile Site Speed Playbook](https://www.thinkwithgoogle.com/_qs/documents/3975/c676a_Google_MobileSiteSpeed_Playbook_v2.1_digital_RD1XArd.pdf)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://strv.gitbook.io/frontend/a11y-0.0.1/project-guidelines/quality-output/performance.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.