{"version":3,"sources":["webpack:///./src/content/Check_your_Web_App_health_with_Lighthouse.mdx"],"names":["h","layoutProps","MDXLayout","MDXContent","components","props","width","require","isMDXComponent","name","inject","$mdxComponents","default","computed","this","render","createElement","mdx","bind"],"mappings":"6HAEIA,E,6CAMEC,EAAc,GAGdC,EAAY,UAClB,SAASC,EAAT,GAGG,IAFDC,EAEC,EAFDA,WACGC,EACF,iCACD,mBAAsBJ,EAAtB,GAAuCI,EAAvC,mBAA0DD,EAA1D,QAA8E,gBAA9E,mBACS,sBADT,0DAGmB,OAHnB,+BAGsC,OAAS,CACvC,KAAQ,mBAJhB,8CAMmB,OANnB,+BAMsC,OAAS,CACvC,KAAQ,yCAPhB,oEASmB,OATnB,+BASsC,OAAS,CACvC,KAAQ,mCAVhB,+DAYmB,OAZnB,+BAYsC,OAAS,CACvC,KAAQ,iBAbhB,sCAgBS,iBAhBT,mCAkBQ,uBAlBR,g4BA8BmB,OA9BnB,8DA8BsE,OAAS,CACvE,KAAQ,6BA/BhB,gFAkCc,CACVE,MAAO,QAnCX,WAoCUC,EAAQ,QApClB,QAoCwE,OApCxE,IAoCmF,mBApCnF,YAoCkH,6BApClH,0CAuCmB,OAvCnB,sJA2Cc,CACVD,MAAO,QA5CX,WA6CUC,EAAQ,QA7ClB,QA6CgF,OA7ChF,IA6C2F,mBA7C3F,YA6C0H,gCA7C1H,kCA+CmB,OA/CnB,4QAiD6C,OAAS,CAC9C,KAAQ,mDAlDhB,iEAqDS,uCArDT,yDAuDQ,uBAvDR,2WA4DiD,MA5DjD,kHA6DuB,MA7DvB,ywBAsEmC,MAAQ,CACrC,KAAQ,4BAvEd,iGA0EmB,OA1EnB,+BA0E2C,OA1E3C,kGA2EmB,OA3EnB,+BA2E2C,OA3E3C,0FA4EmB,OA5EnB,+BA4E2C,OA5E3C,qFA8Ec,CACVD,MAAO,QA/EX,WAgFUC,EAAQ,QAhFlB,QAgF4E,OAhF5E,IAgFuF,kBAhFvF,YAgFqH,qBAhFrH,0MAmFS,iCAnFT,oDAqFQ,uBArFR,8kBA6F2C,MA7F3C,qDA6FqG,MA7FrG,kFA6F4L,MA7F5L,mEA6FgQ,MA7FhQ,+VAkGS,eAlGT,iCAoGQ,uBApGR,mSA4GFJ,EAAWK,gBAAiB,EAEb,cACbC,KAAM,MACNC,OAAQ,CACNC,eAAgB,CACdC,QAAS,kBAAM,iBAAO,OAG1BC,SAAU,CACRT,WADQ,WAEN,OAAOU,KAAKH,mBAGhBI,OAZa,SAYNC,GAEL,OADAhB,EAAIiB,OAAIC,KAAK,CAAEF,gBAAeZ,WAAYU,KAAKV,aACxCD,EAAW,CAAEC,WAAYU,KAAKV","file":"js/chunk-2d0c739f.c5caecb0.js","sourcesContent":["// vue babel plugin doesn't support pragma replacement\nimport { mdx } from '@mdx-js/vue'\nlet h;\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\n\n\nconst layoutProps = {\n \n};\nconst MDXLayout = \"wrapper\"\nfunction MDXContent({\n components,\n ...props\n}) {\n return \n

Table of contents:

\n
    \n
  1. {`Introduction`}
    2. \n
  2. {`Lighthouse and the Core Web Vitals`}
    3. \n
  3. {`Why Lighthouse is not enough?`}
    4. \n
  4. {`Conclusion`}
    5. \n
\n

\n Introduction\n ↑ go up\n

\n

{`Lighthouse is an open-source tool provided by Google, embedded directly in the Chrome browser. The purpose\nof this tool is to perform audits on any website and provide tons of insights and recommendations, helping\nyou deliver a great user experience (UX).`}

\n

{`From my point of view, Google has created the tool everyone has been waiting for. Some of you reading this\npost might have been asked to perform a website audit, explain why one site is better than another, or just\nshowcase how reliable your work is. You will definitely enjoy using Lighthouse.`}

\n

{`Lighthouse also gives you a glimpse into how Google ranks your website when a user searches for similar\ncontent on the Web, based on the score your site achieves.`}

\n

{`As of the time I’m writing this post, you can use Lighthouse in the following ways:`}

\n \n \"Wally's\n
\n \n
\n \"Wally's\n \n

\n Lighthouse and the Core Web Vitals\n ↑ go up\n

\n

{`Google’s goal, as usual, is to make the Web a better place.`}

\n

{`The best-ranked websites after a Google search are those that offer the best user experience. Although\nsome sites pay Google for top rankings, these are clearly tagged as paid. Meanwhile, sites with great\ncontent and UX are considered `}{`good content providers`}{` by Google and pushed to the top based on their\n`}{`Core Web Vitals score`}{`.`}

\n

{`Initially, Lighthouse aimed to \"demystify\" web performance for both tech and non-tech audiences. The problem\nwas that Google announced new rules, with a deadline, for applying these metrics to its search ranking\nalgorithm.`}

\n

{`During the global open Beta, Lighthouse proved robust and invaluable for IT departments. The metrics it\nprovided were so comprehensive that no one could hide anymore. Your site or app was either performing well\nor it wasn't, but improvement paths remained unclear for some companies, especially those with massive\nlegacy systems.`}

\n

{`This is why Google simplified things by introducing Core Web Vitals—a subset of the original metrics.\nYou can read more at `}{`web.dev/vitals`}{`. The three most critical metrics are:`}

\n \n \"Core\n

{`These metrics are essential to ensuring your users have a positive experience. If any of these are\ndegraded, users may turn to other sources where the UX is more pleasant.`}

\n

\n Why Lighthouse is not enough?\n ↑ go up\n

\n

{`If you’re new to Lighthouse, you might think it’s the silver bullet you’ve been waiting for—just run it\nand get all the insights you need. However, Lighthouse will only provide insights for a successful user\njourney, not everything.`}

\n

{`Google sets the bar high, but depending on your product, customer habits, etc., you may need more detailed\nmetrics. For example, if most users access your content via ethernet or from a specific region, you’ll need\nother tools to tailor your optimization path.`}

\n

{`Tools like `}{`Sentry`}{` or `}{`Rollbar`}{` help monitor real-time issues, and `}{`feature flag`}{` tools like `}{`LaunchDarkly`}{` let you\nexperiment with features safely and track feature toggling data.`}

\n

{`Lighthouse also falls short when it comes to issues related to your infrastructure's scalability. If your\napplication serves multiple regions, it must run on an architecture that ensures fast response times in\neach region.`}

\n

\n Conclusion\n ↑ go up\n

\n

{`As explained above, there is no silver bullet. Any issue your users encounter should be monitored, and many\ntools can help you focus on known problems. This avoids wasting time reinventing the wheel, so you can\nconcentrate on what truly matters for your users.`}

\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n\nexport default {\n name: 'Mdx',\n inject: {\n $mdxComponents: {\n default: () => () => ({})\n }\n },\n computed: {\n components() {\n return this.$mdxComponents()\n }\n },\n render(createElement) {\n h = mdx.bind({ createElement, components: this.components })\n return MDXContent({ components: this.components })\n }\n}\n "],"sourceRoot":""}