1. Prepared by Srinivas Kadiyala
2. Performance
   1. Analyze Load Performance
      1. Load Website on Incognito Mode
      2. Go to Dev Tools -> Performance Tab -> Check - Screenshots, No Network Throttling, No CPU Slowdown -> Press "CTRL+SHIFT+E"
      3. It will reload the page, start the recording, profiling and process the data then displays the results on Performance Panel
      4. Analyze the Results
         1. Analyze frames per second
         2. Users are happy when animations run at 60 FPS. Look at FPS Chart
            1. If red bar above FPS, it means that the frame rate dropped so low that it's probably harming the user experience.
            2. The higher the green bar, the higher the FPS.
            3. Also look at Frames while scrolling through Navigations
         3. Look at CPU Chart
            1. The colors in the CPU chart correspond to the colors in the Summary tab
            2. If CPU chart is full of color means that the CPU was maxed out during the recording.
            3. If CPU is maxed out for long periods, it's a cue to find ways to do less work.
         4. Bonus: Frame Rate
            1. In Performance: Press CTRL+SHIFT+P, Type Rendering, Select Show Rendering
            2. Enable Frame Rendering Stats
            3. This will enable FPS Rate
         5. Finding Bottlenecks
            1. Summary Tab shows breakdown of the activity.
            2. Less time spent on rendering, Performance is good
            3. Expand Main Section
            4. Flame chart of activity on the main thread, over time.
            5. The x-axis represents the recording, over time. Each bar represents an event. A wider bar means that event took longer.
            6. The y-axis represents the call stack. When you see events stacked on top of each other, it means the upper events caused the lower events.
   2. Analyze Runtime Performance
      1. Load Website on Incognito Mode
      2. Go to Dev Tools -> Performance Tab -> Check - Screenshots, No Network Throttling, No CPU Slowdown -> Press "CTRL+E"
      3. Interact with the page. DevTools records all page activity that occurs as a result of your interactions.
      4. Stop the Profiling
   3. Memory
      1. Select Checkbox while recording
      2. This will display memory metrics
         1. JS Heap
         2. Documents
         3. NodeJS
         4. Listeners
         5. GPU Memory
3. Lighthouse
   1. Performance
      1. Analyze the Metrics
         1. Each metric provides insight into a different aspect of the performance.
      2. First Contentful Paint
         1. Tells when content is first painted to the screen, which is an important milestone in the user's perception of the page load
      3. Time To Interactive
         1. the point at which the page appears ready enough to handle user interactions.
      4. Speed Index
         1. how quickly the contents of a page are visibly populated.
      5. Total Blocking Time
         1. Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms
      6. Largest Contentful Paint
         1. marks the time at which the largest text or image is painted
      7. Cumulative Layout Shift
         1. measures the movement of visible elements within the viewport
      8. Opportunities
         1. Enable Text Compression
            1. Text compression is when you reduce, or compress, the size of a text file before sending it over the network.
            2. Go to Network Tab -> Use Large Request Rows -> See Size Column -> Size Cell shows two values. Top is size of downloaded resource and Bottom is size of uncompressed resource.
            3. If the two values are the same, then the resource is not being compressed when it's sent over the network.
            4. Then Click on Resource -> Headers Tab -> Response Headers -> Content-Encoding. If its not there, resource is not compressed.
   2. Accessibility
      1. A page is properly marked up for screen readers.
      2. The text elements on a page have sufficient contrast ratios.
      3. View ARIA-Attribute in Accessibility Pane, as we navigate through Elements Tab
      4. Review the Audit Report for Accessibility
      5. AXE University for additional Information
      6. Track element focus
         1. Navigate to Console -> Click on Create Live Expression -> document.activeElement
         2. Navigate through the website
         3. This helps while testing the keyboard navigation accessibility of a page.
4. Network
   1. Network Log
      1. Network panel logs all network activity in the Network Log.
      2. Status. The HTTP response code.
      3. Type. The resource type.
      4. Initiator. What caused a resource to be requested. Clicking a link in the Initiator column takes you to the source code that caused the request.
      5. Time. How long the request took.
         1. Initial connection. The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL.
         2. Request sent. The request is being sent.
         3. Waiting (TTFB). The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.
         4. Content Download. The browser is receiving the response, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.
      6. Waterfall. A graphical representation of the different stages of the request. Hover over a Waterfall to see a breakdown.
      7. check the Preserve log checkbox on the Network panel. DevTools saves all requests
      8. To emulate how a first-time user experiences your site, check the Disable cache checkbox.
5. Storage
   1. Find Issues on website
      1. The Issues tab presents warnings from the browser in a structured, aggregated, and actionable way.
      2. Issues with Cookies:
         1. Go to Network Tab -> Select the Resource -> Click on Cookies Option -> View the Issues in Issues Tab
6. Security
   1. Shows security overview
      1. Certificate
      2. Connection
      3. Resources
7. Recorder
   1. More Options More > More tools > Recorder
      1. Record, replay and measure user flows
8. Media
   1. More Options More > More tools > Media
      1. Player will display
         1. The Properties tab displays the properties of the media player.
         2. Events tab to view all the media player events.
         3. Messages tab to view the media player message logs.
         4. Timeline tab is where you can view the media playback and buffer status live.
9. Mobile Simulation
   1. Toogle Device Toolbar
   2. Responsive View Ports
      1. Options
         1. Show Rulers
         2. Show Media Queries
         3. Show Device Frame
         4. Network Throttling
         5. Geo Location
10. JS App? Check how app works
    1. Go to Dev Tools -> CTRL+SHIFT+P -> Disable Javascript
    2. Go to Dev Tools -> CTRL+SHIFT+P -> Enable Javascript
11. Check Version of Chrome
    1. chrome://help