Google Lighthouse is an open-source | Web applicaiton optimization | Web page speeed
My gear for shooting this video
Microphone
https://amzn.to/3YmmZbi
MacBook
https://amzn.to/45dvQyg
Angular Web Worker | Responsive UI | Live Demo | Code shared - Github
• Angular Web Worker | Responsive UI | Live ...
UI vs UX | UI Development vs User Experience | Mobile First Approach | Responsive Design
• UI vs UX | UI Development vs User Experien...
Lighthouse Scoring Calculator
https://googlechrome.github.io/lighth...
Lighthouse It’s an open-source, automated tool for improving the quality of web pages
It gives insights into how your web application evolves.
DOM Size
A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows
Main Thread
Consider reducing the time spent parsing, compiling and executing JS
Debounce
• Avoid long-running input handlers; they can block scrolling.
• Do not make style changes in input handlers.
• Debounce your handlers; store event values and deal with style changes in the next requestAnimationFrame callback.
If, however, you attach an input handler, like touchstart, touchmove, or touchend, the compositor thread must wait for this handler to finish executing because you may choose to call preventDefault() and stop the touch scroll from taking place. Even if you don’t call preventDefault() the compositor must wait, and as such the user’s scroll is blocked, which can result in stuttering and missed frames.
Image
Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load, as in this example of a missing image.
Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). For example, the alt text for an image of a question mark that links to a help page should be “Contact Support” rather than “question mark.”
Intruders have automated web crawlers that can scan your site for known security vulnerabilities. When the web crawler detects a vulnerability, it alerts the intruder. From there, the intruder just needs to figure out how to exploit the vulnerability on your site.
LCP
Largest Contentful Paint (LCP) is one of the three Core Web Vitals metrics, and it represents how quickly the main content of a web page is loaded. Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.
Cumulative Layout Shift (CLS)
Layout shifts can be distracting to users. Imagine you've started reading an article when all of a sudden elements shift around the page, throwing you off and requiring you to find your place again. This is very common on the web, including when reading the news, or trying to click those 'Search' or 'Add to Cart' buttons. Such experiences are visually jarring and frustrating. They're often caused when visible elements are forced to move because another element was suddenly added to the page or resized.
FrontPro - A channel to provide you crystal clear concepts on frontend technologies. Videos are recorded on real use cases in IT Industry.
Contact Us - [email protected]