Avid readers will notice that I recently launched a rebranding of my personal website. Unlike many other professionals for whom building Websites is ancillary to their primary business, for me, building web applications that are scalable, perform, and offer the best in security, accessibility and usability are core strengths.

In the hopes that it inspires others to drive for better outcomes on their website, I share the techniques I used to achieve the performance I did. Beyond just turning some dashboard widget green from yellow or red, when compared against the performance of the site I had, how quickly the website loads speaks for itself.

Note that these techniques are invariant of site complexity, features, or size. It's merely a difference in scale of time and resources that needs to be invested to achieve similar outcomes; I will merely concede that some sites may have diminishing returns. If these techniques are over your head, then pass them on to your Web team as a checklist to implement, or reach out and I can help guide you towards people who can help. With those caveats out of the way, let's proceed!

Here are the objectives I set for my site's capabilities:

• Perform at or above the 95th percentile of websites
• No glaring HTML errors that can degrade experience or cause browser rendering issues
• It must use best practices to deliver content efficiently
• It must have basic SEO that makes the site readable and navigable by bots
• It must have basic Accessibility that makes the site readable and navigable by people of varying abilities
• Provide the best SSL/security options available

If I were to delve into every detail of every thing I did to achieve this outcome, this post would be two to three times longer than it already is. Rather, I will briefly outline what I did, why I did it, and provide some reasons why it's worth the effort.

Site Performance

To get my site to perform at 98th percentile or better (of sites Google generally crawls) required using a few techniques. The first and most crucial was to embrace a newer, faster, binary protocol for the Web called HTTP2. This is a server technology, so like the security section mentioned below, to make these changes, you need to either configure your web server (typically software with names like Apache, Nginx, or IIS) to support this faster protocol. And if you're told your server can't support this protocol, chances are it is so out of date, it indicates that your hosting capabilities are woefully out of date (by over 4-5 years) and need attention.

One way to understand why HTTP2 is so much faster is to imagine if airlines had the ability to allow people to board the plane as they arrive at the gate instead of having a rush when boarding is announced. To pull this off, airlines would have to dedicate a gate to a single airplane, and keep the plane at the gate for the entire day of the flight. The strategy HTTP2 applies uses the same kinds of principles.

A secondary factor is to use a CDN (a "content delivery network" which is a strategy to locate assets your site needs at various globally distributed locations to ensure they can be loaded quickly for a visitor regardless of where they live) for just about every resource you can, and to ideally use a single one to minimize DNS lookups. Initially, I used several libraries (PureCSS and FontAwesome), and loaded them from multiple CDNs, but when I discovered that CloudFlare has all of the libraries I needed, I was able to use just one.

A third factor was to recognize that my largest assets, like most websites, was the size and number of images I was loading. There are lots of apps and services that shrink down image sizes, some lossy (affecting image quality) and some not. I personally used ImageOptim which happens to have a Mac app as well as a web service. The idea is, if a 500KB image and a 50KB image look indiscernible to your users, the 50KB one can be delivered 10 times faster. Every web site's workflow should include optimizing its images. Every graphic designer who works on the Web should know enough about image technology to know if a JPG, PNG or otherwise is the better medium to use, and how to optimize the settings to deliver the image in a reasonably efficient way.

The final strategy was to minimize unnecessary requests to various servers. There's a lot of small things I did to achieve these objectives, so I won't go into great detail on every one, as much as to give some hints about things you can do. All of these techniques are evident to HTML experts, so "view source" on my website will illustrate them in full. Here's a brief summary of what I did and the tools to pull it off.

• Eliminate favicon.ico calls to my server by delivering it with a data: URL (see my <head> tag).
• Use tools like Icomoon.io and FontSquirrel and CloudConvert to build a custom font, then base64 encode it and place it inline into my stylesheet for the "brands", and other svg style assets you see in various titles and footer elements on my site.

(Many websites load custom fonts to add stylistic elements, but the asset sizes of the full font are pretty huge; instead, you can create your own custom font that include only the svgs you need and then use an encoding called base64 to use data: URLs to deliver that custom font)

After using these and other minor techniques that the Google LightHouse Chrome plugin suggested, my site was quickly as fast or faster than 99% of all websites.

See Google's PageSpeed/LightHouse score for khan.org! Then run your own site to see how your brand/company does?

Best Practices

Google's Chrome plugin also provides other tools for Accessibility, Best Practices, and SEO. My suggestion here is to invest just enough time to ensure all of these get to a "green" status since they are all basically table stakes for a modern Web site to achieve a modicum of machine and human readability.

Accessibility

I gave this a special section because I used a separate tool to improve my site's a11y score. Namely, the "Axe". This free extension from Deque will give you insights on where your content is not easily readable by accessibility-challenged visitors. While this is not a guarantee of a fully accessible site, you've got no hope if even the automated tools are telling you your site is unfriendly to such visitors.

In fact, the biggest challenge I faced was ensuring my site had sufficient contrast in various site features, and grappling with the biggest challenge I had forced me to reckon with a design problem on my site until I had an objectively better strategy for that page component.

As these images show, what often lurks under an Accessibility quagmire is actually poor design choices. My experience suggests that if you fix your accessibility impediments, you'll actually end up with an universally better design!



It goes to show that doing the right thing for one reason, ends up being the right thing for many other reasons. My Accessibility journey required fixing a lot of color contrast issues, so I thought I'd share the tool that helped me select more readable colors from my default color picks.

While I used Axe to remediate the bulk of my issues, the WAVE tool has an online validator that makes it easy to check a site.

See The WAVE tool's score for khan.org! Then run your own site to see how your brand/company does?

SSL/Security

To deliver the site with the best security options available, you should ensure your site is delivered via https. Once considered optional because it was pricy and complicated, today all of those objections and excuses have been eliminated. The Let's Encrypt project has made getting a certificate free, and tools like SSL Labs can show you what protocols you support and give your web server administrator (the guy in your web team that knows what Apache, nginx or IIS is and how to configure it properly) the cues they need to enable the right protocols to get a A+.

See SSL Labs' score for khan.org! Then run your own site to see how your brand/company does?

HTML Validation

Last, but not least, writing semantic, properly validating HTML can speed up rendering because you're speaking the language browsers expect you to speak, rather than using HTML dialects browsers don't know how to render. If your site doesn't pass a validation check from the W3C's validator, addressing the issues has the added benefit of reminding how to write proper HTML.

See W3C's score for khan.org! Then run your own site to see how your brand/company does?

In the end, these simple tools can help any site, and brand, and business improve the usability, functionality, performance, design, and compatibility of their online presence. Whether you are building a simple personal profile page, or a full scale professional business/brand presence, I'm curious if these, or other tips and tools, helped address what your biggest gaps were?

One of the benefits of gaining years of experience is the principles that you discover in the journey of how to approach challenges. Given we are not defined merely by our work lives, what has shaped my leadership style originates from all aspects of my life experience.

The six aspects that I think characterize my leadership style are:

• Entrepreneurial Spirit: How to make a big impact with limited resources.
• High-Standards: Data-informed rationale to justify investing in continuous improvement practices.
• High Engagement: Credibility through listening to your team, and serving their needs.
• Creativity: Inspirational leadership is fundamentally creative, and encourages learning.
• Inspiration: Vision and buy-in to initiatives to see it realized are table stakes.
• Tenacity: When excellence is a moral imperative, we keep iterating until we reach our goal.

Entrepreneurial Spirit

When one of my favorite professors mentioned that he could see me (then a twenty-year-old college junior) as the founder or cofounder of a company I thought he had mistaken me for someone more courageous or self-confident.

In retrospect, starting a computer club to address an awareness gap of campus resources that students and staff could leverage, lobbying for a technology fee when presented with budgetary restrictions to give every student access to those resources, and building my university’s first web site back in 1994, I think he saw what took me a few years to realize about myself. I love solving problems, and every organization faces the challenges of needing to solve problems with limited resources.

High Standards

The difference between a software engineer and a software developer is that software engineers are aware of the science and method behind building scalable, secure, performing, usable and accessible software. Whereas a developer can pull together something functional, an engineer can build something fit for purpose.

Introducing rigor into the software development process not only produces better business and technical outcomes, it brings structure, order and focus to the software professionals who may have only been lacking for software leadership to bring that attribute to their own craft. In other words, establishing these high standards can often serve to attract and keep top talent because they see their own professional skills and maturity grow.

High Engagement

A facet closely related to High Standards, any sufficiently ambitious opportunity will present challenges. Any scientific, fact and evidence-based management approach is based on the premise that business systems are like any scientific system: one must observe the system’s conditions, propose and implement a change to the system, and inspect the outcome. Rinse/repeat until the outcomes expected emerge and inject learning and adaptation in each cycle to reach an optimum state.

No data point is more crucial than listening to, and taking action on, the challenges your team members are facing, because they are the ones who, as Theodore Roosevelt put it, are "in the arena." Your team is the one whose faces are "marred by dust and sweat and blood", it is they "who strives valiantly; who errs, who comes short again and again, because there is no effort without error and shortcoming; but who does actually strive to do the deeds; who knows great enthusiasms, the great devotions". It is they who are engaged in the "worthy cause; who at the best knows in the end the triumph of high achievement, and who at the worst, if [they fail], at least fails while daring greatly".

To me, this quote beckons software leaders to heed the call of servant leadership. Our teams enter the arena to grapple with the minotaur of the challenges we place before them. It compels me to see, hear, and experience their battles, and find every opportunity to unblock and resolve their impediments. Doing anything less sends a signal of mediocre commitment to our shared cause, and tepid appreciation for their willingness to enter the ring in pursuit of the noble challenges I would have placed before them.

Creativity

No sufficiently complex system was built in a vacuum. Whether it was an inventor like Kwolek, Bell & Latimer, Goodyear, or Edison, whether it was the intellectual and reasoned insights of Einstein, Hawking or Helen Quinn, the realm of science and engineering, as problem solving craft, are never far separated from deeply creative thinking.

Some of my most remarkable career accomplishments came not merely from identifying and bringing attention to problems, but to find creative solutions that fit the time, resource and budget constraints we had to address them. Collaborating with and inspiring my teams to achieve similar outcomes is not only a great outcome for the organization, it is deeply rewarding on any team member’s career journey, and in turn, a great way to drive engagement and retention of highly skilled technical staff.

Inspiration

In saying "nothing great was ever achieved without enthusiasm", I think Ralph Waldo Emerson meant not only that you need enthusiasm to produce great work, but that also any sufficiently challenging endeavor is going to tap out finite resources of grit or tenacity. After all, if the struggle isn’t worth struggling for, then why are we working so hard for the achievement?

In any sufficiently ambitious and worthwhile endeavor, articulating the vision, and building buy-in for it from your team are table stakes to seeing them realized.

Tenacity

One concept many ancient Greek philosophies had in common was the concept of "virtue". While there was no unifying philosophy among the ancient city states, one cultural term ἀρετή ("arête"), transcended the differences between the philosophical perspectives. While this word had many meanings even then, I’ve internalized this word to mean "striving for excellence as a moral imperative".

The natural antidote to cynicism or apathy for me has been, simply, tenacity. The easy way to make every effort a winning gambit, is to never stop trying, never stop learning, and to keep striving for excellence as a moral imperative.

These characteristics are so closely inter-related for me, that they feel like facets to a singular concept, which because it lacks a commonly known label, warrants articulating them as distinct styles of leadership. For the sake of giving this collection a label, I might offer calling this style "Progressive Humanist Leadership".

It’s not particularly remarkable to point out that in the field of software and technology, the rapid pace of change is relentless. So often, though, this topic is addressed from the technology part of the equation instead of the people side of the equation.

Maybe that’s because changing technology is exciting, and it’s more of a certain science than considering the relatively uncertain people-centered perspective. After all, our best laid plans as human beings are often made with incomplete, inaccurate, or uncertain data. The more ambitious your plans, the more this is so.

The best leaders seek to inspire organizations to reach new heights and new milestones. They exhort us to seek ambitious objectives arguing that lofty goals will measure the “best of our energies and skills”, and convince us to accept these challenges over the status quo, as President Kennedy did when he inspired us to reach for the moon.

But the best leaders can’t stop there. The earliest difference between ambitious goals and unrealistic ones starts with whether leadership proceeds to build an environment in which those goals can be achieved. The Soviet Union was the first to launch a satellite; they were ahead of the USA in the “space race” for many years. But in a country where no failure went unpunished, where no mistake dare be admitted, is it any surprise they quickly fell behind?

A learning organization, by my definition, is one adapting to change so rapidly that its very mistakes are merely milestones of iterative progress on their journey to success. In such organizations, Impostor Syndrome is an anti-pattern, because leadership in the organization has taken active steps to ensure no shame or ridicule is associated with failure or temporary ignorance. Teams have context for when there is time and tolerance for risk, or when more predictability is required, to adjust for the type and exposure of novel approaches.

Trust Must Prevail Over Fear

Every so often we find ourselves in a cognitive place where all the doors are shut, and no obvious escape is evident. Our willingness to say “I Don’t Know” (or otherwise being in wonder of a predicament) opens doors we didn’t even know were shut, and challenges us to think of new perspectives and new ways of addressing our challenges.

When I say “Trust Must Prevail Over Fear”, I mean that teams who can openly talk about mistakes and potential impediments rather than fear reprisals for being the bearer of bad news or hiding a failure, are the ones who will prevail.

Learning Drives Improvement

A team either has the knowledge or it doesn’t; a team has realized a risk or it hasn’t; an impediment exists or it doesn’t. How effectively your team can talk about these scenarios will determine what happens next, not whether these topics are considered embarrassing, finger-pointing, or rehashing the past. If merely discussing why something happened and how we can learn from it is taken in such ways, it indicates dysfunction in the learning environment.

When I say “Learning Drives Improvement”, I mean that any sustained improvement in an organization cannot be achieved without learning. Organizations of all kinds and sizes are nothing if not feedback machines. If the Deming Cycle is the engine of organizational improvement, the Growth Mindset of individuals in the organization is its core fuel.

People Matter Most, Invest in Them

Too often, hiring managers hire merely for experience. This is what I call an “under the curve” measure, taking account only of the candidate’s achievements. An equally more critical, if not strategically differentiating measure is the “slope of the curve” measure, which is to say, “How quickly does this candidate adapt and learn new things?”

When I say “People Matter Most, Invest in Them”, I mean that you should not only hire for expertise, but for growth potential, and I mean that this growth only happens when people are nourished, supported, and can reach their top potential.

In many ways, these three core beliefs are facets of the same humanist principle of hiring the best people, giving them the clarity and inspiration to do great work, and creating the environment where that work can be done.