Project 4: Website Optimization
Web Performance Optimization
This was a pretty horrible course. The material was too in-depth and without an obvious path through. The course highly referenced Google's Web Fundamentals documentation, but in such a haphazard manner that it made the path even more confusing. This seems to be typical of an expert not understanding how to teach to a beginner. There was no start with simple concepts and build on each one, one at a time, making them relatable and comparable.
This is real shame because I already like Cameron and feel like blaming the problem on Ilya. But I've watched Ilya's talks and he is very engaging and likable and informative there. Unfortunately, for whatever reason, this course just didn't work.
I made more extensive notes for this course than any other, yet the material was far simpler and I still ended up learning less. The best (most useful and most enjoyable) part of this was going off and learning gulp on my own.
Even though the bulk of the course was spent with Chrome Dev Tools, they are not a whole lot clearer now than they were before :(
What I did learn, and will be using again, is good practice for handling Web Fonts and the Font Loading API. The Critical Rendering Path was interesting and the pixel pipeline too. I can see how it might appeal to some to fine tune and optimize page performance, but I don't think it will ever tickle my fancies.
The HTTP Caching also looked interesting and I think I'll follow that up some day and return to it when I'm digging around a bit more in a server.
The most important lesson learned: elimination = speed. But that stuff doesn't mean resources have to be deleted, they can just be delivered a bit more intelligently, and off the beaten (critical rendering) path.
Browser Rendering Optimization
I see they have added another performance course in the meantime, hopefully that one will take the place of this one. I have already watched the first section and it IS very engaging. If it had tests and projects, it will be perfect.
I'm looking forward to coming back to this.
Follow Up: right, this was clearly the class we were meant to take. This made a lot more sense and was followable. I ended up learning a lot and actually starting to enjoy optimization. Since that's a complete turnaround from the first course, it must be really good. There are still a few rough edges, but knowing the team at Udacity, they will get them tidied up before long.
I re-did my project for this course using Google's Web Starter Kit instead, which is very nice, but can lead to a lot of bike-shedding.
Submission: Cameron's portfolio and pizza page
Mockup of pagespeed submission, Mockup of FPS submission and submitted repository (with source and production code folders).
This project was confusing at first, as it didn't really seem clear what was required, the instructions seemed to be in several different places. I watched a few of the Office Hours videos too, to make sure I was on the right track.
It turned out there was actually very little to do too. Just run some pages through the PageSpeed Insights engine and act on its suggestions, and then in the harder part of the submission, it turned out to just be about writing JavaScript.
The big thing I got from this course was exposure to Build Tools. I had been aware that people must use things like that before, and I had heard of Grunt (but had no clue what it was). When I realized that that was what gulp was, I was a bit apprehensive. But after finding a good set of 'getting started' links on the Udacity forums, and about an hour later, I was totally enamored and can't see myself working any other way in future.
Resources
Here's a list of resources with comments and live code examples, and there is a stripped down version with just the links as part of the submission package in the submission repository.