BHARATIYA VIDYA BHAVAN’S

SARDAR PATEL INSTITUTE OF TECHNOLOGY

Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

Name Reyansh Mehta

UID no. 2023300142

Experiment No. 2

AIM: Analyze network performance parameters using chrome devtool

Program 1

PROBLEM 1. Open Chrome DevTool

STATEMENT : 2. Clear the network cache
3. Enable Network Throttling

RESULT:
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

Program 2

PROBLEM 1. Test the Page with Different Throttling Profiles

STATEMENT : 2. Analyze Network Requests

RESULT:
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

Fast 4G

3G
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

Offline Throttling

Program 3

PROBLEM 1. Simulate Different Scenarios and Record Performance

STATEMENT: 2. Evaluate Resource Prioritization
3. Check for Bottlenecks

RESULT:
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

Observations:
1. Content Download:
o The content download time is 132.46 ms, which is relatively efficient. For modern
web applications, staying below 200 ms is generally acceptable.
2. Waiting for Server Response:
o The waiting time for the server response is 1.29 s (1290 ms), which is
significantly higher than the ideal threshold of under 200 ms. A higher response
time may cause delays in rendering critical resources.
3. Performance Metrics:
o Largest Contentful Paint (LCP): 2.80s (local), 2.43s (field 75th percentile)
▪ LCP measures when the largest visible content loads. A value under 2.5s is
considered good, so improvements are needed.
o Cumulative Layout Shift (CLS): 0.01 (good score)
▪ CLS measures visual stability. A value below 0.1 is optimal.
o Interaction to Next Paint (INP): 205 ms
▪ Measures how quickly the page reacts to user input. A value below 200 ms is
desirable.
4. Throttling Impact:
o Under limited network conditions, delays in loading essential resources (such as
JavaScript and CSS) can negatively affect the user experience.

Improvement Measures:
1. For Content Download Speed (132.46 ms):
o Optimize File Transfers:
▪ Minify and compress CSS, JavaScript, and HTML files to reduce payload
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

size.
▪ Implement lazy loading for images and non-critical assets to prioritize
important content.
2. For High Server Response Time (1.29 s):
o Backend Optimizations:
▪ Optimize database queries and server-side processing to reduce latency.
▪ Implement efficient caching mechanisms to serve frequently requested
content faster.
3. Reducing Network Requests:
o Reduce excessive requests (140 total network requests):
▪ Minimize the number of HTTP requests by combining CSS/JS files where
possible.
▪ Use Content Delivery Networks (CDNs) to serve static files efficiently.
Observations for Bottlenecks:
1. Server Response Time (Waiting Time):
o The waiting time for server response is 205 ms, which is within an acceptable
range but could be optimized further for better performance. A lower server
response time ensures a smoother user experience.
2. Content Download Speed:
o The content download time is 132.46 ms, which indicates efficient resource
delivery. However, large assets like images or scripts can slow this down under
constrained network conditions.
3. Largest Contentful Paint (LCP):
o The LCP time is 2.80s locally and 2.43s in the field, suggesting that critical
content takes a noticeable time to load. Optimizing large elements (like hero images
or videos) can improve this metric.
4. High Number of Network Requests:
o Around 140 network requests were made during this session. A high number of
requests can slow down loading, especially on slower networks. Reducing
unnecessary HTTP requests and enabling resource bundling can help improve
performance.
5. Cumulative Layout Shift (CLS):
o The CLS value is 0.01, which is good and indicates minimal layout shifts. However,
optimizing font loading and image dimensions can further stabilize the page
structure.
6. Impact of Throttling:
o When network throttling is applied, the load time increases, highlighting
dependencies on large JavaScript files and render-blocking CSS. Optimizing critical
resources and lazy-loading non-essential assets can mitigate performance
degradation under slow network conditions.
Suggested Improvements:
• Reduce server response time by optimizing backend processing and database queries.
• Minify and compress assets (CSS, JavaScript, and images) to improve download speed.
• Reduce the number of network requests by bundling resources and using efficient
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

caching strategies.
• Prioritize critical rendering path to ensure faster LCP and better user experience.

QUESTIONS :

1. Purpose of Network Throttling in Chrome DevTools?

Network throttling enables developers to replicate different internet speeds to evaluate how
a webpage performs under varying network conditions. By simulating slower connections
like 3G or 4G, developers can pinpoint performance issues, optimize asset delivery, and
ensure a smooth experience for users with limited bandwidth.

2. How does the "Waterfall" view help in understanding resource loading times?
The "Waterfall" graph in the Network tab visually represents when and how different
resources load on a webpage. It helps in recognizing delays, dependencies, and inefficient
resource loading. By analyzing the sequence and duration of requests, developers can
identify areas needing optimization, such as reducing blocking scripts or optimizing large
media files.

3. What is the difference between the Online and Offline network throttling options?
Online mode allows real-time network traffic with the ability to simulate various speeds,
such as Fast 3G or Slow 3G. In contrast, Offline mode completely disables internet
connectivity, helping test how a website behaves when a user has no connection. This is
particularly useful for verifying offline functionality, such as Service Workers or cached
content.

4. Explain what happens when you choose different network profiles like "Fast 3G,"
"Regular 3G," and "Slow 3G." How do these profiles affect page load times?
Selecting different network profiles impacts how quickly a webpage loads. Fast 3G provides
a relatively quick connection, ensuring smoother loading. Regular 3G has moderate speed,
causing a noticeable delay. Slow 3G has high latency and low bandwidth, significantly
increasing load times and making unoptimized elements more apparent.

5. What is the average load time of the webpage without any network throttling?
Without applying throttling, the page loads at the actual speed provided by the user's
network. The total load time depends on factors such as server response time, network
quality, and asset sizes. This unthrottled baseline is useful for comparing the impact of
network limitations.

6. After applying the "Slow 3G" network profile, how does the page load time change
compared to the normal network?
When using Slow 3G, the page takes significantly longer to load due to restricted bandwidth
and increased latency. Elements such as large images and non-optimized scripts become
more problematic, leading to visible delays in rendering and interactivity.
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

7. Resources that take the longest to load under "Regular 3G"?

Large images, JavaScript files, and uncompressed stylesheets typically load the slowest on
Regular 3G. Scripts that block rendering or are not loaded asynchronously also contribute to
delays. Implementing compression techniques and lazy-loading can improve speed under
constrained networks.

8. Identify any 404 or other errors in the network log when loading the page with "Slow
3G" applied. What might cause these errors?
Under Slow 3G, network requests may time out or fail, leading to 404 errors. These failures
can be due to missing server resources, expired links, or connectivity issues exacerbated by
slow speeds. Analyzing these errors helps refine fallback mechanisms and improve
reliability.

9. Does the page load faster or slower with "Fast 3G" compared to "Slow 3G"? What
are the reasons for the differences?
The page loads considerably faster on Fast 3G than on Slow 3G due to reduced latency and
increased data transfer speed. On Slow 3G, larger files take much longer to load, and the
impact of render-blocking resources becomes more pronounced.

10. What is the "Time to First Byte (TTFB)" for the webpage under different throttling
profiles? How does network throttling affect TTFB?
TTFB measures the time taken for the browser to receive the first byte of data from the
server. Under throttled conditions, TTFB generally increases due to added network latency
and slower request handling. Comparing TTFB across profiles helps diagnose server-side
bottlenecks.

11. How does the "DOMContentLoaded" time change when testing under different
throttling profiles?
DOMContentLoaded time represents when the HTML is fully parsed. Under slower
network profiles, this time increases as resources take longer to be fetched. Faster
connections allow quicker parsing and rendering.

12. What is the impact of throttling on the "Load" event timing (when the page is fully
loaded)?
When a webpage is throttled, the Load event is delayed as stylesheets, scripts, and images
take longer to download. This helps developers understand how network speed affects
overall page readiness and user experience.
 BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Bhavan’s Campus, Munshi Nagar, Andheri (West), Mumbai – 400058-India
Department of Computer Engineering

13. Is there any noticeable delay in rendering when the page is loaded under "Slow 3G"
conditions? If so, what resources are responsible for the delay?
Yes, rendering delays are prominent under Slow 3G. Large images, non-minified
JavaScript, and render-blocking CSS contribute to longer loading times. Optimizing critical
resources ensures better performance under slow connections.

14. Are there any large resources (e.g., images, scripts) that cause the page to load slowly
under network throttling? Identify them.
Heavy JavaScript files, high-resolution images, and unoptimized web fonts often slow down
page loading. These elements can be identified in the Network tab by sorting requests based
on size and load time.

15. What effect does using the "Cache" have on performance when throttling is applied?
Does the page load faster on subsequent visits?
Enabling caching significantly enhances performance, as cached resources load from the
local system rather than being fetched again. With throttling applied, subsequent visits see
reduced network requests, leading to faster loading times.

16. What happens to page load time when you simulate no connection ("Offline")? Which
resources fail to load?
In Offline mode, all network-dependent resources fail to load unless cached. Static assets
stored via Service Workers may still function, but dynamically loaded content will result in
errors. Testing in this mode helps improve offline compatibility.

17. How does switching to a custom throttling profile with a higher latency (e.g., 200ms)
affect the loading of the page compared to "Regular 3G"?
Increasing latency in a custom throttling profile prolongs the time taken for requests to be
processed, leading to even slower page loading than Regular 3G. This helps developers
analyze performance under extreme network conditions and fine-tune optimization
strategies.

CONCLUSION: In this experiment, I explored various network parameters using Chrome

DevTools and analyzed website performance under different network
throttling profiles.