Last year I lost weight, a lot of weight and got myself back into shape. In fact 1 year ago today I hit my goal. I even wrote a book about the experience. After loosing the weight and getting down to an even 200 pounds I started looking for a new experience. One I could enjoy leveraging my new fit self. Last summer I found obstacle course racing (OCR) and Spartan races.
Last year I ran three OCRs, including one Spartan at Citizens Bank Park (CBP). After running the CBP sprint (roughly 3.7 miles) I decided I would start training for Spartan Elite heats this year. A lofty goal for sure, but one that should push me to get more fit and into even better shape.
As I lost the weight last year and started learning about personal health and fitness I saw many parallels to the way we build software and web applications. Recently I lead a full day workshop I call HTML5 Fit based on those concepts. It is about getting your web applications in shape so your users love them.
As I relate personal health and fitness to our web sites I love quoting is Jason Grigsby:
“We have made the web in our own image, obese”
Sadly he is correct. We have become overweight and so have our web applications. The average page exceeds 2.2MB according to HTTPArchive’s current statistics. Think about that for a second, a typical web page could not fit on a 3.5” floppy disk.
Size is one thing, but rendering speed then run-time interactions and even how much memory you consume combine to create user experience. Developers ask me great questions when I speak about web performance. They include ‘how fast should we be?’, ‘how do we measure?’, ‘how can I not use fast food frameworks?’. I will get to that and relate it to my personal fitness journey.
Meanwhile I have been training for this season’s Spartan races. I began my season last Saturday at the Citi Field Sprint (where the New York Mets play). A great thing about Spartans and OCR in general is you do not know how the course is laid out till you are running the race. Sure there are maps you can get the night before and you know what most of the obstacles will be, but you cannot train 100% for the race you need to run. You need to be able to handle all sorts of unexpected challenges. Sort of like a web developer.
We don’t know what browser, device or connectivity speed our users will load our applications. We also do not know their exact skill level. For example should we use the hamburger icon without the word menu paired with it?
I expected the sprint to be roughly 3.5 miles, it was almost exactly 4, which is no biggie. What I did not train well for were steps, about 3 miles of steps and bleacher running. I had been doing between 1-2 miles a week at the high school. When I say 1-2 miles I mean that distance, but not as fast as I told myself I was running or in a single workout session. This was just part of my problem.
Just over 3 miles into my race I was passed by Kate Cramer, one of the Spartan pro women. She started her race approximately 11 minutes after I did. It was humbling seeing her wiz past me, barely stressed. A minute or two later Cassidy Watton blew past me, another pro.
Those moments hit me hard. Not because they were women, but the fact they were blowing past me and the level they were competing. It told me I need to step up my game.
I finished the race in an hour and 4 minutes, about 27 minutes off the winning pace. Kate finished around 42 minutes. I finished the race, and honestly was not taxed that much, which pissed me off. My quads were dead, but I was not breathing hard. I had held back too much and let myself down.
I immediately began thinking about how I could improve my race. Which lead me to think about my development skills and how can I step up my game creating online experiences? I make fast web applications, but are they fast enough? Are they maintainable? Do customers like them? How well do I compare with real successful web properties?
My answer to these questions are all the same: measure, measure and measure again. Always be measuring and improving. But what should you measure? What values should you achieve? I will answer those in future posts and books. But today I have some points I want to take from my first Spartan Elite heat experience.
Don’t Cheat Yourself
I was working out, almost every day. I was running 2-4 times a week. But to be honest I was not pushing myself hard enough. My Microsoft Band is a key part of my fitness routine, but it cannot tell the entire story. Sure I run an easy 8 minute mile now, but how often do I push to a 6 minute pace? Can I maintain that pace for a full 5k? Maybe, most likely not. But to compete at the level I want to compete I need to push that 18 minute 5k time with regularity.
I was running steps, but not enough. I was not timing my step routines properly. I was relying on my overall mile time according to my band. Since last week I not only increased my bleacher work I have circuits with goal times. Right now I am pushing for a 7 minute 30 second mile up, down and through the bleachers. My ultimate goal is under 7 minutes by June 13, a few days before I run my next stadium sprint.
My point is don’t just ballpark your performance metrics, know with precision where you are. You need to know how far from your goal you are and push yourself to beat your goal.
Did I mention measure everything? We have sensors and APIs for everything today. There are far too many free ways to accurately measure your web performance. From browser developer tools, to web page test to the navigation timing API we have the ability to record and analyze the numbers. Use this to your advantage. Keep your performance within your goal budget.
Set Lofty Goals
I want all my applications to fully render and be interactive within 1000ms over broadband. I take it further and give myself 2000ms for mobile over GPRS. Achieving the later ensure the first goal is met. I consider 2000ms a lofty goal because GPRS is tough to make work in your favor. But I achieve this goal with regularity.
Create a Workflow to Achieve A High Quality Level
I believe in automation because it allows you to scale with consistency. When you can replicate success quickly you have a winning formula. This is how business titans have won over and over. There is a reason, they created a process that ensured a high level of consistency they could replicate over and over.
The web development space is polluted with tools and workflow management. I don’t have a perfect answer as to what tools and workflow you should use. But you should automate as much as possible and ensure your applications are created with a high degree of exception free consistency. Most web performance best practices can be achieved with these workflow tools. From bundling and minifying to automatically deploying to a CDN with proper cache headers, these are things you can just set and forget.
Don’t leave anything on the field. If you ever played organized sports you have heard that cliche or something similar. It means give it everything you have. Last week I didn’t do this. I wont let this happen next time. I have at least 6 more Spartans to run this year, starting with the Ohio Beast the day after StirTrek.
My next two races I am going to use as measuring sticks. I want to see how far I can push it. June 18 I am running the AT&T Stadium sprint (where the Dallas Cowboys play) and am targeting that race to excel. That gives me 7 weeks.
I have already designed a training program that is heavy on steps and bleacher runs. I have set strict time limits for running, burpees and other exercises and obstacles I can practice. I will not repeat a 16 minute pace. I am targeting 11 minutes or faster. I expect the race to be 5 miles and will train as if it will be 6. I am measuring my workouts as much as possible while I am running them. I will find where I can gain a second here and there.
My development is not being left behind. I am stepping up my web development game too. Not only do I plan on speeding up my development time, but quality and consistency. I plan on doing this by improving my workflow and tooling. I want all my applications to render over broadband on my Surface Pro in 750ms. For the record that is very fast and should enable me to achieve 1500ms over cellular on a mobile class device.
Here are some requirements I will have in place:
- 14kb initial payload, this includes initial application HTML, CSS and JS to render the core application chrome.
- 100% responsive images
- 100% static asset CDN hosting with proper cache headers set
- Auto deploy static assets to CDN
- Auto optimize all images
Above all else I will measure, measure and measure again. I will look for every ms I can save and save it. I will continue to research good user experiences and apply those rules as much as possible. There is research behind good UX, but most developers are oblivious to the findings or how to apply them.
You can get both your body and your applications in shape. It requires work, discipline and motivation. You can achieve a high level performance and user engagement. I encourage you to get both your body and your applications in shape. It is time to get HTML5 Fit!