⚡️ How to build a high-performance web app and how to keep it top notch ⚡️
This is a sample repo which uses gatsby starter-blog and shows how you can leverage modern performance quality assurance technqiues on how to start with a fast and performant blog and how to keep it to notch. You can use most of the tools with all other web project based on vue, react angular or vanilla js.
While there are a lot of awesome resources on how to improve performance leveraging modern techniques like code splitting or the PRPL-pattern... etc. I couldn't find a lot of information on how to build an automated ci pipeline to make sure that you don't regret on performance or at least you can decide wheter these changes are worth the performance degration. This repo covers some steps on how you can use awesome open source tools and include them in your CI pipeline.
Setting the baseline
-
hwhat is web performance -> RAIL (https://developers.google.com/web/fundamentals/performance/rail) There are a lot of buzzwords when talking about loading performance but you can leverage loading into three different user timings.
-
Define a performance budget alex russel link
-
Tooling
lightweit tooling vscode plugin cost bundleuthopia bundle-size size-limit
- CI / CD
make issues as obvious as possible use badges they not only look good. make pipeline fails use your light bulbs :D
-
Measure
-
Fix
-
Repeat
-
Its a never ending story try to make web performance issues as obvious as possible Before you can
Further Links and some Tools worth checking out
speedcurve calibre sitespeed.io garie [webpagetest] https://www.webpagetest.org/