Chapter 6. Verifying Changes
When optimizing a site that’s under development or in production, the most important step before any other is to gather data on what the performance and scalability bottlenecks are. Without data, a lot of effort can be expended on optimizing code that’s actually performing OK, and conversely, poorly performing code might be overlooked. Without being able to identify and quantify specific performance issues, it’s not possible to verify that improvements have been made. A site might seem “faster” after a change was rolled out to production, but you’ll never know whether this was because of the change itself, or perhaps because crawler traffic or even a distributed denial-of-service (DDoS) attack subsided at the same time.
Analyzing Frontend Performance
Frontend performance monitoring falls into roughly four categories:
- Getting a summary of a page’s performance based on rules for high-performance websites
- Waterfall and timeline charts for individual pages
- Real user monitoring
- Profiling of CSS and JavaScript
YSlow and Google PageSpeed
Often the first step toward analyzing a site’s frontend performance is looking at the summary report produced by a tool such as YSlow and PageSpeed. Given a URL, or via a browser plug-in, they’ll analyze a request to an individual web page and give you scores for specific areas such as number of HTTP requests, cacheable headers, etc. Drilling down on these items will show specific recommendations. Both of these tools are very ...