English subtitles

← Camerons Netflix Optimizations - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 5 created 05/25/2016 by Udacity Robot.

  1. So I decided to take a look at one of my favorite websites,
  2. Netflix. I'm going to open up dev
  3. tools by pressing Cmd+Option+I. Turn on emulation.
  4. And go into the timeline. I'll do a hard reload by
  5. doing Cmd+Shift+R. We can see the events that happen as the
  6. page is loading. Let's take a look at the first couple.
  7. We could see we send a request for the homepage here. This
  8. is the HTML file that we need to load the page.
  9. Let's scroll down. We can see that when the HTML file
  10. finishes loading, we then parse the HTML. Let's open this up.
  11. And we see a request for two different files, both called include.
  12. Clicking on the first one gives us this CSS file.
  13. Scrolling down, I think we can pick out two pretty obvious
  14. optimizations just looking at this file. The first optimization is
  15. to minify the CSS or get rid of all the white
  16. space. The white space in the file only helps us
  17. read it. It doesn't help the browser parse the file. So
  18. in fact, if we got rid of all the white space,
  19. we would remove a significant amount of bytes from our data.
  20. The second optimization is to inline critical CSS and we wouldn't have
  21. to send out another request for this CSS file to style this page