From e18df2b24b12936cd1112ceb9014042276f1af9e Mon Sep 17 00:00:00 2001
From: Anu <96435434+anu-codes@users.noreply.github.com>
Date: Sat, 21 May 2022 22:26:58 +0530
Subject: [PATCH] Add content to PWA peformance node (#1269)

#### What roadmap does this PR target?

- [ ] Code Change
- [x] Frontend Roadmap
- [ ] Backend Roadmap
- [ ] DevOps Roadmap
- [ ] All Roadmaps
- [ ] Guides

#### Please acknowledge the items listed below

- [x] I have discussed this contribution and got a go-ahead in an issue before opening this pull request.
- [x] This is not a duplicate issue. I have searched and there is no existing issue for this.
- [x] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed.
- [x] I have read the [contribution docs](../contributing) before opening this PR.

#### Enter the details about the contribution

I have added a description and several resources that I have used myself and found useful in learning the topic of PWA performance analysis.
-1st link is from google web.dev and provides several articles on what is speed, how does it matter and how one can measure and optimize the performance of PWAs.
-2nd link gives detailed explanation on what is PRPL pattern and how it works.
-3rd resource is from google web.dev and teaches how to implement PRPL pattern to instantly load PWAs
-4th resource is from google web.dev and gives a detailed account about RAIL model and its implementation
-5th resource is from freecodecamp and gives an introduction to Chrome Lighthouse
-6th resource is from PWA training module of Google Developers (Web)
-7th resource is a 5 minute tutorial on how to use Lighthouse to audit your PWAs

I was unable to find a resource on devtools that is specifically catered to PWAs compared to general website performance analysis. Will add later if needed and this contribution gets approval!
---
 .../117-progressive-web-apps/101-performance.md      | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md
index 55cb80a3a..ed1e27872 100644
--- a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md
+++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md
@@ -1 +1,11 @@
-# Performance
\ No newline at end of file
+# Performance
+
+Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones. Tools like Lighthouse and Devtools highlight performance metrics and help improve performance of PWAs.
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/fast/'> Fast load times: Techniques for improving site performance.</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.patterns.dev/posts/prpl/'>PRPL pattern</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/apply-instant-loading-with-prpl/'>Apply instant loading with PRPL</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rail/'>Measure performance with the RAIL model</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/introduction-to-chrome-lighthouse/'>Introduction to Chrome Lighthouse</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool'>Lighthouse PWA Analysis Tool</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=egmwY9n6qWY'>PWA Tutorial: Lighthouse Audit</BadgeLink>