{"id":433,"date":"2021-01-18T05:48:44","date_gmt":"2021-01-18T05:48:44","guid":{"rendered":"https:\/\/webfives.com\/?p=433"},"modified":"2021-01-18T05:49:30","modified_gmt":"2021-01-18T05:49:30","slug":"how-to-increase-website-speed-using-chrome-developer-tools","status":"publish","type":"post","link":"https:\/\/webfives.com\/how-to-increase-website-speed-using-chrome-developer-tools\/","title":{"rendered":"How to increase website speed using Chrome developer tools?"},"content":{"rendered":"\n

Chrome – the most popular browser on the Internet is also the favorite tool for frontend and backend engineers alike. The plethora of options dev tools offer, encompasses not just HTML, Javascript debugging, it keeps getting rich in features. <\/p>\n\n\n\n

The network panel in dev-tools is the most powerful pane to exist in terms of understanding the slowest component of your website.<\/p><\/blockquote>\n\n\n\n

\"Chrome
Using the network panel is intuitive, as always, open any URL, https:\/\/webfast.co, right click and select Inspect.
<\/figcaption><\/figure>\n\n\n\n

Click on the Network tab and you will see a lot of options. The section with Status code is most critical for our current task.<\/p>\n\n\n\n

\"Time
Sort by Time – showcasing the slowest request first
<\/figcaption><\/figure>\n\n\n\n

Click on “Time” row to sort it by descending order. Here’s the fun part, you now see the response that takes longest to load. Before we jump to conclusions, it’s important to understand the Waterfall<\/code> column. <\/p>\n\n\n\n

Waterfall shows how browser is queuing up the requests to download various assets for the HTML page.<\/p><\/blockquote>\n\n\n\n

There are few key terminologies associated with Waterfall that are important to understand. Hover your mouse over the horizontal bar graph and you will see the following geek-o-logy.<\/p>\n\n\n\n

\"detail
Breakdown of steps involved while loading an image
<\/figcaption><\/figure>\n\n\n\n