Table of Contents
Website Performance Introduction
IntroductionAn introduction and a discussion about how developers need to change their mindset to think about web performance from the start. Kyle also presents a few initial resources including a discount code for the O’Reilly HTML5 Cookbook and some projects like LABjs, grips, and h5ive. • HTML5 Cookbook O’Reilly discount code: AUTHD
Part 1: Make Performance a Priority
Why Web Performance?While this presentation will focus greatly on optimization, performance tuning is only one piece of the development puzzle. Weaving these practices into your natural workflow will keep your website’s performance a priority and not an afterthought. Steve Souders once said, “Eighty to ninety percent of the end-user response time is spent on the front end”. Website optimization should start there.
Performance and User ExperienceGreat performance can lead to great user experience. The opposite is true too. A website’s performance influences a user’s first impression. Comparing performance data from one site to another is a great way to start gauging areas of poor optimization. The document ready state is the point when a user is able to meaningfully interact with a webpage. Optimizing the document ready state can increase the perceived performance of the page.
How We Get Web PerformanceA well performing site can create a higher conversion rate. Every second counts when qualified leads have reached your content. Optimized code is quality code. Reusing quality code can save time and money on future development projects. Measurement and perception define web performance. Web professionals must measure the optimization techniques to determine if higher performance has been achieved.
Focus on the Critical PathWorrying about the speed of the non-critical parts of a website can lead to wasted time. Start with the critical parts. Most users are not able to distinguish the differences when response times are less than 100 milliseconds. The threshold for response time is typically 1000 milliseconds, or 1 second. Anything over 1 second will exceed the tolerance of a user.
The Total Cost of OwnershipOwning poor code is expensive. Deciding to write poor code now and optimize it later is unrealistic and causes the code to become systemic. The dirty little secret of front-end performance is that most of “front-end” optimization actually happens in the “middle-end”. This workshop will start by focusing on optimizing the “middle-end”. Then it will move to front-end performance enhancements.
Part 2: The Middle-End: YSlow
YSlow RulesYSlow is one of the first browser plugins that allowed developers to test the performance of a website. YSlow uses a set of rules to gauge the performance. The first rule is fewer HTTP requests. The next YSlow rule is to use a CDN. CDN’s have multiple locations all over the world and can take advantage of shared caching. Using expires and cache-control headers give you the ability to control the loading policy around stable content. Gzipping can compress your content anywhere from 50%-70% decreasing loading time.
Beyond the Big 14There are many ways to incorporate the 14 YSlow rules into a website. Kyle outlines a few techniques of implementing fewer HTTP requests, Gzip, and conditional requests. Yahoo has published a number of additional performance rules. They include reducing the cookie size and optimizing sprites. The YSlow plugin gives you a letter grade and a numerical grade for your website. Remember to look through the report carefully and consider additional optimizations even in categories with higher scores.
Exercise 1In this exercise, test three websites with the YSlow plugin. Select the site with the lowest grade and examine some of the ways the performance could be improved based on the YSlow reports.
Part 3: The Middle-End: Resources
Exercise 2Use YSlow to obtain a benchmark for performance of the supplied website. Then analyze the report and begin optimizing the website with the tools shown so far. After some time, Kyle dives into the solutions and discusses some of the ways the site could be optimized.
Part 4: The Middle-End: Architecture & Communication
Understanding the Middle-endThe middle-end is a layer that exists between what’s happening in the browser and what’s happening in a database. Developing the correct architecture is the key to tying together the front, middle, and back ends.
Introduction to ArchitectureArchitecture starts with the markup of a webpage. Think about a single-page website design. Can you architect a page that is able to load all mark-up once so any dynamic content is simply a duplication of what’s already loaded?
JSON, Ajax, & Web SocketsWhile JSON can be faster than other data formats like XML, remember it’s easy to add bloat to your data and get lazy with how it’s structured. Laziness can lead to latency and a slower web application. Ajax requests have been used for years and tend to be the de facto means for asynchronous communication. Web sockets, however can reduce the amount of data sent and open the door for two-way communication.
Part 5: The Front-End: Resource Loading
Preloading ImagesThe first technique that can be used for preloading is the prefetch relationship attribute in the link tag. This method does not guarantee preloading. It simply suggests to the browser to load the resources.
Parallel LoadingThe focus of parallel loading is to preserve the execution order. Using a script loader like LABjs will help the parallel loading of resources. The big difference between a script loader and relying on a browser’s native parallel loading technique is when the document’s ready event fires.
Part 6: The Front-End: Abstractions & Animation
OO is SlowerObject oriented code in the browser does not work the same as object oriented code in a compiled language because, in the browser, it’s a live interpreted link of inheritance. It can lead to more abstraction than necessary.
CSS Transition vs. CSS AnimationCSS animations are a powerful way to keyframe animations with CSS. CSS transitions, on the other hand, are pre-calculated animations based on a starting and ending property.
Part 7: The Front-End: UI Thread, Garbage Collection & jsPerf
Exercise 6Explore two different files: One focusing on the UI thread and another focusing on garbage collection.
Exercise 7Visit an already created jsPerf. Test it out a few times and analyze the results.