Top 12 web-performance Open-Source Projects
-
These days, UI frameworks tend to make heavy use of modern Javascript and utilize components and reactive patterns to handle real-time interaction. Angular, React, and Vue are now well established as the standard for what we know as modern frontend development. Alongside these, we’ve seen the rise of framework-specific UI libraries that aim to provide a “batteries included” approach to UI, with deep integration of each framework’s unique set of features. This includes Angular Material, Mantine (for React), and Vuetify.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
After removing and re-adding webpack](https://webpack.js.org/) 10 times with each tool, I got the following results:
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: Ask HN: Do you load test your applications? If so, how? | news.ycombinator.com | 2022-06-28
I previously used https://k6.io/ in lieu of better options. It was great for getting up and running reasonably quickly, but also kind of had a weird JS runtime so the error messages weren't always intuitive so debugging was a pain.
Then again, could also use anything like Apache JMeter (https://jmeter.apache.org/), Gatling (https://gatling.io/open-source/) or any other solution out there, whichever is better suited for the on-prem/cloud use case.
That said, when time was limited and I literally didn't have the time to figure out how to test WebSocket connections and which resources the test should load, I literally cooked up a container image with Selenium (https://www.selenium.dev/) with Firefox/Chrome as a fully automated browser, for 1:1 behavior as real users would interact with the site.
That was a horrible decision from a memory usage point of view, but an excellent one from time-saving and data quality perspectives, because the behavior was just like having 100-1000 users clicking through the site.
Apart from that, you probably want something to aggregate the performance data of the app, be it something like Apache Skywalking (https://skywalking.apache.org/) or even Sentry (https://sentry.io/welcome/). Then you can probably ramp up the tests slowly over time in regards to how many parallel instances are generating load and see how the app reacts - the memory usage, CPU load, how many DB queries are done etc.
-
For example lazy loading youtube [videos with facades](https://web.dev/third-party-facades/?utm_source=lighthouse&utm_medium=devtools) as recommended by lighthouse. Or preloading pages using [quicklink](https://github.com/GoogleChromeLabs/quicklink). Of course, simple things such as loading="lazy" help too.
-
Use the Mozilla JPEG Encoder, which implements several tricks for smaller file size / better visual quality. The result is still JPEG standard compatible that other software can decode.
-
Project mention: 5 tools for Core Web Vitals to measure and improve website UX | dev.to | 2022-04-14
Web Vitals extension is dedicated to the Google Chrome desktop version. It works great in the early diagnostic stages when it is possible to catch basic errors. The extension is available to install from the GitHub repository.
-
Had no idea curl could do this. If you need a deeper dive, you can do something similar with headless chrome and the chrome remote dev tools protocol.
There's a good example with puppeteer, here:
https://github.com/addyosmani/puppeteer-webperf#devtools-pro... (Ctrl-F, and search for "Get Navigation Timing API metrics").
There are other snippets there that you can turn into text command line tools too.
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
Aurelia 2
Aurelia 2, a standards-based, front-end framework designed for high-performing, ambitious applications.
-
Project mention: Freenet is a peer-to-peer platform for censorship-resistant communication | news.ycombinator.com | 2021-09-19
This should be easy to set up with Github Actions, here is an example where it builds some Kotlin documentation and deploys to Github Pages: https://github.com/kwebio/kweb-core/blob/master/.github/work...
-
-
Stéphane Carrez is the goto guy for web stuff in ada (u/ciceron67 on reddit I thnik). He has developed a whole framework, based on AWS as far as I can tell. You can see here: https://github.com/stcarrez/ada-awa
-
web-performance related posts
- Lossy Image Compression with Dithering
- Fighting JPEG Color Banding
- Can I ditch AMP?
- 5 tools for Core Web Vitals to measure and improve website UX
- QUICKLINK: Module for faster subsequent pageload
- AVIF Has Landed
- Mishaal Rahman on Twitter: "Samsung, MediaTek, and Google have enabled AV1 decode support in their chipsets, making Qualcomm the biggest holdout. I'm hoping that the next Snapdragon 8 series chipset brings AV1 decode support. Wishful thinking? Maybe."
Index
What are some of the best open-source web-performance projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Angular | 83,077 |
| 2 | webpack | 61,528 |
| 3 | skywalking | 19,928 |
| 4 | quicklink | 9,430 |
| 5 | mozjpeg | 4,936 |
| 6 | web-vitals-extension | 2,022 |
| 7 | puppeteer-webperf | 1,633 |
| 8 | Aurelia 2 | 1,215 |
| 9 | core | 648 |
| 10 | ngx-hover-preload | 153 |
| 11 | ada-awa | 74 |
| 12 | Black-Friday-Performance-Testing | 8 |
Are you hiring? Post a new remote job listing for free.
