Website Optimization

In this course we'll cover tools needed in keeping your website in top shape. These tools will help you perform tasks like debugging a problem to improving your page load times.

Chrome DevTools Basics

The Google Chrome web browser includes a built in set of features for web designers and developers called the Chrome DevTools. Using the DevTools, any webpage can be inspected for bugs and profiled on a number of performance characteristics. Some of the most powerful panels in the DevTools include the Elements panel which allows for interaction with DOM tree and styling, as well as the Console panel, which makes it trivial to access JavaScript functions and test out new front-end code.

• Accessing the DevTools2:52
• Accessing the DevTools4 questions
• The Elements Panel6:31
• The Elements Panel4 questions
• The Resources Panel3:36
• The Resources Panel4 questions
• The Network Panel8:50
• The Network Panel4 questions
• The Sources Panel3:29
• The Sources Panel4 questions
• The Timeline Panel5:26
• The Timeline Panel4 questions
• The Profiles Panel5:44
• The Profiles Panel4 questions
• The Audits Panel2:29
• The Audits Panel3 questions
• The Console Panel6:59
• The Console Panel5 questions
• The Console API3:48
• The Console API3 questions
• Adjusting Settings4:34
• Adjusting Settings3 questions

• Extra Credit

  Open the Chrome DevTools on your favorite website and then do the following:

  • Use the Elements panel to inspect the HTML and CSS.
  • Use the Sources panel and try modifying some of the content or styling on the page.
  • Open the Network panel and refresh the browser. Then, try to see if you can find any areas where the front-end performance could be improved.