Kamran Ahmed
2 years ago
parent
8e257d3168
commit
7103263ba6
7 changed files with 368 additions and 215 deletions
@ -0,0 +1,13 @@ |
|||||||
|
# PRPL Pattern |
||||||
|
|
||||||
|
The PRPL pattern is a performance optimization pattern for web applications that focuses on minimizing the time it takes for the initial rendering of a web page. It stands for Push, Render, Pre-cache, and Lazy-load, and it involves the following steps: |
||||||
|
|
||||||
|
* Push: Prioritize the delivery of critical resources, such as HTML, CSS, and JavaScript, to the client as early as possible. |
||||||
|
* Render: Start rendering the web page as soon as the critical resources are received, even if some non-critical resources are still being downloaded. |
||||||
|
* Pre-cache: Pre-cache non-critical resources in the background so that they are available when needed. |
||||||
|
* Lazy-load: Defer the loading of non-critical resources until they are needed, such as when the user scrolls to them or interacts with them. |
||||||
|
|
||||||
|
The PRPL pattern is designed to improve the perceived performance of a web page by reducing the time it takes for the page to become interactive. It is particularly useful for applications that are served over slow or unreliable networks, as it allows the page to render as quickly as possible and then gradually load the remaining resources. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/prpl-pattern'>PRPL Pattern - Google Developers</BadgeLink> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
# RAIL Model |
||||||
|
|
||||||
|
The RAIL model is a performance optimization model for web applications that focuses on improving the perceived performance of a web page. It stands for Response, Animation, Idle, and Load, and it involves the following four performance goals: |
||||||
|
|
||||||
|
* Response: The time it takes for the web page to respond to user input should be under 100 milliseconds. |
||||||
|
* Animation: The time it takes for an animation to run should be under 10 milliseconds. |
||||||
|
* Idle: The web page should take advantage of idle time to perform non-critical tasks. |
||||||
|
* Load: The time it takes for the web page to fully load should be under 1 second. |
||||||
|
|
||||||
|
The RAIL model is designed to provide a framework for optimizing the performance of a web page by focusing on the four key areas that impact the user's perception of performance. It is particularly useful for applications that require high levels of interactivity, such as games and social media applications. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/rail'>RAIL Model - Google Developers</BadgeLink> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
# Performance Metrics |
||||||
|
|
||||||
|
Web performance metrics are quantitative measures of the performance of a web page or application. They are used to assess the speed and efficiency of a web page, and they can help identify areas for improvement. Some common web performance metrics include: |
||||||
|
|
||||||
|
* Load time: The time it takes for a web page to fully load and become interactive. |
||||||
|
* First contentful paint (FCP): The time it takes for the first content to appear on the page. |
||||||
|
* Time to interactive (TTI): The time it takes for the page to become fully interactive. |
||||||
|
* First input delay (FID): The time it takes for the page to respond to the first user input. |
||||||
|
* Total blocking time (TBT): The time it takes for the page to become fully interactive, taking into account the time spent blocking the main thread. |
||||||
|
|
||||||
|
There are many tools and techniques available for measuring web performance metrics, including browser dev tools, performance monitoring tools, and web performance APIs. By tracking these metrics and analyzing the results, web developers can identify areas for improvement and optimize the performance of their web pages. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics'>Web Performance Metrics - Google Developers</BadgeLink> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/metrics/'>Measuring performance and user experience - Google Developers</BadgeLink> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Lighthouse |
||||||
|
|
||||||
|
Lighthouse is an open-source tool developed by Google that is used to audit the performance, accessibility, and SEO of web pages. It is available as a browser extension and as a command-line tool, and it can be run on any web page to generate a report with recommendations for improvement. |
||||||
|
|
||||||
|
Lighthouse works by simulating the load and interaction of a web page and measuring various performance metrics, such as load time, time to first paint, and time to interactive. It also checks for common issues such as incorrect image sizes, missing alt text, and broken links. |
||||||
|
|
||||||
|
Lighthouse provides a comprehensive and easy-to-use tool for identifying and fixing performance and accessibility issues on web pages. It is widely used by web developers and is integrated into many popular development tools. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/lighthouse'>Lighthouse - Google Developers</BadgeLink> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
# Browser DevTools |
||||||
|
|
||||||
|
Most of the browsers have built-in developer tools that help you perform web development specific tasks on a webpage. My personal recommendation would be to use Chrome DevTools as it is the most advanced and has the most features. However, if you are using a different browser, you can still use the DevTools to debug your web application. |
||||||
|
|
||||||
|
Chrome DevTools is a set of web development tools built into the Google Chrome browser. It allows web developers to debug and optimize web pages by providing a range of features for inspecting and manipulating the page's HTML, CSS, and JavaScript. |
||||||
|
|
||||||
|
Some of the features provided by Chrome DevTools include: |
||||||
|
|
||||||
|
* **Elements panel**: Inspect and modify the page's HTML and CSS. |
||||||
|
* **Console panel**: View and debug JavaScript errors and log messages. |
||||||
|
* **Network panel**: Monitor network requests and responses, and analyze performance issues. |
||||||
|
* **Performance panel**: Analyze the performance of the page and identify bottlenecks. |
||||||
|
* **Application panel**: Inspect the page's resources, such as cookies and local storage. |
||||||
|
|
||||||
|
Chrome DevTools is a powerful and essential tool for web developers, and it is widely used to debug and optimize web pages. It is constantly updated with new features and improvements, and it is available on all modern web browsers. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developers.google.com/web/tools/chrome-devtools'>Chrome DevTools - Google Developers</BadgeLink> |
||||||
Loading…
Reference in new issue